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

レスポンシブ Web デザインは、複数の種類の画面の問題を解決する優れたソリューションですが、印刷の観点から見ると、多くの困難があります。固定のページ サイズ、ミリメートルやインチ、圧倒されるような物理的な制限はありません。 Web サイトの構築に利用できるガジェットの数が増えるにつれ、ピクセル デザインがデスクトップやモバイル デバイスに限定されることは過去のものになりました。それでは、レスポンシブ Web デザインの基本原則を適用して、抵抗するのではなくスムーズな Web エクスペリエンスを実現する方法を説明しましょう。わかりやすくするために、ここではレイアウトに焦点を当てます (もちろん、レスポンシブ デザインはそれ以上のものです。さらに詳しく知りたい場合は、ここにアクセスしてください: bradfrost.com)。

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

同じように見えますが、違います。これら 2 つの設計方法は相互に補完し合うため、どちらが正しいか間違っているかはありません。具体的な状況は内容によって異なります。

コンテンツ フロー

画面サイズがますます小さくなるにつれて、コンテンツはますます垂直方向のスペースを占めるようになります。つまり、コンテンツが下に伸びることになります。これをコンテンツ フローと呼びます。ピクセルとポイントを使用したデザインに慣れている場合は、これを習得するのが少し難しいと感じるかもしれません。でもそんなことはなく、慣れてしまえば簡単に理解できます。

相対単位

デザインオブジェクトは、デスクトップ、モバイル画面、またはその間の任意の画面タイプにすることができます。画素密度も異なるため、さまざまな状況に柔軟に対応できるユニットを使用する必要があります。この場合、パーセンテージなどの相対単位が役に立ちます。パーセンテージを使用する場合、幅が 50% であるということは、その幅が画面サイズ (または、開いているブラウザ ウィンドウのサイズを指すビューポート) の半分を占めることを意味します。

ブレークポイント

ブレークポイントを使用すると、ページ レイアウトをプリセット ポイントで変形できます。つまり、デスクトップでは 3 列を表示し、モバイル デバイスでは 1 列のみを表示します。ほとんどの CSS プロパティはブレークポイント間で変換できます。通常、ブレークポイントが配置される場所はコンテンツによって異なります。たとえば、文を新しい行に分割する必要がある場合は、ブレークポイントの追加が必要になる場合があります。ただし、ブレークポイントを使用する場合は、内容間の論理関係を理解できないと混乱が生じやすくなりますので注意が必要です。

最大値と最小値

場合によっては、コンテンツが画面幅全体を占めるのは良いこともありますが (モバイル デバイスなど)、同じコンテンツが画面幅全体を占める場合はうまく機能しないようです。テレビ画面。そのため、最大値と最小値が存在します。たとえば、幅が 100% で最大幅が 1000 ピクセルの場合、コンテンツは幅 1000 ピクセルを超えずに画面いっぱいに表示されます。

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

相対的な位置を覚えていますか?多数の要因が互いに密接に関連している場合、制御は困難になります。したがって、要素をコンテナに配置すると、要素がよりわかりやすく簡潔になります。この場合、ピクセルなどの静的な単位を使用する必要があります。静的ユニットは、拡張する必要のないロゴやボタンなどに便利です。

モバイルファーストかデスクトップファーストか

厳密に言えば、プロジェクトが小さな画面から開始して大きな画面に移行するか（モバイルファースト）、または大きな画面から開始して移行するかに大きな違いはありません小さな画面に (最初はデスクトップ)。ただし、モバイルで始めると、意思決定に役立つ追加の制約が生じる可能性があります。通常、人々は両方の側面から同時に開始するため、どちらの方法が自分にとって最適であるかを判断する必要があります。

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

あなたの Web サイトにクールな Futura または Didot エフェクトを加えたいですか?次に、Webフォントを使用します。 Web フォントは見た目はクールですが、これらのフォントを使用するにはユーザーがダウンロードする必要があり、フォントの数が多いほど、ユーザーがページを読み込むのに時間がかかることに注意する必要があります。一方、システム フォントは (ユーザーがローカルに持っている限り) はるかに高速に読み込まれますが、あまりにも一般的です。

ビットマップとベクター

あなたのアイコンには詳細が多く、豪華な効果がたくさん適用されていますか?その場合は、ビットマップを使用してください。そうでない場合は、ベクター グラフィックスの使用を検討してください。ビットマップの場合は、jpg、png、または gif を使用します。ベクター グラフィックの場合は、SVG またはアイコン フォントを使用するのが最適です。それぞれに長所と短所があります。ただし、アイコンのサイズには常に留意する必要があります。最適化されていない画像はインターネットにアップロードできません。一方、ベクター画像は通常より小さいですが、一部の古いブラウザーはベクター画像をサポートしていない場合があります。また、アイコンに多くの曲線がある場合は、ビットマップよりも大きくなる可能性があるため、慎重に選択してください。

何か不足がある場合は、コメントを残してください。