段落(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 |