テーブル(table)コンテンツをスマホ対応に

コンテンツは、パソコンやスマートフォンなどのデバイスの画面に表示される。
まったく当たり前のことだが、
とくにテーブルを、スマホ対応させることに苦労した。

このSEO塾.comを公開するに当たって、SEO塾のWordPress用テンプレートがベースなので、まずはプラグインをいろいろ当たって試してみた。

開閉式のものが多いが、ユーザーのタップが要求される、
コードの追加が必要なものもある、
最悪の場合は、そのプラグインのために新たにテーブルを作成しなければならないものも…

プラグインというよりも、jQueryもあったのだが、これは導入済みの機能とバッティングするものもあって、これまた決まらない。

もはやテーブルをあきらめるという選択肢もあったが、継続している四半期決算レポートや、とくにオーダー受付と確認画面はテーブルが圧倒的に見やすい。

そこで、検索して情報を漁りながら、自サイト用に加工して落ちつくことに。

レスポンシブWebデザインのテーブル(table) 4例

以下は、SEO塾.comの公開に先立ち、あらかじめ作成したフォーマットの事例である。

実際のテーブル、HTMLソースは省略(ブラウザーのソース表示などでどうぞ)、CSSコードを簡略化して記述する。

  • 汎用:1行セル2個
  • 入れ子:テーブルの中にテーブル
  • 複数列はスマホ画面でリスト化
  • 番外:行見出し温存

テーブルの表示としては、パソコンやタブレットはそのまま、今までのテーブルと同じHTMLとCSS。
ブレイクポイントを、このテンプレートの仕様も加味して、iPhone 6 Plusの縦画面、480pxに設定。

ブレイクポイントの例

ちなみに、テンプレートの仕様とあわせて、次のようにブレイクポイントを設定している。

@media screen and (max-width: 800px) { /* タブレット縦? */ }
@media screen and (max-width: 768px) { /* ▼768:iPad縦・iPhone6+横 */ }
@media screen and (max-width: 667px) { /* ▼667:iPhone6s横 */ }
@media screen and (max-width: 568px) { /* ▼568:iPhone5s横 */ }
@media screen and (max-width: 480px) { /* ▼480:iPhone6+縦 */ }
@media screen and (max-width: 400px) { /* ▼400:Android縦? */ }
@media screen and (max-width: 375px) { /* ▼375:iPhone6s縦 */ }
@media screen and (max-width: 320px) { /* ▼320:iPhone5s縦 */ }

table 2列=1行のセル2個

汎用例として、2列つまり1行のセルが2個の場合

レスポンシブ列左A responsive列右A
レスポンシブ列左B responsive列右B

tableのclassに「respStyle」を入れて

@media screen and (max-width: 480px) { /* ▼480:iPhone6+縦 */
/* テーブル セル2個 */
.respStyle th, .respStyle td { display:block; }
}

行と列の入れ替え

普通の表では、1行目が見出しとなることが多い。
また、その見出し行を「thead」でマークアップすることも推奨されている。

上述の例では、その見出しをあえて、一番左の列にもっていって、普通の表の行と列を入れ替えているわけだ。

なお、このレスポンシブテーブル導入で気づいたのだが、HTMLソースのtableは、1行を左から右へと記述されている。列にしたがって縦に記述されていない。
検索エンジンのクローラーもインデクサーも、そのように読み、そのように解析すると思われる。

つまり、このようなレスポンシブテーブルのソースは、SEOにも有利になるだろう。微々たるものに過ぎないとは思うが…

ちなみに、既存のコンテンツを修正する場合は、テーブルをExcelに張って、そのときに行列入れ替えする、あるいは次のようにHTMLのテーブルの行列入れ替えJavaScriptを公開している方もおられる。

table入れ子 テーブルの中にテーブル

まず、入れ子のテーブルだけを先に変化させる

レスポンシブ列左A2 responsive列右A2
レスポンシブ列左B2
入れ子列左α 入れ子resp列右α
入れ子列左β 入れ子resp列右β

入れ子のテーブルのclassにも「respStyle」

外のテーブルは上記「1行セル2個」と同じ
入れ子のほうは、ブレイクポイントをずらしている

@media screen and (max-width: 667px) { /* ▼667:iPhone6s横 */
/* テーブル入れ子 */
.respStyle td .respStyle th, .respStyle td .respStyle td { display:block; }
}

tableリスト化 1行が複数セル

3列以上、1行のセルが多いときはリスト化する

レスポンシブ列左A3 resp列右A3(1) resp列右A3(2) resp列右A3(3) resp列右A3(4)
レスポンシブ列左B3 resp列右B3(1) resp列右B3(2) resp列右B3(3) resp列右B3(4)

tableのclassに「listStyle」を入れて

@media screen and (max-width: 480px) { /* ▼480:iPhone6+縦 */
/* テーブル 複数セル リスト化 */
.listStyle tr,
.listStyle th { display:block; }
.listStyle td {
display:list-item; }
}

番外:nth-of-type

普通の表のように、行と列を入れ替えたくない、
どうしても普通の表として1行目の見出しを活かしたいときは、

td:nth-of-type(n):before { content: "文字列"; }

CSSのほうでまかなう。

見出し 見出しX1 見出しX2 見出しX3 見出しX4 見出しX5
番外:Y 番外:Y1 番外:Y2 番外:Y3 番外:Y4 番外:Y5
番外:Z 番外:Z1 番外:Z2 番外:Z3 番外:Z4 番外:Z5

これもリスト化の別バージョンなので、tableのclassに「listStyle」を入れる
まず上記の「リスト化」のCSSが適用される。
ということは、「リスト化」のCSSも設定済みが前提である。

また、特殊なので適当に、ここでは「special1」もclassに加えている。

さらに、使い回しする場合は、外部CSSに記述するが、そのページだけしか使わないときは、
この特殊テーブルを含むコンテンツパーツをたとえば「section」で囲み、その直下に
つまり、HTMLソースに直接

<style type="text/css" scoped>
@media screen and (max-width: 480px) { /* ▼480:iPhone6+縦 */
/* テーブル 特別 */
.special1 thead th { display:none; }
.special1 tbody th { display:block; }
.special1 td:nth-of-type(1):before { content: "見出しX1:"; }
.special1 td:nth-of-type(2):before { content: "見出しX2:"; }
.special1 td:nth-of-type(3):before { content: "見出しX3:"; }
.special1 td:nth-of-type(4):before { content: "見出しX4:"; }
.special1 td:nth-of-type(5):before { content: "見出しX5:"; }
}
</style>

このように書き込む。

この番外レスポンシブtableの注意点は、
先頭の見出し行を「thead」、よってその下を「tbody」でマークアップすること。
また、theadのthを丸ごと「display:none」と消しているが、スパムだと騒ぐ人はいないだろう(笑)

細かい見栄えはCSSに追記を

たとえばthに色をつけたり、テーブルの線(ボーダー)を設定しているときはブレイクポイントで表示をしないように(border-style:none)することは、各自で取り組んでいただきたい。

テーブルの幅(width)や、セルの中のpadding、リストの行間(line-height)など、やることも多い。

SEOの前に、HTMLやCSSのコーディング、そしてコンテンツはテキストなら日本語のライティング、スマホ時代は大変だ(笑)

«
»