CSSブレークポイントを使用してレスポンシブデザインを作成する方法

Webサイトの成功は、ユーザーエクスペリエンスに大きく依存します。 最近では、ユーザーはさまざまなデバイスからWebサイトにアクセスするため、各デバイスで同等のユーザーエクスペリエンスを提供することは困難な場合があります。 そこで、CSSブレークポイントが役立ちます。

CSSブレークポイントは、あらゆるデバイスで優れたユーザーエクスペリエンスを提供するレスポンシブサイトを作成するのに非常に役立ちますが、特に新しい開発者にとっては、Webデザインのより紛らわしい側面の1つでもあります。

始めましょう！

CSSブレークポイントとは何ですか？

CSSブレークポイントは、Webサイトのコンテンツがデバイスの幅に応じて応答するポイントであり、ユーザーに可能な限り最適なレイアウトを表示できます。

CSSブレークポイントは、メディアクエリで使用されるため、メディアクエリブレークポイントとも呼ばれます。

この例では、レイアウトが画面サイズにどのように適応するかを確認できます。 大きな解像度のレイアウトにはヘッダーと2列の本体レイアウトがありますが、小さなデバイスでは1列のレイアウトになります。

CSSブレークポイントを設定する方法

トリッキーな部分は、ブレークポイント自体を決定することです。 標準のテンプレートはなく、フレームワークごとに異なるブレークポイントが使用されます。

では、ブレークポイントにはどのようなアプローチを採用する必要がありますか？

従うべき2つの考えられるアプローチがあります：

• デバイスに基づくブレークポイント
• コンテンツに基づくブレークポイント

デバイスに基づくCSSブレークポイント

さまざまなデバイスに基づいてブレークポイントを決定することは良い考えのように思えますが、実際には、それが常に最良のアプローチであるとは限りません。 心配するのに十分なデバイスがすでにあります。新しいデバイスの幅が異なる場合は、CSSに戻って、新しいブレークポイントをもう一度追加するのに時間がかかります。

それにもかかわらず、それはあなたにとってうまくいくと思うかもしれないので、それでも実行可能なオプションです。 デバイス固有のブレークポイントの例を次に示します。

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

このアプローチでは、メディアクエリの膨大なリストができあがります。

コンテンツに基づくCSSブレークポイント

ブレークポイントを決定するための理想的なオプションは、サイトのコンテンツに基づいています。 この方法では、コンテンツのレイアウト調整が必要な場所にブレークポイントを追加するだけで済みます。 これにより、メディアクエリが非常に簡単で管理しやすくなります。

このブレークポイントは、デバイスの幅が768px以上の場合にCSSが適用されることを意味します。

 [css]@media only screen (min-width: 768px){ ... }[/css]

ブレークポイントを使用して範囲を設定することもできるため、CSSはそれらの制限内でのみ適用されます。

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

最小幅または最大幅のCSSブレークポイントを使用する場合

min-width 、 max-widthを使用して、または両方を組み合わせて、さまざまな方法でブレークポイントを設定できます。 しかし、問題は、それぞれをいつ使用する必要があるかということです。

簡単な方法で答えるには、モバイルファーストのアプローチでレイアウトを設計している場合は、最小幅のブレークポイントを使用して上に進みます。

小さいデバイスのデフォルトのスタイルを設定し、それに応じて大きいデバイスに合わせて調整します。

同様に、最初に大きなデバイス用に設計している場合は、通常どおりにデフォルトのCSSを設定し、最大幅のアプローチで小さなデバイス用に調整します。

SASSでのCSSブレークポイントの使用

SASSやSCSSなどのプリプロセッサを使用している場合は、はるかにスマートなブレークポイントを作成できます。 Mixinを使用すると、次のように、覚えておくべきより宣言的なブレークポイントを作成できます。

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

グループで作業しているときは、768pxや48emよりも「タブレットアップ」を覚える方がはるかに簡単です。 誰でもこのブレークポイントを理解できます。 タブレット以上の画面サイズ用です。

使用するCSSブレークポイント

ブレークポイントの使用方法と使用時期については説明しましたが、まだ疑問が残ります。どの特定のブレークポイントを使用する必要がありますか？

少し分解してみましょう。 デスクトップ、タブレット、モバイルのみのサイズをターゲットにする必要があります。 いくつかの一般的なフレームワークをチェックして、従うべきアプローチのアイデアを得ることができます。

ブートストラップには、576ピクセル、768ピクセル、992ピクセル、および1200ピクセルにブレークポイントがあります。 Foundationには、主に40emと64emにブレークポイントがあります。 Bulmaでは、ブレークポイントは768px、769px、1024px、1216px、および1408pxに設定されています。

それぞれに異なるブレークポイントがありますが、共通しているのはモバイルファーストのアプローチです。 これらのブレークポイントの1つを開始点として使用することも、次のように独自のブレークポイントを作成することもできます。

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

あなたはアイデアを得る！

まとめ

要約すると、CSSブレークポイントは、さまざまなデバイス間で最高のユーザーエクスペリエンスを提供するために、レイアウトを再構築するための優れた方法です。

デバイスではなく、常に独自のコンテンツに基づいてブレークポイントを作成するようにしてください。 それらをランダムな幅ではなく論理的な幅に分割し、管理可能な数に保つので、変更は単純で明確なままです。

レイアウトにはどのCSSブレークポイントを使用しますか？ 以下のコメントセクションでお知らせください。

次は何ですか？

Localを使用してカスタムGutenbergブロックを無料で作成し、テストしてください。

ローカルについて詳しくは、こちらをご覧ください。

レスポンシブサイトの構築に関するその他のアドバイスについては、これらの記事をご覧ください。

• WordPressサイトをモバイルフレンドリーにする方法
• WordPressでレスポンシブナビゲーションメニューを作成する方法
• レスポンシブウェブデザインの7つのベストプラクティスのヒント