cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > タグ・属性対応表 > 属性の説明
WEBページ作成
広告
class 「クラス名を指定」[読み方：クラス]
class属性は、クラス名を指定します。クラス名の指定は、スタイルシートのセレクタとして使われます。id属性と違い、同じ文書内で複数回の指定が可能です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
class の属性値
| 値 | 意味 | 注意事項 |
|---|---|---|
| 任意のテキスト | クラス名 | ・半角スペース区切りで複数のスタイルの指定が可能。 ・大文字と小文字は区別される。 |
class のサンプル
１つのクラスを複数の要素に指定するサンプル
<style type="text/css">
<!--
.clr_red {
color: #FF0000;
}
.wgt_bold {
font-weight: bold;
}
-->
</style>
<p class="clr_red">テキスト１を赤字で表示</p>
<p class="clr_red">テキスト２を赤字で表示</p>
<p class="wgt_bold">テキスト３を太字で表示</p>
<!--
.clr_red {
color: #FF0000;
}
.wgt_bold {
font-weight: bold;
}
-->
</style>
<p class="clr_red">テキスト１を赤字で表示</p>
<p class="clr_red">テキスト２を赤字で表示</p>
<p class="wgt_bold">テキスト３を太字で表示</p>
テキスト１を赤字で表示
テキスト２を赤字で表示
テキスト３を太字で表示
１つの要素に複数のクラスを指定するサンプル
<style type="text/css">
<!--
.clr_red {
color: #FF0000;
}
.wgt_bold {
font-weight: bold;
}
-->
</style>
<p class="clr_red wgt_bold">テキスト１を赤字・太字で表示</p>
<p class="clr_red wgt_bold">テキスト２を赤字・太字で表示</p>
<p class="clr_red wgt_bold">テキスト３を赤字・太字で表示</p>
<!--
.clr_red {
color: #FF0000;
}
.wgt_bold {
font-weight: bold;
}
-->
</style>
<p class="clr_red wgt_bold">テキスト１を赤字・太字で表示</p>
<p class="clr_red wgt_bold">テキスト２を赤字・太字で表示</p>
<p class="clr_red wgt_bold">テキスト３を赤字・太字で表示</p>
テキスト１を赤字・太字で表示
テキスト２を赤字・太字で表示
テキスト３を太字・太字で表示
留意事項
特になし
広告