これから説明するホームページの枠組み・構成はとても便利なものです、色々なホームページを見てみると、この「無料ホームページ作成!」のようにタイトル文字があり、その次に左側にホームページの本文、右側にホームページのマップがあったりしますよね?(その逆もよくありますが)そのホームページの段組の作り方を説明します。
div{border:solid 1px;
} #header,#pegebody,#footer{width:500px;
} #main{width:70%;
float:left;
} #sidemap{width:25%;
float:right;
}
<div id="header"> <p>ホームページのタイトルなどを書きます</p> </div> <div id="pagebody"> <div id="main"> <p>ホームページメインの内容をここに書きます</p> </div> <div id="sidemap"> <p>ホームページに関連するリンクなどを張ります</p> </div> </div> <div id="footer"> <p>ホームページの締めです連絡先などを書きます</p> </div>
ホームページのタイトルなどを書きます
ホームページメインの内容をここに書きます
ホームページに関連するリンクなどを張ります
ホームページの締めです連絡先などを書きます
div要素のborder属性は分かりやすくするためにあるだけですので気にしないで下さい。
ホームページメインとサイドマップのfloat属性の値を入れ替えると、メインとサイドマップの位置も入れ替わります。
少しかたちが変かもしれませんがホームページの内容自体を作って見るとこの「ホームページを作る!」のようになってきます。