HTMLファイルごとにスタイルシート(CSS)を適用する

<style type=”text/css”><!– セレクタ { プロパティ:値 ; … }–></style>

CSSの書き方

<style type=”text/css”>
<!–
セレクタ { プロパティ:値 ; プロパティ:値 ; … }
セレクタ { プロパティ:値 ; プロパティ:値 ; … }

–>
</style>

解説

スタイルシートは、HTMLファイルごとに設定することもできます。

この場合、HTML文書の冒頭でそのHTMLに必要なCSSを以上のように一括で記述し、ブラウザに読み込ませます。

上記の記述はHTMLのヘッダー(<head>〜</head>間)に挿入する必要があります。

<style>〜</style>間の<!–と–>は、CSSの指定をコメント化して、スタイルシートに対応していないWEBブラウザで、この部分が表示されるのを防ぐためのものです。

HTMLの冒頭部でこれらのCSSを定義し、さらに各要素で個別にスタイルシートを適用することもできます。

また、HTMLの冒頭部と各要素で同じプロパティを設定していた場合、後者の方が優先されます。

CSS/HTMLサンプル

HTML
<style type=”text/css”>
<!–
p { line-height:130% ; }
#sample { font-size:small ; background:#ffdff9 ; }
–>
</style>

HTML内
<p>段落に適用</p>
<div id=”sample”>DIV要素に適用</div>

サンプル 段落とDIV要素にスタイルシートを適用

参考:HTML内に記述する欠点

HTML内にこれらのスタイルシートの複数のプロパティを記述すると、HTMLの冒頭がこれらの情報で埋め尽くされ、やたらと頭でっかちなHTMLとなってしまいます。

このようなHTMLは検索エンジン対策の上で不利となります。

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!