サイトを簡単につくるには！

サイトを簡単に作るにはどうしたら良いでしょうか？
それは、レイアウトを決めて作るのが、一番簡単です。
まずは、どんなレイアウトで、画面を配置するかです。
基本パターンは、以下の4パターンですかね！
①

ヘッダー
サイド メニュー	サイトメイン
フッター

②

ヘッダー
サイド メニュー	サイトメイン	サイド メニュー
フッター

③

ヘッダー
メニュー
サイド メニュー	サイトメイン
フッター

④

ヘッダー
メニュー
サイド メニュー	サイトメイン	サイド メニュー
フッター

私がよく使う のが①です。

どのように作るかわかりますか？

普通にhtml の本とか読むと大変難しいです。

そこで、画面を表に見立てて大きな表を作ります。後は各表の枠の中に書きたい事や付けたい物を並べるだけです。

私の場合は、ヘッダーとフッターは<div></div> で作ります。

表は、枠線を付けるか付けないかでイメージを変えられますし、基本は、枠線無しでサイドメニューの中に<div></div>を入れて枠線を付けるか、枠線ありの表を入れてしまう方法をとります。

サイトメインの中も、画面によって表で区切って表現したりします。

サイトメインの横に縦長の広告がでてる時などが、そうです。

この画面は、メインが広すぎるなって画面の時などに使います。

私のサイトは、情報が多いので、普通に表現すると、画面がすごくスクロールしてしまいます。それだと、せっかくの広告が流れてしまいます。そこで、メインの中にスクロールエリアを作成して全体のスクロールエリアを制限します。

私のアニメサイトのストーリーの枠と同じ方法で、<div></div> で縦のサイズを設定して、オートスクロール指定すれば、実現できます。縦の表示量が指定サイズ以上になるとスクロールします。

例）

<div style='height: 110px;border:1px solid #555;overflow: auto;' align='left'>

ここに書く内容がスクロールします

</div>

説明

height: 110px;

縦サイズ110ピクセル

border:1px solid #555;

境界線1ピクセル色#555 

overflow: auto;'

表示オーバー時はオートスクロール

align='left'

表示左詰め

こんな感じで作成していきます。