レスポンシブ Web デザイン (RWD) は、最近、さまざまなディスプレイの Web デザインを参照する一般的な方法になりました。 残念ながら、この用語を使用している多くの人々は、その概念を本当に理解していません。 たった 1 つの最大の誤解を解くために、時間をさかのぼってみましょう。
レスポンシブ Web デザインの必要性
モバイル デバイス、最初は携帯電話、次にタブレットやスマートフォンが普及するにつれて、Internet Explorer、Chrome、Firefox、またはその他のブラウザーを使用して PC で表示するように設計されたサイトが、それらの PC ではほとんど読めないことがすぐに明らかになりました。モバイルデバイス。
一部のサイト所有者は、サイトを小型のハンドヘルド デバイスで適切に表示できるようにしようとしましたが、通常は限定的またはまったく成功しませんでした。
最終的に、これらのデバイスで適切に表示する必要性が明らかに重要性を増したため、追加のページを作成することさえありました。時にはサイト全体を複製することさえありました。
これにより作成された 他の もちろん、問題。 多くの人が見落としていた点は、彼らが間違った方向から問題に取り組んでいたということです.
モバイル デバイス用に別のサイトを作成するという考えは完全に脇に置いておいてください。 本当の問題は、PC で表示することを目的とした複雑なサイトを構築し、モバイル表示用に「単純化」しようとすることによって生じます。
適切なアプローチ
基本的なサイトを構築してから、それに適した論理的な方法を見つける方が理にかなっていませんか? 毎日 画面？
それこそが、レスポンシブ Web デザインが実現することです。 HTML5+CSS3 を使用し、メディア クエリを追加することで、PC (2560px) から iPhone (320px) まで、あらゆるサイズとスタイルのデバイスで適切に表示される基本的な Web サイト デザインを作成できます。
流動的なプロポーション ベースのグリッドと組み合わせたメディア クエリにより、サイトは表示タイプと最大幅を照会できます。これにより、CSS3 はデバイスに応じて表示を調整できます。 3 列から 2 列への移行は、各デバイスの特性に合わせて最適化された表示で、流動的かつ透過的に実装されます。
レスポンシブ Web デザインによって得られるものは何ですか?
基本的に、ユーザーの手にあるビューポートに基づいて、CSS が標準のレイアウト構造を上書きするようにすることで、適応型のデザインを実現します。
これは、レスポンシブ Web デザインが何をするかについて単純化しすぎているように思えるかもしれませんが、実際には非常に単純です。 また、この機能を利用するための手順もそれほど複雑ではありません。 それらには以下が含まれます：
ヘッダー、コンテンツ、ウィジェット、フッターを page-wrap コンテナーで囲みます。この方法では、そのコンテナーの幅を CSS3 で変更して、さまざまなビューポートの幅に合わせることができます。 これにより、CSS3 は必要に応じてサイズを変更できる素敵なきちんとしたパッケージになります。
- ブロックする HTLM5 要素のリセット – これにより、処理される要素のブロックが確立されます。
- メイン構造 CSS の構築 – これにより、ブロック内のさまざまな要素の幅とフロートが設定されます。
- メディア クエリの設定 – これらは、ターゲット デバイスの特性に応じて、どの CSS3 セットに従うかを決定します。
- Fluid Layout の設定 – 特定のディスプレイに適用するメイン構造 CSS の個々の要素の幅のパーセンテージを設定できます。
- 画像と埋め込みビデオの幅 – ここでは、画像または埋め込みビデオが占めるディスプレイの最大幅のパーセンテージを設定できます。
最終結果は、基本的なデザインがPC上で意図したとおりに表示されている間、基本的にすべてのモバイルデバイスで許可されている領域を適切に埋める流動的なディスプレイです.
これは何 レスポンシブ Web デザイン は…一度デザインすれば、確立された使いやすさとアクセシビリティの基準を尊重しながら、さまざまなデバイスで正しく表示できます。