フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

レスポンシブデザインについて

【ONDrecords】レスポンシブデザインについて

logo_s

スマートフォンの画面サイズの理解【デフォルトの解像度とデバイスワイド】

metaタグで「viwport = device-width」を加えると、それぞれの端末のデバイスワイドのサイズで表示されるようになる。記述がなければ、デフォルトサイズで表示されます。

デバイス デフォルト デバイスワイド
iOS 980px 320px
iOS(横向き) 480px
Android 800px 320px
windows Phone 1024px
ipad 768px

モバイルファースト推奨の理由

スマホの普及が進んでいる事と、ビデオ・GPS・加速センサー等、機能面が優れている点よりモバイルを第一に考える。

レスポンシブデザインの三大要素

  1. フルードイメージ
  2. フルードグリッド
  3. メディアクエリー

フルードイメージ

CSSに、下記記述を追加する。
img,video,object{max-width:100%; height:auto; width:100%¥9;}

そうする事によって、デバイスのサイズに合わせた画像表示になる。可変しても大丈夫なように、基本的なサイズは1000px前後を目安にすると良い。

フルードグリッド

%指定によるレイアウトに変換する。
そうする事によって、どんなデバイスでも同一のデザインを表示できる。

変換方法は、「変換したい値 / 親要素 * 100」
例)
960px / 1024px = 93.75%
620px / 960px = 64.58333333333%

メディアクエリー

デバイスのサイズによってCSSを切り替える。現状のメジャーなブレイクポイントは、

  1. @media screen and (min-width:480px)
  2. @media screen and (min-width:768px)
  3. @media screen and (min-width:1024px)

きれいなレイアウトにするために

文字のサイズをコントロールしよう!

font-size + line-heightの合計が一行分の高さになる。
例)16px(font-size) + 1.5(line-height)= 16 + 8(16の1.5倍を2で割って上下に余白がつく) = 一行の高さ24px
下マージンを24pxにすると、ちょうど一行分の余白を確保出来る。

img要素のCSSに
img{vertical-align:middle;}
を加えると、テキスト間の変な余白がなくなる。

スタイルシートで注意すべきこと

フルードイメージの際、ie8でバグる可能性があるので、下記CSSを加える。

1
2
3
img{max-width:100%; vertical-align:middle;border:0;}
/* IE8 max-width バグへの対応 */
img{width:auto\9; height:auto\9;}

画像背景のサイズをフィットさせるためのCSS
cover → 縦横比を維持して、範囲に収まる最小サイズで画像を配置
contain → 縦横比を維持して、範囲を覆う最小サイズで画像を配置

1
2
3
background:url(画像URL) top center no-repeat;
-webkit-background-size:contain;
background-size:contain;
1
2
3
4
5
6
7
8
9
10
/* ボーダーを重ねて表示 separateなら分けて表示 */
border-collapse:collapse;
/* inline要素でありながら、widthとheightの指定が可能 */
display:inline-block;
/* 次世代段組み */
display: table; ← 大枠に
display: table-cell; ← 段組みに
/* スマホ用等でtrやthの表示を変更した際に、PC用に戻す処理 */
display: table-row; ← trの働きに戻す
display: table-header-group; ← thの働きに戻す

Follow me!