メニュー > C11.2カラムレイアウトをつくる

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;}

実行結果


すると外枠に色が付きますね。




プログラムに関する小技がいっぱい メニューはこちら

inserted by FC2 system