今日、あなたのWebサイトには、大型モニターを備えたデスクトップ、中型のラップトップ、タブレット、スマートフォンなど、さまざまなデバイスがアクセスします。

として最適なユーザーエクスペリエンスを実現するには フロントエンドエンジニア 、サイトは、これらのさまざまなデバイスに応じて（つまり、さまざまな画面解像度とサイズに応じて）レイアウトを調整する必要があります。のプロセス 応答する ユーザーのデバイスの形式は（ご想像のとおり）と呼ばれます レスポンシブウェブデザイン （RWD）。

なぜ勉強する価値があるのですか レスポンシブウェブデザイン 例とあなたの焦点をRWDに移しますか？たとえば、一部のWebデザイナーは、代わりに、すべてのブラウザーで安定したユーザーエクスペリエンスを確保することを自分たちの仕事にしています。多くの場合、InternetExplorerの小さな問題に対処するために何日も費やしています。

llcc法人vss法人

これは愚かなアプローチです。

一部のWebデザイナーは、Internet Explorerの小さな問題に対処するために何日も費やし、モバイルユーザーを中古の訪問者として残しています。これは愚かなアプローチです。

Mashableは2013年をレスポンシブウェブデザインの年と呼びました 。どうして？トラフィックの30％以上がモバイルデバイスからのものです。彼らは、この数が年末までに50％に達する可能性があると予測しています。一般的にウェブ全体で、 2013年のWebトラフィックの17.4％はスマートフォンからのものでした 。同時に、たとえばInternet Explorerの使用量は全体のわずか12％を占めています。 ブラウザ トラフィックは、昨年のこの時期から約4％減少しました（ W3Schools ）。世界のスマートフォン人口ではなく、特定のブラウザ向けに最適化する場合、木の森が欠けています。また、場合によっては、これは成功と失敗の違いを意味する可能性があります。レスポンシブデザインは コンバージョン率 、 SEO 、 直帰率 、 もっと。

レスポンシブウェブデザインアプローチ

RWDについて一般的に見過ごされているのは、Webページの外観を調整するだけではないということです。代わりに、さまざまなデバイスで使用できるようにサイトを論理的に適応させることに重点を置く必要があります。例：マウスを使用しても、タッチスクリーンなどと同じユーザーエクスペリエンスは提供されません。同意しませんか？レスポンシブモバイルとデスクトップのレイアウトは、これらの違いを反映している必要があります。

同時に、サイトが表示される可能性のある数十の異なる画面サイズごとにサイトを完全に書き直したくはありません。このようなアプローチは単純に実行不可能です。代わりに、解決策は、同じHTMLコードを使用してユーザーの画面サイズに合わせて調整する柔軟なレスポンシブデザイン要素を実装することです。

技術的な観点から、解決策はこのレスポンシブデザインチュートリアルにあります。 CSSメディアクエリ 、 疑似要素 、柔軟なセットグリッドレイアウト、および特定の解像度に動的に調整するその他のツール。

レスポンシブデザインにおけるメディアクエリ

メディアタイプが最初に登場した HTML4 そして CSS2.1 、画面と印刷用に別々のCSSを配置できるようにしました。このようにして、ページのコンピュータディスプレイに対して、その印刷出力に対して個別のスタイルを設定することができました。

@media screen { * { background: silver } }

または

max-width

に CSS3 、ページ幅に応じてスタイルを定義できます。ページ幅はユーザーのデバイスのサイズと相関するため、この機能を使用すると、デバイスごとに異なるレイアウトを定義できます。 注：メディアクエリはによってサポートされています すべての主要なブラウザ 。

この定義は、基本プロパティdevice-width、orientation、color、および@media screen and (min-width: 480px) { div { float: left; background: red; } ....... } を設定することで可能になります。他の定義も可能です。ただし、この場合、注意すべき最も重要なことは、最小解像度（幅）と向きの設定（横向きと縦向き）です。

以下のレスポンシブCSSの例は、ページ幅に関して特定のCSSファイルを開始する手順を示しています。たとえば、480pxが現在のデバイスの画面の最大解像度である場合、main_1.cssで定義されたスタイルが適用されます。

initial-scale

同じCSSスタイルシート内で異なるスタイルを定義して、特定の制約が満たされた場合にのみ使用されるようにすることもできます。たとえば、レスポンシブCSSのこの部分は、現在のデバイスの幅が480pxを超える場合にのみ使用されます。

user-scalable=false

「スマートズーム」

モバイルブラウザは、いわゆる「スマートズーム」を使用して、ユーザーに「優れた」読書体験を提供します。基本的に、スマートズームはページサイズを比例的に縮小するために使用されます。これは2つの方法で現れる可能性があります：（1）ユーザーが開始したズーム（たとえば、iPhone画面を2回タップして現在のWebサイトにズームインする）と（2）最初にズームインしたバージョンのWebページをに表示する負荷。

レスポンシブメディアクエリを使用して、スマートズームが対象となる可能性のある問題を解決できることを考えると、ズームを無効にして、ページコンテンツが常にブラウザに表示されるようにすることが望ましい（または必要な場合もあります）。

display: none;

:beforeを設定する1に設定すると、初期ページズームレベル（つまり、ページ読み込み時のズーム量）が制御されます。レスポンシブなWebページを設計した場合、流動的で動的なレイアウトは、初期ズームを必要とせずに、インテリジェントな方法でスマートフォンの画面全体に表示されます。

さらに、:afterでズームを完全に無効にすることができます。

プットオプションの価格設定方法

ページ幅

デスクトップ用、タブレット（またはラップトップ）用、スマートフォン用の3つの異なるレスポンシブページレイアウトを提供しようとしているとします。カットオフとしてどのページサイズをターゲットにする必要がありますか（例：480px）？

残念ながら、ターゲットとするページ幅の定義された標準はありませんが、次のレスポンシブ値の例がよく使用されます。

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

ただし、さまざまな幅の定義がいくつか存在します。例えば、 320以上 5つのデフォルトのCSS3メディアクエリ増分があります：480、600、768、992、および1382px。このレスポンシブWeb開発チュートリアルの特定の例に加えて、少なくとも10の他のアプローチを列挙することができます。

これらの妥当な増分セットのいずれかを使用すると、ほとんどのデバイスをターゲットにできます。実際には、通常、前述のページ幅の例をすべて個別に処理する必要はありません。7つの異なる解像度はおそらくやり過ぎです。私の経験では、320px、768px、1200pxが最も一般的に使用されています。これらの3つの値は、それぞれスマートフォン、タブレット/ラップトップ、およびデスクトップをターゲットにするのに十分なはずです。

ラズベリーパイウェブサーバーnginx

疑似要素

前の例のレスポンシブメディアクエリに基づいて、ユーザーのデバイスのサイズに基づいてプログラムで特定の情報を表示または非表示にすることもできます。幸いなことに、これも、以下のチュートリアルで概説されているように、純粋なCSSで実現できます。

手始めに、一部の要素（:first-line）を非表示にすることは、ほとんどの場合スペースが不足しているスマートフォンのレイアウトの画面上の要素の数を減らす場合に最適なソリューションです。

しかしそれを超えて、CSSで創造的になることもできます 疑似要素 （セレクター）、例：p:first-lineおよびp。 注：繰り返しになりますが、疑似要素はによってサポートされています すべての主要なブラウザ 。

疑似要素は、HTML要素の特定の部分に特定のスタイルを適用したり、要素の特定のサブセットを選択したりするために使用されます。たとえば、a:visited疑似要素を使用すると、特定のセレクターの最初の行でのみスタイルを定義できます（たとえば、aはすべての.username:after { content:'Insert your user name'; } @media screen and (max-width: 1024px) { .username:before { content:'User name'; } } @media screen and (max-width: 480px) { .username:before { content:''; } } の最初の行に適用されます）。同様に、:before疑似要素を使用すると、ユーザーが以前にアクセスしたリンクを使用して、すべての:afterにスタイルを定義できます。明らかに、これらは便利です。

これは、ログインボタン用に3つの異なるレイアウトを作成する、シンプルなレスポンシブデザインの例です。デスクトップ、タブレット、スマートフォン用に1つずつです。スマートフォンにはアイコンが1つだけありますが、タブレットには「ユーザー名」が付いた同じアイコンがあります。最後に、デスクトップ用に、短い説明メッセージ（「ユーザー名を挿入してください」）も追加します。

@media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

img { max-width: 100% } だけを使用するおよび

疑似要素の場合、次のことを実現します。

疑似要素の魔法の詳細については、ChrisCoyierが優れています 書き上げる CSS-トリックについて。

だから、どこから始めればいいですか？

このチュートリアルでは、レスポンシブWebデザインの構成要素（メディアクエリや疑似要素など）をいくつか確立し、それぞれの例をいくつか示しました。ここからどこにいきますか？

実行する必要がある最初のステップは、Webページのすべての要素をさまざまな画面サイズに整理することです。

春のセキュリティトークンベースの認証

上に示したレイアウトのデスクトップバージョンを見てください。この場合、左側のコンテンツ（緑色の長方形）は、ある種のメインメニューとして機能する可能性があります。ただし、解像度の低いデバイス（タブレットやスマートフォンなど）を使用している場合は、このメインメニューを全幅で表示するのが理にかなっている場合があります。メディアクエリを使用すると、次のようにこの動作を実装できます。

|_+_|

残念ながら、フロントエンドが複雑になるにつれて、この基本的なアプローチでは不十分なことがよくあります。サイトのコンテンツ構成はモバイルバージョンとデスクトップバージョンで大きく異なることが多いため、ユーザーエクスペリエンスは、最終的にはレスポンシブCSSだけでなく、HTMLとJavaScriptの使用にも依存します。

さまざまなデバイスのレスポンシブレイアウトを決定する場合、いくつかの重要な要素が重要です。コンテンツ用に十分なスペースがあるデスクトップバージョンとは異なり、スマートフォンの開発はより要求が厳しくなります。これまで以上に、特定のコンテンツをグループ化し、個々の部分の重要性を階層的に定義する必要があります。

スマートフォンの場合、特定のコンテンツをグループ化し、個々のパーツの重要性を階層的に定義することがこれまで以上に重要になっています。

コンテンツのさまざまな用途も重要です。たとえば、ユーザーがマウスを持っている場合、特定の要素の上にカーソルを置いて詳細情報を取得できるため、（Web開発者として）この方法で収集する情報を残すことができますが、これはユーザーがスマートフォンを使用している場合。

高レベルの設計ドキュメントテンプレート

さらに、スマートフォンで通常の指よりも小さいボタンをサイトに残しておくと、サイトの使用法と感覚に不確実性が生じます。上の画像では、標準のWebビュー（左側）により、小さいデバイスで表示したときに一部の要素が完全に使用できなくなっていることに注意してください。

このような動作は、ユーザーがエラーを起こす可能性を高め、エクスペリエンスを低下させます。実際には、これはページビューの減少、売り上げの減少、全体的なエンゲージメントの減少として現れる可能性があります。

その他のレスポンシブデザイン要素

メディアクエリを使用する場合、特に流動的なグリッドを使用する場合は、対象となる要素だけでなく、すべてのページ要素の動作に留意する必要があります。この場合、（固定サイズではなく）ページは常に完全に埋められますモーメント、コンテンツサイズの増減に比例します。幅はパーセンテージで設定されるため、このような流動的なレイアウトでは、グラフィック要素（つまり、画像）が歪んだり壊れたりする可能性があります。画像の場合、1つの解決策は次のとおりです。

他の要素も同様の方法で処理する必要があります。たとえば、RWDのアイコンの優れたソリューションは、 IconFonts 。

流体グリッドシステムに関するいくつかの言葉

完全なデザイン適応のプロセスについて議論するとき、私たちはしばしば（ユーザーの観点から）最適な視聴体験を見ます。このような議論には、最大限の使いやすさ、要素の重要性（表示されているページ領域に基づく）、読みやすさ、直感的なナビゲーションを含める必要があります。これらのカテゴリの中で、最も重要なコンポーネントの1つは コンテンツ幅の調整 。例えば、いわゆる流体グリッドシステムは、要素、すなわち、ページ全体のパーセンテージとしての相対的な幅に基づく要素を設定している。このように、のすべての要素 レスポンシブウェブデザイン システムはページのサイズに合わせて自動的に調整します。

これらの流体グリッドシステムは、ここで説明してきたことと密接に関連していますが、実際にはまったく別のエンティティであり、詳細に説明するには追加のチュートリアルが必要になります。したがって、このような動作をサポートするいくつかの主要なフレームワークについて説明します。 ブートストラップ 、 非セマンティック 、および ブラケット 。

結論

最近まで、Webサイトの最適化は、さまざまなWebブラウザーに基づく機能のカスタマイズ専用の用語でした。私たちが今日直面しているさまざまなブラウザ標準との避けられない闘争に加えて、この用語は現在、レスポンシブWebデザインでデバイスと画面サイズに適応することを前提としています。現代のウェブでそれをカットするには、あなたのサイトは知っているだけでなく だれの それを見て、しかし どうやって 。