レスポンシブ デザインとは、デスクトップやモバイルだけでなく、あらゆる解像度でも Web サイトを美しく見せるという考え方です。レスポンシブ サイトでは、デスクトップ サイトとモバイル サイトは同じページであり、ウィンドウ サイズに合わせて拡大縮小されます。
レスポンシブデザインとは何ですか?
レスポンシブ デザインを使用すると、サイトのサイズを任意の画面に合わせて変更できます。特定のレイアウトに基づいてデザインしたり、モバイル サイトとデスクトップ サイトを別々にデザインしたりするのではなく、サイトはあらゆるデバイスに合わせて拡大縮小する必要があります。現実の世界では、人々はあらゆる種類のさまざまな方法でサイトを使用します。小型携帯電話、大型携帯電話、タブレット、横向きモードのタブレット、ネットブック、ラップトップ、5K iMac があります。
.com の ホームページをご覧ください。デスクトップには、ロゴ付きのヘッダー、メイン カテゴリ、ソーシャル メディア ボタン、そして最後に拡張カテゴリを備えたハンバーガー メニューがあります。記事ボックスは画面サイズに応じて拡大縮小するグリッド内に配置されますが、占めるのは約 1000 ピクセルのみです (拡大しすぎると奇妙に見えるため)。全体として、作業する余地がたくさんあるため、サイトの見栄えはここが最も優れています。
画面をタブレットサイズに少し縮小すると、スペースはそれほど多くありません。テキストの改行が異なり、画像が縮小またはトリミングされ、主要なカテゴリが表示されなくなります。
記事ボックスはレイアウトを維持しますが、余分なテキスト行が発生します。ただし、トップページの記事の方が重要なので、アスペクト比を維持し、切り取られることなく縮小されます。
そして、非常に小さなデバイスでは、メニューにこれらすべてのボタンを配置する余裕はなく、記事ボックスを並べて配置する十分なスペースがないため、メニューはハンバーガー メニューに折りたたまれ、記事ボックスはコラムにレイアウトされています。この列は常にデバイスの全幅を占めます (パディングのために両側に 20 ピクセルを差し引いたもの)。
これを自分でテストして、サイトがどのように拡張されるかを確認できます。任意の場所を右クリックして「検査」を選択し、Chrome の開発者ツールを開きます。表示されるペインの右上隅にあるモバイル デバイス ボタンを押し、デバイス タイプとして「レスポンシブ」を選択します。
サイトの端にあるハンドルをつかんでサイズを調整することも、手動でピクセル値を入力することもできます。一般的なモバイル解像度でどのように見えるかをプレビューすることもできます (ただし、実際のデバイスでテストする必要があります)。
レスポンシブデザインはどのように機能するのでしょうか?
レスポンシブ デザインを行う前に、モバイル ページとビューポートのバグを修正する必要があります。これがなければ
metaタグを HTML ヘッダーに追加すると、モバイル ページが ズームアウトされ、正しく表示されなくなる可能性があります 。これはかなり一般的な定型文であるため、すでに設定されている可能性がありますが、まだ設定されていない場合は、追加してください。
<meta content="width=デバイス幅、初期スケール=1" name="ビューポート" />
サイトをレスポンシブにする主な方法は、魔法の
display: flex
プロパティ (フレックスボックスとも呼ばれます) を使用することです。 Flexbox は、ウィンドウ サイズの変化に合わせてコンテナ内の項目のサイズを調整することで機能します。まずコンテナを作成し、次のように
display: flex
:
。容器 {
ディスプレイ: フレックス;
}
次に、すべての子の
flex
パラメータを設定します。
。子供 {
フレックス: 1;
}
これにより、子が拡張され、コンテナが許す限り多くのスペースが占有されます。たとえば、子供が 2 人いる場合、それぞれがスペースの 50% を占有することになります。
代わりに 2 番目の子を
flex: 2
に設定すると、他の子よりも 2 倍のスペース (合計 66%) が占有されます。
画面が縮小すると、子供たちも一緒に縮小します。ただし、コンテンツのサイズよりも小さく縮小することはできませんが、コンテナーで
flex-wrap
使用して (テキストと同様に) 別の行に折り返すことができます。
。容器 {
フレックスラップ: ラップ;
}
これで、サイトのコンテンツが画面からはみ出したり、縮小されて判読できなくなるといった問題に遭遇することはなくなります。
レスポンシブ デザインの背後にあるもう 1 つの CSS テクノロジーはメディア クエリです。メディア クエリは、CSS を適用する前に値を確認できる CSS
If
ステートメントに似ています。これを使用すると、ブラウザの幅に基づいてコンポーネントを動的にスタイル設定できます。たとえば、モバイルでは上部のメニューバーを非表示にしてハンバーガー メニューに置き換えたい場合は、
@media
クエリを使用して非表示にすることができます。
。トップメニュー {
表示ブロック
}
@media 画面と (最大幅: 600px) {
。トップメニュー {
表示: なし。
}
}
600px は、ほとんどのモバイル デバイスの制限を定義するために使用される任意の値にすぎませんが、スタイルを変更する多くのブレークポイントを設定できます。これらをフレックスボックスと組み合わせて使用すると、デバイスのサイズに基づいてフレックス プロパティを変更できます。たとえば、一般的な使用法の 1 つは、モバイルで読みやすくするために、水平方向のリストを垂直方向に中央揃えで表示することです。
レスポンシブ デザインにはここで説明しきれないものがたくさんあるので、その背後にある CSS について詳しく知りたい場合は、CSS Tricks の フレックスボックスに関するこの優れたガイド を読むか、メディア クエリについては W3Schools のドキュメントを読む ことができます。
サイトをレスポンシブにするにはどうすればよいですか?
フレックスボックスを念頭に置いてサイトを再作成するのに時間を費やしたくない場合は、ベースとして使用できるレスポンシブ サイト テンプレートが多数あり、 その中には無料のテンプレートも含まれます 。マネージド ホスティング プロバイダー (GoDaddy、SquareSpace、Wix など) で使用できる多くのテンプレートは、すぐに応答可能です。 Underscores は 、Wordpress の優れた無料スターター テンプレートです。
自分でコーディングしたいが、すべてを手作業で行うのは望ましくない場合は、フレックスボックスを操作するためのサードパーティ ライブラリが多数あります。これらの中で最も人気のあるのは Bootstrap です。これは、フレックスボックスを操作するための使いやすいクラスを (その他の多くの便利な UI 要素とともに) 追加します。 Bootstrap では、
row
クラスでコンテナを指定し、次に、
col-md-6
などのクラスで列サイズを指定すると、CSS が処理されます。たとえば、次のコードは、デスクトップでは各
div
を 3 つの行に配置し、メディア クエリ ブレークポイントを追加してモバイルでは全幅の列に変換します。
<div>
<div > //コンテンツ </div>
<div > //コンテンツ </div>
<div > //コンテンツ </div>
</div>
サイズは 12 単位で測定されるため、
col-md-4
中型サイズ (
"md"
) では div を 33% 幅に設定し、
col-sm-12
小型デバイス (
"sm"
) では div を 100% 幅に設定します。 。
Bootstrap には、始めるための テーマ や テンプレート も豊富にあります。これは、すぐに作業を開始し、定型的な HTML や CSS (その名前が付けられています) をいじるのに費やす時間をなくすように設計されています。
