grid
レスポンシブデザイン入門
Made by Adam Kaplan
日本語訳 Masayuki Maekawa
レスポンシブデザイン入門
Made by Adam Kaplan
日本語訳 Masayuki Maekawa
私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。
2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。
最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それはとてもシンプルです！
デフォルトでは柔軟でシンプルなレイアウトを想定することで、ビューポートが広いブラウザや、狭くてレスポンシブウェブデザインに対応できないブラウザにも適した対応ができます。そういう意味で、私達がレイアウトについて話すときには、「モバイルファースト」の真意は「プログレッシブエンハンスメント」であると言っています。—Ethan Marcotte
必要な場合のみレイアウトに固有なルールを導入します。レイアウトがビューポートの広がりに応じて複雑になっていくように`min-width`を利用します。全てのメディアクエリーをスタイルシートの最後や別ファイルにしてしまうよりは、対象の記述の近くに存在するほうがやりやすいでしょう。
ブラウザたちはCSSを同じようにレンダリングしないでしょう。これを回避するためには、リセットの現代的な代替手段であるNormalize.css といったものを利用することをおすすめします。より一貫性のあるクロスブラウザへの対応が行われたレンダリングが実行されるでしょう。あなたのスタイルシートの前に読み込むことを忘れないで下さい。
HTMLの <head> 内に配置します。これにより、様々なデバイスでレイアウトできるようになります。
CSSボックスモデルへの理解は、レスポンシブ・ウェブ・デザインに飛び込む前に、各要素がブラウザの中でどのように生成されふるまうかといった基本として重要です。CSSボックスモデルは4つの要素から構成されています。
テキストや画像などが表示される領域
内容のまわりの何もない領域
ボーダーはパディングのまわりに存在します
ボーダーのまわりの何もない領域
CSS ファイルの先頭に記述します。 * はページ内の全ての要素を指します。
このかつてのバグ は今や広く用いられるCSSのプロパティとなりました。これは、コンテンツの幅を決めるときにボーダーとパディングを含めるのか否かをあなたが選択できることを意味しています。
マージン、ボーダー、パディングは内容の幅の外側に描画されます。
ボーダーとパディングは内容の幅の中に描画されます。マージンは外側に描画されます。
コンテナーは、全ての要素を保持し、ページの最大幅に収めます。コンテナーを利用すればレスポンシブなデザインは簡単になります！
モバイルファーストでは、基本的にカラムは block レベル（利用可能な幅を全て含む）になります。追加のスタイルはいりません！
大きなスクリーンでは、カラムにコンテンツを水平方向に配置する目的で float: left を設定します。カラムの間隔にはパディングを利用するので、マージンの除去を心配する必要はありません。
カラムは他の要素に続いて配置されることを防ぐ目的で、行ごとにラッピングされます。でないと、配置の解除に問題が発生することが知られています。行は Nicolas Gallagher が作成した clearfix で配置の解除を行うことが一般的です。
モバイルではいち早く表示しつつ、大きなスクリーンでは右に配置したいコンテンツには、 .flow-opposite クラスを付与します。
この手順を踏むことで、あなたはレスポンシブ・ウェブ・デザインを修得する過程に踏み込みました。このまま勉強を続けてウェブをより良く、より利用しやすい場にすることに参加してください。