- レイアウト(段組)
-
スタイルシートで段組をしよう
以下のような段組を作成したいとすると、
これはtableタグを使用して書くこともできたが、現在一般的に使われいるのは、
スタイルシートというものを使用した書き方です。
スタイルシートについて詳しくはこちら
スタイルシートで段組を行う場合は次のように考える
a,b,c,d,eの5ブロックがあると考え、それぞれのブロックを別々に作成し、それらをスタイルシートで段組を行う
htmlで書かれたこれら5ブロックをCSS(ｽﾀｲﾙｼｰﾄ)で配置するというやり方です。
いくつか方法はありますが、今回はfloatというのを使用した方法を説明します。
floatとは簡単に言うとブロックbの右側にブロックc回りこませるというようなやり方です
以下のような書き方をします。
-
<div id="b">
ブロックb
</div>
<div id="c">
ブロックc
</div>
-
#b {
width:200px;
float:left;
}
-
これで、ブロックbを左に寄せてブロックcを右に回り込ませることが可能になります。
しかし、これだけだと、bよりもcの方が縦に大きかった場合は回り込むだけなので、はみ出た部分はbの下側に来てしまいます。
それをそれを防ぐためにブロックcの左側にブロックbだけの余白を設けておきましょう。
今説明したことでこの段組が可能になります。
それではブロックごとに見て行きましょう。
まずはブロックaここは特に何もしなくていいですが、段組をきれいにするためにwidthだけ設定しておきます。
-
<div id="a">
ブロックa
</div>
-
#a {
width:900px;
}
-
次にブロックbは、右側にブロックcがくるので、widthとfloatを設定します。
-
<div id="b">
ブロックb
</div>
-
#b {
width:200px;
float:left;
}
-
次にブロックcですが、ブロックcはブロックbの右に回りこんで、ブロックdを右側に回り込ませる必要があるので、
width,float,margin-leftを設定してます。
-
<div id="c">
ブロックc
</div>
-
#c {
width:500px;
float:left;
margin-left:200px
}
-
次のブロックdは、特に何もやることはないので、widthだけを設定しておきます
-
<div id="d">
ブロックd
</div>
-
#d {
width:200px;
}
-
最後のブロックeここも特に何もやることはないのでwidthだけを設定しておきます
-
<div id="e">
ブロックe
</div>
-
#e {
width:900px;
}
-
最後にこれらをまとめて書いておくと、
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="a">
ブロックa
</div>
<div id="b">
ブロックb
</div>
<div id="c">
ブロックc
</div>
<div id="d">
ブロックd
</div>
<div id="e">
ブロックe
</div>
<body>
<html>
-
style.css
-
#a {
width:900px;
}
#b {
width:200px;
float:left;
}
#c {
width:500px;
float:left;
margin-left:200px
}
#d {
width:200px;
}
#e {
width:900px;
}
