CSS で見た目を決める

このレッスンで学ぶこと

HTML と CSS がどうつながっているか
CSS のルールの形（セレクタ、プロパティ、値）
class を使って見た目を指定する方法
余白（margin と padding）の考え方

HTML と CSS のつながり

HTML と CSS は別々のファイルです。ブラウザは、2 本の糸をたどって両者を結びつけます。

1. HTML の link タグが style.css を読み込む。2. HTML の class 名と CSS のセレクタが同じ名前で結びつく — 1: HTML の `<link>` が CSS ファイルを読み込む。2: HTML の class と CSS の `.member-item` が、同じ名前で結びつく

ファイルとファイル: HTML の <head> にある <link> タグが「この CSS ファイルを使って」とブラウザに伝えます。ブラウザは、href に書かれた style.css を読み込みます。
要素とルール: CSS のルールは、名前で HTML の要素を探します。CSS に .member-item と書くと、HTML で class="member-item" が付いている要素すべてに、そのルールが当たります。

つまり class は、HTML の要素に付ける名札のようなものです。CSS はその名札を見て「この名札の人には、この服を着せる」と指示します。名札の綴りが 1 文字でも違うと、CSS は当たりません。見た目が変わらないときは、まず名札（class 名）が合っているかを確かめてください。

実物で試す: CSS を外してみる

今の研究室サイトのメンバー欄を、そのまま借りてきました。HTML は次の通りです。

<section class="member">
  <div class="member-item">
    <img class="img-responsive facepic" src="img/jun.jpg">
    <h4>教授</h4>
    <h3>村井純</h3>
    <p class="text-muted">Jun Murai</p>
  </div>
</section>

これに当たっている CSS のうち、主なものを抜き出すとこうなります（実際は 3 つの CSS ファイルに分かれています）。

section.member { background-color: #eeeeee; }
section.member .member-item { text-align: center; }
section.member .member-item h3 { font-size: 30px; }
.facepic { border-radius: 180px; border: 5px solid white; }

下のチェックを外して、それぞれのルールが何をしているか確かめてください。一番上の「CSS 全体」を外すと、ブラウザが何の指示も受けていない、素の HTML の表示になります。

CSS 全体 section.member 背景の灰色 .member-item 中央寄せ .member-item h3 名前の大きさ .facepic 丸い写真

教授

村井純

Jun Murai

政策・メディア研究科特任准教授

佐藤雅明

Masaaki Sato

CSS 全体を外しても、名前や写真が消えるわけではありません。中身は HTML、見た目は CSS、という分担がよく分かると思います。

CSS のルールの形

CSS は「どこを」「何を」「どうする」の 3 つを組にして書きます。

セレクタ、プロパティ、値からなる CSS のルール — member-item という class の中の h3 の、文字の色を、紺にする

セレクタ: どの要素に当てるか
プロパティ: 何を変えるか（色、大きさ、余白など）
値: どう変えるか

{ } の中には、プロパティと値の組を ; で区切っていくつでも書けます。

セレクタの書き方

セレクタ	当たる要素
`h3`	すべての `<h3>`
`.member-item`	`class="member-item"` が付いたすべての要素
`.member-item h3`	`member-item` の中にある `<h3>` だけ
`#member`	`id="member"` が付いた要素（ページに 1 つだけ）

class の前には .、id の前には # を付けます。よく使うのは class です。同じ見た目にしたい要素に同じ class を付けておけば、1 つのルールでまとめて指定できます。

CSS を当ててみる

HTML の <head> の中に <style> を書くと、そのページに CSS が当たります。

<head>
  <style>
    .member-item {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
    }
    .member-item h3 {
      color: #1d5c8c;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="member-item">
    <h3>村井純</h3>
    <p>教授</p>
  </div>
</body>

村井純

教授

実際のサイトでは、CSS は別のファイル（例: style.css）にまとめ、HTML から読み込むのが普通です。

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

今の研究室サイトも、css/ フォルダの中の CSS を読み込んでいます。

よく使うプロパティ

プロパティ	意味	例
`color`	文字の色	`color: #1d5c8c;`
`background`	背景の色	`background: #f1f1ec;`
`font-size`	文字の大きさ	`font-size: 18px;`
`font-weight`	文字の太さ	`font-weight: bold;`
`padding`	枠の内側の余白	`padding: 16px;`
`margin`	枠の外側の余白	`margin: 24px 0;`
`border`	枠線	`border: 1px solid #ccc;`
`border-radius`	角の丸み	`border-radius: 8px;`

色の #1d5c8c は、赤・緑・青の強さを 16 進数で表したものです。覚える必要はなく、デベロッパーツールの色見本をクリックすれば選べます。

余白: padding と margin

すべての要素は四角い箱として扱われます。箱の内側の余白が padding、外側の余白が margin です。

margin（外側）

枠線

padding（内側）

中身

文字と枠線の間を空けたいなら padding、隣の要素との間を空けたいなら margin です。

やってみよう

hello.html に <style> を書き足し、見出しの色と、段落の文字の大きさを変えてみます。
自己紹介全体を <div class="card"> で囲み、.card に枠線、角の丸み、padding を付けます。
デベロッパーツールで今の研究室サイトを開き、メンバーの名前を選びます。右側（または下側）の「スタイル」欄に、その要素に当たっている CSS が表示されます。color の値をクリックして書き換えてみてください。
出来たら hello.html を commit します。

確認テスト

class="title" が付いた要素すべてを赤くする CSS は？

title { color: red; }
.title { color: red; }
#title { color: red; }

答えを見る

2。class は .、id は #、何も付けないとタグ名になります。

カードの枠線と、中の文字の間を広げたい。使うのは？

padding
margin

答えを見る

1。枠の内側の余白なので padding です。

チェックリスト

hello.html に CSS を当てて、見た目が変わった
class を使ってカードの見た目を作れた
デベロッパーツールで、今のサイトの CSS を見つけて書き換えた