スタイルシート


さて、順番から言えば次は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;
}

また、プロパティの前に//を書くと、その1行が無視されます。

.photo {
//border: 1px solid #ccc;
background-color: #eeeeff;
margin: 5px;
}
この場合は、border: 1px solid #ccc;が無視されます。
文字色は変わりません。

装飾する4つの方法

装飾は別ファイルにすることをW3Cで推奨しているので、ホームページを自作するサイトは別ファイルstyle.cssを作ります。
ほかに、タグの中に書く方法、部分的に装飾する方法、スタイルシートという名称でhead要素に書く方法があります。

それぞれの方法について見ていきましょう。

次はタグの中にスタイルを書く方法

  1. タグの中にスタイルを書く方法
  2. 部分的に装飾する方法
  3. head要素に書く方法
  4. style.cssファイルを作る