これまで啓蒙の意味で何度か記事にしている 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に320px以上の横幅指定を行っている場合ははみ出しが100%発生。
width指定を取り除くか、下の手にはなりますが全体に overflow-x: auto; の指定を行って部分的に横スクロールボックス状態にしておくか。
いずれかの対処が必要です。
横スクロールボックスにしておくと、ページ全体が押し拡げられて結果画面超過、といったことを避けることはできます。
つまりモバイルフレンドリーの禁則とはなりません。
しかし場合によっては閲覧者にとって不都合なレイアウトと言えるかと思います。
まとめ
めちゃくちゃ多いです。ホントにめちゃくちゃ多いです。このtableはみ出し。
ブラウザ幅を狭めて目視確認してくださいね。
あと、非常に多いなぁと感じるのですが、スマホはスマホ版を設定しているのだから大丈夫 という ガチな思い込み が抜けない方。
そんなわけないじゃないですかー (´・ω・｀)
だって個別記事というのは自分が書いたものがそのままスマホ版でも反映されるわけで、スマホ版にしたからといって何かしらの対処が加わるわけではありませんよ。
記事内容については全てユーザーの自己責任です。
最後に言葉が乱暴になりますが、刺さるように敢えて。
このご時世でパソコンばっか気にしてスマホ版の見え方を気にしないなんてバカのやること。
わざとだよ。怒らないで (o'ω')ﾉ
There are no comments yet.