テーブル(table)のレスポンシブWebデザイン スマートフォンで表示を変更するには

テーブル(table)のレスポンシブWebデザイン スマートフォンで表示を変更するには
tableも重要なコンテンツ、デバイスに応じてレスポンシブWebデザインのtableを。tableタグでコーディングしてレスポンシブ化、またはdl dt ddタグでテーブル化

テーブル(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個の場合

レスポンシブ列左Aresponsive列右A
レスポンシブ列左Bresponsive列右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入れ子 テーブルの中にテーブル

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

レスポンシブ列左A2responsive列右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行のセルが多いときはリスト化する

レスポンシブ列左A3resp列右A3(1)resp列右A3(2)resp列右A3(3)resp列右A3(4)
レスポンシブ列左B3resp列右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のコーディング、そしてコンテンツはテキストなら日本語のライティング、スマホ時代は大変だ(笑)

追記メルマガから

Vol.290 tableのレスポンシブ化 他タグでテーブル化

 
 *****************************************
 SEOアクセスアップ SEMオーダーアップ SEO塾
 *****************************************

 第 290 号                 2020-11-29発行

╋━ 今号のトピック ━━━━━━━━━╋

 ◆tableのレスポンシブ化
 ◆他タグを疑似テーブル化

╋━━━━━━━━━━━━━━━━━━╋




╋━━━━━━━━━━━━━━━━━━╋
 ◆ レスポンシブtable
╋━━━━━━━━━━━━━━━━━━╋


 スマホ対応のWebは
 いろいろ面倒臭い


 ・ tableタグでレスポンシブ
────────────────────


 テーブル(table)のレスポンシブWebデザイン
 スマートフォンで表示を変更するには
 https://www.seojuku.com/blog/responsive-table.html


 td を
 ブレイクポイント
 スマホ表示で

 display: block;


 あるいは
 リストスタイル

 td {
 display:list-item; }
 }


 まずtableタグでコーディングして
 スマホ表示用にCSSを既述する


 table そのものや td の
 横幅が思うようにならない
 思うようにするには
 CSSの既述が煩雑になる


 そこで
 次のように
 別のタグを使って
 テーブル化する方法もある


 ・ dl dt ddタグでテーブル化
────────────────────

 HTML5とCSS3

 cssでいろいろなことができる
 とくに
 flexboxは魔法のコードでもある


 <dl>
<dt>用語</dt>
<dd>解説</dd>

</dl>
dl { display: flex; flex-wrap: wrap; } これで dtとddは、横並びになる スマホ縦画面などで 縦並びにするには flexboxを解除する dl { display: block; width: 100%; } あとは 線の色 border を CSSで設定するだけ ・ ブレイクポイント ──────────────────── 【2020年3月】レスポンシブ CSSブレイクポイント ・メディアクエリ(@media)  https://www.algorism.co.jp/posts/breakpoint-mediaquery/ いろいろサイトをつくってみて 将来的に悩まないようにするには スマホ対応のブレイクポイントは スマホ縦のみ @media screen and (max-width: 480px) あるいは @media screen and (max-width: 500px) これで十分と思える もしくは これで十分なような サイトづくりを心がける そのほか スマホ横やタブレット縦を加える場合は @media screen and (max-width: 896px) あるいは @media screen and (max-width: 900px) こういったところか ──────────────────── ╋━━━━━━━━━━━━━━━━━━╋ ◆ 編集後記 みなさん コロナ禍の昨今 いかがお過ごしでしょうか? 観光や飲食などは Webサイトでの集客は 難しいですよね Go To の支援策次第? Webそのものが ビジネス的な価値を 失っているかもしれません オンライン販売は 扱う商材によって 好不調もあるでしょう 現状を 一時的なものとして 新型コロナの終息を待つのか ほんとうに ウィズコロナ ニューノーマルとして ビジネスモデルや 商材そのものを 変更するべきかもしれません ╋━━━━━━━━━━━━━━━━━━╋ ▼ アルゴリズム社運営サイト ・アルゴリズム社 https://www.algorism.co.jp/ ・SEOブログ:https://www.seojuku.com/blog/ ╋━━━━━━━━━━━━━━━━━━╋ ◆ 注意事項 このメールマガジンは、上位表示を絶対に保障するものではありません。 よく読み、よく理解し、よく実践してください。 SEO はあくまでも自己責任でお願いします。 このメールマガジンの全文または一部を、発行者の許可なくブログ その他に、転載することを禁止します。 ┼──────────────────┼ ■ メールマガジンの登録・解除  https://www.mag2.com/m/0000114916 ■ SEO塾/アルゴリズム社  https://www.algorism.co.jp/ ╋━━━━━━━━━━━━━━━━━━╋
«
»