HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


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

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は検索エンジン対策の上で不利となります。

次のページへ >>