ホームページレイアウトは、CSSでシンプル構築
ホームページレイアウトは2種類あります
ホームページのデザインの基盤となるレイアウトの構築法には、
大きく分けてテーブルレイアウトとCSSレイアウトの２つがあります。
複雑なテーブルレイアウト
テーブルレイアウトというのは<table>を使ってレイアウトを構築するのですが、そもそも<table>は、レイアウトを構築するためのタグではない上、複雑になりやすく、編集も管理も難しいので、私は好きじゃないです。ホームページ制作会社の中にはテーブルレイアウトで作るところがあるようですが、あれは複雑に作って、更新料を取るためのホームページ制作会社の策略じゃないかと思ってます（笑）
シンプルなCSSレイアウト
ほむつく講座がおすすめしているのは、<div>とCSS（スタイルシート）でシンプルに作るCSSレイアウトです。はじめは少しとっつきにくいですが、慣れると断然こっちの方が扱いやすく、管理も簡単です。
CSSレイアウトの構築方法
CSSレイアウトはXHTML/HTMLで空箱のような意味を持つ<div>タグをCSSで大きさや配置を指定して、レイアウトを構築します。
それでは最も基本的なホームページのレイアウトである、ヘッダー（header）、左コンテンツ（content）、右メニュー（side）、フッター（footer）のレイアウトの解説をしたいと思います。（→詳しい解説は初心者講座をご覧ください）
XHTML/HTMLの記述
全体を囲む<div>タグの中に、4つの<div>タグを記述して、各<div>タグにid要素を指定してください。（id要素というのは、タグへ名前を付けることができます）
</div>
CSS（スタイルシート）の記述
次に、CSSファイルには、各id要素に対しての記述範囲を記述し、それぞれの<div>タグへ大きさや配置を指定していきます。
基本的には、
- 「width」で<div>の横幅を指定
- 「float」を使って上下の<div>を左右に配置
- 「clear: both」で「float」を解除
これだけです。
width : 750px;
}
float: left;
width: 500px;
}
float: right;
width: 250px;
}
clear: both;
width: 750px;
}
レイアウトの崩れを防ぐＣＳＳレイアウト構築のポイント
CSSレイアウトはちょっとしたミスやホームページを見る人の環境（ブラウザ）によって「レイアウトが崩れる」といった問題が起きやすいです。そのため、ＣＳＳレイアウトは難しいと思う方がいるようですが、決してそんなことはありません。
レイアウトが崩れた場合、次の4つのポイントをチェックしてみてください。
- 横に並ぶ<div>タグの横幅の合計が全体の横幅以下の長さに設定する。
- 「float」の回り込み指定を、次の<div>へ「clear: both」を記述し解除する。
- 「clear: both」を指定した<div>には、横幅を指定する
- 「width」で横幅を指定した<div>には、「padding」は指定しない。
こんなヤツ！
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
必要なものは？
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー（利用者）の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。