メニュー > C11.2カラムレイアウトをつくる
→プログラムに関する小技がいっぱい メニューはこちら
ここでは、http://css.uka-p.com/2column/outline.htmlサイトを利用して、CSSを使って
2カラムレイアウトを作成してみようと思います。
○上記のサイトにのっているCSSです。
body { text-align:center; } #wrap { width:700px; text-align:left; margin:0 auto; } #inner { margin:0 10px; } |
width:700px が外枠の横幅をpxで指定
text-align:left は枠内の文字揃えを左に指定
#inner { margin:0 10px; } 左右の余白を10pxに指定
○上記のCSSを使ったHTML
<TITLE>2カラムレイアウトの練習</TITLE> <LINK rel="stylesheet" href="C11.css" type="text/css"> </HEAD> <BODY> <div id="wrap"> <div id="inner"> ここが左右の内枠 </div> </div> </BODY> |
「<div id="wrap">~</div>」が外枠
その実行結果が
これじゃよくわからないから、枠に色をつける。
さて、どうしたらいいのかな?
#wrapに「background-color:#ffcccc」を追加
body{text-align:center;} #wrap { background-color:#ffcccc; width:700px; text-align:left;margin:0 auto;} #inner{margin:0 10px;} |
実行結果
すると外枠に色が付きますね。