grid

レスポンシブデザイン入門
Made by Adam Kaplan
日本語訳 Masayuki Maekawa

Intro
Mobile First

なぜ、レスポンシブに労力を費やすのか?

私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。

断片化された世界

2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。

モバイルファースト

最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それはとてもシンプルです!


デフォルトでは柔軟でシンプルなレイアウトを想定することで、ビューポートが広いブラウザや、狭くてレスポンシブウェブデザインに対応できないブラウザにも適した対応ができます。そういう意味で、私達がレイアウトについて話すときには、「モバイルファースト」の真意は「プログレッシブエンハンスメント」であると言っています。—Ethan Marcotte

Mobile First

min-width メディアクエリー

必要な場合のみレイアウトに固有なルールを導入します。レイアウトがビューポートの広がりに応じて複雑になっていくように`min-width`を利用します。全てのメディアクエリーをスタイルシートの最後や別ファイルにしてしまうよりは、対象の記述の近くに存在するほうがやりやすいでしょう。


1

全てのブラウザは同じように作られていない

ブラウザたちはCSSを同じようにレンダリングしないでしょう。これを回避するためには、リセットの現代的な代替手段であるNormalize.css といったものを利用することをおすすめします。より一貫性のあるクロスブラウザへの対応が行われたレンダリングが実行されるでしょう。あなたのスタイルシートの前に読み込むことを忘れないで下さい。


2

metaタグにviewportを追加する

HTMLの <head> 内に配置します。これにより、様々なデバイスでレイアウトできるようになります。


Box Model

CSSボックスモデル

CSSボックスモデルへの理解は、レスポンシブ・ウェブ・デザインに飛び込む前に、各要素がブラウザの中でどのように生成されふるまうかといった基本として重要です。CSSボックスモデルは4つの要素から構成されています。


content

内容

テキストや画像などが表示される領域

padding

パディング

内容のまわりの何もない領域

border

ボーダー

ボーダーはパディングのまわりに存在します

margin

マージン

ボーダーのまわりの何もない領域

3

box-sizing: border-boxを利用する

CSS ファイルの先頭に記述します。 * はページ内の全ての要素を指します。


あなたの選択

このかつてのバグ は今や広く用いられるCSSのプロパティとなりました。これは、コンテンツの幅を決めるときにボーダーとパディングを含めるのか否かをあなたが選択できることを意味しています。


Without Box Model

box-sizing: border-box なし

マージン、ボーダー、パディングは内容の幅の外側に描画されます。

With Box Model

box-sizing: border-box あり

ボーダーとパディングは内容の幅の中に描画されます。マージンは外側に描画されます。

4

コンテナーを作成する

コンテナーは、全ての要素を保持し、ページの最大幅に収めます。コンテナーを利用すればレスポンシブなデザインは簡単になります!


Container
5

カラムを作成する

モバイルファーストでは、基本的にカラムは block レベル(利用可能な幅を全て含む)になります。追加のスタイルはいりません!


.column
.column
.column
.column
6

カラムのサイズを設定する

大きなスクリーンでは、カラムにコンテンツを水平方向に配置する目的で float: left を設定します。カラムの間隔にはパディングを利用するので、マージンの除去を心配する必要はありません。


.column .half
.column .half
.column .full
.column .two-thirds
.column .third
.column .half
.column .half
.column .third
.column .third
.column .third
.column .fourth
.column .fourth
.column .fourth
.column .fourth
7

行の作成

カラムは他の要素に続いて配置されることを防ぐ目的で、行ごとにラッピングされます。でないと、配置の解除に問題が発生することが知られています。行は Nicolas Gallagher が作成した clearfix で配置の解除を行うことが一般的です。


.column .half
.column .half
.column .half
.column .half

反対側へ流す(Flow Opposite)

モバイルではいち早く表示しつつ、大きなスクリーンでは右に配置したいコンテンツには、 .flow-opposite クラスを付与します。


.column .half .flow-opposite
.column .half

勉強はおわりました

この手順を踏むことで、あなたはレスポンシブ・ウェブ・デザインを修得する過程に踏み込みました。このまま勉強を続けてウェブをより良く、より利用しやすい場にすることに参加してください。


View the Code