Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

デザインサンプルで学ぶCSSによるスタイリング~「テーブル(ハイライト表示/縦列のスタイリング)」編

CSSで作るWeb用パーツ(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/07/17 17:15

 本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。今回は、前回に引き続き、テーブルをCSSでスタイリングする方法を紹介します。

目次

 縦列に対してスタイルを適用するための方法や、行や列のハイライト表示、データセルのソートなど、jQueryを使ったデザインサンプルを紹介します。

対象読者

  • (X)HTMLとCSSの基本を理解している方。
  • デザインのコツを学びたい方。

必要な環境

 本連載で動作確認を行ったブラウザは次のとおりです。

  • Windows 7 Internet Explorer 11
  • Windows 7 Firefox 26
  • Windows 7 Chrome 32

テーブルの縦列をスタイリングする

 HTML上では、セル(th/td)は列ではなく、横行(tr)の子孫要素になっています。そのため、スタイリングの対象として横列を操作するのは比較的簡単ですが、縦列を操作する場合には、ちょっとした知識が必要になります。

テーブルの縦列をマークアップする

 テーブルの縦列を構造的な意味でグループ化したい場合には、colgroup要素を使います。何列分の縦列をグループ化するかは、span属性で指定するか、colgroup要素内にcol要素(後述)を配置して指定します。span属性がない場合は1が指定されている状態です。colgroup要素内にcol要素を配置した場合は、colgroup要素のspan属性は無視されます。

 col要素は、縦列に対して属性やスタイルシートを設定するための空要素です。colgroup要素と異なり、縦列を構造的な意味でグループ化する要素ではありません。colgroup同様、何列分を対象とするかはspan属性で指定し、span属性がない場合は1が指定されている状態になります。

 colgroupやcol要素は、table要素内のcaption要素の後、thead要素の前に配置します。

 例えば、図1のように、5列の表をcolgroup要素のspan属性で、1列、2列、2列の3つのグループにしたい場合は、次のようになります。

図1 5列の表を1列、2列、2列にグループ化(colgroup01.html)
図1 5列の表を1列、2列、2列にグループ化(colgroup01.html)
リスト1 5列の表を1列、2列、2列にグループ化(colgroup要素のみ)/HTML(colgroup01.html)
<table>
<caption>グループ化</caption>
<colgroup span="1" id="groupA"></colgroup>
<colgroup span="2" id="groupB"></colgroup>
<colgroup span="2" id="groupC"></colgroup>
<thead>
  <tr>
    <th>グループA</th><th colspan="2">グループB</th><th colspan="2">グループC</th>
  </tr>
</thead>
<tbody>
  ~中略~
</tbody>
</table>

 あるいは、次のようにcol要素を使ってマークアップすることもできます。1列目のgroupAのはspan属性を省略しています。groupBはcolgroup内のcol要素のspan属性で2列目と3列目をまとめています。groupCには、col要素を2つ配置して4列目と5列目をまとめています。

リスト2 5列の表を1列、2列、2列にグループ化(colgroup要素とcol要素を使用)/HTML(colgroup02.html)
<colgroup id="groupA"></colgroup>
<colgroup id="groupB"><col span="2" /></colgroup>
<colgroup id="groupC"><col /><col /></colgroup>

 このようにcolgroupやcol要素を使えば、これらをセレクタとして、縦列を対象にスタイルを適用できるようになります。

リスト3 縦列(colgroup)にスタイルを適用/CSS(colgroup02.html)
colgroup#groupA {
  background: #fcc;
}
colgroup#groupB {
  background: #ffc;
}
colgroup#groupC {
  background: #ccf;
}

 ただし、colgroup要素やcol要素に使用できるプロパティは、border関連、background関連、width、visibilityに限られており、その他のプロパティは無効になるので注意してください。さらに、borderプロパティは、「border-collapse:collapse;」の場合にのみ有効、backgroundプロパティは、セルや行の背景が透明な場合のみ有効という制限があります。これらは実務ではまりやすいポイントになるので覚えておくと良いでしょう。

colgroup要素とcol要素に使用できるプロパティ
プロパティ 説明
border table要素の'border-collapse'の値が'collapse'である場合に限り有効
background セルや行の背景が透明な場合に限り有効
width ブラウザによっては、列幅を指定しておくことで、データの読み込みが終わるのを待たずに、横1行ずつ表示させることが可能になる
visibility 値を'collapse'にすると、その部分が切り取られて表示される

:nth-child()を使って縦列をスタイルの適用対象とする

 先述したように、colgroupやcol要素をセレクタとする場合、使えるプロパティが限られてしまいます。そこで、CSS3のセレクタ「E:nth-child(n)」を使ってテーブルの縦列を操作する方法もあります。これは、n番目の子となるE要素をスタイルの対象とするセレクタで、例えば、奇数列をスタイルの対象にしたい場合は「td:nth-child(odd)」、偶数列は「td:nth-child(even)」という具合になります。tdをセレクタとしているため、colgroup要素をセレクタとする場合と違ってボーダーの表示形式を問わず、「border-collapse:separate;」であってもborderプロパティが有効なので、図2のようなボーダーとボーダーが重ならないタイプのデザインも可能になります。

図2 E:nth-child(n)で縦列に対してスタイルを適用(nthchild.html)
図2 E:nth-child(n)で縦列に対してスタイルを適用(nthchild.html)

 このサンプルでは、col要素に対して背景色を適用し、セルに対してボーダーを引いています。最初の行の見出しセル(th)には上・左・右ボーダーを、2行目から最終行のセル(td)には左・右ボーダーを、最終行のセル(tr:last-child th)には下ボーダーを引いて、グループを囲むように縦列をスタイリングしています。

リスト4 E:nth-child(n)で縦列に対してスタイルを適用/HTML(nthchild.html)
col.groupA {
  background: #fcc;
}
col.groupB {
  background: #ccf;
}
th:nth-child(odd) {/* 最初の行の見出しセルは上・左・右ボーダー */
  border-top: 5px solid #f00;
  border-left: 5px solid #f00;
  border-right: 5px solid #f00;
}
td:nth-child(odd) { /* 2行目からのセルは左・右ボーダー */
  border-left: 5px solid #f00;
  border-right: 5px solid #f00;
}
tr:last-child td:nth-child(odd) { /* 最終行のセルは下ボーダー */
  border-bottom: 5px solid #f00;
}
th:nth-child(even) {
  border-top: 5px solid #00f;
  border-left: 5px solid #00f;
  border-right: 5px solid #00f;
}
td:nth-child(even) {
  border-left: 5px solid #00f;
  border-right: 5px solid #00f;
}
tr:last-child td:nth-child(even) {
  border-bottom: 5px solid #00f;
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5