class属性について

スタイルシートを使ってみてかゆいところに手が届かない事に気付いたでしょうか?

 

たとえば同じpタグ全部ではなく一つだけ色を変えたい場合にどうすればいいのでしょう。

そこだけpタグを使って他はbrタグで回避?それは面倒です。

そんな時に使いたいのがclass属性です。

というよりもそんな時のためのclass属性と言っても過言ではありません。

属性なのでタグに付随します。書き方はこんな感じ。

<p class=”red”>XXXXX</p>

このpタグのclass属性は”red”ですと定義するわけです。

そして,スタイルシートの方は

.red {

color:red;

text-align:center;

}

みたいにします。最初の「.」ピリオドを忘れないように。

このピリオドで始まるスタイルシートの指定がこの名前のclassに適用するスタイルという意味です。

では,以下はどうなるでしょう?

<html>
<head>
<title>pのCSS設定</title>
<style type=”text/css”>
.red {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p class=”red”>赤文字</p>です<br>
<p>これも赤文字です?</p>
</body>
</html>

 

回答は次回にします。予想通りになるでしょうか?

 

今日のまとめ:

 

特定のclass属性(AAA)に適用するスタイルシートの書き方は

.AAA {

BBB:CCC;

DDD:EEE;

}

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です