「sectionタグで読み込むCSSを限定する」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
CSSでレイアウトを記述していく際に以前書いたCSSのプロパティが読み込まれ、デザインが思うようにいかないことがあります。
そんな中今日はHTML5で登場したsectionタグによって意図したCSSを読み込む方法を記述していきたいと思います。8月5日記事
~
~
目次
#contents
~
~
----
~
*よくある失敗例
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の方にも読み込まれてしまいます。
&color(red){対策は別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を限定的に読み込ませる方法にしていけば、記述も楽になってくると思います。
~
~
以上
CSSでレイアウトを記述していく際に以前書いたCSSのプロパティが読み込まれ、デザインが思うようにいかないことがあります。
そんな中今日はHTML5で登場したsectionタグによって意図したCSSを読み込む方法を記述していきたいと思います。8月5日記事
~
~
目次
#contents
~
~
----
~
*よくある失敗例
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の方にも読み込まれてしまいます。
&color(red){対策は別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を限定的に読み込ませる方法にしていけば、記述も楽になってくると思います。
~
~
以上
