2カラム・3カラムレイアウトの作成、サイトのセンタリング

FC2ブログマニュアル

現在パソコン版のマニュアルを表示中

カラムとは？

「カラム」とは、ブログを何列にするかということです。
サイドバーを両側に配置したものを3カラム、片方にのみ配置したものを2カラム、
サイドバーなどに分割しない中央部だけのレイアウトを1カラムと言います。
その他、変則カラムもあります。

テンプレート_9

2カラムレイアウトの作成　↓
3カラムレイアウトの作成　↓
サイトのセンタリング　↓

2カラムレイアウトの作成

公式テンプレートでもお馴染みの2カラムレイアウトの作成方法を説明します。
手法は複数ありますが、今回は比較的安易であるコンテンツの回り込みを利用した
カラムレイアウトを紹介します。

layout-2

CSS（スタイルシート）部分は以下のようになっています。

HTML部分は下記のようになっています。

<body>
<div id="container">
<div id="branding">ヘッダー部の内容</div>
<div id="primary-column">記事などの内容</div>
<div id="secondary-column">メニューなどの内容</div>
<div id="siteinfo-legal">フッター部の内容</div>
</div>
</body>

Internet Explorerの適用範囲にご注意を！

Windows版のInternet Explorer 4.0～5.5と6.0の互換モードでは
Widthプロパティとheightプロパティの適用される範囲が、標準的な仕様とは異なっています。
本来はボックスの内容領域の幅や高さを設定するプロパティですが、
上記Internet Explorerでは、ボーダーとパディングの値を含んだ領域の幅や高さとして解釈されます。
特にきっちりとしたデザインで、ボーダーやパディングを設定すると
レイアウトの崩れを起こす原因となりますのでご注意ください。

boxmodel

解決策としては、誤差を許容できるレイアウトで設計することやブラウザーのバグを利用した
ボックスモデルハックと呼ばれるテクニックを利用することで、誤差を修正することができます。
ここでは詳しく書きませんが、手法が数種類ありますので興味がある方はGoogleなどの
検索エンジンでボックスモデルハックで検索して、自分の使いやすい方法を見つけてください。

その他、大枠であるcontainer部分に幅を指定し忘れると、primary-columnとsecondary-columnが
正しく回り込みを行うことができません。忘れずに幅を指定してください。

フッター部分であるsiteinfo-legalで回り込みの解除を行ってください。

3カラムレイアウトの作成

いろいろとカスタマイズを行い情報量が増えてくると3カラムレイアウトが便利です。
前述の2カラムレイアウトのアレンジで実現できます。

layout-3

CSS（スタイルシート）部分は以下のようになっています。

body {
text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}
div#container {
width : 740px; /* コンテンツ幅を740pxに設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
}
div#wrapper {
float : left; /* ラッパー（プライマリーカラム＋セカンダリーカラム）を左側に回り込ませる */
width : 540px; /* 幅を540px（340px＋200px）に設定 */
}
div#primary-column {
float : right; /* プライマリーカラム（記事など）を右側に回り込ませる */
width : 340px; /* 幅を340pxに設定 */
}
div#secondary-column {
float : left; /* セカンダリーカラム（メニューなど）を左側に回り込ませる */
width : 200px; /* 幅を200pxに設定 */
}
div#extra-column {
float : right; /* エクストラカラム（掲示板など）を右側に回り込ませる */
width : 200px; /* 幅を200pxに設定 */
}
div#siteinfo-legal {
clear : both; /* すべての回り込みの解除 */
}

HTML部分は下記のようになっています。

<body>
<div id="container">
<div id="branding">ヘッダー部の内容</div>
<div id="wrapper">
<div id="primary-column">記事などの内容</div>
<div id="secondary-column">メニューなどの内容</div>
</div>
<div id="extra-column">掲示板などの内容</div>
<div id="siteinfo-legal">フッター部の内容</div>
</div>
</body>

HTMLにはwrapper→primary-column→secondary-column→extra-columnの順で記述し、
レイアウト位置をスタイルで設定することで、CSS未対応のブラウザーや音声ブラウザーなどでも
一番読んで欲しい記事部分を一番最初に表示することができます。

3カラムレイアウトも2カラムレイアウト同様、ボーダーやパディングを与える場合には
ボックスモデルハックを施す必要がありますので注意してください。

サイトのセンタリング

テンプレートによっては最初からセンタリングされたものもありますが、
代表的な手法を使って説明します。

layout-1

よく使われる手法としてコンテンツ全体をブロックレベル要素にて囲い、
マージンを自動設定にすることによりブラウザーの画像サイズから値を算出し、
結果的に左右のマージンが等しくなりセンタリングされるという方法です。

CSS（スタイルシート）部分は以下のようになっています。

div#container {
width : 740px; /* コンテンツ幅を740pxに設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
}

HTML部分は以下のようになっています。

<body>
<div id="container">
記事やメニューなどのコンテンツ部分を記述する
</div>
</body>

しかし古いバージョンのブラウザーや、Windows版Internet Explorerの互換モードでは
マージンの値にAUTOを指定してもセンタリングしてくれません。
そこでInternet Explorerのバグを利用します。

通常は、テーブルやdiv要素のようなブロックレベル要素をセンタリングするには、text-alignは使いません。
text-alignプロパティは、インライン要素の位置揃えを指定するためのものだからです。
しかしWindows版のInternet Explorerはバグにより、text-alignで
ブロックレベル要素もセンタリングしてしまいます。

前述の設定をこのように変更することで、古いブラウザーやInternet Explorerでも
センタリングを行うことができます。

マニュアル一覧を見る »