個々の要素にクラスを設定して縞のテーブルの表示、ヘッダのスタイル変更、特定の列のスタイル変更をする - CSS
Webブラウザが古くCSSの疑似クラスに対応していない場合は個々の要素にクラスを設定してスタイル設定をする必要があります。この記事では、個々の要素にクラスを設定しテーブルのタイルを変更するコードを紹介します。
縞のテーブルを表示する
1行ごとに行の背景色が違う縞のテーブルを表示するコードを紹介します。CSSの疑似クラスを用いて簡単に縞のテーブルを作成する方法は
こちらの記事を参照してください。
コード
スタイルシート (StripeStyle.css)
.StripeTableC {
border-collapse:collapse;
}
.StripeTableCRowA {
background-color:#ffd3d3;
}
.StripeTableCRowB {
background-color:#c4ebff;
}
.StripeTableCCol {
border: 1px solid #C0C0C0;
}
HTMLファイル ()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="StripeStyle.css" />
</head>
<body>
<table class="StripeTableC">
<tr class="StripeTableCRowA">
<td class="StripeTableCCol">ペンギンスフレ</td>
<td class="StripeTableCCol">\400</td>
<td class="StripeTableCCol">あと4個</td>
</tr>
<tr class="StripeTableCRowB">
<td class="StripeTableCCol">しろくまスフレ</td>
<td class="StripeTableCCol">\120</td>
<td class="StripeTableCCol">あと8個</td>
</tr>
<tr class="StripeTableCRowA">
<td class="StripeTableCCol">くまさんスフレ</td>
<td class="StripeTableCCol">\100</td>
<td class="StripeTableCCol">あと12個</td>
</tr>
<tr class="StripeTableCRowB">
<td class="StripeTableCCol">キャラメルスフレ</td>
<td class="StripeTableCCol">\180</td>
<td class="StripeTableCCol">あと10個</td>
</tr>
<tr class="StripeTableCRowA">
<td class="StripeTableCCol">イチゴのスフレ</td>
<td class="StripeTableCCol">\250</td>
<td class="StripeTableCCol">あと5個</td>
</tr>
</table>
</body>
</html>
解説
table,tr,tdタグそれぞれにクラスを設定することでテーブルのスタイルを変更しています。1行ごとにクラス名を変えることでテーブルの行を縞にしています。
実行結果
HTMLファイルを表示すると下図となります。
ヘッダのスタイル変更
ヘッダ(テーブルの1行目)のスタイルを変更するコードを紹介します。CSSの疑似クラスを用いて簡単に設定する方法は
こちらの記事を参照してください。
コード
CSSファイル (HeaderStyle.css)
.StripeTableC {
border-collapse:collapse;
}
.StripeTableCRowA {
background-color:#ffd3d3;
}
.StripeTableCRowB {
background-color:#c4ebff;
}
.StripeTableCCol {
border: 1px solid #C0C0C0;
}
HTMLファイル (CssHeaderTable.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="HeaderStyle.css" />
</head>
<body>
<table class="HeaderTableH">
<tr class="HeaderTableHHeader">
<td class="HeaderTableHHeaderCell">品名</td>
<td class="HeaderTableHHeaderCell">単価</td>
<td class="HeaderTableHHeaderCell">個数</td>
</tr>
<tr>
<td class="HeaderTableHCell">トルクスねじ 15-AB</td>
<td class="HeaderTableHCell">0.25</td>
<td class="HeaderTableHCell">1000</td>
</tr>
<tr>
<td class="HeaderTableHCell">2重リング R-13S</td>
<td class="HeaderTableHCell">0.5</td>
<td class="HeaderTableHCell">100</td>
</tr>
<tr>
<td class="HeaderTableHCell">四角プラグ</td>
<td class="HeaderTableHCell">0.4</td>
<td class="HeaderTableHCell">500</td>
</tr>
</table>
</body>
</html>
解説
table,tr,tdタグそれぞれにクラスを設定することでテーブルのスタイルを変更しています。先頭の行のクラス名を別のクラスにすることで1行目のスタイルを変更しています。
実行結果
HTMLファイルを表示すると下図となります。
特定の列のスタイル変更
スタイルシート (StripeStyle.css)
.TableColumnColoredC {
border-collapse:collapse;
}
.TableColumnColoredCCell1 {
border:1px solid #ff6a00;
}
.TableColumnColoredCCell2 {
background-color:#ffe966;
}
HTMLファイル (CssHeaderTable.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ColumnColoredStyle.css" />
</head>
<body>
<table class="TableColumnColoredC">
<tr>
<td class="TableColumnColoredCCell1">Visual C#</td>
<td class="TableColumnColoredCCell2">Microsoft</td>
<td class="TableColumnColoredCCell1">C#</td>
</tr>
<tr>
<td class="TableColumnColoredCCell1">Visual Basic</td>
<td class="TableColumnColoredCCell2">Microsoft</td>
<td class="TableColumnColoredCCell1">VB</td>
</tr>
<tr>
<td class="TableColumnColoredCCell1">Visual C++</td>
<td class="TableColumnColoredCCell2">Microsoft</td>
<td class="TableColumnColoredCCell1">C/C++</td>
</tr>
<tr>
<td class="TableColumnColoredCCell1">Delphi</td>
<td class="TableColumnColoredCCell2">Embacadero</td>
<td class="TableColumnColoredCCell1">Delphi</td>
</tr>
<tr>
<td class="TableColumnColoredCCell1">C++ Builder</td>
<td class="TableColumnColoredCCell2">Embacadero</td>
<td class="TableColumnColoredCCell1">C/C++</td>
</tr>
<tr>
<td class="TableColumnColoredCCell1">Eclipse</td>
<td class="TableColumnColoredCCell2">Sun</td>
<td class="TableColumnColoredCCell1">Java</td>
</tr>
</table>
</body>
</html>
解説
table,tr,tdタグそれぞれにクラスを設定することでテーブルのスタイルを変更しています。2列目のセルのクラス名を別のクラスにすることで2列目のスタイルを変更しています。
実行結果
HTMLファイルを表示すると下図となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
