CSSグリッド(iota)の使い勝手がいい

前回の投稿の中にCSSグリッド(iota)を使用して<table>タグの使用をやめました・・・
としましたが、もう少し使用する箇所を考えてみました?
他の利用方法として、横並びのメニューバーを作成する時には<UL>、<li>、STYLE=”float:left”などを組み合わせて作成していましたが、列の数を指定しておけば、<li>に該当する部分を<div>、</div>で、区切っておくと、自動的に等幅、等間隔で綺麗に並べてくれます。

“モバイルフレンドリーではありません”からの脱却

ビュアーで検索した時にこのページは“モバイルフレンドリーではありません”と表示されるようになっていますが、タブレットやスマホで見たときに見づらいという事ですが、見ることができないという事ではありません。
とはいえ、“モバイルフレンドリーではありません”という表示がされるとユーザーは見てくれません。

私は“モバイルフレンドリーではありません”を表示させないようにする為に(SEO対策として)、
第一番に画面サイズや画像などの固定値での指定を削除する方法を取りました。
そして、Googleが無料で公開しているモバイルフレンドリーテストツールを用いて、Webページがスマートフォンでの閲覧に適しているかどうかをチェックしています。

そのほかに<table>タグの使用をやめ、CSSグリッド(iota)を使用しすることにしました。本当に簡単に表が表現できます。

アフリエイト方法用のページを(みっともないページですが)iotaを使用して”モバイルフレンドリーではありません”からの脱却しました。列の幅などを「width」などで指定していましたが、幅の指定をしなくても自動的にアサインしてくれます、ほかにも<table>タグを使用していたページもiotaを使用して変換しました。

このブログもスマートフォンに対応するためにWPtouch Mobile Plugin 無料というプラグインをインストールしました