段組風レイアウト
疑似テーブル
display:tableを用いる
大見出し
左サイドバー
ああああああああああああああああ
ああああああああああああああああ
コンテンツ－いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
右サイドバー
著者情報
<div style="width:12em;">大見出し</div>
<div style="display:table">←このボックスはなくしても良い
<div style="display:table-cell;width:4em;">左サイドバー</div>
<div style="display:table-cell;width:4em;">コンテンツ</div>
<div style="display:table-cell;width:4em;>右サイドバー</div>
</div>
<div style="width:12em">著者情報</div>
<div style="display:table">←このボックスはなくしても良い
<div style="display:table-cell;width:4em;">左サイドバー</div>
<div style="display:table-cell;width:4em;">コンテンツ</div>
<div style="display:table-cell;width:4em;>右サイドバー</div>
</div>
<div style="width:12em">著者情報</div>
tableタグを用いたのと同様のレイアウトがより簡素にできる。
コンテンツの順序の入れ替えはできない。
浮動化
floatを用いる
大見出し
右サイドバー
コンテンツ－いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
左サイドバー
ああああああああああああああああ
ああああああああああああああああ
著者情報
<div style="width:12em;">大見出し</div>
<div style="float:right;width:4em;">右サイドバー</div>
<div style="float:right;width:4em;">コンテンツ</div>
<div style="float:right;width:4em;">左サイドバー</div>
<div style="cleart:right;width:12em;">著者情報</div>
<div style="float:right;width:4em;">右サイドバー</div>
<div style="float:right;width:4em;">コンテンツ</div>
<div style="float:right;width:4em;">左サイドバー</div>
<div style="cleart:right;width:12em;">著者情報</div>
左右のボックスの入れ替えが容易だがそれ以上の入れ替えはできない。
画面幅によってレイアウトが変わることがある(スマホでは読みやすくなる)。
相対位置指定
position:relativeを用いる
大見出し
コンテンツいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
右サイドバー
左サイドバー
ああああああああああああああああ
ああああああああああああああああ
著者情報
<div>
<div style="width:12em;">大見出し</div>
<div style="position:relative;left:4em;height:16em;width:4em;">コンテンツ</div>
<div style="position:relative;top:-16em;left:8em;height:3em;width:4em;">右サイドバー</div>
<div style="position:relative;top:-19em;width:4em;">左サイドバー</div>
<div style="position:relative;top:-11em;width:12em;">著者情報</div>
</div>
<div style="width:12em;">大見出し</div>
<div style="position:relative;left:4em;height:16em;width:4em;">コンテンツ</div>
<div style="position:relative;top:-16em;left:8em;height:3em;width:4em;">右サイドバー</div>
<div style="position:relative;top:-19em;width:4em;">左サイドバー</div>
<div style="position:relative;top:-11em;width:12em;">著者情報</div>
</div>
項目の順序のみならず、位置も含めて自在にレイアウトできる。
ボックスの高さ(コンテンツの量)が決まっていないとレイアウトに苦心する。
絶対位置指定
position:absoluteを用いる
大見出し
コンテンツいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
右サイドバー
左サイドバー
ああああああああああああああああ
ああああああああああああああああ
著者情報
<div style="position:relative;">
←どこかに起点になるコンテナは必要だがbodyを使っても良い
<div style="width:12em;">大見出し</div>
<div style="position:absolute;left:4em;width:4em;">コンテンツ</div>
<div style="position:absolute;left:8em;width:4em;">右サイドバー</div>
<div style="position:absolute;width:4em;">左サイドバー</div>
<div style="position:absolute;top:17em;width:12em;">著者情報</div>
</div>
←どこかに起点になるコンテナは必要だがbodyを使っても良い
<div style="width:12em;">大見出し</div>
<div style="position:absolute;left:4em;width:4em;">コンテンツ</div>
<div style="position:absolute;left:8em;width:4em;">右サイドバー</div>
<div style="position:absolute;width:4em;">左サイドバー</div>
<div style="position:absolute;top:17em;width:12em;">著者情報</div>
</div>
項目の順序のみならず、位置も含めて自在にレイアウトできる。
ボックスの高さ(コンテンツの量)が決まっていないとレイアウトに苦心する。
flex-box
flexboxを用いる
大見出し
コンテンツいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
右サイドバー
左サイドバー
ああああああああああああああああ
ああああああああああああああああ
著者情報
<div style="width:12em;">大見出し</div>
<div style="display:flex;">←コンテナブロック必須
<div style="order:2;width:4em;">コンテンツ</div>
<div style="order:3;width:4em;">右サイドバー</div>
<div style="order:1;width:4em;">左サイドバー</div>
</div>
<div style="width:12em;">著者情報</div>
<div style="display:flex;">←コンテナブロック必須
<div style="order:2;width:4em;">コンテンツ</div>
<div style="order:3;width:4em;">右サイドバー</div>
<div style="order:1;width:4em;">左サイドバー</div>
</div>
<div style="width:12em;">著者情報</div>
項目の入れ替えなど比較的自由度が高くかつシンプルにソースが書ける。
画面幅によってレイアウトを変えられる。
古いブラウザでは未対応のものがある。