cocoonのスマホ表示でテーブルを縦積みにカスタマイズした記録

当サイト”アカジンジャーナル”で使用しているwordpressテーマ「cocoon」は、シンプルにして必要十分な機能が備えられているテーマです。

もちろん完全レスポンシブですからテーブル（表）もレスポンシブ対応していますが、その方法は「幅広の表は横スクロールさせる」ものです。

表組（テーブル）は、一覧などを行や列ごとに分類して表示するためのレイアウトです。当サイトでは札所巡りについて多数紹介していますが、主に札所の一覧表に表組を使用しています。この表のレイアウトを、cocoonで用意されている横スクロールタイプのレスポンシブレイアウトではなく、スマホでは表の列を縦に積んでいく形式にしたいと思い、カスタマイズをしてみたのでご紹介します。

cocoonを前提にご紹介していますが、テーブルを縦積みにする理屈は他のテンプレートや静的なHTMLでも同じです。

cocoonのデフォルトのテーブル（表）表示
カスタマイズの要件
カスタマイズ後のテーブル
cocoonのスマホ表示で縦積みテーブルにするためのカスタマイズ詳細
レスポンシブ縦積みテーブルのデモ（というか本番）ページ
まとめ

cocoonのデフォルトのテーブル（表）表示

まずは、cocoonでtableを書くと、下図のようになります。

PC表示

スマホ表示

何も指定が無いノーマルなtableだと、列の幅はブラウザの幅に応じて変化し、コントロールが効きません。列が多ければスマホ画面では列幅が1文字分しか無い表示になってしまいます。

アカジン

このスマホ表示はあまりにも視認性悪すぎですよね

冒頭で紹介したように、cocoonでは、こんな表を横スクロールできるようにする設定を用意しています。設定方法とサンプルは以下に紹介されています。

テーブルをレスポンシブ対応の横スクロール方式にする方法

横スクロール表示対応のレスポンスでテーブル設定方法です。

この方法はテーブルの構成を崩さずにレイアウトされるので、上記ページのサンプルのようにセルのマージが複雑なテーブルや、一覧性や比較がキモになるテーブルの表示に適しています。

その一方で、横スクロールに慣れていないユーザーも少なくないのが現実であるのもまた事実。実際自分が閲覧者の立場に立ってみると、訪れたページで、表が横スクロールになっていたとしたら、果たしてスクロールするだろうかと考えると、ちょっと心配になってしまいます。

ならば、当サイトの札所一覧表のような単純な作りで比較要素が多くないテーブルであれば、スマホではセルを縦に積んでいくレイアウトをした方が、断然見やすいと思い、カスタマイズをしてみたわけです。

カスタマイズの要件

今回のカスタマイズで実現したかったのは次の要件です。

PCでは横並びのテーブルの列を、スマホでは縦並びにしたい
PCでは列幅を考慮してセル内改行しているテキストを、スマホでは改行させずに表示したい（ムダにページが縦長になるのを避けるため）
PCでは1行目に表示されている列のタイトル（thead）を、スマホでは各セル冒頭にラベルのように表示したい

1番目が必須要件、2番目3番目は実際にスマホのテーブルを縦積みにしてみて、見やすさを考えて追加しました。

カスタマイズ後のテーブル

さて、以下の図がカスタマイズ後の表のキャプチャ。こんな感じになりました。

PC表示

スマホ表示

上図の表示例では、3つの要件（セルの並び順・表示項目・セル内改行のコントロール）だけでなく、背景・ボーダーの色、フォントサイズ、セル内スペースなどもカスタマイズしていますが、次章の解説では、その部分は割愛しています。

cocoonのスマホ表示で縦積みテーブルにするためのカスタマイズ詳細

それでは、このカスタマイズを実際のソースコードで解説していきます。

HTMLコード

<table class="vertical-table"><!--モバイルで縦積みテーブルスタイルを適用するためのセレクタ-->
    <thead class="pc-tablehead"><!--スマホで非表示にする部分-->
      <tr>
        <th>社名</th>
        <th>御祭神</th>
        <th>御祭神ふりがな</th>
        <th>別名/その他</th>
        <th>創建</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="agn-left label">品川神社</th>
        <td aria-label="御祭神:" class="label">天比理乃命&ensp;<br>素盞嗚尊&ensp;<br>宇賀之売命</td>
        <td aria-label="御祭神ふりがな:" class="label">あめのひりのめのみこと&ensp;<br>すさのおのみこと&ensp;<br>うがのめのみこと</td>
        <td aria-label="別名/その他:" class="label">東海道品川宿鎮守&ensp;<br>東海七福神の大黒天</td>
        <td aria-label="創建:" class="label">1187年</td>
      </tr>
      <tr class="last"><!--一番下のtrにはlastというclassを付加する-->
        <th class="agn-left label">芝大神宮</th>
        <td aria-label="御祭神:" class="label">天照大御神&ensp;<br>豊受大神</td>
        <td aria-label="御祭神ふりがな:" class="label">あまてらすおおみかみ&ensp;<br>とようけのおおかみ</td>
        <td aria-label="別名/その他:" class="label">芝神明&ensp;<br>関東のお伊勢さま</td>
        <td aria-label="創建:" class="label">1005年</td>
      </tr>
      
        <!--以下略-->
        
    </tbody>
</table>

HTML解説

今回カスタマイズするテーブルにはvertical-tableというclassを適用しました。
PCで表示されている列のタイトル（thead部分）をスマホでは非表示にするために、非表示対象の箇所（thead）にpc-tableheadというclassを適用します。
1列目（この表でいえば神社の名前）もthセルと同じ背景色を使いたかったのでthタグで囲みました。特にthにする要件が無ければtdで良いでしょう。
thタグ内はデフォルトではセンター揃えになってしまうので、左揃えにするagn-leftというclassを付けました。
tbody内の各セルは、スマホ表示にしたときにbrによる改行を無視させるためにセレクタとしてlabelというclassを付けています。また、改行を無視したときに単語と単語がくっついてしまわないように、brの前に半角スペース を入れています。（文章構造的には…なんですが）
PCでの2列目以降のtdには、スマホ表示にしたときに見出しのように表示できるように、aria-label=”ラベルとして常時する文字”をセットします。

CSSコード


/*テーブルをレスポンシブ化する */ 
.agn-left {
  text-align: left;/*thはセンター揃えなので左揃えにしたいthセルに適用*/
}
.pc-tablehead th{
  white-space: nowrap;/*セル内で改行しない*/
}
/*スマホ表示用*/
  @media screen and (max-width: 480px) {
    .pc-tablehead{
      display: none;/*【1】PCで1行目に表示されているタイトルを非表示に*/
    }
    .vertical-table th{
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの一列目を縦積みにする*/
      width: 100%;
    }
    .vertical-table td {
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの2列目以降も縦積みにする*/
      width: 100%;
    }
      .last td:last-child {
        border-bottom: solid 1px #8a9992;/*【4】表の一番下になるセルだけ下線を引く*/
     }
    .vertical-table td:before {
      content: attr(aria-label);/*【5】aria-labelで指定した値を表示させる*/
      display: inline-block;
      font-weight: bold;
      float: left;
      text-align: left;
      padding-right: 1em;
      white-space: nowrap;
    }
    .label br {
      display: none;/*【6】PCでセル内改行した箇所を改行させない*/
    }
/*スマホ表示用ここまで*/
}
/*テーブルをレスポンシブ化するここまで */