CSSの書き方 | ShigeNoKi

HTMLでは、Webページに何を表示するかを決めることができます。しかし、それだけだと白黒の素朴な見た目になってしまいます。そこに色・大きさ・配置といった装飾を与えるのが CSS（Cascading Style Sheets） です。

1. CSS の基本の形

CSS は「どの要素を どう飾るか」を書き並べたものです。

h1 {
  color: crimson;      /* 文字色を赤に */
  font-size: 32px;     /* 文字の大きさ */
  text-align: center;  /* 中央ぞろえ */
}

つまり「h1 という要素を、赤・32px・中央ぞろえにしなさい」という指示です。

同じスタイルでも「どれに当てるか」を選ぶ方法はいくつもあります。

実務では、再利用しやすい クラス（.クラス名） が主役になります。

CSS を理解する最大のカギが ボックスモデルです。画面上のあらゆる要素は、次の 4 層からなる入れ子の箱として扱われます。

content を padding・border・margin が順に包む CSS のボックスモデル

「なんだか窮屈」「もっと間を空けたい」の調整は、だいたいこの 4 つで解決します。

昔の CSS は要素をきれいに並べるのが難しく、多くの開発者が苦しみました。いまは Flexbox と Grid という 2 つの仕組みで、直感的に配置できます。

Flexbox は要素を一方向に並べ、Grid は格子状に並べることを示した比較図

スマホと PC では画面幅が大きく違います。CSS の メディアクエリを使うと、「画面幅が○○px 以下ならこう」と条件で見た目を切り替えられます。

/* 画面が 600px 以下のとき、文字を小さくする */
@media (max-width: 600px) {
  h1 { font-size: 24px; }
}

これにより、同じ HTML のまま、PC でもスマホでも読みやすいページになります。これを レスポンシブデザインと呼びます。

同じ要素に複数のスタイルが当たったとき、CSS は優先順位のルールで勝者を決めます。おおまかには「より具体的な指定」「後に書かれた指定」が勝ちます。スタイルが上流から下流へと滝のように流れ落ちて重なっていくイメージから、この名前が付いています。