今年の夏もCSSでうにょーんとなっていました。
（毎年いただくお仕事なんですが、毎回頭をひねる…。お陰で勉強になっていますが）
今回は普通に組まれたHTML（元々レスポンシブする予定じゃなかったやつ）をレスポンシブ対応する作業がおおくて、ああこうすればいいのか…！というのが多かったので、まとめておきます。
レスポンシブデザインとは？
1つのHTMLで、画面サイズによってレイアウトなどが変わってしまうデザイン。
PC画面サイズやタブレットサイズ、スマホサイズなどで切り替える事が多いです。
切り替え方法としてはCSS Media Queries を使って切り替えます。
この方法も２つあって、link要素のmedia属性で読み込むCSSファイルを分ける方法と、CSSソース内に書き込む方法とあります。
link要素のmedia属性でCSSファイルを分ける方法
CSSを読み込む際に、media属性を以下のように指定することで画面サイズで読み込むCSSを変えることが出来ます。
この場合、画面幅が568px以下の場合にだけ phone.css が適用され、569px以上の場合にだけ pc.css が適用されます。
CSSソース内に書き込む方法
CSSソース内に@media screen and (max-width: 任意のサイズ) {}と描くと指定した画面幅の時だけ{}内に書かれたCSSが適用されます。
この場合、通常は#fffの背景色が、568px以下の場合#000になります。
CSSを上書き指定する時に知っておくと便利なこと
ソース内に画面幅が違う場合の指定を書き込む場合、既存の記述を変更したいデザインの指定で上書きしていく事になります。
この上書き指定をする時に知っておくと便利な方法を紹介していきます。
widthやheightの固定を解除する
width, heightはautoを指定する事ができます。
widthはブロック要素なら横幅いっぱいに、heightはコンテンツ内容に合わせた高さになります。
max-width など上限下限指定を打ち消す
max-width, max-heightはnoneを指定する事ができます。
min-width, min-heightは初期値がないので0pxで大丈夫です。
position:absolute; を打ち消す
position:relative;を指定し、top:100pxなど位置の指定はtop:autoと指定することで打ち消す事ができます。
背景色を消すときは background-color:transparent;
background-color:transparent;を指定すると、背景を透過することができます。
背景色の指定が要らない場合などはコレですね。
縦向き横向きでの見え方を考慮する
スマホで表示する際は縦向き/横向きでの表示も考慮する必要があります。
縦/横変えたら文字サイズが変わる場合は-webkit-text-size-adjustを
iPhone版Safariでよく起きるのが、横向きにすると文字サイズが大きくなってしまうという現象。
これはこちらに詳しく書かれていますが、-webkit-text-size-adjustというプロパティがautoになっているためらしいです。
なので、-webkit-text-size-adjust:100%と指定してあげると、文字だけ拡大するのを防げるようですよ。
paddingやmarginに%指定
縦向きの時は両サイドの余白を狭く、横向きは少し広くとりたい、という場合。
CSS Media Queries で縦向きの場合、横向きの場合と指定してもいいんですが、面倒くさいじゃないですか。
そういう場合、余白部分に%指定を使うっていうのも手です。
こんな感じで、画面幅に対して余白が出来ます。
全体を囲むdivなどがあれば、divに対して横幅96%とか指定できますが、ない場合なんかは使えると思います。
スマホサイズを考慮した指定について
表組の場合
スマホで表示する事を考慮せずに組まれたHTMLで大変なのは表組の表示だと思います。
こういう表組であれば、th,th{display:block;}としてあげることで
こんな感じに変更されて見やすくなったりします。
サンプルはこちら
これよりも横長の表組の場合は、td部分をスクロールしたり、表組部分を別表示にしたりと色んな方法があります。
以下の記事がとても参考になります。
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
画像の場合
使われている画像がスマホ画面よりも大きいサイズの場合、img{width:100%; height:auto;}としてあげると見やすくなります。
ただコレだと、小さいアイコンなんかが使われている場合、アイコンなども画面いっぱいのサイズになるので、注意が必要です。
cssだけで対応する場合、img{min-width:100%; height:auto;}としておくといいですね。
jQueryが使えるのであれば、画像の幅と画面サイズを比べて、画面サイズより大きい場合のみ width:100% を適用することが出来ます。
過去にこの記事で詳しく書いてます。
レスポンシブ対応のページを作る時にオススメツール
レスポンシブ対応ページを作るときに必ず使うのがコレ。
「Viewport Resizer」です。
表示したいページをひらき、ブックマークに入れておいた「↔ Resizer」をクリックすれば、スマホやタブレットの画面サイズに変更して表示できるのです。
ローカルで使う場合、Chromeだと表示した画面内でのリンク先へ飛べないので気をつけましょう（Safariは大丈夫です）
今年はたくさんレスポンシブしたので、もうしばらくレスポンシブは要らないです_(:3 ｣∠ )_
参考）
・Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About
・-webkit-text-size-adjust: none を絶対に設定してはいけない理由 – てっく煮ブログ
・レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
・スマートフォン用表示で画像幅を自動で調整するスクリプト | くろひつじのメモ帳
