CSSの便利さが粉砂糖ひと粒分くらいわかってきた

ドットインストールのCSS入門を進めるうちに、Atomエディタの便利さに感動するばかりでしたが、CSSという仕組み自体がとても便利であることにようやく気づいてきました。

穏やかな秋晴れの日、第9回から第11回のレッスンを終えました。視聴時間は7分45秒。

#09 背景画像の設定をしよう

第9回は「header.png」という画像ファイル（下のTARO YAMADA）を、header領域の背景画像として設定する方法を学びました。

上の通り背景画像として設定後、デザイン崩れを直すために以下の調整も行いました。

（1）画像の大きさに対してheaderの高さが足りなかったため、headerの高さを調整。
（2）画像の縦横比は保持したまま、header領域をカバーできる大きさに表示するように設定。
（3）ブラウザ幅が変化したとき、画像の中央を起点に画像サイズが変わるように設定。

だんだん複雑になってきたため、レッスンでの指示とは異なる要素にプロパティを追加しそうになったり、ミスが出てきました。

ミスしたこと自体は自分の画面と先生の完成画面を比べればすぐにわかるのですが、それを修正しようとエディタを見ても、どこを直せばいいのか探し出すのに手間取ってしまいました。慣れたら早くわかるようになるのかな。

#10 marginの相殺について理解しよう

今回はheader領域より下のセクションのデザイン調整を習いました。まず画像やテキストを中央揃えに修正。

そして初出の用語「marginの相殺」と呼ばれる現象について解説を受けました。下の画像を見ると、h1（はい＆ほい）の下の余白と、p（nokiの営業担当です）の上の余白がかぶっていますよね。

このようにかぶった余白がある場合は、余白の幅の狭い方が幅の広い方に打ち消されて、幅の広い方が生き残るようになっているそうです。この現象がmarginの相殺です。

今回はh1の下の余白の方が幅が広かったため、pのmargin-topは0px、h1のmargin-bottomは8pxに設定しました。

ふーっ。今回は余裕をもってレッスンについて行けました！

#11 border-radiusを使ってみよう

第11回は画像「太郎」を丸く表示する方法についてレクチャーを受けました。画像の境界線の半径という意味のborder-radiusというプロパティを使い、四つ角の半径の数値を変えてみました。

border-radiusを30pxに設定したら、下のようになりました。

最終的にはまん丸にしたかったので、border-radiusを70px（画像の縦・横が140pxだったため）へ設定し直しました。それが下図です。

こんな方法で画像を直せてしまうなんて、予想だにしていませんでした。だって普通丸い画像があったら、丸くトリミングしてあると思うじゃないですか？！（ちょっとキレ気味）

画像を加工する必要がないなんて、素晴らしすぎる！画像本体を加工するよりも修正が何百倍も楽じゃない？！誰だか知らないけどCSS3（※）を作ってくれて、ありがとう！

※デザイナーである夫からCSS3以降に追加されたプロパティだと聞きました

コーディングを勉強して、なにかに感動したり、誰かに感謝したり、ポジティブな心の動きがこんなにあるとは思わなかったな。ますます学習に対して前向きに取り組めるようになりました。