[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach

iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。

サイトのキャプチャ

The Goldilocks Approach

[ad#ad-2]

The Goldilocks Approachの主な特徴

The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。

  1. multi column(マルチカラム)
    大きいサイズ用
  2. narrow column(ナロウカラム)
    小さいサイズ用
  3. single column(シングルカラム)
    1カラム用

The Goldilocks Approachのケーススタディ

3つのレイアウトは、下記ページでその動作を確認できます。

サイトのキャプチャ

NI Archive

サイトのキャプチャ

Typecast

サイトのキャプチャ

Front Project Planner

[ad#ad-2]

The Goldilocks Approachのアプローチ

The Goldilocks Approachのデモページではグリッドを表示させることができるため、レイアウトの仕組みを把握することができると思います。

デモのキャプチャ

デモページ:1200pxで表示

デモのキャプチャ

デモページ:850pxで表示

デモのキャプチャ

デモページ:580pxで表示

Media Queriesはemベースで設計されており、下記のようなスタイルシートになっています。

CSS

ダウンロードファイルの「layout.css」

@media screen and (min-width: 30em) and (max-width: 63.236em) {

#container { width: 30em; }
	
}

sponsors

top of page

©2018 coliss