TOP ＞ スタイルシート基本知識 ＞ クラスを使って、指定したところのみスタイルシートを適用する
クラスを使って、指定したところのみスタイルシートを適用する
セレクタに要素を指定してしまうと、そのスタイルシートを適用したWebページすべてで、 その要素のすべての箇所が指定した書式となります。
つまり、P要素の文字サイズを指定すると、そのWebページ内のすべての段落（<p>タグで囲んだテキスト） は指定したサイズになります。
ところが、実際にWebページを作っていくと、これではデザインするうえで面白くないことがあります。
つまり、スタイルシートを適用したところと適用したくないところが出てくることもありますし、同じ要素でも、 違う書式を反映させたいこともあります。
このような時に便利なのが『クラス』 です。クラスを使って定義した書式はどの要素にも適用できるので、 Webページ内のテキストを強調したい局面などに使うと便利です。
クラスの名前は任意でつけることができます。クラスをCSS内で設定する場合、その文字列の前に『.』をつけることになります。また、 HTML文書内でそのスタイルシートを適用する場合は、適用したい要素の開始タグに『class = "クラス名"』という属性をつけます。
クラスを使って、 指定したところのみスタイルシートを適用する
【スタイルシート】
.クラス名｛プロパティ：値; プロパティ：値; ・・・・｝
【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"> <!-- .kyotyo{ background-color: yellow; color: red; border-bottom: 3px solid; } --> </style> </head> <body> <h1>クラス「kyotyo」を指定しています。</h1> <h1>内容は背景色を黄色・文字色を赤・下部に線を入れています。</h1> <h1 class="kyotyo"><h1>タグで指定するとこのように適用されます。</h1> <p class="kyotyo"><p>タグでもクラスを指定することで、同じ書式を適用できます。</p> </body> </html> |
[
スタイルシート基本知識 ]
