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

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

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

< HOME / ホームページ作成ガイド / 標準タイプの見出し帯(TABLE)
標準タイプの見出し帯(TABLE)


テーブルタグを使用して、見出し用の帯を作成してみます。

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

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


 作り方
テーブルを横に伸ばして、セルの背景に色を付けます。

帯の長さはTABLEタグWIDTH="" で、帯の色はTDタグBGCOLOR="" で指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#88C0EE">


<B>ホームページ作成</B>

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


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

ホームページ作成


見出し文字の周囲に余裕を持たせたい場合は、TABLEタグCELLPADDING="" を指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD BGCOLOR="#88C0EE">


<B>ホームページ作成</B>

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


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

ホームページ作成


見出し文字を中央に配置したい場合は、TDタグALIGN="center" を指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="center" BGCOLOR="#88C0EE">


<B>ホームページ作成</B>

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


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

ホームページ作成



 帯の背景に画像を使う
帯の背景に画像を使いたいときは、TDタグBACKGROUND="" を指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD BACKGROUND="image/back.gif">


<B>ホームページ作成</B>

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


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

ホームページ作成

← 背景に使用した画像(back.gif



 立体的な帯
帯の上下に色の異なる細い線を入れることで、帯を立体的に見せることができます。

細い線を入れる場合は、スペーサーGIFを使うと便利です。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#BEDDF5"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="2"></TD>
</TR>
<TR>
<TD BGCOLOR="#88C0EE">


<B>ホームページ作成</B>

</TD>
</TR>
<TR>
<TD BGCOLOR="#429BE3"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="2"></TD>
</TR>
</TABLE>


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

ホームページ作成

細い線の太さはIMGタグHEIGHT="" で、色はIMGタグを入れているTDタグBGCOLOR="" で指定します。

細い線を指定している部分の

<TD BGCOLOR="#"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="2"></TD>

↑この行は、改行を入れずに1行で記述します。
TDタグIMGタグの間に改行を入れると、線が太く表示されてしまう場合があります。


立体的な帯の場合で、見出し文字の周囲に余裕を持たせたい場合は、TDタグに対してスタイルシートの padding を指定します。
TABLEタグCELLPADDING="" で指定すると、細い線の部分が太くなってしまうので。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#BEDDF5"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="2"></TD>
</TR>
<TR>
<TD BGCOLOR="#88C0EE" STYLE="padding: 5px;">


<B>ホームページ作成</B>

</TD>
</TR>
<TR>
<TD BGCOLOR="#429BE3"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="2"></TD>
</TR>
</TABLE>


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

ホームページ作成

padding についての詳細は、「ボックスのパディング(内側の余白)を指定する」をご覧ください。


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


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