【いまさらスマホ対応？っていうときのCSS】
PC専用サイトって言ってたのに、後から
「スマホでもちゃんと見れるようにしたいんですけど」
って言われることありませんか？
スマホ対応は最初の段階で想定しておくからこそ
「レスポンシブ」という言葉は現実味を帯びることができます。
でも残念ながら、WEB制作を仕事にする人以外でそこまで考えて
デザインを決めることは皆無ではないかと感じます。
で、どうしてもスマホ対応にしたいって言われたときに
真っ先に検討すべき方針はCSSのみで対応できるかどうかです。
レスポンシブと言っても、HTMLの構造を変更しないとどうにもならないことは
多いので、なるべく大工事は避けたいところ。
基本方針はこうでしょう。
・画像はmax-width:100%;などで自動伸縮
・テキストはメディアクエリで分岐するか、単位をvwに変更
・邪魔なものは割り切ってdisplay:none;
・左右入れ替えは float:left / right を逆転
・テーブルは display:block / inline-blockで縦並びに変更
あとは、大きく配置を入れ替える場合は
「JSでレスポンシブな条件分岐」
を使うと良いでしょう。
参考）
767px以下なら要素Aを要素Bの先頭に移動。
768px以上なら要素Aを要素Cの先頭に移動。
$(function(){ if($(window).width()<768) { $('A').prepend('B'); } else { $('A').prepend('C'); } });
レスポンシブな条件分岐は、上記のように
ウィンドウサイズを調べる以外にも
window.matchMedia('(max-width:768px)').matches
を使う方法もあります。
▼Mozilla Developer Network
developer.mozilla.org
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
