読者です 読者をやめる 読者になる 読者になる

Responsive Web Design

Web閲覧環境の多様化

  • Android端末の多様化
  • スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります
バイルファースト


f:id:web-design-lesson:20160819092024p:plain

Web製作現場でのモバイルファースト

プログレッシブエンハンスメント

  • Progressive Enhancement
  • ブラウザー間の実装に対応するアプローチ
プログレッシブエンハンスメント(狭義)
  • 機能実装が進んでいないブラウザーを前提として構築し、より機能実装が進んだブラウザーへの対応を加えていくという考え方
グレースフルでグレーション(Graceful Degradation)
  • 機能実装が進んだブラウザーを前提として構築し、実現できないブラウザーに対しては機能を間引いていくという考え方
ポリフィル(Polyfill)
  • 実装の進んでいないブラウザーで、代替技術を利用して実装するという考え方
  • たとえばCSS3のプロパティが利用できない旧バージョンのIEでポリフィルを実装する「CSS3 PIE」がよく利用されています

Responsive Web Design

  • レスポンシブ ウェブデザイン(A List Apart の Ethan Marcotte)

alistapart.com

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

  1. Fluid grid:レイアウトを設定する際にpx数等で固定してしまわずに、主に%などを用いいて、表示できる領域に対して柔軟に対応するアプローチです
  2. Flexible images(Fluid images):画像も表示領域に対して柔軟にサイズを変えていく実装
  3. Media queries:同一のHTMLで、スタイリングを切り替えるのは、メディアクエリによってブラウザの情報を取得することで行います

実践のための準備

  • シンプルなレイアウトで練習をします
スタイリングはシンプルに
  • 練習時には、細かい空きに気をとられていると本質が見えにくくなります
  • normalize.cssを読み込んでおきます
リセットとノーマライズの違い


normalize.css

  • 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します

f:id:web-design-lesson:20160819164008p:plain