• SEOブログ

    スマホサイトWeb WordPressなどのSEO
    小画面 少コンテンツ 省テキスト 多画像対応の
    コーディング実験検証

  • SEOブログ

テーブル（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/
╋━━━━━━━━━━━━━━━━━━╋
2020.12.02 1:08 pm HTML5 iOS（iPhone・iPad Macも） Web WordPress
«
»
 

SEO塾/アルゴリズム社の他のSEOサービスについて

関連する投稿