無料ホームページ作成!応用編
枠組み・構成

無料ホームページ作成!応用編

ホームページの枠組み・構成を作る!〜基本〜

ホームページの内容を右と左に分ける(2段組)

これから説明するホームページの枠組み・構成はとても便利なものです、色々なホームページを見てみると、この「無料ホームページ作成!」のようにタイトル文字があり、その次に左側にホームページの本文、右側にホームページのマップがあったりしますよね?(その逆もよくありますが)そのホームページの段組の作り方を説明します。

HTML&CSS・スタイルシートソース

CSS・スタイルシートソース

div{
	border:solid 1px;
}

#header,#pegebody,#footer{
	width:500px;
}

#main{
	width:70%;
	float:left;
}

#sidemap{
	width:25%;
	float:right;
}
 
HTMLソース

<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属性の値を入れ替えると、メインとサイドマップの位置も入れ替わります。

少しかたちが変かもしれませんがホームページの内容自体を作って見るとこの「ホームページを作る!」のようになってきます。

無料ホームページ作成!メニュー

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS