TOP ＞ スタイルシート基本知識 ＞ ある要素に限定したクラスを使う
ある要素に限定したクラスを使う
CSSのキモともいえるクラスですが、特定の要素にだけ適用できるクラスを設定することもできます。
”クラスを使って、 指定したところのみスタイルシートを適用する”ではクラスを紹介しましたが、この方法だと、 HTML内のどの要素に指定しても適用することができます。
特定の要素にだけ使えるクラスを作成した場合もあります。
ある要素に限定したクラスを使う
【スタイルシート】
要素名.クラス名｛プロパティ：値; プロパティ：値; ・・・・｝
【HTML】
<要素名 class="クラス名"> ・・・・ </要素名>
”ある要素に限定したクラスを使う”のサンプルはコチラをクリック！
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>ある要素に限定したクラスを使うのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1.kyotyo{ background-color: yellow; color: red; border-bottom: 3px solid; } --> </style> </head> <body> <h1>クラス「kyotyo」をh1要素に設定しています。</h1> <h1>内容は背景色を黄色・文字色を赤・下部に線を入れています。</h1> <h1><h1>タグでクラスを指定していないとこのようにスタイルシートは適用されません。</h1> <h1 class="kyotyo"><h1>タグでクラスを指定するとこのように適用されます。</h1> <p class="kyotyo"><p>タグでクラスを指定しても、スタイルシートは適用されません。</p> </body> </html> |
[
スタイルシート基本知識 ]
