HTML レスポンシブ レイアウトの原則_html/css_WEB-ITnose

レスポンシブ Web デザインは、マルチスクリーンの問題に対する優れた解決策ですが、印刷の観点から見ると少し困難です。固定のページ サイズ、ミリメートルやインチ、物理的な制限、開始点はありません。 Web サイトを開くことができるデバイスが増えているため、デスクトップとモバイルのピクセル設計手法を排他的に使用することも過去のものになりました。したがって、レスポンシブ Web デザインのいくつかの基本原則を明確にし、流動的な Web ページに対抗するのではなく受け入れる必要があります。シンプルにするために、レイアウトに焦点を当てます (はい、レスポンシブはそれよりも複雑です。さらに詳しく知りたい場合は、ここから始めるのが最適です。)

レスポンシブ vs 自動適応ウェブデザイン

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

コンテンツフロー

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

相対単位

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

ブレークポイント

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

最大値と最小値

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

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

モバイルが先か、デスクトップが先か

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

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

ビットマップとベクター

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