サイト内全体で標準とするデザインを設定する
サイト全体のデザインに統一感を持たせるには、文字の色やサイズ、行間などを一貫させる必要があります。
しかし、それらを例えば、文字や文章などに毎回個別に指定するのは効率が悪いです。
Webサイト開発では、あらかじめ「標準スタイル」を定めておき、共通のCSSを使って全体に反映させる方法がよく使われます。
style.cssの先頭に以下のコードを追加します。
@charset "UTF-8";
html {
font-size: 62.5%;
}
body {
color: #333;
font-size: 1.6rem;
}
a {
display: block;
text-decoration: none;
color: #666;
}
ul {
padding-left: 0;
margin: 0;
}
html要素、つまり画面全体にfont-size: 62.5%を適用しています。
ブラウザのデフォルトの文字のサイズ(font-size)は16pxですが、html要素にfont-size: 62.5%を適用することにより、文字サイズは
// 計算式
16px × 62.5% = 10px
となります。
デフォルトの文字のサイズを10pxにする理由は、文字のサイズを変更する際に使用するremという単位の計算をしやすくするためです。
remはhtmlの文字サイズを基準にした単位です。
たとえば、htmlの文字サイズがデフォルトの16pxのとき、font-size: 1remは16pxを意味します。
ここで、もしfont-sizeをremを使って18pxにしたいとなった場合、どうでしょうか？
// 計算式
18px / 16px = 1.125rem
となり、細かい数字で指定しなければならず、非常に分かりにくいです。
しかし、font-size: 62.5%を適用し、デフォルトのサイズを10pxにしておくと、18pxは、
// 計算式
18px / 10px = 1.8
となり、数字が直感的で計算しやすくなります。
また、font-sizeにremを使う理由は、文字サイズを一括で調整できる便利さにあります。
例えば、サイト全体の文字を今より1px大きい11pxにしたいという要望があった場合、もしサイト全体の文字をpx単位で指定していたら、すべてのfont-sizeを指定している箇所でpxを+1して書き換えなければならなくなります。
しかし、remで指定していた場合、htmlのfont-sizeだけを、
html {
font-size: 68.75%; /* 16px × 0.6875 = 11px */
}
に変更すれば、サイト全体の文字サイズを一括で変更できます。
このように、font-size: 62.5%を使うことで、remの単位の計算が楽になり、メンテナンス性が向上します。
今回はbodyタグに1.6remを指定することで、サイト内のコンテンツのデフォルトの文字サイズを16pxに設定しています。
リンクを貼るaタグにはtext-decoration: noneを指定し、デフォルトで引かれる下線を削除しています。
ulタグからはマージン（外側の余白）と、左側のパディング（内側の余白）を削除しています。
index.htmlを以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/reset.css" />
</head>
<body>
<!-- ここから -->
<a>aタグテスト</a>
<ul role="list">
<li>リストテスト1</li>
<li>リストテスト2</li>
</ul>
<!-- ここまで追加 -->
</body>
</html>
ブラウザで開いて挙動を確認してみましょう。
次のキャプチャのような見た目になっていれば成功です。
