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

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / 1行おきに背景色を変える（+CSS）
1行おきに背景色を変える（+CSS）
スタイルシートを使い、表の背景色を1行おきに変えてみます。

1行おきに背景色の濃さを変更しておくと、行数の多い表などでは行のラインが判別しやすくなります。

ここでは、「細い枠線を指定する（+CSS）」で作成した表をベースにして、変更を加えてみます。

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

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。
　指定方法
行単位で背景色を指定する場合は、TRタグに background-color を指定します。

次の例では、奇数の行を #C9E2F8（やや濃い色）、偶数の行を #E3F0FB（やや薄い色）で指定しています。

【 <HEAD> 〜 </HEAD> 】


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

.table1 {
width: 100%; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
}

.table1 TH {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
padding: 5px; /* セル内の余白 */
}

.table1 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
padding: 5px; /* セル内の余白 */
}

TR.color1 {
background-color: #C9E2F8; /* 奇数行の背景色 */
}

TR.color2 {
background-color: #E3F0FB; /* 偶数行の背景色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table1">

<TR CLASS="color1">
<TH>ホスティング</TH>
<TH>ホームページ</TH>
<TH>SEO対策</TH>
</TR>

<TR CLASS="color2">
<TD>サーバーA社</TD>
<TD>HP作成A社</TD>
<TD>運営管理A社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーB社</TD>
<TD>HP作成B社</TD>
<TD>運営管理B社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーC社</TD>
<TD>HP作成C社</TD>
<TD>運営管理C社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーD社</TD>
<TD>HP作成D社</TD>
<TD>運営管理D社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーE社</TD>
<TD>HP作成E社</TD>
<TD>運営管理E社</TD>
</TR>

</TABLE>

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

ホスティング ホームページ SEO対策
サーバーA社 HP作成A社 運営管理A社
サーバーB社 HP作成B社 運営管理B社
サーバーC社 HP作成C社 運営管理C社
サーバーD社 HP作成D社 運営管理D社
サーバーE社 HP作成E社 運営管理E社


表の枠線を消すと次のように表示されます。

上記の表から枠線を消すには、TABLEタグとTDタグの border の指定を削除します。

【 <HEAD> 〜 </HEAD> 】


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

.table2 {
width: 100%; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
}

.table2 TH {
text-align: left; /* セル内の文字の位置 */
padding: 5px; /* セル内の余白 */
}

.table2 TD {
padding: 5px; /* セル内の余白 */
}

TR.color1 {
background-color: #C9E2F8; /* 奇数行の背景色 */
}

TR.color2 {
background-color: #E3F0FB; /* 偶数行の背景色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table2">

<TR CLASS="color1">
<TH>ホスティング</TH>
<TH>ホームページ</TH>
<TH>SEO対策</TH>
</TR>

<TR CLASS="color2">
<TD>サーバーA社</TD>
<TD>HP作成A社</TD>
<TD>運営管理A社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーB社</TD>
<TD>HP作成B社</TD>
<TD>運営管理B社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーC社</TD>
<TD>HP作成C社</TD>
<TD>運営管理C社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーD社</TD>
<TD>HP作成D社</TD>
<TD>運営管理D社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーE社</TD>
<TD>HP作成E社</TD>
<TD>運営管理E社</TD>
</TR>

</TABLE>

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

ホスティング ホームページ SEO対策
サーバーA社 HP作成A社 運営管理A社
サーバーB社 HP作成B社 運営管理B社
サーバーC社 HP作成C社 運営管理C社
サーバーD社 HP作成D社 運営管理D社
サーバーE社 HP作成E社 運営管理E社


外側の枠線のみを表示させたい場合は、TABLEタグにのみ border を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.table3 {
width: 100%; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
}

.table3 TH {
text-align: left; /* セル内の文字の位置 */
padding: 5px; /* セル内の余白 */
}

.table3 TD {
padding: 5px; /* セル内の余白 */
}

TR.color1 {
background-color: #C9E2F8; /* 奇数行の背景色 */
}

TR.color2 {
background-color: #E3F0FB; /* 偶数行の背景色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table3">

<TR CLASS="color1">
<TH>ホスティング</TH>
<TH>ホームページ</TH>
<TH>SEO対策</TH>
</TR>

<TR CLASS="color2">
<TD>サーバーA社</TD>
<TD>HP作成A社</TD>
<TD>運営管理A社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーB社</TD>
<TD>HP作成B社</TD>
<TD>運営管理B社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーC社</TD>
<TD>HP作成C社</TD>
<TD>運営管理C社</TD>
</TR>

<TR CLASS="color1">
<TD>サーバーD社</TD>
<TD>HP作成D社</TD>
<TD>運営管理D社</TD>
</TR>

<TR CLASS="color2">
<TD>サーバーE社</TD>
<TD>HP作成E社</TD>
<TD>運営管理E社</TD>
</TR>

</TABLE>

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

ホスティング ホームページ SEO対策
サーバーA社 HP作成A社 運営管理A社
サーバーB社 HP作成B社 運営管理B社
サーバーC社 HP作成C社 運営管理C社
サーバーD社 HP作成D社 運営管理D社
サーバーE社 HP作成E社 運営管理E社


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

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

inserted by FC2 system