ヘッダーとナビゲーションの装飾

HTML/CSS

二日も空いてしまった。

土曜日は仕事でやはり夜10時までかかり、
日曜日は朝から娘の通う大学の、学園祭のサポートとして駆り出され、
帰って夜ご飯食べたら倒れて寝てしまいました。
焼きそば作ってくれた夫、ありがとう…。

今日は第六章の「section2 ページ全体とヘッダーのCSSを書こう」。

①「ページ全体」のCSSを書こう
②「ヘッダー」のCSSを書こう
③「グローバルナビゲーション」のCSSを書こう
④マウスカーソルを当てた時の装飾をつけよう

ここまでやりました。

こんなんできました。

(特徴的な絵とかはフォトショップで隠しました)HOMEのところにマウスカーソルを当てると二重線が出てくる…!

a:hoverという指示はFammでも教えてもらったやつだー!!Fammの時はボタンにカーソルをのせると0.5秒後に色が変わるというのを教えてもらいました。二重線を出すこともできるんですねー。

ナビゲーションも始めは味も素っ気もない文字のつながりだったのが、線をつけて背景色を変えて隙間を開けて中央に揃えて…とみるみる変わっていって、私の指示によっていろんな装飾がついていくというこの有能感というか万能感というか、醍醐味だなぁと思います。楽しいー!

今度はいよいよメインエリアとサイドバーエリアの装飾に入ります。

一回Fammで、ちんぷんかんぷんながらも基本を教えてもらったあと、本で解説をゆっくり読みながら勉強し返すと、「あ!?これはこういうことだったのか!?」って分かって面白いな…。初めの初めに「<div>も<span>も意味を持たない」とか言われても???ってなるだけだもんね…。習うより慣れろと言いますが、まずはやってみて、その後基本を学ぶというのは、結構大事なのかもしれません。

コメント

タイトルとURLをコピーしました