2段組レイアウト(メインの横幅を可変にする)

ホームページ(HP)の2段組レイアウトで、左サイド部の横幅を固定し、右側部分の横幅をレスポンシブに可変にしたページの作り方を解説しています。ホームページの横幅を絶対指定せずに左右に分けたページを作成する方法です。

メイン記事はレスポンシブ

このページの左サイドバーの横幅は160ピクセルに指定して、右側の記事の横幅は指定せずに作成しています。ページの横幅を変えて動作を見てください。右側の記事はレスポンシブに変化して全く横スクロールバーは出ません。広告はリアルタイムに変化しないので、そのためにスクロールバーが出ることがあります。

以前の私のHPレイアウト方法

私は今まで、フレームを使うか、段組を全く使用せずにホームページを作成していました。段組をする場合、表(テーブルTABLE)を使用するか、そうでなければ、スタイルシート(CSS)でレイアウトをすることになります。

一般的に表でページ全体を囲むとページの表示が遅くなるし、レイアウトの変更の時は全てのページを変更しなくてはならず、とても面倒になります。

また スタイルシート楽天 でレイアウトをすると、ページの横幅やヘッダーの高さを絶対指定しなければうまくレイアウトできませんでした。

私はホームページの横幅を絶対指定するのが一番いやだったのです。しかし、試行錯誤する中で、メインページの横幅を絶対指定しなくても、左右に分けた(段組した)ページをうまく作ることができましたので紹介します。

左右に2段組する方法(左サイド部の横幅を固定)

本当はスタイルシートでフロート(float)機能を使って、左右に段組したページを作りたかったのですが、何度やってもうまくいきませんでした。

うまくできるというサイトを参考に何度か作ってみましたが、インターネットエクスプローラではうまくいっても、他のブラウザではうまくいかないとか、その逆もありました。もちろんページの横幅を絶対指定すれば可能でした。

フロート(float)を使って段組レイアウトをして、画像にテキストを回り込ませて、その回り込みをclear:bothで解除すると、フロート(float)も解除されてしまいます。この為、フロートを使うと実質画像の回り込み解除が使えないということです。

結局、左サイド部分のページの横幅を固定して、読み込み位置を position:absolute で絶対指定してやりました。右側のメインページは上下左右のマージンを指定するだけでうまく表示させることができました。

HTMLファイルの内容

次のようにDIVタグでmain部分とside部分をそれぞれ囲んでやり、 id で表示場所を指定します。

<div id="main">メイン部分(右側の記事)</div>
<div id="side">サイド部分(左側の広告やメニュー)</div>

この順番にHTMLファイルを記述します。このように左側部分をファイルの後ろに持って来るのは、SEO(サーチエンジン最適化)ではとても効果があります。本文以外の重要でない部分は後ろに持って来るのがSEOの基本です。また、各ページの上のメニューはSEOの観点からは無い方が良いので無くしました。

また、スタイルシート(CSS)に対応していないブラウザの為にも、本文が先に来る方が見る人にとっても良いと思います。

外部スタイルシート(CSS)の内容

外部スタイルシートには次のように記述します。

#main {margin:5px 10px 10px 180px;}
#side {width:160px;position:absolute;top:5px;left:5px;}

この例で、メイン部分は上に0ピクセル、右に10ピクセル、下に10ピクセル、左に180ピクセルの余白をとり、横幅は指定しませんでした。右に10ピクセルの余白を作ったのは、右端にも少し余裕を持たせたかったからです。

左の広告部分は上と左に5ピクセルの余白をとり、横幅を160ピクセルとし表示位置を絶対指定しました。

右側部分の左マージンは180ピクセル、右マージンは10ピクセルです。ブラウザの横幅が約900ピクセル以下の横幅でもホームページを支障なく読むことができます。

また、ブラウザによっては標準で余白とパディングが異なるようです。細かい事が気になる人はCSSで配置と関係がある要素についてリセットして使った方が良いと思います。

PHPまたはSSIを使用し外部ファイルを取り込む

PHPまたはSSIを使用して外部ファイルを取り込んでメニューを作成したり、アフィリエイトプログラムを挿入したページを作成する方法があることを知ってから、この方法を採用しています。

この方法を使うようになってから、ファイルの管理が非常に楽になりました。各ページに挿入したメニューやアフィリエイトスクリプトのメンテナンスが簡単になったからです。

特に左側のサイドバーは各ページ全く同じなので全ページ共通ファイルにして、インクルードして取り込みます。

このようにして作ったページを表示して、ブラウザの横幅を変えるとそれに応じて表示の幅が最適になります。とても良い感じです。でもブラウザによって少しは表示が違いますが、そんな小さなことは気にしません。

文字の大きさを変更しても何の問題もありません。テキスト文字を読むのには基本的に横スクロールの必要はありません。ブラウザの横幅がかなり狭くなってもテキスト文字を読むには、横スクロールしなくてもよいはずです。

ホームページの横幅を絶対指定しないで、最大値を指定する方法

ホームページの横幅を絶対指定しないでホームページを作成すると横幅があまりにも大きくなると、とてもデザインが崩れるものです。そこでホームページの横幅の最大値を指定しました。

私のホームページで右側の部分はCSSで次のように、max-widthを指定しています。左側部分等も含めると約900ピクセル以上にはならないようになっています。

#main {max-width:710px;margin:5px 10px 10px 180px;text-align:left}
#side {max-width:160px;position:absolute;top:5px;left:5px;border:1px solid #888;text-align:center}

900ピクセル未満では、表示幅に応じて横幅が小さくなります。とても良い感じです。インターネットエクスプローラ7(IE7)の標準モードや、FirefoxやOperaでもうまく表示できます。IE7の互換モードでは横幅の最大値は無効となります。標準モードと互換モードについては、別にページを作っていますのでそちらをごらんください。

IE6以前のIEでもmax-widthを使えるようにする(minmax.js使用)

IE6以前のIEでもmax-widthを使えるようにする方法があります。

min-width　max-width　 min-height　max-heightのプロパティを利用可能にするminmax.jsライブラリをダウンロードしてヘッドタグ内に次の設定をして、minmax.jsを呼び出すだけです。

<script type="text/javascript" src="minmax.js"></script>

この方法は、minmax.js のファイル容量が4?5kB程度あり、各ページでこれを呼び出すとダウンロードに時間がかかってしまう欠点があります。

IE6以前のIEでもmax-widthを使えるようにする(* htmlハック)

IE6以前のIEでもmax-widthを使えるようにする別の方法があります。インターネットエクスプローラ7(IE7)以降の標準モードや、 FirefoxやOperaでは、前記のCSSを適用してやります。

IE6用にはCSSに追加してJavaScriptのexpressionメソッドを使用して適用する方法です。

expressionメソッドはIEに特有のもので他のブラウザでは無視され、「* html」スターハックというIE4?6だけに読み込ませるものを使用します。私が作っていたのは標準モードですので、次のように追加指定しました。

* html #main {width:expression(document.documentElement.clientWidth > 910? "730px":"auto");}

IEの標準モードでは「document.documentElement.clientWidth」として、IEの互換モードでは「document.body.clientWidth」としてください。これを間違えるとうまく動作しません。

また、「clientWidth > 910? "730px"」の数値の意味は「ブラウザの表示幅が910ピクセルより広い時は、右側の部分を730ピクセルにしなさい」という意味です。(910-180=730)