適応型ウェブページを設計および作成する方法

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。

モバイル デバイスは、インターネットにアクセスするための最も一般的な端末としてデスクトップ デバイスを上回りつつあります。したがって、Web デザイナーは、異なるサイズのデバイスで同じ Web ページをどのように表示するかという難しい問題に直面する必要があります。

携帯電話の画面は比較的小さく、幅は通常 600 ピクセル未満です。一方、PC の画面幅は一般的に 1000 ピクセル以上 (現在主流の幅は 1366×768) で、2000 ピクセルに達するものもあります。異なるサイズの画面に同じコンテンツを満足のいく形で表示するのは簡単ではありません。

多くの Web サイトの場合、解決策は、モバイル バージョンや iPhone/iPad バージョンなど、デバイスごとに異なる Web ページを提供することです。確かに効果は保証されますが、手間がかかり、複数のバージョンを維持する必要があります。さらに、Web サイトに複数のポータルがある場合は、アーキテクチャ設計の複雑さが大幅に増加します。

そこで、同じ Web ページが異なるサイズの画面に自動的に適応し、画面の幅に応じてレイアウトを自動調整できるように、「一度設計してすべてに適用する」ことが可能ではないかと長い間想像してきた人もいるのではないでしょうか。

1. 「アダプティブウェブデザイン」の概念

2010 年に、イーサン・マルコットは、画面の幅を自動的に識別し、それに応じて調整できる Web デザインを指す「レスポンシブ Web デザイン」という用語を提案しました。

彼は『シャーロック・ホームズの冒険』の主要登場人物 6 人の肖像画を使ったサンプルを作成しました。画面の幅が 1300 ピクセルを超える場合は、6 つの画像が一列に配置されます。

画面幅が600px〜1300pxの場合、6つの画像は2行に分割されます。

画面の幅が 400 ピクセルから 600 ピクセルの場合、ナビゲーション バーは Web ページのヘッダーに移動します。

画面幅が 400 ピクセル未満の場合、6 つの画像は 3 行に分割されます。

mediaqueri.es にこの例がさらにあります。

解像度の異なる画面のテスト結果を一つのウェブページに表示できるテストツールもここにあります。インストールすることをお勧めします。

2. ウェブページの幅を自動的に調整できるようにする

「アダプティブ Web デザイン」はどのように機能しますか?実はそれほど難しいことではありません。

まず、Web ページ コードの先頭にビューポート メタ タグの行を追加します。

<meta name="viewport" content="width=デバイス幅、初期スケール=1" />

ビューポートは、Web ページのデフォルトの幅と高さです。上記のコード行は、Web ページの幅がデフォルトで画面の幅 (width=device-width) と等しく、元のスケーリング比 (initial-scale=1) が 1.0 であることを意味します。つまり、Web ページの初期サイズは画面領域の 100% を占めます。

IE9 を含むすべての主要ブラウザがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.js を使用する必要があります。

<!--[IE 9の場合]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. 絶対幅を使わない

Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素は使用できません。これはとても重要です。

具体的には、CSS コードではピクセル幅を指定できません。

幅:xxx ピクセル;

パーセンテージ幅のみ指定できます:

幅: xx%;

または

幅:自動;

4. 相対的なフォントサイズ

フォントのサイズは絶対サイズ (px) では設定できず、相対サイズ (em) でのみ設定できます。

体 {
フォント: 標準 100% Helvetica、Arial、sans-serif;
}

上記のコードは、フォント サイズがページのデフォルト サイズ (16 ピクセル) の 100% になることを指定しています。

h1 {
フォントサイズ: 1.5em;
}

h1 のサイズは、デフォルト サイズの 1.5 倍、つまり 24 ピクセル (24/16 = 1.5) になります。

小さい
フォントサイズ: 0.875em;
}

小さい要素のサイズは、デフォルト サイズの 0.875 倍、つまり 14 ピクセル (14/16 = 0.875) になります。

5. 流動的なグリッド

「流動的なレイアウト」とは、各ブロックの位置が固定ではなく、浮動していることを意味します。

。主要 {
フロート: 右;
幅: 70%;
}

.leftBar{
フロート: 左;
幅: 25%;
}

float の利点は、幅が小さすぎて 2 つの要素を収容できない場合、後者の要素は前者の要素の下部まで自動的にスクロールされ、水平方向にオーバーフローしないため、水平スクロール バーが表示されなくなることです。

また、絶対位置指定（position: absolute）を使用する場合は、細心の注意を払う必要があります。

6. CSSの読み込みを選択

「アダプティブ Web デザイン」の中核となるのは、CSS3 で導入されたメディア クエリ モジュールです。

つまり、画面の幅を自動的に検出し、対応する CSS ファイルを読み込むということです。

<link rel="スタイルシート" type="text/css"
media="screen および (max-device-width: 400px)"
href="tinyScreen.css" />

上記のコードは、画面の幅が 400 ピクセル未満 (max-device-width: 400px) の場合、tinyScreen.css ファイルを読み込むことを意味します。

<link rel="スタイルシート" type="text/css"
media="screen かつ (最小幅: 400px) かつ (最大デバイス幅: 600px)"
href="smallScreen.css" />

画面の幅が 400 ピクセルから 600 ピクセルの場合、smallScreen.css ファイルが読み込まれます。

HTML タグを使用して CSS ファイルを読み込むだけでなく、既存の CSS ファイルに読み込むこともできます。

@import url("tinyScreen.css") 画面と (max-device-width: 400px);

7. CSS @mediaルール

同じ CSS ファイル内で、異なる画面解像度に応じて異なる CSS ルールを適用することもできます。

@media screen および (最大デバイス幅: 400px) {

。カラム {
フロート: なし;
幅:自動;
}

#サイドバー {
表示:なし;
}

}

上記のコードは、画面の幅が 400 ピクセル未満の場合、列ブロックはフロート解除され (float:none)、幅は自動的に調整され (width:auto)、サイドバー ブロックは表示されない (display:none) ことを意味します。

8. イメージ適応（流動的なイメージ）

「レスポンシブ Web デザイン」では、レイアウトとテキストに加えて、画像の自動スケーリングも実現する必要があります。

これには CSS が 1 行だけ必要です:

画像 { 最大幅: 100%;}

このコード行は、Web ページに埋め込まれたほとんどのビデオでも機能するため、次のように記述できます。

画像、オブジェクト { 最大幅: 100%;}

古いバージョンの IE は max-width をサポートしていないため、次のように記述する必要があります。

画像の幅: 100%;

さらに、Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンドを使用してみることができます。

img { -ms 補間モード: バイキュービック; }

あるいは、Ethan Marcotte による imgSizer.js を使用します。

addLoadEvent(関数() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collat​​e(画像);

});

ただし、条件が許せば、画面サイズに応じて異なる解像度の画像を読み込むのが最適です。これを行うには、サーバー側とクライアント側の両方で多くの方法があります。