HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス /  ウェブ制作チュートリアル / 第4章 CSSで文字スタイルを指定する：文字サイズの指定

第4章　CSSで文字スタイルを指定する

| 文字サイズの指定
CSSファイルが作成出来たら、このファイルの中にCSSソースを記述して、ウェブページに表示される文字サイズを指定します。 base.cssを開いて、文字コード指定の行に続けて以下の記述を追加してください。
CSSファイルを新規作成してみましょう。 テキストエディタを起動して、先頭に以下の一行を記述してください。

CSSソース（base.css）

@charset "utf-8";
body {font-size:95%;}
記述できたら上書き保存します。
CSSのfont-sizeプロパティは、文字サイズを指定する際に使用します。 追加したbody {font-size:95%;} の一行は、「body要素のフォントサイズを95%にしなさい」という指定です。
追加した一行で文字サイズを指定しましたが、まだ、スタイルを適用する対象となるウェブページとの関連付けをしていないので、特にウェブページには変化はありません。

| ウェブページとの関連付け ​
font-sizeプロパティで文字サイズを指定したCSSファイルbase.cssと、HTMLファイルindex.htmlとを関連付ける指定を行います。
index.htmlを開いて、以下の一行を追加してください。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<h1>ウェブサンプル株式会社</h1>
<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</body>
</html>
保存をしたらブラウザで表示してみましょう。 ブラウザに表示される文字が95%のサイズになって、全体的にフォントサイズが小さくなれば成功です。
▶︎ 変更前を確認する
<link rel="stylesheet" href="base.css"> の一行をindex.htmlに追加することで、先ほど作成したbase.cssと関連付けられます。 link要素でHTMLファイルからCSSファイルを読み込ませているのです。
link要素のhref属性には、base.cssのURL（リソースの場所）を指定しています。 index.htmlとbase.cssは同じフォルダ内に保存されているので、ファイル名を記述するだけで指定できます。
rel属性にはstylesheetを指定しています。これは、リンク先のファイルがスタイルシートファイルであることを示しています。
まとめ
  1. フォントサイズは、font-sizeプロパティで指定する
  2. body {font-size:95%;} は、「body要素のフォントサイズを95%にしなさい」という指定
  3. link要素でHTMLファイルからCSSファイルを読み込ませる