今日はゴールデンウィーク最終日。
平日はなかなかできないので、頑張ってWeb制作の学習をしていました。
しかし成果としては上記のボックス1つだけでした。
しょぼい・・・。
普段、よくWebページで見られる平凡なメニューなのですが、この中にも多くの技術が含まれています。
- 見出しの「Menu」の上に、青い線を引く(border-top)
- ボックスの背景色は、微妙にグラデーションになっているので linear-gradient() ってので設定が必要
- マウスオーバーした時に背景色と文字色を変えるのに :hover って設定が必要
- マウスオーバーした時に、一気に変化させず、アニメーションで変化させるために transition 0.3s って設定が必要
- 各要素の余白とか並びを padding とか margin とかで調整する
てな感じです。
書いてしまえば大したことなさそうなのですが、思い通りの表示にならず、調べつつ作り込んでいくのはなかなかに大変でした。
あまりにうまくいかないので最近はどんなWebページを見ても
すごいなぁ
と思うようになりました。
先はまだまだ長いですが、やっていきます。
