• コーディング ファクトリーHOME
  • Coding Methodology
  • 第88回 「カスタムデータ属性」を利用したテーブルの実装方法

コーディングメソドロジー

第88回 「カスタムデータ属性」を利用したテーブルの実装方法

レスポンシブWebデザインで使える表組みのテクニックは過去のコーディングメソドロジーでも紹介していますが、今回は前回とは異なる「カスタムデータ属性」を利用したテーブルの実装方法をご紹介したいと思います。

カスタムデータ属性(独自データ属性)とは

【コード1:HTML例】

【コード1:HTML例】

【コード2:CSS例】

【コード2:CSS例】

カスタムデータ属性は、HTML5で新たに追加された仕様で、「data-」からはじまる任意の属性名を用いて、各HTMLの要素に対し独自の値を設定することができます。
例えば、コード1-①のように「data-」の後に1文字以上で任意の文字列を設定します。
アルファベット、数字、ハイフン、アンダースコアなどが使用可能で、複数の属性を設定することもできます。設定値は、jQueryを使って取得したり、コード2のようにCSSでセレクタ
[属性名="値"]と指定すれば、個別にスタイルをあてることができます。

カスタムデータ属性を利用したテーブルの実装例

今回は、図1のようなレスポンシブWebデザイン(以下RWD)のテーブルを実装してみます。

【図1:RWDテーブルレイアウト例】

① 通常時のレイアウト

① 通常時のレイアウト

② 画面幅が狭い端末でのレイアウト

② 画面幅が狭い端末でのレイアウト

■HTML の設定

コード3のように、テーブルを組みます。
ポイントは、<td>に対応する見出しを「data-th」で設定し(コード3-①)、<td>の中を<div>で囲うことです。

【コード3:HTMLの設定】

HTML の設定

コード3のように、テーブルを組みます。ポイントは、<td>に対応する見出しを「data-th」で設定し(コード3-①)、<td>の中を<div>で囲うことです。

■CSS の設定

画面幅が狭い端末でのレイアウトのCSSを、Media Queries内に記述します(コード4)。まず、<td>を「display: block;」とし、tableレイアウトを解除しておきます(コード4-①)。<thead>を非表示にし、代わりに「float: left;」で配置した「data-th」を:before擬似要素を用いて表示させ、見出しとしています(コード4-②)。<td>の中を囲っている<div>は、「overflow: hidden;」で回り込みしないように設定し(コード4-③)、枠線(border)や背景(background-color)を適宜設定します。

【コード4:CSSの設定】

CSS の設定

「Basic Table」や「FooTable」といったjQueryのプラグインを使用して、RWDに対応させる方法はありますが、対応しなければならないテーブルが少ないときやCSSのみで完結させたい場合に、試してみてはいかがでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム