レスポンシブデザイン trilogy_html/css_WEB-ITnose

翻訳: レスポンシブ デザインの 3 つのステップ

翻訳: dwqs

現在、レスポンシブ Web デザインは間違いなく非常に人気があります。レスポンシブ デザインに詳しくない場合は、私が以前に公開したレスポンシブ サイトをチェックしてください。初心者にとって、レスポンシブ デザインは少し複雑に聞こえるかもしれませんが、実際には、思っているよりもはるかに簡単です。レスポンシブ Web デザインをすぐに始められるように、クイック スタート チュートリアルを作成しました。レスポンシブ デザインの基本ロジックとメディア クエリを 3 つのステップで学習できることを保証します (基本的な CSS 知識があることを前提としています)。

ステップ 1: メタ タグ (デモを参照)

ほとんどのモバイル ブラウザーは、コンテンツが画面上に正しく表示されるように、HTML ページをより広いビューポート幅に拡大縮小します。ビューポート メタ タグを使用すると、この動作をリセットできます。以下のビューポート タグは、ビューポートの幅としてデバイス幅を使用し、初期スケーリングを無効にするようにブラウザーに指示します。 このメタタグを 93f0f5c25f18dab9d176bd4f6de5d30e に追加します。

meta name="viewport" content="width=device-width, initial-scale=1.0">

IE 8 以前のバージョンはメディア クエリをサポートしていません。media-queries.js または Reply.js を使用して、IE のメディア クエリのサポートを強化できます。

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]?>

ステップ 2: HTML 構造

この例では、ヘッダー、コンテンツ コンテナ、サイドバー、フッターで構成される基本的なページ レイアウトがあります。ヘッダーの高さは 180 ピクセルに固定されており、コンテンツ コンテナーの幅は 600 ピクセル、サイドバーの幅は 300 ピクセルです。

ステップ 3: メディア クエリ

CSS3 メディア クエリは、特定のビューポート幅でページをレンダリングする方法をブラウザーに指示するための if 条件を記述するのと同じです。

次のルールは、980px 以下のビューポート幅向けに設計されています。基本的に、コンテナが流動的になるように、すべてのコンテナの幅をピクセル値からパーセンテージ値に変更しました。

次に、幅が 700px 以下のビューポートの場合は、#content と #sidebar を自動幅として指定し、フロートを削除して全幅で表示できるようにします。

幅が 480px 以下の場合 (モバイル デバイス画面)、#header の高さを auto にリセットし、h1 のフォント サイズを 24px に変更し、#sidebar を非表示にします。

メディア クエリは必要なだけ記述できます。デモでは 3 つのメディア クエリのみを示しました。メディア クエリの目的は、指定されたビューポート幅に対して異なる CSS ルールを適用して、異なるレイアウトを取得することです。メディア クエリは、同じスタイルシート内に存在することも、別のファイル内に存在することもできます。

概要

このチュートリアルの目的は、基本的なレスポンシブ デザインを説明することです。詳細については、私の以前の記事「メディア クエリを使用したレスポンシブ デザイン」を参照してください。