HTML_CSS_11 CSSで処理するかHTMLに設定するか

第10回でcss側でページ毎に色を変更する設定を説明しました。力技ですが、CSS側ではなくてHTML側でイレギュラー設定することも可能です。ただし、修正の場合は複数のファイルを編集することにナメので、あまりお薦めはしませんが、作例程度であれば許容範囲かと思い整理しました。

まず何をしたいのかを整理します。ここで変更したいのは［ID="content"］の背景色の変更だけなので、［rule.css］の以下の部分を削除あるいは［/*〜*/］で囲んでしまいます。

/* rule.css */

div#content_01 {

float: right;

height: 520px;

width: 75%;

background: #fc7ca9;

}

div#content_02 {

float: right;

height: 520px;

width: 75%;

background: #80acf2;

}

div#content_03 {

float: right;

height: 520px;

width: 75%;

background: #9acd32;

}

/* rule.css */

あとはそれぞれのファイル［menu01.html］〜［menu01.html］を修正します。修正部分は青字の部分です。

<!-- menu01.html>

<div id="content_01">

<!-- menu01.html>

　　　　↓

<!-- menu01.html>

<div id="content" style="background:#fc7ca9;">

<!-- menu01.html>

<!-- menu02.html>

<div id="content_02">

<!-- menu02.html>

　　　　↓

<!-- menu02.html>

<div id="content" style="background:#80acf2;">

<!-- menu02.html>

<!-- menu03.html>

<div id="content_03">

<!-- menu03.html>

　　　　↓

<!-- menu03.html>

<div id="content" style="background:#9acd32;">

<!-- menu03.html>

CSSスタイルの設定には、以下の様に優先順位があります。

1. HTMLタグ内にstyle属性を設定

2. ID

3. class

つまり、CSSで設定してもHTML側で今回の様にゴリ押しすれば、そちらが優先されると言うことになります。