前のレッスンで作った自己紹介ページ、白い背景に黒い文字が並ぶだけでしたよね。
あの素っ気ない状態と、ふだん見ているWebサイトの差。それが全部CSSです。
このレッスンでは、CSSの仕組みと読み方を扱います。プロパティを網羅する回ではありません。
自分のデザインの指定が、コードでどう再現されるのか。この対応関係がつかめると、コーダーとの会話が具体的になりますよ◎
CSSはHTMLに見た目を与える言語
CSS（Cascading Style Sheets）は、HTMLの各部分に「どう見せるか」を指定する言語です。色、文字の大きさ、余白、配置。見た目の指定はすべてCSSが受け持ちます。
上の図の2つ、HTMLはまったく同じものです。CSSを当てただけで、見慣れたWebページの姿になりました。
役割分担を言葉にすると、HTMLが意味と構造、CSSが見た目。ページの「中身」と「化粧」が別ファイルに分かれている、と考えてください。
分かれているおかげで、中身を変えずに見た目だけ一新できます。サイトのリニューアルで文章そのままにデザインを変えられるのは、この分担のおかげです。
文法は「どこを・何を・どうする」の3部品
CSSの1行はこう書きます。
h1 { color: #3e5c76; }読み方は「h1見出しの、文字色を、#3e5c76にする」。部品は3つです。
- セレクタ（h1）：どこを変えるか。相手を選ぶ部分
- プロパティ（color）：何を変えるか。項目の名前
- 値（#3e5c76）：どうするか。具体的な指定
どんなに長いCSSファイルも、この1行の繰り返しです。3部品の位置さえ分かれば、知らないプロパティが出てきても「どこの・何かを・こう変えているんだな」と見当がつきます。読める状態はこれで完成です。
実際のサイトでは、セレクタの場所にクラスセレクタが入っている行がほとんどです。書き方は、タグ名の代わりに「.（ドット）＋クラス名」を書くだけ。
.btn { background-color: #3e5c76; }読み方は「btnというclassが付いた要素の、背景色を、#3e5c76にする」。HTML側でclass=”btn”と名前を付けておき、CSSはその名前を目印に見た目を指定します。部品が3つなのは変わりません。
デザインの指定はプロパティに対応する
ここがこのレッスンの主役です。あなたがカンプで決めてきた指定は、それぞれ決まったプロパティに置き換わります。
| デザインの指定 | CSSプロパティ | 値の例 |
|---|---|---|
| 文字の色 | color | #353535 |
| 背景の色 | background-color | #f6f6f5 |
| 文字の大きさ | font-size | 16px |
| 文字の太さ | font-weight | 700（太字） |
| 行間 | line-height | 1.8 |
| 余白 | margin / padding | 24px |
| 角丸 | border-radius | 8px |
見覚えのある話ばかりのはずです。色の値はカラーコードそのもの。余白の内と外の区別はマージンとパディングで、行間の考え方は行間の整え方で学んだとおりです。
CSSの仕事は装飾とレイアウトの2つ
CSSの仕事は、大きく2種類に分かれます。
- 装飾：1つの要素の見た目を変える。色・文字・角丸・影など。さっきの表はほぼこちらです
- レイアウト：複数の要素の並べ方を決める。横に並べる、間隔をそろえる、画面の幅に合わせて折り返す
難易度に差があって、装飾は1行で終わり、レイアウトは複数の指定の組み合わせになります。カード3枚を等間隔で横に並べる、といった指定は、親の箱に「子を横に並べる」という指示を出す形で書きます。
この並べる仕組みには名前が付いています。横並びなど一方向に並べるのがflexbox（フレックスボックス）、縦横の格子で配置するのがgrid（グリッド）です。書き方はまだ覚えなくて大丈夫。コーダーが「ここはflexで組みます」と言ったら、横並びの仕組みの話だと分かればOKです。
デザイナーがここで知っておくべきことは1つだけ。コーダーはカンプから「並びのルール」を読み取って組んでいるということです。等間隔なのか、左寄せなのか、折り返したらどうなるのか。カンプで並びのルールが明快だと、実装は速く正確になります。
画面幅で並びが変わる話は、次のレッスンのレスポンシブデザインで扱います。
ミニ実践：3行のCSSで表示が変わるのを見る
前のレッスンで作った自己紹介ページ（jikoshokai.html）に、CSSを3行だけ足してみましょう。5分で終わります。ファイルがない人は、h1とpだけの2行のHTMLを作ればOKです。
- jikoshokai.html をメモ帳（テキストエディット）で開く
- <head>の行のすぐ下に、次の5行を追加する。styleタグの中がCSSです
<style>
body { background-color: #f6f6f5; padding: 40px; }
h1 { color: #3e5c76; }
p { line-height: 1.8; }
</style>- 上書き保存して、ブラウザで再読み込みする。背景に色が付き、見出しが青くなり、本文の行間が広がります
- 仕上げに値をいじってみる。#3e5c76を好きなカラーコードに、40pxを80pxに。数値を変えて、再読み込みして、目で確かめる。この往復がCSSの理解を一番早くします
たった3行でも、ページの印象が変わったはずです。この延長線上に、ふだん見ているWebサイトがあります💡
よくある質問
次に学ぶこと
最後に整理します。
- CSS：HTMLに見た目を与える言語。中身と化粧の分担
- 文法：セレクタ・プロパティ・値。「どこを・何を・どうする」
- 対応関係：カンプの数値がそのままCSSの値になる
- 2つの仕事：装飾（1要素の見た目）とレイアウト（並べ方）。並べる仕組みの名前がflexboxとgrid
ここまでで、1つの画面の見た目はコードで説明できるようになりました。次の問題は「画面の幅が変わったらどうするか」。スマホ対応の仕組み、レスポンシブデザインへ進みましょう。
コース全体の並びはデザイン基礎コースの目次から確認できます。
友だち追加