2段組レイアウト(左サイド部の横幅を固定)

　このページの左側の部分の横幅は170ピクセルに指定して、右側の記事の横幅は指定せずに作成しています。
　左にお気に入りを出してその幅を変化させるとかして、ページの横幅を変えて動作を見てください。右側の記事の横幅がブラウザの横幅に応じて変化して、テキスト文字は横スクロール無しで見えるはずです。

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

　私は今まで、フレームを使うか、段組を全く使用せずに ホームページ を作成していました。段組をする場合、表(テーブルTABLE)を使用するか、そうでなければ、スタイルシート(CSS)でレイアウトをすることになります。
　一般的に表でページ全体を囲むとページの表示が遅くなるし、レイアウトの変更の時は全てのページを変更しなくてはならず、とても面倒になります。
　またスタイルシートでレイアウトをすると、ページの横幅やヘッダーの高さを絶対指定しなければうまくレイアウトできませんでした。
　私はホームページの横幅を絶対指定するのが一番いやだったのです。しかし、試行錯誤する中で、メインページの横幅を絶対指定しなくても、左右に分けた(段組した)ページをうまく作ることができましたので紹介します。
2008年6月

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

　本当はスタイルシートでフロート(float)機能を使って、左右に段組したページを作りたかったのですが、何度やってもうまくいきませんでした。
　うまくできるというサイトを参考に何度か作ってみましたが、インターネットエクスプローラではうまくいっても、他のブラウザではうまくいかないとか、その逆もありました。もちろんページの横幅を絶対指定すれば可能でした。
　結局、左サイド部分のページの横幅を固定して、読み込み位置を position:absolute で絶対指定してやりました。右側のメインページは上マージンと左右マージンを指定するだけでうまく表示させることができました。

HTMLファイルの内容

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

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

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

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

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

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

　この例で、メイン部分は上に5ピクセル、左に180ピクセル、右に10ピクセルの余白をとり、横幅は指定しませんでした。右に10ピクセルの余白を作ったのは、右端にも少し余裕を持たせたかったからです。
　左の広告部分は上と左に5ピクセルの余白をとり、横幅を160ピクセルとし表示位置を絶対指定しました。
　右側部分の左マージンは180ピクセル、右マージンは10ピクセル、右側部分の広告の最大横幅は728ピクセルなので、ブラウザの横幅が約920ピクセル以下では横スクロールバーが表示されます。広告を無視すればそれ以下の横幅でもホームページを支障なく読むことができます。
　また、ブラウザによっては標準で余白とパディングが異なるようです。細かい事が気になる人はCSSで配置と関係がある要素についてリセットして使った方が良いかもしれません。

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

　PHPまたはSSIを使用して外部ファイルを取り込んでメニューを作成したり、アフィリエイトプログラムを挿入したページを作成する方法があることを知ってから、この方法を採用しています。
　この方法を使うようになってから、ファイルの管理が非常に楽になりました。各ページに挿入したメニューやアフィリエイトスクリプトのメンテナンスが簡単になったからです。
　特に左側の広告ページは各ページ全く同じなので全ページ共通ファイルにして、インクルードして取り込みます。

　このようにして作ったページを表示して、ブラウザの横幅を変えるとそれに応じて表示の幅が最適になります。とても良い感じです。でもブラウザによって少しは表示が違いますが、そんな小さなことは気にしません。
　文字の大きさを変更しても何の問題もありません。テキスト文字を読むのには基本的に横スクロールの必要はありません。
　ブラウザの横幅がかなり狭くなってもテキスト文字を読むには、横スクロールしなくてもよいはずです。