👏🏿 💉 🧘🏼 応答性の高いWebデザインとブラウザーの高さの応答性 👨🏿‍⚕️ 🦆 📭

この記事のタイトルがなぜこんなに変わっているのか、多くの人が疑問を持っていることを私は知っています。「レスポンシブウェブデザイン」と「ブラウザウィンドウの高さ」はどのように関連していますか？「レスポンシブデザイン」とは、さまざまなデバイスで見栄えがするようにビューポートの幅に合わせてページをデザインすることを意味すると一般に理解されているため、このタイトルは珍しいように思われます。 Webサイトは常に、ブラウザーの幅を縮小し、何が起こるかを監視することによってテストします。しかし、プロジェクトをテストするためのガイドラインに出くわしたことはほとんどありません。つまり、ページはブラウザウィンドウの高さを低くして検査されるというものです。「高さの異なるブラウザウィンドウでページをチェックする必要がありますか？」と考えたことがあるかもしれません。私はこれがなされるべきだと信じています、そして私はこれを皆に納得させるつもりです、この記事を読む人。

Webサイトで作業する場合、実際のデータに依存せずに特定の仮定を行うことはあまり正しくありません。したがって、さまざまな幅とさまざまな高さのブラウザウィンドウでサイトをチェックする責任を負うことが非常に重要です。

高さの異なるブラウザウィンドウでページをチェックするのはなぜですか？

良い質問。このようなチェックを使用するための例とシナリオに移る前に、さまざまな高さの視点で機能するように適合されていないサイトで発生する問題について説明したいと思います。これは、次に何が起こっているのかをよりよく理解するのに役立ちます。

ウェブサイトがどのように使用されるかについて間違った仮定をすることは、ウェブデザイナーの仕事に悪影響を与える最も重要な要因の1つです。たとえば、ブラウザを全画面表示に拡大してサイトが使用されると期待するのは誤りです。代わりに、最悪の事態を当てにする必要があります。

仮定と現実

上記は私の言葉の実例です。実際には、すべてのユーザーがデザイナーの提案どおりにブラウザーを使用するわけではありません。私自身、高さを減らしたブラウザウィンドウで見栄えの悪いサイトに出くわしました。

ブラウザ開発者ツール

ビューポートの高さに影響を与える方法は、ブラウザのサイズを垂直方向に変更することだけではありません。そのため、たとえば、開発者ツールバーを開くと、垂直方向のスペースの一部も失われます。

開発者ツールバーはブラウザウィンドウの一部を占めます

開発者ツールを開くと、サイトのデザインが壊れたり、誰も予想していなかった問題に光を当てたりする可能性があります。写真の強調表示された領域は、ビューポートの現在の高さを表しています。小さなラップトップ画面でサイトを表示しているときに開発者ツールを開くと、ページの小さな領域のみが表示されます。

1つの重要な質問について考えてみましょう。「小さなブラウザウィンドウでサイトを表示しながら、サイトのユーザーエクスペリエンスを向上させることは可能ですか？」私はこの質問に前向きな答えを与えることができます。理論で十分だと思います。ページのスタイルを設定するための「垂直」アプローチを学びましょう。

「垂直」CSS

一部の設計者や開発者は、さまざまな幅のウィンドウで受け入れられるページの外観に焦点を合わせています。同時に、それらは異なる高さのウィンドウでのページの動作の研究を覆い隠します。そして、これは非常に重要です。たとえば、誰かがページデザインに取り組んでいて、さまざまな幅のブラウザウィンドウでコンポーネントがどのように表示されるかについての指示が与えられています。さまざまな高さの窓はどうですか？

大型の電話では、ナビゲーション要素が利用可能な垂直スペースを埋めます。中型の電話では、フォントのサイズと間隔が小さくなります。小さな電話では、すべての要素を表示するのに十分な垂直方向のスペースがありません。したがって、それらは2列に配置されます。

この図は、ビューポートの高さに合わせて外観が調整されるナビゲーションメニューを示しています。デザイナーの目標は、メニューが彼が利用できるすべてのスペースを埋めることです。小さい画面では、フォントサイズとメニュー項目間の間隔が小さくなります。電話スクリーンが非常に小さい場合（たとえば、iPhone 5など）、アイテムは2列に表示されます。この種のサイト使用シナリオは見過ごされがちです。その結果、サイトはさまざまな高さの画面での作業にまったく適応しないか、サイト訪問者が問題を報告した場合にのみサイトを最適化します。

CSSは、さまざまなビューポートの高さに合わせてサイトを調整するのに役立ちます。つまり、2つの主要な手法について話します。

ビューポートの高さに基づいたメディアクエリ。
ビューポートに関連する測定単位。

ビューポートの高さを考慮したメディアクエリ

おそらくすでにご存知のように、ビューポートの幅を考慮したCSSのメディアクエリを使用できます。

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

ただし、ブラウザウィンドウの高さを考慮したメディアクエリはあまり一般的ではありません。

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/*  */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

ビューポートに関連する測定単位

ビューポートのサイズに関連する測定単位を使用すると、サイトでのユーザーエクスペリエンスを向上させるのに役立ちます。たとえば、ビューポートの高さを考慮して、要素間の垂直距離を調整できます。

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

ブラウザウィンドウの高さが高いほど、要素間の距離が大きくなります。

これは、27インチのiMacディスプレイのように、大きなモニターで同様のページを見るまでは、実際には何の影響も及ぼさない素敵な小さなことのように思えるかもしれません。次に、ビューポートの高さが高すぎることがわかりました。しかし、幸いにもサイズを制限する方法がありますmargin-bottom。これは、たとえば、次の方法で実行できます。

メディアクエリの使用。
CSS比較関数の使用。

最初の方法（メディアクエリ）は確かに優れたブラウザサポートを備えています。その本質はmargin-bottom、ページが非常に大きな画面に表示される場合に最大値を制限することです。

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

2番目の方法は、CSS関数を使用することclamp()です。この関数に渡される値を選択するとき、この場合、最小インデントサイズを、10px最大-50pxに設定します。これら2つの間の値は、ブラウザーウィンドウのサイズによって異なります。

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

このトピックに興味がある場合は、ページビューポートのサイズに応じた測定単位とCSS関数に関する私の記事をご覧ください。

以下では、垂直メディアクエリを使用するさまざまな方法について説明します。

例とシナリオ

▍ブラウザウィンドウの高さを変更すると重なるページ要素

この例は、上部にタイトルとイラストがあるページ用です。ページのこの部分の100vh高さは、ビューポートの高さの100％に等しくなります。

100vhの高さのページの上部

すべてが非常に見栄えがしますが、ブラウザウィンドウの高さが減少するまでです。ページの上部は、イラストやテキストを収容するのに十分な高さではありません。その結果、ページ上部の要素は、ページの他のセクションのコンテンツとオーバーラップします。

ブラウザウィンドウの高さを低くすると、デザインが壊れます。

画像がページの上部の下にあるページのセクションとどのように重なっているかに注意してください。これは、十分なスペースがないために発生します。この例のコードを見てみましょう。

マークアップは次のとおりです。

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

スタイルは次のとおりです。

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

このような問題を解決するためのいくつかのオプションを考えてみましょう。

幅（）だけでなく、画像に固定寸法（プロパティwidthとheight）を与えることができますwidth。財産の欠如がheight私たちの問題の理由の1つです。
height: 100vhビューポートの高さが大きい場合にのみ、ページの上部にプロパティを適用できます700px（もちろん、メディアクエリで使用される特定の値は、状況によって異なります）。

これらのアプローチの両方を組み合わせて、そのような問題に対するより信頼性の高いソリューションを得ることができます。

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /*     */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

そのため、「垂直」メディアクエリは安定した便利なメカニズムであると判断しました。ただし、値を使用すること100vhはリスクの高いビジネスです。画像のサイズを制限できたとしても、テキストのサイズを制限できない場合があるためです。たとえば、ページの上部のテキストが長くなっていることが判明した場合、すでによく知っている問題の新しい変種に直面します。

テキストがサイトの本来あるべきではないセクションと重なっています。

この問題を修正するにheightは、プロパティの代わりにプロパティを使用できますmin-height。このアプローチでは、セクションの内容が含めることができるよりも大きい場合、そのサイズが大きくなり、その内容は次のセクションをカバーしません。

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

▍固定ページタイトル

スクロールしてもページタイトルが1か所にとどまるのは問題ありません。ただし、画面に十分な垂直方向のスペースがある場合にのみ、このタイトルの位置が固定されていることを確認する必要があります。

固定ページタイトル

これは、横向きモードで表示されているサイトを示しています。見出しが垂直方向のスペースを取りすぎることに注意してください。ユーザーにとって重要ですか？ほとんどの場合、いいえ。ただし、次のメディアクエリを使用することで、ユーザーのサイト操作エクスペリエンスを向上させることができます。

@media (min-height: 700px) {
  .site-header {
    /* position: fixed  position: sticky */
  }
}

ランドスケープモードでのこのアプローチでは、タイトルは修正されません。

▍他より重要度の低いアイテムを非表示にする

Twitterのナビゲーションメニューでこれに気づきました。つまり、「垂直」メディアクエリと優先度+パターンの組み合わせについて話しているのです。

選択したアイテムは、スペースが不足すると非表示になります。

ビューポートの高さが変わると、重要度の低いアイテム（メニューアイテムBookmarksとLists）がサブアイテムになりますMore。これは、「垂直」メディアクエリの使用の良い例です。

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

そして、ここにTwitterでこのアプローチの適用を分析し、私のつぶやきは、あります。

▍ビューポートのナビゲートと高さの変更

次の例は前の例に関連しています。垂直ナビゲーションバー（サイドバー、サイドバー）があります。ビューポートの高さが低い場合は、ナビゲーション要素間の垂直距離をわずかに短くすることができます。これにより、ページの外観がわずかに向上します。

要素間の間隔とビューポートの高さ

この例のスタイルは次のとおりです。

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

そして、ここであなたはそれのためのビデオを見ることができます。

さらに、このような状況では、フォントサイズを変更することもできます。これにより、ブラウザウィンドウの高さを低くすると、要素のためのスペースがさらに増えます。

▍ページ上部とビューポートの高さ

ページの上部には、「空気」を与えるために垂直方向の空きスペースが必要です。このスペースの寸法は、ビューポートの高さによって異なる場合があります。

ページが高いほど、より多くの「空気」があります。

この例のスタイルは次のようになります。

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

▍モーダルコンポーネント

ご存知かもしれませんが、モーダルコンポーネントは少なくとも水平方向に中央に配置されることが期待されています。ただし、そのような要素を垂直に配置する必要がある場合があります。これは可能ですが、そのような要素によって出力されるデータの量を変更する妨げになります。

モーダルに正しい量のデータが含まれている場合、以下に示すように非常に見栄えがします。

正しいモーダル

この要素のスタイルは次のとおりです。

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

しかし、同じ要素にさらに多くのテキストを表示する必要がある場合、すべてがそれほど良くなるとは限りません。つまり、要素は画面全体に垂直に表示され、ユーザーはその内容をスクロールできなくなります。

モーダル要素が高すぎる

この問題は、次の理由で発生します。

モーダルには高さが指定されていません。
要素は垂直方向の中央に配置されます（これにより問題がスピードアップします）。

これらの問題に対処するCSSは次のとおりです。

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

プロパティmin-heightとがここで使用されていることに注意してくださいmin-width。1つ目は、短いテキストを表示している場合でも要素の見栄えを良くすることです。2つ目は、高さを一定にする代わりに、高さを特定の値に制限することを可能にします。

長いテキストの表示に適したモーダル要素

結果

ユーザーがWebサイトを操作することで得られるエクスペリエンスを考慮してWebサイトを設計する場合は、ブラウザーウィンドウの幅と高さに基づいて設計を構築するのが最善です。異なる高さのウィンドウでページをテストする人には奇妙に思えるかもしれませんが、そのようなテストはそれ自体を正当化します。ここでは、サイト設計に対する「垂直」アプローチの重要性、さまざまな高さのビューポートでページを正しく表示するためにページを設計する方法について説明し、例を確認しました。これらすべてがお役に立てば幸いです。

作成したWebページがさまざまな高さのブラウザウィンドウでどのように表示されるかに注意を払っていますか？

応答性の高いWebデザインとブラウザーの高さの応答性