レベル８：複数のカラムを作ろう
複数のカラムはスタイルシートでそれぞれの幅の広さや背景色などの属性を定義し、
htmlソースで<div>タグを使って呼び込みます。
style.cssの中身
*{padding:0px;margin:0px;}
body{background-color:#bcf9b1;}
#base{background-color:#ffffff;width:800px;margin:5px auto;}
#head{width:800px;background-color:#55f87c;}
#bottom{
width:800px;
background-color:#55f87c;
font-size:12px;
padding:10px 0px;
text-align:center;}
h1{
font-size 20px;
padding:5px;
margin:2px;
}
h2{
font-size:14px;
padding:0px 5px;
margin:0px 2px;
}
h3{
font-size:19px;
background-color:#55f87c;
padding:1px;
margin:1px;
}
.left{
float:left;
width:400px;
background-color:#ffdffb;
}
.right{
float:right;
width:400px;
background-color:#dffffe;
}
.reset{
clear:both;
}
.none{
display:none;
}
↑ここで新しくfloatという言葉がでてきました。
これは「指定したところに回り込め！」と言う意味になります。
leftなら左端に、rightなら右端に『解除』の命令が出るまで回り込み続けます。
clear:bothとは回り込んでいる状態の『解除』命令で、
display:noneとは何でもいいから意味のない文字列を入れたいときに使います。
＜タグ＞から＜／タグ＞までの間は
必ず何かしらの文字列が入っていなければならないというルールがあり、
何も入れる必要のない場合でも上記のように意味のない文字列を入れる必要性に迫られる事があります。
index.htmlの中身
<div id="base">
<div id="head">
<h1>
このホームページの題名
</h1>
<h2>
このホームページのサブタイトル
</h2>
</div>
<div class="left">
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の２行目を入れる。やっぱり文章はなんでもいい。<br />
本文の３行目を入れる。やっぱり文章はなんでもいい。
</p>
</div>
<div class="right">
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の２行目を入れる。やっぱり文章はなんでもいい。<br />
本文の３行目を入れる。やっぱり文章はなんでもいい。
</p>
</div>
<div class="reset"><div class="none">リセット</div></div>
<div id="bottom">
<div style="padding-bottom:20px;">
当サイトはリンクフリーです。<br />
当サイトの内容を無断で複製・転載することはご遠慮願います。
</div>
copyright (c) 作った人の名前 All right reserved.
</div>
</div>
↑リンク関連はこの段階ではウザいだけなので消してしまいましょう。
lev2.htmlファイルもゴミ箱に捨ててしまって構いません。
上記のように打ち込んで行くと、上手くいけばブラウザでは概ね
この様な表示のされ方をするハズです。
今回は分かりやすいように背景色に薄い色をつけてみましたが、
勿論、#ffffffで白色の背景色にすることもできます。
３カラムにするには幅の広さの合計が
baseで設定した横幅800ピクセルをオーバーしないように回り込む枠を増やせばそれで解決です。
left1・・・left2・・・right・・・とでもすれば良いのではないでしょうか？
style.cssの中身
*{padding:0px;margin:0px;}
body{background-color:#bcf9b1;}
#base{background-color:#ffffff;width:800px;margin:5px auto;}
#head{width:800px;background-color:#55f87c;}
#bottom{
width:800px;
background-color:#55f87c;
font-size:12px;
padding:10px 0px;
text-align:center;}
h1{
font-size 20px;
padding:5px;
margin:2px;
}
h2{
font-size:14px;
padding:0px 5px;
margin:0px 2px;
}
h3{
font-size:19px;
background-color:#55f87c;
padding:1px;
margin:1px;
}
.left{
float:left;
width:
200px;
background-color:#ffdffb;
}
.right{
float:right;
width:
200px;
background-color:#dffffe;
}
.left2{
float:left;
width:400px;
background-color:#fffee8;
}
.reset{
clear:both;
}
.none{
display:none;
}
index.htmlの中身
<div id="base">
<div id="head">
<h1>
このホームページの題名
</h1>
<h2>
このホームページのサブタイトル
</h2>
</div>
<div class="left">
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の２行目を入れる。やっぱり文章はなんでもいい。<br />
本文の３行目を入れる。やっぱり文章はなんでもいい。
</p>
</div>
<div class="left2">
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の２行目を入れる。やっぱり文章はなんでもいい。<br />
本文の３行目を入れる。やっぱり文章はなんでもいい。
</p>
</div>
<div class="right">
<h3>
ここに見出しを入れる
</h3>
<p>
ここに本文を入れる。文章はなんでもいい。<br />
本文の２行目を入れる。やっぱり文章はなんでもいい。<br />
本文の３行目を入れる。やっぱり文章はなんでもいい。
</p>
</div>
<div class="reset"><div class="none">リセット</div></div>
<div id="bottom">
<div style="padding-bottom:20px;">
当サイトはリンクフリーです。<br />
当サイトの内容を無断で複製・転載することはご遠慮願います。
</div>
copyright (c) 作った人の名前 All right reserved.
</div>
</div>
↑のように打ち込むorコピペでこさえたhtmlソースとスタイルシートで
index.htmlをダブルクリックすると
今度は３カラムのテンプレートができあがり。
言うまでもないことかも知れませんが、
index.htmlとstyle.cssのファイルは同一のフォルダの中になければ上手くいきません。
これはサーバーにアップロードした後も同じです。
これで複数カラムのテンプレートが完成した！！！
これでいつか貴方が本格的にホームページを作ろうと思ったときに、
このサイトにアップされているソースをコピペすれば
いつでもこの状態からホームページ作りを始めることができます。
でも、このままではイマイチ見栄えの良さに欠ける印象が残ります・・・。
次のページからはもっと
色んな（無料）ツールを駆使してヴィジュアル面にも凝った
見目麗しいホームページ作りをしていきましょう。
＞＞レベル９：便利な（無料）ツールを集めようへ続く