レスポンシブ Web デザインの 9 つの基本原則_html/css_WEB-ITnose

レスポンシブ Web デザインとアダプティブ Web デザイン

それらは同じように見えるかもしれませんが、そうではありません。これら 2 つの方法は相互に補完し合い、どちらが正しくてどちらが間違っているということはありません。

コンテンツフロー

画面サイズが小さくなると、コンテンツが縦方向のスペースを占めることが多くなり、下のコンテンツが下に押し出されることになります。ピクセルとポイントを使用してデザインしている場合、これは少し難しいかもしれませんが、慣れてしまえば理にかなっています。

相対単位

キャンバスのサイズはデスクトップ、モバイル、またはその間の任意のサイズにできます。ピクセル密度も変化する可能性があるため、さまざまな画面で使用できる柔軟なユニットが必要です。ここで、パーセンテージなどの相対単位が役に立ちます。したがって、幅を 50% に設定すると、画面 (またはビュー、開いているブラウザ ウィンドウのサイズ) の半分を占めることになります。

ブレークポイント

ブレークポイントを使用すると、事前定義されたポイントでレイアウトを変更できます。たとえば、デスクトップ画面には 3 つの列がありますが、モバイル画面には 1 つの列しかありません。ほとんどの CSS プロパティはブレークポイントに基づいて変更できます。通常、特定のコンテンツに基づいてブレークポイントを設定します。文が画面の長さを超える場合は、ブレークポイントを追加するとよいでしょう。ただし、ブレークポイントの使用には注意が必要です。どのコンテンツが何に影響を与えるかを理解するのが難しい場合、すぐに混乱が生じる可能性があります。

最大値と最小値

モバイルデバイスなどでは、コンテンツが画面の幅全体を占めるとよい場合があります。しかし、それがテレビ画面上にあり、同じコンテンツが画面の幅全体を占める場合、通常はあまり意味がありません。ここで最小/最大値が関係します。たとえば、幅を 100% に設定し、最大幅を 1000 ピクセルに設定すると、コンテンツは画面いっぱいに表示されますが、1000 ピクセルを超えることはありません。

ネストされたオブジェクト

相対位置を覚えていますか?他の要素の位置に応じて多くの要素の位置を制御するのは難しいため、コンテナを使用して要素をラップすると、理解しやすく整然としたものになります。ここで、静的ユニット (ピクセルなど) が登場します。これらは、モジュール化したくないコンテンツ (ロゴやボタンなど) に役立ちます。

モバイルファーストまたはデスクトップファースト

技術的には、プロジェクトが小さな画面で開始され、より大きな画面に移行する場合 (モバイルファースト)、またはその逆の場合 (デスクトップが優先)、あまり違いはありません。ただし、最初にモバイルから始めるかどうかを決定する際に役立つ追加の制限が追加されます。通常、誰もが最初に両方の端を一緒に書くので、どちらがより良く実行されるかを確認する方が良いでしょう。

Web フォントとシステム フォント

あなたの Web サイトにクールな Futura または Didot フォントがあればいいのにと思いませんか? Webフォントが使えるようになりました！見栄えは良くなりますが、入力するフォントの数が増えるほど、ページの読み込みに時間がかかることに注意してください。一方、システム フォントの読み込みは非常に高速ですが、ユーザーがフォントをローカルに設定していない場合は、デフォルトのフォントに戻ります。

ビットマップとベクター

アイコンに多くの詳細や派手な効果を追加したいと考えたことはありますか?よく考えてみると、ビットマップを使用する方が適切です。そうでない場合は、ベクター グラフィックスの使用を検討してください。ビットマップの場合は、jpg、png、または gif 形式の画像を使用します。ベクトルの場合は、SVG またはアイコン フォントを選択するのが最適です。それぞれに対応する長所と短所があります。ただし、画像のサイズも考慮する必要があります。Web ページ上の画像は最適化する必要があります。一方、ベクター画像は通常より小さいですが、一部の古いブラウザーではベクター画像がサポートされていません。また、曲線が多い場合はビットマップよりも重くなる可能性があります。したがって、慎重に選択してください。

http://www.w3cplus.com/sensitive/9-basic-principles-of-sensitive-web-design.html