ブログ

「なぜか効かないCSS」と「なぜか幅が合わない」。CSSで詰まる場所は、ほぼこの2つに集約されます。

原因は文法ではありません。要素同士の影響関係です。今回はそこだけを扱います。

そもそもCSSとは

HTMLで書いた要素に、見た目を指定する言語です。

HTMLが「ここは見出し」と宣言するのに対し、CSSは「見出しは32pxの太字で青色」と決めます。同じHTMLでも、CSSを差し替えるだけで全く別のデザインになります。

セレクタ { プロパティ: 値; }
h1      { color: navy; }

書き方はこの1パターンだけ。覚えることが多いように見えるのは、プロパティの種類が多いからで、文法そのものは10秒で理解できます。難しいのは文法ではなく、要素同士の影響関係です。今回扱うのはそこです。

よくある書き方（Before）

.card { width: 300px; padding: 20px; border: 1px solid #ccc; }

3枚並べると横に収まらない。width: 300px と指定したのに、実際の幅は342pxだからです。

直した書き方（After）

*, *::before, *::after { box-sizing: border-box; }

.card { width: 300px; padding: 20px; border: 1px solid #ccc; }

border-box にすると、paddingとborderを含めて300pxになります。これはほぼ全ての現場で最初に書く1行です。

なぜそうなるか

ボックスモデル

要素は内側から content → padding → border → margin の4層です。初期値の content-box では width が最内側のcontentだけを指すため、余白と枠線が外側に足されます。

詳細度

CSSが効かないときは、後から書いたものが勝つとは限りません。強さの順は次の通りです。

インラインstyle  >  #id  >  .class / :hover / [属性]  >  要素名

!important で殴ると一時的に直りますが、次に上書きしたい人がさらに !important を書くことになります。詳細度は上げず、揃えるのが原則です。

並べる2つの道具

/* 横一列。中央寄せや折り返しが得意 */
.list { display: flex; gap: 16px; flex-wrap: wrap; }

/* 格子。列数を決めたいときはこちら */
.list { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }

使い分けは「1方向に並べるならFlex、行と列の両方を揃えたいならGrid」。迷ったらどちらで書いても動きます。

手を動かす課題

第1回で作った一覧に、カード型のCSSを当ててください。同じ見た目をFlexboxとGridの両方で組むのが課題です。書き終えたら、どちらが少ない記述で済んだかメモしてください。

次回はCSS応用です。画面幅が変わっても崩れない書き方に進みます。

今回の学び

まず、幅の指定は、どこまでを幅と呼ぶかの取り決めに依存しているということ。300pxと書いたのに342pxになるのは不具合ではなく、初期値がそう決まっているからでした。

次に、強さで殴ると、次の人はもっと強く殴ること。一度その手を使うと、以降その場所を触る全員が同じ手を使うことになります。上げるのではなく揃えるのが原則です。

そして、効かないときは推測せずに打ち消し線を見ること。ブラウザの開発者ツールは、どの指定がどれに負けたかを線で表示してくれます。読むだけで答えが出ます。

見た目は作れる。ただ、自分が書いたHTMLを読み返すと、タグの選び方が雑だと分かる。ここで止まっている人は多いと思います。

HTMLは見た目を作る言語ではなく、意味を伝える言語です。そこが入れ替わっていると、何度書き直しても同じところで雑になります。

そもそもHTMLとは

文書の構造を説明するための言語です。プログラミング言語ではありません。

Wordで文章を書くとき、見出しには見出しスタイル、本文には本文スタイルを当てますよね。あれと同じことを、タグという記号でやります。<h1>と書けば「ここは大見出しです」、<p>と書けば「ここは段落です」という意味になります。

重要なのは、HTMLが意味を伝える担当だという点です。見た目はCSS、動きはJavaScriptが担当します。HTMLで見た目を作ろうとすると、この分担が崩れます。

よくある書き方（Before）

<div class="title">旧車図鑑</div>
<div class="list">
  <div class="item">
    <div class="name">スカイライン GT-R</div>
    <div class="text">1969年発売。</div>
  </div>
</div>

見た目はCSSでいくらでも作れます。問題は、このHTMLが何も意味を持っていないことです。

直した書き方（After）

<h1>旧車図鑑</h1>
<ul class="list">
  <li>
    <article>
      <h2>スカイライン GT-R</h2>
      <p>1969年発売。</p>
    </article>
  </li>
</ul>

なぜそうなるか

HTMLは「見た目を作る言語」ではなく「文書の構造を説明する言語」です。構造が正しく書かれていると、次の3者が正しく読めます。

• 検索エンジン — 何が見出しで、何が本文かを判断できる
• スクリーンリーダー — 見出しだけを拾って読み上げ、目の見えない人がページを移動できる
• 未来の自分と同僚 — div.item の中身を読まなくても、記事の繰り返しだと分かる

覚えるタグはそう多くありません。まずはこれだけ。

特に事故が多いのが最後の button です。<div onclick="..."> はキーボードで操作できず、Tabキーで選べません。クリックできるものは button か a にする、と覚えてください。

手を動かす課題

好きな題材で、一覧ページのHTMLを書いてください。CSSはまだ書きません。条件は3つです。

1. h1 はページに1つだけ
2. 一覧は ul と li で組む
3. div は「意味はないがCSSのために囲みたい」場所だけに使う

書けたら、Chromeの拡張機能「HeadingsMap」でアウトラインを見てください。見出しがきれいな階層になっていれば成功です。

次回はCSSの基礎です。このHTMLに、崩れないレイアウトを与えます。

今回の学び

まず、見た目はCSSでいくらでも作れるということ。だからHTMLの良し悪しは見た目では判定できません。判定できるのは、CSSを全部外したときに文書として読めるかどうかでした。

次に、構造は3者に向けて書いていること。検索エンジン、読み上げソフト、そして未来の自分と同僚です。3者とも、書いた本人がその場で見ている画面とは違うものを見ています。

そして、クリックできるものはbuttonかaにすること。これだけは例外なしで覚えてよい規則です。見た目が同じでも、キーボードで操作できるかどうかが変わります。