ホームページ作成/テキストの配置・装飾 (HTML,CSS)

CSSのnth-childやnth-of-typeで表の縦(列)を一括装飾

CSSの疑似クラスnth-childやnth-of-typeは、どちらも「何番目の要素を対象にして装飾」というスタイルを作れます。これらを使えば、CSSだけで表を縦方向に一括装飾できます。表の列をグループ化するcolgroup要素を使わなくても、nth-of-typeやnth-childを使えば対象セルの位置を番号で指定できるからです。表を列単位で装飾するCSSの書き方をご紹介。nth-childとnth-of-typeの違いも解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

表の列(縦方向)を一括装飾したい

HTMLで作った表を装飾したいとき、行(横方向)単位だけでなく列(縦方向)単位で一括装飾したい場合があります。例えば下図の赤丸で示したように数値を掲載している列では、列全体を右寄せで表示したいでしょう。また、特定の列だけを強調したい場合には、縦方向に一括して背景色を加えたい場合もあるでしょう。
 
表を縦方向に列単位で一括装飾したい場合がある

表を縦方向に列単位で一括装飾したい場合がある

 

表の列をグループ化するcolgroup要素はあるが……

HTMLには、列をグループ化するためのcolgroup要素が用意されています。しかし、colgroup要素を使ってグループ化した列に対してCSSを適用する方法では、使える装飾の種類に制限があります。例えば、文字の表示位置の調整(センタリングや右寄せなど)はできません。しかも、装飾だけが目的なのにHTMLソースの編集も必要になってしまうため、作業が面倒です。
 
表を作るHTMLソースにcolgroup要素をいちいち加えるのは面倒

表を作るHTMLソースにcolgroup要素をいちいち加えるのは面倒


 

CSSだけで表の列を一括装飾する方法がある

表の列(縦方向)を一括装飾するだけなら、HTMLソースの編集は不要です。本記事では、以下の2通りの書き方をご紹介いたします。1つはCSS3の疑似クラスnth-of-typeやntd-childを使う方法、もう1つはCSS2.1の隣接兄弟セレクタを使う方法です。どちらもHTMLソース側には何も加えず、CSSを書くだけで装飾できるため楽です。

具体的な書き方を解説する前に、それぞれの概要をご紹介しておきます。
   

CSS3の疑似クラスnth-of-typeやnth-childを使って列を一括装飾

CSS3で追加された仕様に、nth-of-type疑似クラスやnth-child疑似クラスがあります。これらは、指定の要素が何番目に登場しているかという条件によって装飾を指定できる仕様です。
 
CSSのnth-of-typeやnth-child疑似クラスを使えば「何番目のtd要素か?」という順番を元にして装飾できるため、簡単に列を一括装飾できる

CSSのnth-of-typeやnth-child疑似クラスを使えば「何番目のtd要素か?」という順番を元にして装飾できるため、簡単に列を一括装飾できる


これらを活用すると「1番目に登場するtd要素(=表の1列目)」・「2番目に登場するtd要素(=表の2列目)」……のように、現れる順序の番号で装飾対象のセルを限定できます。その結果、HTMLソースを修正することなく、CSSだけで表の列を一括装飾できるわけです。

 

CSS2.1の隣接兄弟セレクタを使って列を一括装飾

CSS2.1からある隣接兄弟セレクタという書き方でも列を一括装飾できます。隣接兄弟セレクタは、指定の要素の隣にある要素を対象にして装飾を指定できる仕様です。
 
CSSの疑似クラスを使わなくても、「いくつのtd要素が隣接しているか」を元にしてセルの位置を特定する方法でも列を一括装飾できる

CSSの疑似クラスを使わなくても、「いくつのtd要素が隣接しているか」を元にしてセルの位置を特定する方法でも列を一括装飾できる


これを使うと、「td要素の隣にあるtd要素」や「td要素の隣にあるtd要素のさらに隣にあるtd要素」などを装飾対象にできるため、うまく使うと1列ずつ装飾できます。


上記でご紹介したように、HTMLソースを修正することなくCSSの記述だけで表の列を一括装飾できます。

それでは次のページから、CSSだけで表の列を一括装飾する書き方を見ていきましょう
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます