abberoad https://blog.hatena.ne.jp/abberoad/ 犬も歩けば猫も歩く https://abberoad.hatenablog.jp/ SEO レスポンシブデザインをする上で、意外に厄介なのが「テーブル」です。 PCでは、横に長く幅広く見せたい表組みですが、スマートフォンでみると、幅が狭いのでそのままだとなにか窮屈で見にくい・・・。 そこで、スマホ表示の際テーブルレイアウトを変える方法をご紹介したいと思います。 とりあえず適当に表を作ってみました。 １．PCで表示すると、 こんな感じで、割と問題なく普通に見ることが出来ます。ところが、同じ表を今度はスマートフォンで見てみると・・・、、 ２．スマートフォンで表示 なんか窮屈な感じで、読みにくいと思いませんか？そこで、下記のようにデバイス幅によってテーブルレイアウトをCSSで切り替えたいと… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fabberoad.hatenablog.jp%2Fentry%2F2015%2F04%2F26%2F162020" title="スマホ表示の際、テーブルレイアウトを変える方法 - 犬も歩けば猫も歩く" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/a/abberoad/20150426/20150426161255.jpg Hatena Blog https://hatena.blog 2015-04-26 16:20:20 rich https://abberoad.hatenablog.jp/entry/2015/04/26/162020 1.0 100%