最短ホームページテンプレートのカスタマイズはどこまで出来る?

CSSで2カラム



2カラムにしてみました・・と言っても「最短ホームページテンプレート」は元々2カラムで出来ている!

けれど、ここはあえてtableをガバっと外してcssで作成!tableは使いません☆(ソースがスッキリ)

左右の色と割合は自由に設定できま~す(作成方法は以下にて)

作成方法

サイドを外したワンカラムのindex.htmlを使用します

手順①・・index.htmlの中の<-- ここがメインコンテンツです -->のすぐ下に以下のソースを加える

<div id=content>

<div class=box-1>

<p>メインコンテンツ</p>

</div>

<div class=box-2>

<p>サイドバー</p>

</div>

</div>


手順②・・style.cssの中の一番下に以下のソースを加える

.box-1{width:560px;height:600px;background-color: #eeffff;float:left;}

.box-2{width:220px;height:600px;background-color:#ffeeff;float:right;}


上記の設定は見た目が2カラムのレイアウトソースで、実際この中に文章や画像を入れていく場合は ある程度のcss知識が必要になってきます。

htmlのメインコンテンツと書かれた部分を削除して短めの言葉を入れてみて下さい。

同様にサイドバーの部分にも何か言葉を入れると2カラムのホームページが出来上がります。

文章が多くなるとこれだけのCSS設定では表示崩れがおきるため、現時点ではここまでとします