HTML 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

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system