最後の仕上げとして、ホームページ全体の文字サイズや色、大きさ、行間の設定などを行いましょう。
気づいているかもしれませんが、完成見本の「さきちんカフェ」とこれまでに作ってきた「さきちんカフェ」では文字の色や種類などが異なっています。
[未完成のさきちんカフェ]
完成した「さきちんカフェ」では「種類」「色」「大きさ」「行間」をCSSで指定しています。
今作っている「さきちんカフェ」にもスタイルを作って適用してあげましょう。
スタイルの作成
それではテキストエディタで「style.css」を開いて、スタイルを作成しましょう。
作成するスタイルは、以下のようになります。
[入力するコード]body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#630;
line-height:25px;
font-size:0.95em;
}
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#630;
line-height:25px;
font-size:0.95em;
}
step.1
まず、ホームページ全体に適用するので、セレクタ名は「body」とします。
step.2
次に「font-family」で文字の種類を指定します。
この場合は”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serifを指定しています。
step.3
colorで文字色を指定し、line-heightで行間を25pxに、font-sizeで文字の大きさを0.95emに指定します。
これを「style.css」に入力して、保存しましょう。
[CSSの記述例]
覚えておきたいポイント
CSSファイルだけでOK
bodyにスタイルを適用するので、「index.html」ファイルを編集する必要はありません。「style.css」を編集するだけでOKです。
