女性向けエンジニアスクール
3秒でわかる
HTMLのどの要素をどう見せるかを指定する言語。色や余白、並べ方を本文と切り離して書き、画面幅に応じた表示の出し分けにも使います。
30秒図解
もう少し詳しく
どういうものか
CSS は Cascading Style Sheets の略で、HTML で書いた構造に対して見た目を指定する言語です。「どの要素に」を表すセレクターと、「どう見せるか」を表すプロパティと値の組み合わせで書きます。HTML に直接色を書くのではなく別ファイルに分けるのは、同じ見た目を何ページにも当てられるようにするためです。
名前にある Cascading は、複数の指定がぶつかったときの優先順位の決め方を指しています。詳細度（セレクターの具体さ）、記述順、そして !important の有無で、最終的に効く一つが決まります。
なぜ必要か
見た目の指定が本文に混ざっていると、ブランドカラーを変えるだけで全ページを開いて回ることになります。CSS に切り出しておけば一か所の変更で済みます。さらに、画面幅による出し分けやダークモードへの対応、印刷用の指定なども、本文を触らずに追加できます。
具体例
:root {
--brand: #0071e3;
--gap: 16px;
}
.card {
display: flex;
flex-direction: column;
gap: var(--gap);
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
.card__title {
font-size: 20px;
color: var(--brand);
}
/* 画面が広いときだけ横並びにする */
@media (min-width: 768px) {
.card {
flex-direction: row;
<a href="/glossary/align-items" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">align-items</a>: center;
}
}つまずきやすいところ
「書いたのに効かない」の原因は、たいてい詳細度の負けです。#header .title のような ID を含む指定は、.title だけの指定より強く、後から書いても勝てません。開発者ツールで打ち消し線が付いている宣言を見れば、どの規則に負けたのかがその場で分かります。ここで !important を足して押し切ると、次に直す人がさらに !important を重ねる流れになり、収拾がつかなくなります。
余白では、上下に隣り合う要素のマージンがひとつにまとまるマージン相殺が予想外の結果を生みます。要素の幅計算も、box-sizing: border-box を指定していないと padding と border が幅に加算され、横並びが折り返す原因になります。
覚え方
セレクターは「誰に」、プロパティは「何を」、値は「どうする」の三点セットです。効かないときは、この三つのどこで外したのかを順に確かめると、原因の切り分けが速くなります。多くは一つ目の「誰に」が想定と違っています。
