レスポンシブWebデザインの基本　勉強メモ

さて、結婚関係の諸々が一段落したので、通常営業に戻ろうと思います。基本的に仕事で必要な技術があるときは勉強を兼ねてそちらを優先、特に何もないときはラピロをいじる、というのがこのサイトの基本的な進め方(?)ですが、今回は前者で。レスポンシブWebデザインの勉強をしたいと思います。

『レスポンシブWebデザイン「超」実践デザイン集中講義 』という本を買って来たので、これを読みながら色々メモしていきます。

ちなみに自分の現状スキルは、HTMLはちょっとだけ触ったことがある、CSSはセレクタがちょっとわかってきた、ぐらいのレベルです。

 

レスポンシブWebデザインを構成する基本技術

以下の３つだけ抑えれば、技術的な話はOK。

  • メディアクエリ（Media Queries）
    • 「ウィンドウの幅」や「画像解像度」、「デバイスの向き」などを条件にして、HTMLに適用するスタイルを切り換えることができる、CSS3の新機能。
  • フルードグリッド（Fluid Grid）
    • ページの構成要素を任意のグリッドに沿って配置する「グリッドデザイン」の手法と、ブラウザのウィンドウサイズに応じて各要素の大きさを伸縮させる「リキッドレイアウト」の手法を組み合わせたレイアウト手法。
    • レスポンシブWebデザインでは、デザイン制作初期はグリッドデザインで各要素をレイアウトしていき、レイアウトが定まった段階で、px単位で指定されている箇所を%単位に変更する。
  • フルードイメージ（Fluid Image）
    • ブラウザのウィンドウ幅（レイアウトの大きさ）に合わせて画像のサイズを拡大・縮小する方法。CSSでフルーイメージの指定を行うと、画像の縦横比を保持したまま、画像を画面内に配置することができる。

 

メディアクエリを使った、レスポンシブWebデザインでのCSSの書き方

ポイントは、

  • CSSでは同じセレクタを複数定義した場合は、下部に記述されているスタイルが適用される（正確には、同じセレクタで同じプロパティを定義した場合には、後者が優先される。後者で定義されていないプロパティについては、前者のプロパティがそのまま有効になる）。
  • メディアクエリの条件を「@media screen and (min-width:XXXpx)」にして、スマホ用のCSS設定を標準として記述し、あとにタブレット用、PC用の設定を上書きしていく形をとる。

 

フルードグリッドの指定の仕方

  • まず、固定レイアウト（px単位）でページを作る
  • 続いて、固定レイアウトを可変レイアウトにするために、まずbody要素のwidthを100%にする
  • 以下、子要素のwidthのpx値を%値に変更していく。換算式は以下のとおり。なお、marginやpaddingも同様に%値に変更する。

　　　　子要素の%値＝変更する要素の固定値(px)÷親要素の固定値(px)×100(%)

 

フルードイメージの指定の仕方

    • img画像をフルードイメージにするとき
img {
  max-width: 100%;
  height: auto;
}
    • 背景画像をフルードイメージにするとき
#background-image {
  background-size: cover;
}
  • メディアをフルードイメージにするとき
embed, object {
  max-width: 100%
}

 

タッチデバイス向けのデザインで注意すること

  • ボタンのサイズ … タップ可能なUI要素の快適な最小サイズは、44×44ポイント
  • 当たり判定 … 文字リンクについては、padding領域も当たり判定に含める

 

Mobile First

Webサイトを制作する際には、モバイルでの利用を優先的に考えて、サイトを企画し、設計・デザインしよう、という考え方（コンセプト）。

 

文字コード

スマートフォンサイトでは多くの場合UTF-8を使用する。

 

viewportの設定

  • ブラウザのウィンドウサイズを表す概念的なサイズ。PCのブラウザのウィンドウサイズと似ていると言える。
  • viewport のデフォルト値は、例えばiPhoneのMobile Safariでは横幅980px。つまり、ブラウザは、自分の横幅が980pxあるものとして、その中におさまるようにWebページを表示しようとする。よって、非常に小さく表示される。
  • <meta name=”viewport” content=”width=device-width”>を指定してやれば、ブラウザは自分の横幅を、端末の横幅（デバイスの画面サイズ）に合わせることができる。
  • width=device-widthを指定すると、スマートフォンでは、実際の解像度（Retinaディスプレイの場合は640×960px）ではなく、実際の解像度をdevicePixelRatioで割った値に対して、CSSのスタイルが適用されるようになる。
  • devicePixelRatioの値はデバイスごとに対して異なるが、Retinaディスプレイが搭載されているiPhoneのdevicePixelRatioは2に設定されているので、CSSで指定されるスタイルは640px ÷ 2 = 320pxに対して適用されるようになる。

 

高解像度ディスプレイで画像をぼやけさせないために

  • 画像を実際に表示するサイズの４倍の大きさ（高さ２倍、幅２倍）で書き出す
  • img要素のwidthおよびheightには表示サイズを指定する
  • 例）<img src=”large(640x480px).jpg” width=”320″ height=”240″>

 

リセットCSSの利用

  • リセットCSSは、各ブラウザにデフォルトで設定されている様々なスタイルをリセットするためのもの。すべてのブラウザで同一のデザインを表示する場合に、リセットCSSを使ってブラウザ間の差異をなくす。
  • リセットCSSにはいろいろな種類がある。また、一部のスタイルを保持したままにするノーマライズCSSも存在する。

 

CSSのclearfixとは？

多分簡単にまとめると、CSSのfloatプロパティでレイアウトするときに、floatプロパティの特性によっておかしなことにならないように、floatする要素を含む親要素に対して、ちょっと工夫したCSSを適用すること。floatする要素をしっかり包む箱をつくるイメージ。

「ちょっと工夫」というのは、具体的には、CSSで疑似要素afterをcontentプロパティを指定して使用すると、ボックスの末尾に対してCSSが新たなボックスを生成するので、それに対してフロート解除（float: both;）を適用する。こうするとCSSで完結し、HTMLファイルの方にフロート解除のための無用なタグを埋め込む必要がない。

clearfixにはいろいろなやり方がある（こちらを参照）が、例えばmicro clearfixはこんな感じ。

<head>
  <style>
    /* cleafix */
    .cf { zoom: 1; }
    .cf:before, .cf:after { content: ""; display: table; }
    .cf:after { clear: both;}
  </style>
</head>
<body>
  <div id="contents" class="cf">
    ...
  </div>
</body>

 

 

とりあえず、基本はここまで。

 

 

レスポンシブWebデザイン「超」実践デザイン集中講義

お勉強

Posted by hidaka_hiroji