TOPページ >  スタイルシート(CSS)の記述 > タグを入れ子にして同じクラス/ID名を使い分ける

タグを入れ子にして同じクラス/ID名を使い分ける

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。

デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが、さらにさまざまな場面で文字の大きさや色、表示位置などを好みに合わせようとすると、IDやCLASSの指定も思いがけなく増えて、名前も長くなりがちです。

そんなときには、IDやクラスに親子関係を持たせて管理するのが便利です。
親子関係に当たるCLASSのスタイルシートの記述は 次のようになります。

.親のクラス名 .子のクラス名 { スタイル }
(注)親も子も、.(ドット)の部分は、IDであれば#(半角シャープ)です。

親のクラス(またはID)と子のクラス(またはID)の間には、半角スペースを入れてください。
使用例です。

<style type="text/css">
<!--
.sampleblock_1 {
width:150px;border:2px solid red;
background-color:white;
}
.sampleblock_1 .inner_a {
background-color:red;
color:yellow;padding:0 5px;
}
.sampleblock_1 .inner_b {
color:red;padding:0 5px;
}
.sampleblock_2 {
margin-top:10px;width:200px;
border:2px solid blue;
background-color:white;
}
.sampleblock_2 .inner_a {
background-color:blue;
color:aqua;padding:0 5px;
}
.sampleblock_2 .inner_b {
color:blue;padding:0 5px;
}
-->
</style>

<div class="sampleblock_1">
<div class="inner_a">サンプルブロック1内のA</div>
<div class="inner_b">サンプルブロック1内のB
<br>サンプルブロック1内のB</div>
</div>
<div class="sampleblock_2">
<div class="inner_a">サンプルブロック2内のA</div>
<div class="inner_b">サンプルブロック2内のB
<br>サンプルブロック2内のB</div>
</div>

このソースを表示させると、次のようになります。inner_a inner_b という同じ名前の CLASS が出現しますが、sampleblock_1samplebloack_2という別々のブロックタグの中に入れ子になっているため、それぞれ別のスタイルが適用されています。

サンプルブロック1内のA
サンプルブロック1内のB
サンプルブロック1内のB
サンプルブロック2内のA
サンプルブロック2内のB
サンプルブロック2内のB

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
スタイルシートでボタン風リンク文字を表示する
スタイルの共通部分をまとめて記述する
タグを入れ子にして同じクラス/ID名を使い分ける
見出しタグ(H1~H6)のスタイルを指定する
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
タグのスタイルを指定する
外部からスタイルシートを読み込む
ページ内で一回だけスタイルを使用する
複数のタグで同一のスタイルを指定する
一時的にスタイルシートを利用
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス