ページ構成

段落(pタグ)もボックスに見なして設定できます!
カラーリスト(ブラウザ対応色名)
サイズ指定単位リスト
【第15回】…ページの中身をブロック分け/ブログ風3カラムのページ作成?

1.ページの周りに余白を設ける

●指定例

body
{
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;

}
margin:余白
left:左側
right:右側
サイズ指定単位リスト

2.ページ構成(ブロック分け)

ページ構成は、ボックスの集団をブロックで固めて配置を決め、整理整頓♪

【第15回】…ページの中身をブロック分け/ブログ風3カラムのページ作成?

●webページのhtmlモードで
各タグの集合をブロック分けして、そのブロックに名前を付けて区別する。
<div></div>のセットで仕切る
<div id="ID名(ブロックの名前)">中身</div>
※中身には、見出しとか本文とか画像とか複数OK

例:
●1ページをmainという名前のブロックmenuという名前のブロックに分けて仕切った場合・・・

<div id="main">
文章、画像など
</div>
<div id="menu">
リンクボタンなど
</div>
●スタイルシート
div#main {
width: 70%;
float: left;
}

div#menu {
width: 24%;
float: left;
margin-left: 1em;
}
div#main  ID名mainとつけたブロックについてと宣言
{ 設定内容記述はじめ
width: 70%; スペース幅を、ページ全体の70%使うことを宣言
float: left; ブロックの回り込みを左寄せで設定
} 設定おわり
div#menu  ID名menuとつけたブロックについてと宣言
{ 設定内容記述はじめ
width: 24%; スペース幅を、ページ全体の24%使うことを宣言(pxで実寸の指定も可)
float: left; ブロックの回り込みを左寄せで設定
margin-left: 1em; mainブロックとくっついた表示を避ける為、
menuブロックの左側に1文字分余白を設ける
くっつけて表示がいい場合は不要
} 設定おわり

※注意※
floatプロパティを使う時は、必ず横幅のwidthプロパティもセットで指定
参照【第15回】…ページの中身をブロック分け/ブログ風3カラムのページ作成?

3.ブロック別にそのエリアを装飾

2.でブロック別に分けたID名を宣言して、背景色、背景画像、枠線、ブロック内の文字指定、余白、回り込みなどなどを指定可

参照:[箇条書き(リスト)]4.メニュー部分を装飾

4.ブロックにスクロールバーをつける

2.でブロック別に分けたID名を宣言して、そのブロックの表示高さを指定してスクロールバーをつけ、だらだらと長いメニューであっても、決めた枠内に収まらせる。
●使用例
※div#menuの指定に追記

height: 300px;
overflow: auto;

そのブロックの表示高さを指定
それ以上あった場合の指定
auto:必要な時だけスクロールバーを表示
scroll:常にスクロールバーを表示
hidden:はみ出した部分を表示しない
※上の指定の場合の見本ページ
 見本ページは、スクロールバーの設定も div#menu に指定して、ページのスクロールバーの色とは変えてみました

※また、内容が少なく、300pxの高さがなくても、heightで指定すると、その高さの分は背景色などmenuの設定が反映される。

※この事を応用して、メイン部分とメニュー部分のエリアの高さをほぼ合わせることも可能
  →参考ページ

また、反対に長さ(高さ)のあるメインの部分をメニューの高さに合わせることも可能。
この場合、高さを両方指定して合わせ、内容がたくさんあって長いメインの方にスクロールバーをつける。)
  →参考ページ2