同じ文章でも、CSSを替えるとサイトは別人になる

白い背景に黒い文字が並ぶだけのページと、いま見ているこのページ。
実は中身のHTMLは、ほとんど同じ構造です。
違いを作っているのは、CSSという見た目の指示書だけ。

CSSには「見出しの文字は深い緑」「行間は広めに」といった指示だけが書いてあります。
服にたとえる人が多いのですが、僕はタープや焚き火まわりのレイアウトに近いと思っています。
テント本体(HTML)は同じでも、配置と小物で居心地はまるで変わるので。

指示書の中身

h2 {
  color: #33544a;
  border-bottom: 2px solid #33544a;
}

これで「h2という見出しは緑色にして、下に緑の線を引く」という意味になります。
このページの見出しの下線も、だいたいこういう数行で引かれています。
英語に見えますが、覚える単語は驚くほど少ない。

スマホとパソコンで見た目が違う理由

同じページなのに、スマホで開くと1列に、パソコンだと2列や3列に並ぶ。
あれもCSSの仕事です。
「画面の幅がこれより狭かったら、こう並べ直す」という条件を書けるんですね。

レスポンシブ対応という言葉を聞いたことがあれば、正体はこれです。
サイトを2つ作っているわけではなくて、1つのページが画面幅に合わせて着替えている。

壊れない砂場で試す

ブラウザでF12キーを押すと、開発者ツールという画面が出ます。
そこで好きなサイトの文字色やサイズを、その場で書き換えて遊べます。
変更は自分の画面の中だけの話で、元のサイトは何も壊れません。
僕はCSSをこれで覚えました。壊れないと分かっている砂場は強い。