nicepaper @ ウィキ
nicepaper @ ウィキ

CSSでレイアウトを記述していく際に以前書いたCSSのプロパティが読み込まれ、デザインが思うようにいかないことがあります。 そんな中今日はHTML5で登場したsectionタグによって意図したCSSを読み込む方法を記述していきたいと思います。8月5日記事

目次




よくある失敗例

HTML
page1.html 

略
<link rel="stylesheet" type="text/css" href="style.css">
略
<body>
<div id="contents">
<dl>
<dt>なんちゃら</dt></dd>なんちゃら</dd>
<dt>なんちゃら</dt></dd>なんちゃら</dd>
</dl>
</div>

page2.html 

略
<link rel="stylesheet" type="text/css" href="style.css"><!--page1と同じCSSを読み込む-->
略
<body>
<div id="contents"><!--以前の書いたddやdtとは別のデザインを読み込みたいのに・・・-->
	<dl>
	<dt>なんちゃら1</dt></dd>なんちゃら1</dd>
	<dt>なんちゃら1</dt></dd>なんちゃら1</dd>
	</dl>
</div>

CSS 

#contents dl dt{
background:#F00;
}
#contents dl dd{
background:#0F0;
}

としてしまうと、page2はpage1のcontentsCSSの方にも読み込まれてしまいます。 対策は別CSSファイルを読み込むという方法がありますが、CSSファイルがいっぱいになりすぎてしまうと管理も大変になります。そこでせっかくHTML5でsectionタグが出てきたのですから、sectionタグを使ってCSSを管理していきたいと思います。

sectionタグで構造をわかりやすく、CSSもわかりやすく。

クラスやidを明示的に指定すればよいのですが、限定的にコードを読み込ませたい場合はsectionタグの中だよということをCSSで記述していきます。
HTML
page1.html 

略
<link rel="stylesheet" type="text/css" href="style.css">
略
<body>
<div id="contents">
	<section id="area1">
		<dl>
			<dt>なんちゃら</dt></dd>なんちゃら</dd>
			<dt>なんちゃら</dt></dd>なんちゃら</dd>
		</dl>
	</section>
</div>

page2.html 

略
<link rel="stylesheet" type="text/css" href="style.css">
略
<body>
<div id="contents">
	<section id="area2">
		<dl>
			<dt>なんちゃら1</dt></dd>なんちゃら1</dd>
			<dt>なんちゃら1</dt></dd>なんちゃら1</dd>
		</dl>
	</section>
</div>
</body>

CSS 

section#area1 dl dt{
	background:#F00;
}
section#area1 dl dd{
	background:#0F0;
}
section#area2 dl dt{
	background:#00F;
}
section#area2 dl dd{
	background:#FF0;
}

こんな感じで書いていけば限定的なCSS読み込みが実現可能になってきます。

まとめ

CSSを記述していく際にsectionタグを使って、構造を明確にし、さらにCSSを限定的に読み込ませる方法にしていけば、記述も楽になってくると思います。

以上

「sectionタグで読み込むCSSを限定する」をウィキ内検索
最終更新：2015年08月05日 16:20