TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / ベーシック1(+CSS)
ベーシック1(+CSS)


全体的な枠組はテーブルタグで、細かい設定にはスタイルシートを使用して、次のようなレイアウトを作成してみます。

サンプル画面へ
(クリックするとサンプル画面が新規に立ち上がります)

上段・中段・下段の3つのエリアを作成し、更に中段のエリアを左と右のエリアに分割しています。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。
※スタイルシートについての詳細は、「スタイルシート」をご覧ください。

「テーブルタグの使用について」もご覧ください。
Aエリア
B


Cエリア
Dエリア


 設定方法
このレイアウトでは、上段(Aエリア)、中段(B・Cエリア)、下段(Dエリア)といった分け方で、計3セットのテーブルが使われています。それぞれの横幅は 740 に統一していますが、このサイズを変更する場合は、TABLEタグWIDTH="" を3ヵ所、中段のTDタグWIDTH="" を3ヵ所、計6ヵ所の WIDTH="" を適切な値に書き直してください。

各エリアの高さは、エリア内の内容に応じて自動的に調節されます。高さを固定したい場合は、対象となるエリアに HEIGHT="" を追加するなどして、サイズを指定してください。

全体の配置は、DIVタグALIGN="" でセンタリングを指定しています。左寄せにする場合は、ALIGN=""left を指定するか、このDIVタグを削除してください。

タグで指定している部分は以上の内容になります。他の細かい設定(各エリアの背景色や余白など)はスタイルシートで行っていますので、ご自分の好みに合わせてそれぞれの値を変更してください。

※スタイルシートの値を変更する際には、ソース内のコメントを参考にしてください。


 ソース
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>Webサイト</TITLE>

<STYLE TYPE="text/css">
<!--

BODY {
background-color: #FFFFFF; /* ページの背景色 */
margin: 0; /* ページのマージン */
}

BODY, TD {
font-size: 1em; /* 全体の文字サイズ */
color: #2B2B2B; /* 全体の文字色 */
}

A:link { color: #0000FF; } /* リンク文字の色 */
A:visited { color: #0000A0; } /* アクセス済みの色 */
A:hover { color: #FF0000; } /* ポイントしたときの色 */
A:active { color: #FF8000; } /* クリックした瞬間の色 */

#area_top { /* Aエリア(全体の指定) */
border-collapse: collapse; /* 枠線の表示方法(重ねる) */
background-color: #BDE9BA; /* 背景色 */
}
#area_top TD { /* Aエリア(セル内の指定) */
padding: 3px; /* 内側の余白 */
}

#area_middle { /* B・Cエリア(全体の指定) */
border-collapse: collapse; /* 枠線の表示方法(重ねる) */
margin-top: 10px; /* AエリアとB・Cエリア間の余白 */
margin-bottom: 10px; /* B・CエリアとDエリア間の余白 */
}
#left { /* Bエリア(セル内の指定) */
background-color: #FDEDC4; /* 背景色 */
vertical-align: top; /* 上揃え */
padding: 3px; /* 内側の余白 */
}
#right { /* Cエリア(セル内の指定) */
background-color: #FFFFFF; /* 背景色 */
vertical-align: top; /* 上揃え */
padding: 3px; /* 内側の余白 */
}

#area_bottom { /* Dエリア(全体の指定) */
border-collapse: collapse; /* 枠線の表示方法(重ねる) */
background-color: #E8E8FF; /* 背景色 */
}
#area_bottom TD { /* Dエリア(セル内の指定) */
padding: 3px; /* 内側の余白 */
}


-->
</STYLE>

</HEAD>
<BODY>

<DIV ALIGN="center">

<TABLE WIDTH="740" ID="area_top">
<TR>
<TD>

Aエリア
<BR>
<BR>

</TD>
</TR>
</TABLE>

<TABLE WIDTH="740" ID="area_middle">
<TR>
<TD WIDTH="180" ID="left">

Bエリア

</TD>
<TD WIDTH="5"></TD> <!--BエリアとCエリア間の余白-->
<TD WIDTH="555" ID="right">

Cエリア
<BR>
<BR>




</TD>
</TR>
</TABLE>

<TABLE WIDTH="740" ID="area_bottom">
<TR>
<TD>

Dエリア
<BR>
<BR>

</TD>
</TR>
</TABLE>

</DIV>

</BODY>
</HTML>

・これをブラウザで見ると次のように表示されます

サンプル画面へ
(クリックするとサンプル画面が新規に立ち上がります)



ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲