CSS入門：HTMLにスタイルシートを読み込み、文字と背景色を変更する
外部CSSの読み込みからセレクター・プロパティ・値、文字色・背景・行間まで。HTMLのどの要素にCSSが効くかを確かめます。
第4回では、前回までに作ったHTMLへ初めてCSSを適用します。目標はCSSファイルの読み込みを確認し、どの要素にどの指定が効くのかを説明できるようになることです。大きなレイアウトを作る前に、文字、背景、行間を少しずつ変更します。
HTMLからCSSを読み込む
styles.cssを同じフォルダーに作る
index.htmlと同じ場所にstyles.cssを作ります。ファイル名だけではブラウザーは自動で読み込まないので、HTMLのhead内に次の1行を追加します。置き場所はtitleの後などで構いません。
<link rel="stylesheet" href="./styles.css">ここでrel="stylesheet"はスタイルシートであること、hrefはCSSファイルの場所を表します。style.cssとstyles.cssのような小さな違いでも読み込みに失敗します。完成版ZIPには、この行を追加済みのHTMLが含まれます。
CSSの完成コード
この回のstyles.css全体は次のとおりです。
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.8;
color: #172b29;
background: #fbfaf5;
}
a { color: #175d53; }
h1, h2, h3 { line-height: 1.4; }
.hero { background: #e8f0dc; }
.card { background: #fff; }保存してページを再読み込みすると、背景が淡い色になり、文字とリンクの色、行間が変わります。ページ上部の紹介部分には別の背景色が付きます。この時点では余白やカードの並び方はまだ整いません。1回の変更を小さくすると、CSSが読み込めているか判断しやすくなります。
CSSのルールを読む
セレクター・プロパティ・値
bodyのように「どれに適用するか」を指定する部分がセレクターです。colorがプロパティ、#172b29が値です。波括弧の中に宣言を並べ、各宣言をセミコロンで区切ります。colorは文字色、backgroundは背景、line-heightは行の高さを指定します。
.heroはclass="hero"が付いた要素を選びます。CSS側の先頭にあるピリオドは、HTMLのクラス名には含めません。h1, h2, h3はカンマで複数の対象を列挙しています。セレクター間の空白とは意味が違います。
要素・クラス・子孫セレクター
全段落を変えるならp、特定の部品だけなら.cardのようなクラスを使います。.card pはカードの内側にある段落を選ぶ子孫セレクターです。次のコードを一時的に末尾へ追加し、カード内の段落だけが変わることを確認したら削除してください。
.card p {
color: #5a3922;
}#lessonsはIDセレクターですが、スタイルの再利用や優先順位の管理を考えると、部品の見た目はクラスを中心に指定すると整理しやすくなります。IDはページ内リンクやJavaScriptの目印として残せます。
読みやすい文字を設定する
フォントと行間
system-uiはOSのUI向けフォント、sans-serifは代替として使う総称フォントです。同じ指定でもOSによって字形が変わるため、特定のパソコンでの見た目だけを前提にしません。本文のline-height: 1.8は文字サイズに対する倍率です。見出しは1.4にして、大きな文字の行間が広くなりすぎないようにしています。
px・rem・パーセントを使い分ける
pxはCSSピクセル単位です。remはルート要素の文字サイズを基準にします。幅の%は主に包含ブロックの幅が基準ですが、プロパティによって基準が異なるため「何の割合か」を確認します。文字サイズを変更できない固定レイアウトにせず、後の回で相対的なサイズも使っていきます。
CSSが効かないときに確認する
読み込みと打ち消し線を分けて調べる
背景を変えても何も変わらないときは、ファイルを保存したか、linkのパスが合っているかを確認します。開発者ツールのNetworkでstyles.cssを探し、見つからないエラーがないか調べます。ElementsのStylesでルールが見えているのに打ち消し線がある場合は、別の指定が優先されています。優先順位は次回扱います。
練習問題
.heroの背景色、リンクの色、本文の行間を1つずつ変更してください。毎回保存して、変化を確認してから次へ進みます。リンクの下線は最初から消さず、文字色だけに頼らなくてもリンクとわかる状態を保ちましょう。
参考資料
この回の完成版と学習の続き
第4回の見本をブラウザーで開く · 第4回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。