CSSを使うメリットはレイアウト変更が素早く簡単にできるです。
まず、本来の設定画面です。ここでは簡単な処理としてメニューとメインコンテンツの位置関係を逆に設定してみます。
処理としては［float］設定の左右を変更するだけです。
/* rule.css */
div#side_menu {
float: left;
height: 520px;
width: 25%;
background: #63dada;
}
div#content {
float: right;
height: 520px;
width: 75%;
background: #4ff1ae;
}
/* rule.css */
↓修正部分は青字の部分です。
/* rule.css */
div#side_menu {
float: right;
height: 520px;
width: 25%;
background: #63dada;
}
div#content {
float: left;
height: 520px;
width: 75%;
background: #4ff1ae;
}
/* rule.css */
では、index.htmlのみ元の状態で、それ以外は左右を変更したい場合は・・・元々のCSSで複製していたときの状態（content01〜03）を個別に変更する方法が考えられます。
/* menu01.html 〜menu03.html*/
<div id="side_menu">
/* menu01.html 〜menu03.html*/
/* rule.css */
div#side_menu02 { /* div#side_menu02を追加 */
float: left;
height: 520px;
width: 25%;
background: #63dada;
}
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 */
↓修正部分はdiv#side_menu02を追加の追加と青字の部分です。
/* menu01.html 〜menu03.html*/
<div id="side_menu02">
/* menu01.html 〜menu03.html*/
/* rule.css */
div#side_menu02 {
float: right;
height: 520px;
width: 25%;
background: #63dada;
}
div#content_01 {
float: left;
height: 520px;
width: 75%;
background: #fc7ca9;
}
div#content_02 {
float: left;
height: 520px;
width: 75%;
background: #80acf2;
}
div#content_03 {
float: left;
height: 520px;
width: 75%;
background: #9acd32;
}
/* rule.css */
しかし、よく考えれば、デフォルト設定を全て左右逆に変更し、index.htmlだけ元に戻す設定もアリですね。いやもその方が分かり易いです。
/* rule.css */
div#side_menu {
float: right;
height: 520px;
width: 25%;
background: #63dada;
}
div#content {
float: left;
height: 520px;
width: 75%;
background: #fc7ca9;
}
/* rule.css */
<!-- index.html>
<div id="side_menu">
<div id="content">
<!-- index.html>
↓
<!-- index.html>
<div id="side_menu" style="float:left;">
<div id="content" style="float:right;">
<!-- index.html>
もしfloatだけでなく背景色も変更したい場合は以下の様に記述します。
<!-- index.html>
<div id="side_menu" style="background:#63dada; float:left;">
<div id="content" style="background:#4ff1ae; float:right;">
<!-- index.html>
こうなってくると、だんだん複雑に見えるようになるので以下の様に記述すると見直したときに混乱しないです。
<!-- index.html>
<div id="side_menu"
style="background:#63dada;
float:left;">
<div id="content"
style="background:#4ff1ae;
float:right;">
<!-- index.html>
HTMLやCSSの記述は、後のことも考えて処理する習慣を付けることが大切です。
