さて、順番から言えば次はbody要素になるのですが、先に書いたようにbody要素はホームページ本体なので、htmlのほかに見た目を変える「装飾」（以後、装飾、スタイルといいます）、スタイルシートが必要になります。
このことはhead要素で「外部ファイル、例えばスタイルシートを外部ファイルにした場合は、………..」とお話ししました。
そこで、body要素の前にスタイルシートについて見てみましょう。
スタイルシートの様式
書き方の様式は、次のように決まっています。
セレクタ {プロパティ: 値;}
セレクタ→半角スペース→カッコ→プロパティ→コロン→半角スペース→値→セミコロン→カッコのようになります。
セレクタと{の間は必ず半角スペース空けてください。
空けないとエラーになります。
管理者の独断で意味をこじつけると、セレクタのプロパティを値のようにする。
というようなことになります。
例を書いてみましょう。
nav {
font-size: 1rem;
color: #191919;
}
プロパティの数が多いときは下に並べ、書き始めは右へ少しズラス、字下げ、あるいはindentといいます。
ソースが格段に見やすくなりますよ。
管理者はTABキーで2文字下げるようにTerapadを設定し、TABキーを2回打ち、4文字indentしています。
この例の場合は、ナビの文字の大きさを1remにし、文字色を#191919にする。
ということになります。
コロンと値の間の半角スペースはなくてもいいのですが、あったほうが見やすくなるので、管理者は入れています。
ソースのコメント扱い
htmlのソースコードでコメント表示できたようにスタイルシートにも、コメント扱いになる書き方があります。
/*から*/までがコメントになります。
この場合terapadでは、囲まれたスタイルの文字色が変わり、無視されます。
.photo {
/*border: 1px solid #ccc;
background-color: #eeeeff;*/
margin: 5px;
}
また、プロパティの前に//を書くと、その１行が無視されます。
.photo {
//border: 1px solid #ccc;
background-color: #eeeeff;
margin: 5px;
}
この場合は、border: 1px solid #ccc;が無視されます。
文字色は変わりません。
装飾する4つの方法
装飾は別ファイルにすることをW3Cで推奨しているので、ホームページを自作するサイトは別ファイルstyle.cssを作ります。
ほかに、タグの中に書く方法、部分的に装飾する方法、スタイルシートという名称でhead要素に書く方法があります。
それぞれの方法について見ていきましょう。