何をする書き方？
font-sizeは文字サイズ、line-heightは行の高さです。単位なしのline-heightは文字サイズに対する倍率として働きます。本文では色のコントラストも大切です。薄すぎる文字色を避けましょう。
基本の形
font-size: 1rem;
line-height: 1.8;remルート要素の文字サイズを基準にする。line-height行と行の間隔に関わる。font-family使うフォントと代替候補。短い例で確かめる
style.css
p {
font-size: 20px;
color: blue;
}結果
文字が20pxの青色になります。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
body {
font-family: sans-serif;
font-size: 1rem;
line-height: 1.8;
color: #142039;
background: #ffffff;
}結果
本文を標準の文字サイズで表示し、行の高さを文字サイズの1.8倍にします。文字は濃紺、背景は白です。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「文字と色」の書き方はどれ？
少し変えてみよう
長めの段落を用意し、line-heightを1.2から1.8へ変えて読みやすさを比べましょう。
つまずいたら、ここを確認
文字色だけで意味を伝えないようにします。エラーには「入力してください」などの説明も添えます。
自分の言葉でメモ
記録はこのブラウザーに保存されます。