ヤマザキ秋のＨＴＭＬ祭りということで、みなさんもさぞＨＴＭＬと戯れていらっしゃることと思います。
秋と言っても晩秋も晩秋なわけですが、ウェブページのカラム分けにからむことを書いておこうと思います。
カラム分け、カラム分割？ 別の言い方をすると「段組み」とでも言いますかね。
つまりは縦方向にページを仕切るやつですね。
たまにネットで見掛ける「ページの端が見れない」とか、「カラムがあさっての位置にある」とかいうページに出くわすことがあります。そういう現象のページの場合はこういったカラム分けがうまいことされてない場合があるとかないとか
ではいざ、祭りでゅあ～
※ここに記述してる内容は正しくありません。正しい仕様はすべて他の解説サイトにお任せします。
[コンセプト]
ＨＴＭＬは適度にゆるく書く（きっちり書かない）
ＨＴＭＬはシンプルに書く
ＨＴＭＬは見通しがよくなるように書く（ＳＥＯの観点からも有利？）
■ＨＴＭＬ（固定）
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>title</title>
<link rel="stylesheet" type="text/css" href="column.css">
</head><body>
<div align="center"><div id="container">
<div id="header">header</div>
<div id="left">left</div>
<div id="main"><div class="pad">
main
</div></div>
<div id="right">right</div>
<br class="clr">
<div id="footer">footer</div>
</div></div>
</body></html>
上記ＨＴＭＬを一切改変せずに後述のＣＳＳだけを書き換えて、いろんなカラムパターンを表示させまくりまクリスティー。
少し上記ＨＴＭＬを説明しておきます。
まず<DOCTYPE>は書きません。なぜならコンセプトに合わないからです。
<meta>でシフトＪＩＳ固定にしています。なぜなら私はシフトＪＩＳ表示派だからです。
<meta>によって、記述されている文字コードをブラウザに教えた後に日本語を含むかもしれない<title>～</title>がくる順番になります。当たり前か
スタイルシートを外部ファイルにするとコンセプトにも書いたように、見通しがよくなります。
表示部分全体を<div align="center">～</div>で囲っていますが、ホントならこれもＣＳＳに記述したいんですが、ブラウザ依存だったり見栄えがよくなかったりする記述になってしまうのでＨＴＭＬに固定で書くことにします。
因みに表示テストは「ＩＥ８」と「Ｆｉｒｅｆｏｘ３．５．５」で行いました。
■２カラム‐右（column.css）
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:500px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;display:none;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}
[表示結果]
「containerの幅650px = leftの幅150px + mainの幅500px」という足し算が成り立ちます。
「display:none」で使わないカラム消すわけやね
■２カラム‐左（column.css）
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;display:none}
#main{background-color:beige;width:500px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}
[表示結果]
「containerの幅650px = mainの幅500px + rightの幅150px」という足し算が成り立ちます。
これもカラム消し
■３カラム‐中央（column.css）
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:350px;float:left;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}
[表示結果]
「containerの幅650px = leftの幅150px + mainの幅350px + rightの幅150px」という足し算が成り立ちます。
このブログ自身がまさにこんな感じでしょうかね。面倒だからソース見てないけど
■３カラム‐右（column.css）
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:left;}
#main{background-color:beige;width:350px;float:right;}
#right{background-color:yellowgreen;width:150px;float:left;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}
[表示結果]
「containerの幅650px = leftの幅150px + rightの幅150px + mainの幅350px」という足し算が成り立ちます。
■３カラム‐左（column.css）
body{background-color:MistyRose;color:black;}
#container{text-align:left;width:650px;}
#header{background-color:lightskyblue;}
#left{background-color:salmon;width:150px;float:right;}
#main{background-color:beige;width:350px;float:left;}
#right{background-color:yellowgreen;width:150px;float:right;}
#footer{background-color:lightskyblue;}
.clr{clear:both;}
.pad{margin:10px 10px 60px 10px;line-height:160%;}
[表示結果]
うわぁああ、想定では「main」「left」「right」の順になって欲しかったけどこりゃあお手上げですなぁ
確か「position:absolute」とか使えばできたような気がするけど複雑化より少々ダメなシンプルを選ぶ宗教上の理由でこのへんでお開きとさせていただきます。