第6章で作った社員一覧の表に、CSS で罫線や余白、背景の色を付けます。CSS のファイルを作って HTML から読み込む方法と、見た目を付ける場所を選ぶ「セレクター」、見た目の種類を決める「プロパティ」を学びます。この章で書く CSS は、Spring入門の社員管理アプリで使う app.css と同じものです。
この章で学ぶこと
- CSS のファイルを作り、
<link>タグで HTML から読み込む方法 - CSS の書き方（セレクター・プロパティ・値）
- 要素・クラス・要素＋クラス・グループのセレクター
- 余白・罫線・色・文字の大きさなどのプロパティ
- リンクをボタンの見た目にする方法
7.1 この章で作るもの
この章では、ch07 フォルダーに、第6章の list.html をコピーし、CSS のファイル css/app.css を作って読み込みます。章の最後には、Chrome で http://localhost/html/ch07/list.html を開くと、次のように表示されるようになります。
図7-1 この章で作るページ（第6章の表に CSS を付けたもの）
| ファイル | 作業 | 内容 |
|---|---|---|
ch07/list.html |
コピー・変更 |
第6章の list.html をコピーし、CSS の読み込みと「新規登録」のリンクを足す |
ch07/css/app.css |
新規 | ページの見た目を決める CSS のファイル |
7.2 第6章の list.html をコピーする
この章では、第6章の表を使います。第6章のファイルはそのまま残し、ch07 フォルダーにコピーしてから書き換えます。
-
webappフォルダーを右クリックし、新規 → フォルダー でch07フォルダーを作ります（第3章「ch03 フォルダーを作る」）。 -
パッケージ・エクスプローラーで、
ch06フォルダーの中のlist.htmlを右クリックし、「コピー」を選びます。
図7-2 ch06 の list.html を右クリック → コピー（赤枠） -
ch07フォルダーを右クリックし、「貼り付け」を選びます。確認の画面は表示されず、すぐにコピーされます。
図7-3 ch07 を右クリック → 貼り付け（赤枠） -
ch07の中にlist.htmlができたことを確認します。
【ご注意】ch07 の list.html を書き換える
この章で書き換えるのは、ch07 の中の list.html です。エディターで開くときは、パッケージ・エクスプローラーで ch07 の中の list.html をダブルクリックしてください。エディターのタブにはファイル名しか表示されないので、ch06 の list.html を開いたままにしていると、間違えやすくなります。開いている場合は、先にタブの「×」で閉じておきましょう。
7.3 CSS のファイルを作る
CSS は、HTML とは別のファイルに書きます。拡張子は .css です。章のフォルダーの中に css フォルダーを作り、その中に app.css を作ります。
-
ch07フォルダーを右クリックし、新規 → フォルダー でcssフォルダーを作ります。「親フォルダーを入力または選択」の欄がhtml/src/main/webapp/ch07になっていることを確認してください。 -
作った
cssフォルダーを右クリックし、新規 → CSS ファイル を選びます。
図7-4 css を右クリック → 新規 → CSS ファイル（赤枠） -
「新規 CSS ファイル」の画面が表示されます。「親フォルダーを入力または選択」の欄に
html/src/main/webapp/ch07/cssと入っていることを確認します。「ファイル名」にapp.cssと入力し、「次へ」をクリックします。
図7-5 親フォルダーを確認し、ファイル名に app.css と入力して「次へ」（赤枠） -
「CSS テンプレートの選択」の画面が表示されます。「CSS テンプレートの使用」にチェックが入っていて、「新規 CSS ファイル」が選ばれていることを確認して、「完了」をクリックします。どちらも最初からその状態になっているので、変える必要はありません。下の「プレビュー」の
${encoding}の部分には、作るときに文字コードのUTF-8が入ります。
図7-6 テンプレートを確認して「完了」（赤枠） -
エディターに
app.cssが開きます。中には、次の1行が入っています。
図7-7 作成した直後の app.cssch07/css/app.css@charset "UTF-8";この行は、このファイルの文字コードが UTF-8 であることを表します（第3章「解説：HTML の骨組み」の
<meta charset="UTF-8">と同じ役割です）。CSS のコメントに日本語を書くので、消さずに残しておきます。【ご注意】選択されたまま入力しない
作成した直後は、図7-7 のように、この1行が選択された状態（青い背景）になっています。このまま文字を入力すると、この行が入力した文字に置き換わって消えてしまいます。書き始める前に、行の最後（
;の右）をクリックしてください。消えてしまったときは、Ctrl + Z キーで元に戻せます。
7.4 ページ全体と見出しの見た目を付ける
まず、ページ全体と見出しの見た目を CSS に書き、list.html から読み込みます。
-
app.cssの@charsetの行の最後をクリックし、Enter キーで改行します。1行空けて、緑の行を書きます。ch07/css/app.css@charset "UTF-8"; body { /* ページ全体 */ margin: 24px; color: #222; } h1 { /* 見出し */ font-size: 24px; }{と}の間の行は、半角スペース4つ分右にずらしています（Spring入門のapp.cssと同じ）。Tab キーでずらしてもかまいません。/*と*/の間はコメントで、見た目には影響しません（7.7 で説明します）。 -
保存ボタンか Ctrl + S で保存し、
app.cssのタブの*が消えたことを確認します。 -
ch07のlist.htmlを開き、<title>の下に緑の1行を書き足します。ch07/list.html（head の部分）<head> <meta charset="UTF-8"> <title>社員一覧</title> <link rel="stylesheet" href="css/app.css"> </head><link>は、CSS のファイルを読み込むタグです。hrefには、list.htmlから見たapp.cssの場所を相対パスで書きます（第5章「相対パス」）。 -
保存ボタンか Ctrl + S で保存し、
list.htmlのタブの*が消えたことを確認します。 -
Chrome で
http://localhost/html/ch07/list.htmlを開きます。
図7-8 ページ全体と見出しの見た目を付けたところ第6章の表示（図6-1）と比べると、見出しの文字が小さくなり、ページの周りの余白が広くなっています。文字の色は、真っ黒より少し薄い黒になっています。
7.5 表の見た目を整える
-
app.cssの最後に、緑の行を書き足します。ch07/css/app.css@charset "UTF-8"; body { /* ページ全体 */ margin: 24px; color: #222; } h1 { /* 見出し */ font-size: 24px; } table { /* 表 */ border-collapse: collapse; margin-bottom: 16px; } th, td { /* 表のマス */ border: 1px solid #999; padding: 6px 12px; text-align: left; } th { /* 表の見出しのマス */ background-color: #eee; } -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で再読み込みします。
図7-9 表に罫線と見出しの背景色が付いた表のマスに罫線が付き、見出しのマスの背景が薄い灰色になりました。マスの中の文字の周りには余白が入り、文字は左にそろっています。
CSS を変えたときも、HTML のファイルを書き換えたときと同じように、保存してから Chrome で再読み込みすると、新しい見た目になります。再読み込みしても変わらないときは、付録A「CSS が反映されない」を見てください。
7.6 リンクをボタンの見た目にする
Spring入門の社員管理アプリでは、「新規登録」や「変更」のリンクを、ボタンのような見た目にしています。ここでは、button というクラス名（第4章「class 属性」）を付けたリンクに、ボタンの見た目を付けます。
-
list.htmlの<h1>の下に、緑の1行を書き足します。ch07/list.html（body の最初の部分）<body> <h1>社員一覧</h1> <p><a class="button" href="list.html">新規登録</a></p> <table>この章では見た目だけを確かめるので、リンク先は同じ
list.htmlにしておきます。第10章で、社員の新規登録の画面へのリンクに変えます。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。Chrome で再読み込みすると、表の上に、青い文字と下線の「新規登録」のリンクが表示されます。 -
app.cssの最後に、緑の行を書き足します。ch07/css/app.css（最後の部分）th { /* 表の見出しのマス */ background-color: #eee; } a.button { /* リンクをボタンの見た目にする（新規登録・変更・戻るボタン用） */ display: inline-block; padding: 1px 6px; border: 1px solid #767676; border-radius: 3px; background-color: #efefef; color: #000; font-size: 13px; text-decoration: none; } -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。Chrome で再読み込みし、「新規登録」がボタンの見た目になったことを確認します（図7-1）。
見た目はボタンですが、中身はリンクのままです。クリックすると、href のページ（ここでは同じ list.html）に移動します。
7.7 解説：CSS の書き方と読み込み
CSS の書き方
CSS は、「どの要素に」「どんな見た目を」付けるかを書きます。1つのまとまりを ルール といいます。
図7-10 CSS のルールの書き方
| 部分 | 書き方 |
|---|---|
| セレクター | 見た目を付ける要素を選ぶ。後ろに { と } を書き、その中に見た目を書く（7.8） |
| プロパティと値 |
プロパティ: 値; の形で書く。:（コロン）でつなぎ、最後に ;（セミコロン）を付ける。1つのルールに何行でも書ける（7.9） |
| コメント |
/* と */ で囲む。見た目には影響しない。何のための指定かを書いておくと、後で読みやすい |
@charset "UTF-8"; |
ファイルの文字コードを表す。ファイルの1行目に書く |
【ご注意】記号はすべて半角で、; を忘れない
{・}・:・; は、すべて半角で入力してください。; を書き忘れると、次の行のプロパティまで、前の行の値の続きとして読まれてしまい、どちらの見た目も付かなくなります。プロパティの名前のつづりを間違えたときも、その行は無視されます。
CSS の読み込み
<link rel="stylesheet" href="css/app.css">
| 書いたもの | 意味 |
|---|---|
<link> |
ほかのファイルを、このページに関係付ける。<head> の中に書く。終了タグは書かない |
rel="stylesheet" |
関係付けるファイルが、見た目を決める CSS のファイル（スタイルシート）であることを表す |
href="css/app.css" |
CSS のファイルの場所。list.html から見た相対パスで書く |
CSS を HTML とは別のファイルに書いておくと、たくさんのページから同じ app.css を読み込んで、見た目をそろえられます。見た目を変えたいときも、app.css を1か所直すだけで、すべてのページの見た目が変わります。第10章では、4つの画面から同じ app.css を読み込みます。
7.8 解説：セレクター
セレクターは、見た目を付ける要素を選ぶ部分です。この章で使ったセレクターには、次の種類があります。
| 種類 | 書き方の例 | 選ばれる要素 |
|---|---|---|
| 要素 |
body・h1・table・th
|
そのタグの要素すべて。th なら、ページの中のすべての <th>
|
| グループ | th, td |
, で区切って並べた要素すべて。<th> と <td> の両方 |
| 要素＋クラス | a.button |
class="button" が付いた <a> だけ。クラス名の前には . を付ける |
| クラス | .error |
class="error" が付いた要素すべて（タグの種類は問わない）。第10章で使う |
a.button は、<a> の中でも class="button" が付いたものだけを選びます。class の付いていない普通のリンクは、青い文字と下線のまま表示されます。このように、クラス名を使うと、同じタグの中から見た目を変えたい要素だけを選べます（第4章「class 属性」）。
1つの要素に、2つ以上のルールが当てはまることもあります。たとえば <th> には、th, td のルール（罫線・余白・左寄せ）と、th のルール（背景の色）の両方が当てはまり、両方の見た目が付きます。共通の見た目を th, td にまとめて書き、見出しのマスだけの見た目を th に書き分けています。
【知識メモ】中に入っている要素にも見た目が引き継がれる
body に書いた color: #222;（文字の色）は、<body> の中の <h1> や <td> の文字にも付きます。文字の色や大きさのように、入れ子の内側の要素に引き継がれるプロパティがあるためです。一方、margin や border は引き継がれず、書いた要素だけに付きます。
7.9 解説：プロパティ
この章で使ったプロパティです。第10章でも、同じプロパティを使います。
| プロパティ | 意味 | この章での使い方 |
|---|---|---|
margin |
要素の外側の余白 |
body の周りに 24px の余白を空ける |
margin-bottom |
要素の下側だけの外側の余白 | 表の下に 16px の余白を空ける |
padding |
要素の内側の余白（罫線と中身の間） |
6px 12px は、上下に 6px、左右に 12px |
color |
文字の色 | ページの文字を #222（真っ黒より少し薄い黒）にする |
background-color |
背景の色 | 見出しのマスを #eee（薄い灰色）にする |
font-size |
文字の大きさ | 見出しを 24px、ボタンの文字を 13px にする |
border |
罫線（太さ・線の種類・色の順に書く） |
1px solid #999 は、太さ 1px の実線（solid）で、色は灰色 |
border-collapse |
表のマスの罫線をまとめるかどうか |
collapse で、隣り合うマスの罫線を1本にまとめる |
border-radius |
角の丸み | ボタンの角を 3px 分丸くする |
text-align |
文字をそろえる位置 |
left で左にそろえる（<th> は、何も書かないと中央にそろう） |
text-decoration |
文字の飾りの線 |
none で、リンクの下線を消す |
display |
要素の表示のされ方 |
inline-block で、文章の流れの中に並べたまま、padding や border の大きさを正しく付けられるようにする |
大きさと色の書き方
24px の px は、画面の点（ピクセル）の数で大きさを表す単位です。数字と px の間には空白を入れません。
#222 や #eee は、# の後ろの3つの文字で、赤・緑・青の強さを表す色の書き方です。1文字は 0〜9 と a〜f の16段階で、0 がいちばん弱く、f がいちばん強い強さです。3つとも同じ文字にすると灰色になり、#000 は黒、#fff は白です。#767676 のように6文字で書く書き方もあり、2文字ずつで赤・緑・青を表します。
【知識メモ】間を空けるときは br ではなく margin を使う
第3章で、「<br> を続けて書いて間を空けることはしない」と説明しました（第3章「br タグで改行する」）。この章の margin や padding が、間を空けるための正しい方法です。表の下に余白を空けたいときは、<br> を足すのではなく、table に margin-bottom を書きます。
7.10 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| CSS の見た目がまったく付かない |
<link> の href のつづりか、app.css の場所が違います。app.css が ch07/css フォルダーの中にあるか、list.html が ch07 の中のものかを確かめてください。list.html と app.css の両方を保存したかも確かめます。詳しくは付録A「CSS が反映されない」を見てください。 |
| 一部のルールだけ見た目が付かない | そのルールのセレクターかプロパティのつづりが違うか、前の行の ; や、前のルールの } が抜けています。全角の記号が混ざっていないかも確かめてください。 |
| CSS を直したのに、見た目が変わらない |
app.css のタブに * が付いたまま（保存していない）か、Chrome で再読み込みしていません。詳しくは付録A「まず確かめること」を見てください。 |
| 「新規登録」がボタンの見た目にならない |
<a> の class="button" と、CSS の a.button のつづりが合っているかを確かめてください。CSS ではクラス名の前に . を付けますが、HTML の class 属性には . を付けません。 |
ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。
7.11 まとめと確認問題
まとめ
- CSS は、拡張子
.cssの別のファイルに書き、HTML の<head>の中の<link rel="stylesheet" href="css/app.css">で読み込む。CSS のファイルは、新規 → CSS ファイル のテンプレートで作り、1行目の@charset "UTF-8";は残す - CSS のルールは
セレクター { プロパティ: 値; }の形で書く。コメントは/* */で囲む - セレクターには、要素（
th）・グループ（th, td）・要素＋クラス（a.button）・クラス（.error）がある。1つの要素に2つ以上のルールが当てはまると、両方の見た目が付く - 余白は
margin（外側）とpadding（内側）、罫線はborder、色はcolorとbackground-color、文字の大きさはfont-sizeで付ける - 間を空けるときは、
<br>を続けて書くのではなく、marginなどの CSS を使う
この章で使った CSS のプロパティは、付録B「CSS の早見表」にまとめています。
確認問題
問1 ch07/list.html から、ch07/css/app.css を読み込む行を書いてください。また、その行は HTML のどこに書きますか。
解答を見る
<link rel="stylesheet" href="css/app.css"> です。<head> の中に書きます。
問2 次の CSS の、セレクター・プロパティ・値はそれぞれどこですか。h1 { font-size: 24px; }
解答を見る
セレクターは h1、プロパティは font-size、値は 24px です。
問3 セレクター a.button は、どの要素を選びますか。
解答を見る
class="button" が付いた <a> の要素だけを選びます。class の付いていない <a> は選ばれません。
問4 margin と padding の違いを説明してください。
解答を見る
margin は要素の外側の余白、padding は要素の内側（罫線と中身の間）の余白です。
問5 表の下に余白を空けたいとき、<br> を続けて書く代わりに、どう書けばよいですか。
解答を見る
CSS で、table に margin-bottom を書きます。たとえば table { margin-bottom: 16px; } と書くと、表の下に 16px の余白が空きます。