レスポンシブWebデザイン学習（1） - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して Web を閲覧することがますます一般的になっています。しかし、従来の固定型ページはモバイル端末ではうまく表示できません。そこで、イーサン・マルコットはレスポンシブ Web デザインの概念を提案しました。

レスポンシブ Web デザインの英語名は Responsive Web Design で、略称は RWD です。

私は図書館から O'REILLY の「Head First Mobile Web」という本を借りました。この本では、RWD を行うためのいくつかのテクニックが説明されていました。

今日学んだことは2つあります。

1. メディア情報を使用して画面サイズを決定する

2. 幅などのサイズ関連の情報を宣言するために以前使用されていたピクセルをパーセンテージに置き換えます。

今日の実験の結果を見てみましょう (この記事の最後に実験例のダウンロード リンクがあります)。

ビデオ：

ページを全画面で表示する場合

ブラウザを狭めてモバイルデバイスを模倣する場合:

どうやってやるんですか？

まず、CSSファイル内のメディアステートメントを使用します

Web ページをさまざまなデバイス サイズに対応させたい場合は、事前にそれぞれのサイズを準備する必要があります。たとえば、通常の PC モニターでは、次のように 3 列で表示されます。

スマートフォンなどのモバイルデバイスでは、次のようにストリーミングで配信する必要がある場合があります。

明らかに、両者の CSS 配分は異なります。上図の 3 列表示では、左側と右側の列をそれぞれ必要な方向にフロートさせる必要がありますが、下図のフローレイアウトでは、ブロックが下方向に連続して表示されます。したがって、少なくとも異なる CSS 分布ごとに、異なる戦略が必要であることがわかります。これで、2 つの異なる CSS ファイルを編集し、<link> ディレクティブを使用してインポートできるようになりました。ただし、@media ステートメントを使用して論理的な判断を実行することもできます。以下のように: @media screen and ( min-width :480px){/*css style*/

その中で、スクリーンは多くの種類のメディアの 1 つであり、その他の一般的なメディアの種類には印刷が含まれます。最小幅はメディアの機能の 1 つです。メディアには論理的な判断を下すのに役立つ多くの機能があり、一般的な機能としてはモノクローム、最大幅などがあります。

この @media ステートメントの助けを借りて、if-else と同様の論理的判断を行うことができます。たとえば、例に示されている 2 つの異なる状況は、次のステートメントを使用して判断されます。

これは、「印刷デバイス」または「モノクロ画面デバイス」上にある場合に、中括弧内の CSS 設定が使用されることを意味します。

次に、寸法に関連付けられたピクセル単位をパーセンテージに置き換えます。

初めてデザインするときは、パーセンテージに合わせてデザインしてください。

また、従来のウェブページ設計方法に従って、まず各領域のピクセルを決定することもできます。たとえば、メイン領域が 460 ピクセルの場合、ウェブページ全体の幅を 960 ピクセルに設定すると、メイン領域の幅は 460/960 = 47.92% になります。この変換方法は、ウェブページを再構築するときに使用できます。

【テスト例ダウンロード】