TechDrillの「HTML/CSS」実践レビュー２「擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう」攻略

レンタルオフィス「METSオフィス」運営責任者のオバタです。

今回は、TechDrill「HTML/CSS」実践記事２回めということで「擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう」に挑戦していきたいと思います。

ホームページに自作の料金テーブル表を設置したい場合やサイト作成サービス内のテーブルタグをカスタマイズする際に役立つノウハウとなります。

⇒　第１回目の実践レビュー「指示書通りに実装してみよう！」はこちら

TechDrillの登録方法については第１回目の実践レビューをご確認ください。
それではさっそく始めていきます。

事前準備

課題にはホームページ内にテーブルを設置するためのコードが用意されています。

問題の内容に応じて外部CSSを使ってカスタマイズしていく形になるため、第１回目の実践レビューで使ったhtmlファイルとCSSファイルを一部流用して実践していきます。

用意したhtmlファイル（table.html）


<!DOCTYPE html>
<html lang="ja" class="">
<head>
<meta charset="UTF-8">
<title>擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう」攻略</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>

<table>
<thead>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
<tr>
<td>データセル4</td>
<td>データセル5</td>
<td>データセル6</td>
</tr>
</tbody>
</table>

</body>
</html>

用意したCSSファイル（sample.css）


html, body{
  background: #FFFFFF; /* 背景　白 */
  height: 100%;
  margin: 0;
  padding: 0;
}
table {
	margin: 3em;
	width: 600px;
	text-align: center;
}

問題１：「データセル２」のみ背景の色を赤にしてください

問題１にはヒントが記載されていたので、CSSに下記コードをカスタマイズしたものを追記して対応します。

ヒント：
.td:nth-child(適応させたいセルの通し番号) {
# ここにCSSプロパティが入ります
}

ヒントの()内に半角数字の2を記入し、背景を指定するCSSプロパティ「background:」を入れてCSSファイルに追記します。

CSSファイルに追記したコード


/* 「データセル２」のみ背景の色を赤に */
td:nth-child(2) {
	background: red;
}

ヒント通りにCSSに追記するだけなので簡単です。

問題２：データセルのうち、最後のセルだけ太文字にしてください。

最後のセルだけ直接スタイルを指定しても良いのですが疑似クラスを使う問題なので、最後のセルだけを指定するために疑似クラス「last-child」を使ってCSSに追記します。


/* 最後のセルだけ太文字 */
td:last-child {
	font-weight: bold;
}

太文字にする「font-weight」プロパティは、基本的によく使われるboldではなく100から900までの100単位の数値を指定しても良いと思います。

問題３：左側のデータセルのみ文字をイタリック体にしてください。

テーブルが３つ横並びで２列になっているので、１と４番めに擬似クラス「nth-child」を指定すれば左側のみイタリック体になるはずです。


/* 左側のデータセルのみ文字をイタリック体 */
td:nth-child(3n+1) {
	font-style: italic;
}

3n+1とすることで、n=0なら１、n=1なら４、n=2なら７……と３つ横並びの列の一番左側に擬似クラスが適用されます。

ここまでの作業を行ったテーブルの状態

これで今回の問題は全て解いたのですが、

「データセル5」まで背景が赤くなってしまっています。

解答を見たところCSSに追記したコードに問題はなく、別にhtml自体をカスタマイズしたりするような記載もなかったのでこれで完成としても良いようなのですがなんだかしっくり来ないので……


<td>データセル4</td>
<td style="background: #fff;">データセル5</td>
<td>データセル6</td>

このようにhtmlファイルを少しカスタマイズしてデータセル５の背景を無理矢理白くしました。CSSでキッチリやったほうがきれいですが今回はこれで良しとします。

完成

当レビューで作ったファイルは下記リンクからご確認いただけます。

⇒　https://mets-office.com/td/p002/table.html（新しいタブで開きます）

まとめ

CSSの擬似クラスはテーブルだけでなくリストタグなどにもよく使われ、ルールを理解していれば通常のコーディングを行うよりも短くきれいにまとまめることができます。

サイト内のテーブルタグをちょっとおしゃれにしたい、サイトメニューの装飾を交互に行いたいといった時にはぜひ活用してみてくださいね。

カテゴリー: HTML/CSSカスタマイズ実践レビュー

タグ: CSS HTML