●コンテンツ内容

●CSSを利用した段組み[3]

 固定配置と左マージンを使った段組みの作り方です。

【CSS】↓

.waku1 {
  position: absolute;
  left: 10px;
  border: solid 4px #ff00ff;
  width: 200px;
}
.waku2 {
  border: solid 4px #008000;
  width: 50%;
  margin-left: 220px;
}

【HTML】↓

<div class="waku1">divの要素内容</div>
<div class="waku2">divの要素内容</div>

【解説】↑↓

 最初の div要素(ブロック)に position: absoluteを指定し、さらに leftプロパティを使って、ページの左から 10pxの位置に固定配置しています。二つ目の div要素へは最初の div要素の幅 200pxとブロックとブロックとのすき間を追加し、計220pxの左マージン(margin)を設けています。つまり、ここのブロック(ボックス)の左マージンの基点はページ左端となっています。もし、ここのブロック(div要素)に左マージンを設けない場合は、テキストなどが左ブロックと重なってしまいます。

※左マージンはbody要素で指定することもできます。

※ここのページはbody要素で 5%の上マージンを指定していますが、左ブロックの上下位置は topプロパティを追加して調整してください。各ブラウザへのCSSの解釈の違いを避ける方法として、body要素に"margin-top: 0; padding-top :0;"(または、"margin: 0; padding: 0;")を指定し、かつ、左 div要素へ topプロパティの値として"0"を指定する方法があります。(以下のような感じになります。)

body {
 background-color: #000000;
 color: #ffffff;
 margin: 0;
 padding: 0;
}
.waku1 {
 position: absolute;
 top: 0;
 left: 0;
 border: solid 4px #ff00ff;
 width: 200px;
}
.waku2 {
 border: solid 4px #008000;
 width: 50%;
 margin-left: 210px;
}

 XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2005-2007 http://www.xml.vc/