ホーム > HTML講座 > CSS編 > 第4章 CSSをHTMLに記述する その2

第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 09:09:17 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク