レスポンシブウェブデザインは、デバイスごとに異なるウェブページを提供します

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 行に分割されます。

元のタイトル: アダプティブ Web デザインは、さまざまなデバイスに異なる Web ページを提供します

キーワード: 適応型、ウェブページ、異なる、提供、異なるウェブページを提供する、ますます、人々が使用する、手、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化