第4章 CSSをHTMLに記述する その2
登録タグ： CSS スタイルシート セレクタ プロパティ 値 ID属性 CLASS属性 HTML
今回も引き続きCSSを実際にHTMLファイル中に記述していきますが、応用として「ID属性を使う方法」と「CLASS属性を使う方法」の2種類を使います。
まずは以下のサンプルをご覧ください。
<html> <head> <title>CSSをHTMLに記述する</title> <style type="text/css"> <!-- p#abc{ color: #FF0000; } p.def{ color: #FF00FF; } --> </style> </head> <body> <h2>CSSをHTMLに記述するテスト（ID属性編）</h2> <p>このサンプルは、CSSをHTMLに記述するテストです。</p> <p id="abc">ID属性でスタイルを指定しているので、この行は赤色になります。</p> <h2>CSSをHTMLに記述するテスト（CLASS属性編）</h2> <p>このサンプルは、CSSをHTMLに記述するテストです。</p> <p class="def">CLASS属性でスタイルを指定しているので、この行は紫色になります。</p> <p class="def">ID属性と違い、CLASS属性では同じキーワード（今回はdef）を複数使用することができます。</p> </body> </html>
それでは順番に解説していきます。
まずはID属性とCLASS属性の違いについてです。
ID属性に一度記述したキーワードは、同じページ内で再度使用することはできませんが、CLASS属性に一度記述したキーワードは、同じページ内で再度使用することができます。
ページ内に同じID名は1つのみ、同じCLASS名は何回も使うことができます。
今回はサンプルということでabcやdefを使いましたが、ID名やCLASS名は基本的にどのようなキーワードであっても大丈夫です。
次に<style>タグの中身について説明していきます。
今回のセレクタはいつもと少し違う記述になっていますが、これは今までのセレクタにID名やCLASS名を追加で指定しているだけです。
また、ID名を指定するときは＃（半角シャープ）、CLASS名を指定するときは．（半角ドット）を記述するのを忘れないでください。
セレクタを記述せずに、いきなりID名やCLASS名を指定すると、タグの種類に関係なく同じID名やCLASS名が指定されているタグ全てにスタイルが適用されます。
<style type="text/css"> <!-- #abc{ color: #FF0000; } .def{ color: #FF00FF; } --> </style>
ID属性やCLASS属性を使うと、各タグの<style>属性内に記述する必要がなくなり、管理も比較的に行いやすくなります。
← 前へ | 次へ →
カテゴリー:CSS編
2011/09/11 18:09:17 更新