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

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

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

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


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

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

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

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


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

各エリアの高さは、エリア内の内容に応じて自動的に調節されます。高さを固定したい場合は、対象となるエリアに 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; /* 背景色 */
margin-bottom: 10px; /* AエリアとBエリア間の余白 */
}
#area_top TD { /* Aエリア(セル内の指定) */
padding: 3px; /* 内側の余白 */
}

#area_middle1 { /* Bエリア(全体の指定) */
border-collapse: collapse; /* 枠線の表示方法(重ねる) */
background-color: #FDEDC4; /* 背景色 */
margin-bottom: 10px; /* BエリアとCエリア間の余白 */
}
#area_middle1 TD { /* Bエリア(セル内の指定) */
text-align: center; /* 文字の位置 */
padding: 3px; /* 内側の余白 */
}

#area_middle2 { /* Cエリア(全体の指定) */
border-collapse: collapse; /* 枠線の表示方法(重ねる) */
background-color: #FFFFFF; /* 背景色 */
margin-bottom: 10px; /* CエリアとDエリア間の余白 */
}
#area_middle2 TD { /* Cエリア(セル内の指定) */
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_middle1">
<TR>
<TD>

Bエリア

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

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

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▲