attention admin about comments trackbacks you may also like

tableの利用は非常に注意が必要です【モバイルフレンドリー】【画面幅の超過】

2017年10月16日
カスタマイズ
9
Education HTML Responsive SEO MFI MobileFriendly トラブル対処 初心者向け

これまで啓蒙の意味で何度か記事にしている tableタグの利用 についてです。
なかなか意識が変えられないというか。気づいて頂けないというか。

当弱小ブログをご覧の方の中にも 必ず該当者がいるはず ですので、心当たりがあるのならば潔く修正をお願いします(笑)
誰のためでもなく自分のために。そして 足を運んでくれる訪問者のために

モバイルフレンドリーの意識を持つことの大切さ

読んで字の如く、モバイルデバイスに対してフレンドリーな表示であること を指すひとつの用語です。
簡単に言うと、スマートフォンでの内容表示に障害が無いこと です。
スマートフォンはパソコンと比較すれば非常に画面幅が狭いわけですよね。ですから
今までと同じ感覚をいつまでも引きずって記事を書いていたのではスマートフォンで障害が出ます。
もういい加減個々の意識は変えていかないといけませんよ (´・ω・`)
じゃないと 時代に取り残される

モバイルフレンドリーサイトか否かというのは現在では ランキングシグナル の一つになっていますので、広く閲覧して欲しい・少しでも検索上位に食い込みたい、という方はモバイルでの検証を怠らず修正すべきところは修正してください。

個別記事のみに関して言えば、パソコンからモバイルでの見え方を確認するには ブラウザの横幅を狭くするだけでもわかる わけですから、その程度のことは記事を書いた時にできるはずです。
レスポンシブテンプレートをご利用の方はその見え方がそのままイコール、スマートフォン閲覧者が見ている画面です。
スマホ版を利用している方は「大体」そんな感じで見えてますが、スマホ版はパソコン版とは別のhtml, CSSで構成されていますので全く同じというわけにはいきませんが。
いずれにしろパソコンでブラウザを小さくしたら何かがはみ出した、という場合には ほぼ確実にスマホでもはみ出してます。

今やほとんどの閲覧はスマートフォンから行われる

ブログを運営している方ですと、自分の記事はパソコンから書くという方が多いかと思います。
ですが閲覧側・訪問側に回った際にはパソコンではなくスマートフォンを利用することが多いんじゃないですか?
私もその一人です。
パソコンで書き、訪問もパソコンという方は割りと少数派になりつつあります。

検索する場合はどうでしょうね。
何か調べごとが有る時、わざわざパソコンを起ち上げて検索する方ってもうかなり少なくなっているのではないでしょうか。
ほとんどの検索はスマートフォンで行われる と思ってください。
実際そうです。
それを受けてのMFIです。

MFIローンチの前にPC版とSP版の表示確認をしましょう - カスタマイズ

MFI = モバイル ファースト インデックス サイトの第一評価対象がパソコン版からモバイル版(スマートフォン版)へと変更 されます。 2017年ローンチの予定がずれこんで2018年に実装か、と言われています。 来るべきその時に備え、今からパソコン(以下 PCと称す)とスマートフォン(以下 SPと称す)、それぞれの見え方を確認しておきましょう、というススメ。...

何が言いたいかというと。
自分が記事をパソコンで書いているからといって、パソコンでの見え方ばっか気にしてたらアカン
ってこと (´・ω・`)

モバイルフレンドリーの必須要件とは

・携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
・ズームしなくても判読できるテキストを使用していること
ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
・目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

Googleウェブマスター向け公式ブログ

条件はいくつかありますが、上から3つ目の ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していることに注目。
当該記事はそのことについて書いています。
平たく言うと、
何かが画面からはみ出してたらダメ!
ってことです。
tableはこの禁則を犯しやすいhtmlタグです。

モバイルと相性の悪いtableタグ

相性は「非常に悪い」と言って良いと思います。
tableの特性について、その対策も既に記事にしていますので、ここまでで自分が該当しているとお気づきになった方は以下のページで修正を。

レスポンシブデザインで要素がはみ出す原因はwidth指定 - カスタマイズ

せっかくレスポンシブデザインを選んでも 要素がはみ出しては台無しです。 これは見た目や使い勝手の問題も大きいですが、Googleセンセがはみ出し大嫌いです。 その理由だって結局のところ「ユーザビリティ」の問題ですけども。 レスポンシブテンプレートを選んだのだから、モバイルフレンドリーだね ♪ と思ったら大間違いです テンプレート製作者の手の届かない領域「記事内容」までしっかり管理しましょう。...

修正自体は可能なんですが、そもそもが相性が悪い(笑)
私もtableは利用しますしはみ出さない処理もしていますが、スマホではこんな感じになっちゃう ↓ tableをスマホで見ると文字改行が変 横並

みたいな。しかしこれはtableの特性ですからどうしようもないですよ。
セル数やセル内容が多ければ多いほどこういったことが顕著になります。
対策をすれば上記スクショのようになりますが、何も考えずにtableを掲載してしまえば はみ出します
レスポンシブでもスマホ専用版でも等しく起こります。
tableに320px以上の横幅指定を行っている場合ははみ出しが100%発生。
width指定を取り除くか、下の手にはなりますが全体に overflow-x: auto; の指定を行って部分的に横スクロールボックス状態にしておくか。
いずれかの対処が必要です。
横スクロールボックスにしておくと、ページ全体が押し拡げられて結果画面超過、といったことを避けることはできます。
つまりモバイルフレンドリーの禁則とはなりません。
しかし場合によっては閲覧者にとって不都合なレイアウトと言えるかと思います。

まとめ

めちゃくちゃ多いです。ホントにめちゃくちゃ多いです。このtableはみ出し。
ブラウザ幅を狭めて目視確認してくださいね。

あと、非常に多いなぁと感じるのですが、スマホはスマホ版を設定しているのだから大丈夫 という ガチな思い込み が抜けない方。
そんなわけないじゃないですかー (´・ω・`)
だって個別記事というのは自分が書いたものがそのままスマホ版でも反映されるわけで、スマホ版にしたからといって何かしらの対処が加わるわけではありませんよ。
記事内容については全てユーザーの自己責任です。

最後に言葉が乱暴になりますが、刺さるように敢えて。

このご時世でパソコンばっか気にしてスマホ版の見え方を気にしないなんてバカのやること。

わざとだよ。怒らないで (o'ω')ノ

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(9)

There are no comments yet.

hige  

2017/10/16 (Mon) 23:22

あれま 過去記事の表が!

 過去の記事で表を作ってまして、横長の表でスマホで画面幅をオーバーした時、表だけをスライドできたはずなんですが、Akira氏のこの記事を見て、もう一度見直すと、切れてます。
 スライドも出来ません。
 ことさら私が書かなくてもいい数値換算表なのですが、こうなると意地でも自力でスマホ上で表示したくなります。
 表なので、表の構成を考え直さなあかんのかと。
 スマホ上に表現されるよう根本的に表のデザインを考え直さないと。

 以前からAkira氏が警告されてた、HTML5に反するtableをレイアウトとして利用するのはあかんと。
 本格的に過去記事を見直して書き直してみようかと。以前教えていただいた display: table で。
 それも勉強になので。

 どうでも良いことですが、FC2ブログのランキングバナーがSSL化されました。
 なんか、インフォメーションもなく、このところ、SSL化をおおっぴらに取り上げられたくなさそうなFC2ブログ。

Akira  

2017/10/16 (Mon) 23:30

To higeさん

higeさん、こんばんは ( ゚Д゚)ノ

display: table でも同じです。
display: tableというのはtableの「ふるまいを真似る」という意味ですので、tableタグの特徴はほぼ全て引き継がれます。
表を<div>かなにかで囲って、そちらに
overflow: auto;
あるいは
overflow-x: auto;
を指定しているってことなんでしょうかね。
そのページをお見せ頂くのが一番なのですが(笑)

-------

FC2の301リダイレクトは来るんでしょうかね (´・ω・`)
その際にお知らせがあるとか。
読めんなー ( ̄∀ ̄;)
SSL化できるというのはブログサービスではかなり宣伝要素になるはずなのに。
何故広報しないのか。
読めんわー。FC2ブログマジ読めんわー(笑)

------- 追記

ごめんなさい。定義の観点でdisplayのtableを、という意味ですよね。
勘違いしてました。ごめんなさい (´Д⊂ヽ

hige  

2017/10/17 (Tue) 11:10

table の件

すいません。
tableの件、お忘れください。
overflow等、定義し忘れてました。
どこかの時点でCSSが欠落してました。
お恥ずかしい。

Akira  

2017/10/17 (Tue) 16:46

To higeさん

了解ですー (o'ω')ノ

ぬこぬこ  

2017/10/19 (Thu) 07:31

こんにつわ。
いつの間にか目次が実装されていますが目次の実装の仕方とか記事にされてまてんよね?
どうやったら実装できるんでしょうか?
実装は難しいんでしょうかね?

Akira  

2017/10/19 (Thu) 18:59

To ぬこぬこさん

こんばんは (ノ゚ェ゚)

目次は記事にしてないですね。
実装はさほど難しくありませんが説明は要るかと思います。
私自身の作業が終了していないので済み次第という形になりますが、それでよろしければご紹介しますよ (´・ω・`)
ただ「そのうちに」としか言えない ^^;

-------
時間がとれたので今のうちにと書きました (´・ω・`)

ゆーみー  

2017/10/20 (Fri) 18:41

「Chronicle」テンプレート

クロニクルテンプレートをお借りしています。
日々、格闘しながら、レイアウトの微調整をしておりますが、トップページの回転画像をもう少し小さくして、点数を増やす方法はありますか?
現在、トップページの記事数は8つです。

また、何回かに1回、右欄の1番上にあるカレンダーが、ヘッダー画像の下に潜ってしまいます。
何が悪いのでしょうか?

こちらの記事は読んでいますが、理解能力が足らず、バカな間違いを犯しているかもしれません。

あとは、ほかのテンプレではあったような、トップメニューにアロー当てるとカテゴリーのツリーが表示される
とか、できたら嬉しいです。

ご面倒おかけしますが、宜しくお願いします。

Akira  

2017/10/20 (Fri) 23:26

To ゆーみーさん

ありがとうございます。
こちらは記事の主旨が違いますのでChronicle専用ページへの移動をお願いします。
お返事もそちらで致します。

https://vanillaice000.blog.fc2.com/blog-entry-516.html#comment4424

ゆーみー  

2017/10/21 (Sat) 14:30

ご指摘ありがとうございます、移動します

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)