tableも重要なコンテンツ、デバイスに応じてレスポンシブWebデザインのtableを。tableタグでコーディングしてレスポンシブ化、またはdl dt ddタグでテーブル化
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
コンテンツは、パソコンやスマートフォンなどのデバイスの画面に表示される。
まったく当たり前のことだが、
とくにテーブルを、スマホ対応させることに苦労した。
このSEO塾.comを公開するに当たって、SEO塾のWordPress用テンプレートがベースなので、まずはプラグインをいろいろ当たって試してみた。
開閉式のものが多いが、ユーザーのタップが要求される、
コードの追加が必要なものもある、
最悪の場合は、そのプラグインのために新たにテーブルを作成しなければならないものも…
プラグインというよりも、jQueryもあったのだが、これは導入済みの機能とバッティングするものもあって、これまた決まらない。
もはやテーブルをあきらめるという選択肢もあったが、継続している四半期決算レポートや、とくにオーダー受付と確認画面はテーブルが圧倒的に見やすい。
そこで、検索して情報を漁りながら、自サイト用に加工して落ちつくことに。
以下は、SEO塾.comの公開に先立ち、あらかじめ作成したフォーマットの事例である。
実際のテーブル、HTMLソースは省略(ブラウザーのソース表示などでどうぞ)、CSSコードを簡略化して記述する。
テーブルの表示としては、パソコンやタブレットはそのまま、今までのテーブルと同じ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縦 */ }
汎用例として、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を公開している方もおられる。
まず、入れ子のテーブルだけを先に変化させる
レスポンシブ列左A2 | responsive列右A2 | ||||
---|---|---|---|---|---|
レスポンシブ列左B2 |
|
入れ子のテーブルのclassにも「respStyle」
外のテーブルは上記「1行セル2個」と同じ
入れ子のほうは、ブレイクポイントをずらしている
@media screen and (max-width: 667px) { /* ▼667:iPhone6s横 */
/* テーブル入れ子 */
.respStyle td .respStyle th, .respStyle td .respStyle td { display:block; }
}
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; }
}
普通の表のように、行と列を入れ替えたくない、
どうしても普通の表として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」と消しているが、スパムだと騒ぐ人はいないだろう(笑)
たとえば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/ ╋━━━━━━━━━━━━━━━━━━╋