CSS指定によるカラム変更｜CSSソースの記述

現在地: Home » 上級スタイルシートレイアウト講座：目次 » CSS指定によるカラム変更

CSS指定によるカラム変更

1枚の外部CSSでトップページと下層ページのレイアウトを変更する指定です。

Blogでよく見かけるデザイン変更法ですが、ウェブサイトで指定する方法です。今回はトップページを3カラム、下層ページは2カラム左サイドバーに変更する解説です。

尚、下記サンプルは当サイトの「デザインテンプレート｜サンプル16」を使用しています。

各ページによるデザイン変更サンプル

XTML指定条件

今回はレイアウト変更が一目で分かるように「3カラムはwidth:830px;」「2カラムはwidth:760px;」と全体の幅も変更しています。

トップページの<body>に#column-three、下層ページの<body>には#column-two-leftとid属性を割り振っています。

本来、今回のように3カラムページが1ページだけであればトップページにのみ割り振ればよいのですが、分かりやすくするために下層ページにも割り振っています。

 ----- indexページ -----
<body id="column-three">
<div id="wrapper">
 省略
</body>
</html>

----- 下層ページ -----
<body id="column-two-left">
<div id="wrapper">
 省略
</body>
</html>

XHTMLファイルの変更は、上記の赤字部分の追加だけです。ベースとなるのは3カラム用のXHTMLで、下層ページも全く同じものです。

CSSの記述

子孫セレクタ指定の応用です。

今回はスタイルシートの記述は3カラムと2カラムの違いが分かるように、各ブロック毎に分けて記述しています。スタイルシートの記述はご自分の分かりやすい記述に置き換えて下さい。メンテナンス性を考えてなるべく見やすい記述を心がけましょう。

また、今回の記述ポイントは

共通部分の指定
3カラム用の指定
2カラム用の指定の3つに振り分けている点です。

直接変更に関係のない部分は解説を省いています。

#wrapper部分

#wrapper部分は、全体を包括し中央に寄せる指定がしてあるブロックです。

/* 共通指定 */
#wrapper{
text-align: left;
margin: 0 auto;
}

#column-three #wrapper{width: 830px;} /* 3カラム用の指定 */
#column-two-left #wrapper{width: 760px;} /* 2カラム用の指定 */

#column-threeが指定された<body>内の#wrapperは830pxになります。また#column-two-leftが指定された<body>内の#wrapperは760pxになります。

▲Top

#container部分

#container部分は、#contentsと#left-sidebarを包括し、かつ#right-sidebarと対になり左寄せ指定(float: left;)がしてあります。

/* 共通指定 */
#container{float: left;}

#column-three #container{width: 650px;} /* 3カラム用の指定 */
#column-two-left #container{width: 100%;} /* 2カラム用の指定 */

共通事項として#containerは左に回り込みを指定しています。#column-threeが指定された<body>内の#containerは650pxになります。また#column-two-leftが指定された<body>内の#containerは100%と指定。

2カラム用の指定でwidth: 100%;としたのは、後に#right-sidebarを表示させないからです。(width: 100%;とはつまり#wrapperで指定したwidth: 760px;の事です。)

▲Top

#contents部分

/* 共通指定 */
#contents{
margin-bottom: 2em;
padding: 20px 20px;
float: right;
border-left: 1px solid silver;
border-right: 1px solid silver;
}

#column-three #contents{width: 428px;} /* 3カラム用の指定 */
#column-two-left #contents{width: 508px;} /* 2カラム用の指定 */

#column-threeが指定された<body>内の#contentsは428pxになります。また#column-two-leftが指定された<body>内の#contentsは508pxと指定。

428pxと508pxと半端な数値なのは「border」が指定してある為です。

▲Top

#right-sidebar部分

/* 3カラム用の指定 */
#column-three #right-sidebar{
margin-bottom: 2em;
padding: 20px 0 5em 10px;
width: 170px;
float: right;
}

/* 2カラム用の指定 */
#column-two-left #right-sidebar{display: none;}

#column-threeが指定された<body>内の#right-sidebarは上記指定のように表示されます。また#column-two-leftが指定された<body>内の#right-sidebarはdisplay: none;を指定する事でブラウザ上では表示されません。(XHTMLファイル上は記述が残っています。)

display: none;について、値をblockと指定した要素は「ブロック要素」inlineと指定した要素は「インライン要素」になります。noneを指定すると、ブラウザ上では表示されなく、且つ、続く要素などにも全く影響を与えません。

▲Top

CSS指定によるカラム変更まとめ

今回は、レイアウトに関して3カラムと2カラムの差がはっきりするような指定をしてみました。その他各ブロック内の細かな指定は実地訓練で覚えて下さい。

上記のように<body>要素へ指定すればいろいろな組み合わせが出来るので、どんどんトライしてみて下さい。

私個人的には、各ページ、ページでデザイン変更するのはあまりお薦めはしません。後々のメンテナンスを考えると、いくらCSSのメリットがあっても管理が結構大変です。「トップページ・サイトマップ・リンク集のデザイン」「コンテンツのデザイン」位の振り分けが良いかと考えます。

▲Top