【レスポンシブwebデザイン】元ネットワークエンジニアのブログカスタマイズ(テーブルサイズ自動調整編)

レスポンシブwebデザイン
レスポンシブwebデザインテーブル設定編
©SEGA
©2015 KADOKAWA アスキー・メディアワークス
©KADOKAWA CORPORATION 2016
今回は、ブログにスマホ対応を施すためのカスタマイズの一手法としてテーブルサイズの自動調整方法について解説致します。
その前に、まずはテーブルを使う際のポイントについて述べたいと存じます。

PCで閲覧する場合でも、スマホで閲覧する場合でもテーブルを作成する場合には注意すべきことがあります。
また、スマホで閲覧する際は特にブラウザの表示速度が重要になってきます。

なぜなら、多くの場合、PCで閲覧するよりもスマホで閲覧する方がページの表示に時間を要するからです。
そのため、テーブルを作成する際は、この点に注意を払う必要があります。

テーブルを作成する際のポイント


ブログを運営されている方の中にはテーブルを使ったレイアウトを行われている方も多いかと思いますが、このテーブルを作るためのタグであるテーブルタグというのは、なかなか厄介な代物だったりします^^;。

確かにテーブルを作成すると、情報をコンパクトに整理出来たり、見栄えもよくなったりするのですが、検索エンジン対策としてのSEO(検索エンジン最適化)を行う上では必ずしも推奨されておらず、あまり多用すると検索順位に影響することもあると言われています。

但し、SEO的に不利になると言われているのはHTMLのみでテーブルを作成した場合で、その場合、テーブルの枠組みもレイアウトもすべてHTMLで記述するため、ソースが長くなりがちです^^;。

そのような長いソースというのはSEO的に不利に働き、グーグルのクローラ巡回の際にページ認識が充分になされず、また、ブラウザで表示するにも処理に時間を要してしまうことが考えられます。

なぜなら、クローラはページの上部から情報をチェックしていきますが、その全てを確認するわけではなく、長いソース等を記述していると、見落とされる可能性があり、検索順位に悪影響を及ぼす可能性があるからです。

最近では、CSS(スタイルシート)を使ってテーブルを作成している方もおられるとは思いますが、テーブルを作成するためにはテーブルタグを用いる必要があり、基本はHTML+CSSの組み合わせで作成することになります。

この場合、テーブルの枠組みをHTMLで記述し、レイアウト等をCSSで記述することになります。
文法的にも、HTMLで記述する部分とCSSで記述する部分に分けることで、クローラにも優しいものとなります。

ベストなのは、HTMLとCSSを記述するファイルをそれぞれ分けることです。

上記のような構成であれば、SEO対策として問題なく機能すると思います。
ですが、やはりテーブルタグは他のソースに比べると長くなる傾向にあり、それだけブラウザやクローラの負担になってしまうため、必要最小限に留めておくのが得策かと存じます。

デザイン上見栄えがよくなるので、多用したくなる気持ちはわかりますが、一つのページに多くのテーブルを作成することは控えておいたほうが良いと思われます。

レスポンシブwebデザインにおけるテーブルの自動調整方法


ブログにテーブルを用いる場合、HTMLとCSSを併用することは先に述べた通りなのですが、文法上正しいテーブルを作成したとしても、スマホで閲覧するとテーブルが画面からはみ出してしまうことがあります。

最近では、スマホに対応したレスポンスwebデザインを施したテンプレートが多く見られるようになって来ましたが、そのようなテンプレートを用いてもテーブルサイズが大きい場合、画面からはみ出して表示されることがあります。

このような場合、レスポンスwebデザインではあるものの、テーブル使用を想定して作られていないことが多く、テーブルを用いない前提でテンプレートが作成されているケースだと言えます。

実際、テーブルタグの使用そのものを無効にしているテンプレートもあり、基本、テーブルはあまり歓迎されているとは言えないのかもしれません^^。

ですが、テーブルを使って情報を整理すると見栄えも勝手も良くなるので使いたくなるのが人情ってものですよね^^;。

一時期、SEOと相性が悪いと囁かれたがあまり、使用を躊躇してしまっている人が多いのかもしれませんね^^;。
確かに、あまり多用するのはよくないとは思いますけどね^^;。

よって、テーブルを使いたい人にとってはこのような状況は好ましいとは言えず、スマホで閲覧する場合に備えて対策を打つ必要が出てきます。

これは、テーブルサイズがPCで閲覧する場合のものであるため、スマホで閲覧すると画面からはみ出てしまうというものです。
スマホの表示限界を越えているため、記事からテーブルがはみ出して表示されるというわけです。

この状態を回避するには、以下の設定をブログテンプレートのCSSに追記します。

table{
  width: auto;
  table-layout: fixed;
}

上記の設定をブログテンプレートに施すことで、スマホで閲覧した際、記事スペースからはみ出したテーブルが記事スペース内に収まるようになります。

つまり、テーブルタグに対して表示幅(width)を自動(auto)に設定することで、表示領域に合わせて自動的にサイズ調整が行われるようになるわけです。

また、テーブルレイアウトが崩れないように、固定(fixed)しています。

PCでは問題なく表示されるのに、スマホだとうまく表示されず、記事からはみ出して困っている方は是非お試し頂ければと存じます。

有料のテンプレートだと対策済みのものもあるかと思いますが、無料のテンプレートだとテーブル対策が施されていない場合があり、スマホの閲覧時の表示速度や見栄えを考えると対応した方が良いのではと思います。

今後も逐次、レスポンシブ設定を行う上で必要な設定を紹介していきたいと存じます。

WEBデザイン講座をお探しならこちらがおすすめ♪

↓ ↓ ↓

WEBデザイン講座をお探しならこちら

ブログカスタマイズの関連書籍はこちらになります

↓ ↓ ↓

ブログカスタマイズの関連書籍はこちら

CSSの関連書籍はこちらになります

↓ ↓ ↓

CSSの関連書籍はこちら

スポンサーリンク



Comment

Leave a Reply


管理者にだけ表示を許可する