Webサイトトレース5日目 (基本デザイン完成)
トレース5日目です。前回までの進捗はこちら。
本日の作業
ビルボードにムービーをはめる
ビルボード部分を作っていきます。
ムービーの方はフリー素材を使用しています。このムービーの上にロゴをオーバレイで乗せます。 ロゴはposition: absoluteでtop, right, left, bottomを0に、margin:autoで中央寄せできます。画像幅も指定しておきます。
ムービーを扱うのは初めてだったりしたので色々と調べていたら時間を取ってしまいました。 3時間経過。ここまで11時間50分。
メニューボタンの修正
メニューボタンにhoverを実装し、背景色も変更しました。 マウスオンで少し背景色が変わります。
ビルボードの実装も含めた結果がこちら
基本デザインの完成
ということで、基本的なデザインが完成しました。
一部hover系はまだ実装していませんが、ペラは一応完成しました。 ここまで約12時間。当初はレスポンシブも含めて12時間の予定ではあったのですが…。 調べる時間に半分以上使われてしまったのですが、順調にいけば1日で作れそうだということがわかりました。
これからの作業
マウスオンで動く部分をちょこちょこ実装しようと思います。メニュー部分は既に実装済みです。