レスポンシブWebデザインの概要：疑似要素、メディアクエリなど

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

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

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

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

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

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

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

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

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

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

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

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

また

@media screen { * { background: silver } }

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

この定義は、基本プロパティ（ max-width 、 device-width 、 orientation 、およびcolor ）を設定することで可能になります。 他の定義も可能です。 ただし、この場合、注意すべき最も重要なことは、最小解像度（幅）と向きの設定（横向きと縦向き）です。

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

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

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

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

「スマートズーム」

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

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

 <meta name="viewport" content="width=device-width, initial-scale=1" />

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

さらに、 user-scalable=falseを使用して、ズームを完全に無効にすることができます。

ページ幅

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

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

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

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

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

疑似要素

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

手始めに、いくつかの要素を非表示にする（ display: none; ）ことは、ほとんどの場合十分なスペースがないスマートフォンのレイアウトの画面上の要素の数を減らすことになると、優れた解決策になる可能性があります。

ただし、それ以外にも、 :beforeや:afterなどのCSS疑似要素（セレクター）を使用してクリエイティブにすることもできます。 注：繰り返しになりますが、疑似要素はすべての主要なブラウザーでサポートされています。

疑似要素は、HTML要素の特定の部分に特定のスタイルを適用したり、要素の特定のサブセットを選択したりするために使用されます。 たとえば、 :first-line疑似要素を使用すると、特定のセレクターの最初の行でのみスタイルを定義できます（たとえば、 p:first-lineはすべてのpの最初の行に適用されます）。 同様に、 a:visited疑似要素を使用すると、ユーザーが以前にアクセスしたリンクを使用して、すべてa sにスタイルを定義できます。 明らかに、これらは便利です。

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

 .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疑似要素のみを使用して、次のことを実現します。

疑似要素の魔法の詳細については、ChrisCoyierがCSS-Tricksに関する優れた記事を書いています。

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

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

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

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

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

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

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

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

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

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

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

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

 img { max-width: 100% }

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

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

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

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

結論

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