CSSの基本｜色・文字・余白で見た目を整えよう【ホームページ制作入門 第5回】

シリーズ第5回は「CSS」です。前回作ったHTMLの骨組みに、色・文字・余白といった見た目を与えます。

CSSとは

CSS（Cascading Style Sheets）は、HTMLで作った要素の見た目を指定する言語です。HTMLが「骨組み」なら、CSSは「服装や内装」にあたります。

HTMLに読み込む

my-site フォルダに style.css を作り、HTMLの <head> 内に次の1行を追加します。

<link rel="stylesheet" href="style.css">

CSSの書き方

h1 {
  color: #2b6cb0;
  font-size: 32px;
}

「セレクタ（どの要素か）」「プロパティ（何を）」「値（どうする）」の3つで1セットです。上の例は「h1の文字色を青、大きさを32pxにする」という意味になります。

まず覚えたい基本プロパティ

ボックスモデルを理解する

HTMLの要素はすべて四角い箱として扱われ、内側から「中身（content）→ padding → border → margin」の順に重なっています。余白の調整がうまくいかないときは、この4層のどこの話かを考えると整理できます。

色の指定について

#2b6cb0 は、「16進数カラーコード」と呼ばれる色の表し方です。赤・緑・青の強さを2桁ずつで表しています。色名（blue など）でも指定できます。

CSSのコメント

/* ここはメモ */ のように書くと、表示には影響しないメモを残せます。

書く順番のルール

同じ要素に同じプロパティを複数書いた場合は、基本的に後に書いたものが優先されます（これが “Cascading” の由来のひとつです）。

幅の計算がずれるときは box-sizing

幅（width）に padding や border を足すと、見た目の幅が広がってしまいます。次の1つを最初に書いておくと、幅の計算が直感どおりになります。

* {
  box-sizing: border-box;
}

クラスで部分ごとに指定する

<p class="lead">大事な文章</p>

.lead {
  font-size: 18px;
  line-height: 1.8;
  padding: 16px;
  background-color: #f5f5f5;
}

特定の要素だけ変えたいときは、HTMLに class を付けて、CSSでは「.クラス名」で指定します。ID（#名前）という指定方法もありますが、基本はクラスを使うと扱いやすくなります。

検証ツールを活用しよう

Chromeでページ上を右クリックして「検証」を選ぶか、F12キー（Macは Cmd+Option+I）を押すと、CSSをその場で書き換えて見た目を試せます。失敗しても元に戻せるので、実験場として使ってみてください。

まとめと次回予告

CSSで文字色・余白・背景を整えられるようになりました。次回は、要素を横に並べるレイアウトと、スマホ対応の「レスポンシブデザイン」に挑戦します。