LoginSignup
3

More than 5 years have passed since last update.

Responsive Web Designメモ(移行、数値の計算方法など)

Last updated at Posted at 2015-04-30

半年以上前にアメリカのe-learningで学習しながら作成した「Responsive Web Design」の学習メモです。この記事もやや古くなったので、最後に補足事項を記載しました。

従来のデザインからレスポンシブ・ウェブデザインへ移行するための参考資料として作成しました。若干殴り書きもありますが、公開しちゃいます。

Responsive Web Designとは - 従来のデザインと比較する

下へ行くほど柔軟に変化するレイアウトとなる。

Grid layout : どのデバイスでも同じようなデザインにする
→ Fluid layout : デバイス(ウィンドウ)の幅に合わせて伸縮するデザイン
→ → Adaptive layout : media queryを使い、ターゲットデバイスに合わせてデザインする
→ → → Responsive layout : media queryを使い、ターゲットデバイスを決めるのではなく、様々な環境に適用させる)

関連するリンク集&テクニック

画像サイズを可変にする(Fluid layout)

img {
  /* ボックス幅に合わせて拡大される。ただしIE6以下には非対応 */
  max-width: 100%;
}
/* IE6以下専用のCSSで以下のようにボックスとwidthを指定する */
.main img {
  width: 100%;
}
IE専用CSSの定義
<!--[if IE]>
  <link href="{{ asset_url }}" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->

幅をパーセントで指定する

ピクセルをパーセントに書き換える方程式

target ÷ context = result

書き換える例

親ブロック width: 1000px
子ブロック width: 400px
↓↓↓
方程式に当てはめる
400 ÷ 1000 = 0.4 = 40%
↓↓↓
親ブロック width: 1000px
子ブロック width: 40%

親ブロックのwidthを変更すれば、子ブロックの幅も同じ割合で変化するようになる

幅固定のレイアウトからFluid layoutへCSSを書き換える

変更前の幅固定の状態

変更前
.container {
  width: 1000px;
}

幅を%指定に変更し、最大幅に元の値を入れる。外の余白をautoにする

変更後
.container {
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

/* 子のボックスもem指定にする */
.container .box1 {
  /*  width: 300px;   ← 修正前 */
  width: 30%;     /* ← 修正後 */

  /* 300 ÷ 1000 = 0.3 = 30% */
}

.container .box1 .box1-1 {
  /* width 120px;    ← 修正前 */
  width: 40%;    /* ← 修正後 */

  /* 120 ÷ 300 = 0.4 = 40% */
  /* 直近の親のボックスに対する割合である点に注意する */
}

フォントサイズもpxからemに書き換える

/* 修正前 */
/*
body { font-size: 16px; }
h1   { font-size: 24px; }
p    { font-size: 12px; }
*/

/* 修正後 */
body { font-size: 16px; }
h1   { font-size: 1.5em; } /* 24px ÷ 16px = 1.5em */
p    { font-size: 0.75em; } /* 12px ÷ 16px = 0.75em */

※remという単位について、最後に追記しました

iPhoneなどのデバイスにおける自動的な縮小を避ける

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

リンク集(ほぼ英語、未整理)

30 Useful Responsive Web Design Tutorials
http://www.hongkiat.com/blog/responsive-web-tutorials/

Quirktools | Screenfly - デザイン確認ツール。
http://quirktools.com/screenfly/

Adobe Inspect - デザイン確認ツール。 元はAdobe Shadowという名前だったらしい。
http://html.adobe.com/edge/inspect/

brad frost web
http://bradfrostweb.com/

picturefill - 複数サイズの画像を提供する
http://scottjehl.github.io/picturefill/
https://github.com/scottjehl/picturefill

Adaptive Images - 複数サイズの画像を提供する
http://adaptive-images.com/

FitText.js - 文字サイズをウィンドウ幅に応じてフィットさせる
http://fittextjs.com/

FitVid.js - ビデオをウィンドウ幅に応じてフィットさせる
http://fitvidsjs.com/

2015/04/30追記

半年ぶりに振り返ってみました。デザイン確認ツールなど変わってきているような気がします。

今風のデザイン確認ツール

タッチ可能な領域のサイズを約44x44ポイント以上にする

モバイルアプリの最小タップサイズを考える

iOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44x44ポイントにしなさい」
とのこと。

emの代わりにremを使う

レガシーブラウザのサポートなど課題があるようですが、remという単位を使うという選択もあるようです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3