レスポンシブ化する時に知っておきたいCSSテクニック

今年の夏もCSSでうにょーんとなっていました。
（毎年いただくお仕事なんですが、毎回頭をひねる…。お陰で勉強になっていますが）
今回は普通に組まれたHTML（元々レスポンシブする予定じゃなかったやつ）をレスポンシブ対応する作業がおおくて、ああこうすればいいのか…！というのが多かったので、まとめておきます。

［Ad］

Contents

レスポンシブデザインとは？
- link要素のmedia属性でCSSファイルを分ける方法
- CSSソース内に書き込む方法
CSSを上書き指定する時に知っておくと便利なこと
縦向き横向きでの見え方を考慮する
- 縦/横変えたら文字サイズが変わる場合は-webkit-text-size-adjustを
- paddingやmarginに%指定
スマホサイズを考慮した指定について
- 表組の場合
- 画像の場合
レスポンシブ対応のページを作る時にオススメツール

レスポンシブデザインとは？

1つのHTMLで、画面サイズによってレイアウトなどが変わってしまうデザイン。
PC画面サイズやタブレットサイズ、スマホサイズなどで切り替える事が多いです。

切り替え方法としてはCSS Media Queries を使って切り替えます。
この方法も２つあって、link要素のmedia属性で読み込むCSSファイルを分ける方法と、CSSソース内に書き込む方法とあります。

link要素のmedia属性でCSSファイルを分ける方法

CSSを読み込む際に、media属性を以下のように指定することで画面サイズで読み込むCSSを変えることが出来ます。

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 568px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 569px)">

この場合、画面幅が568px以下の場合にだけ phone.css が適用され、569px以上の場合にだけ pc.css が適用されます。

CSSソース内に書き込む方法

CSSソース内に@media screen and (max-width: 任意のサイズ) {}と描くと指定した画面幅の時だけ{}内に書かれたCSSが適用されます。

body{
	background-color:#fff;
}
@media screen and (max-width: 568px) {
	body{
		background-color:#000;
	}
}

この場合、通常は#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%と指定してあげると、文字だけ拡大するのを防げるようですよ。