画面構成

レスポンシブ ウェブ デザインは、さまざまな形でスマートフォンに反応したものです。スマートフォンが登場する前は、ハンドヘルド デバイスでのウェブサイトの外観や操作性について真剣に検討している人はほとんどありませんでした。これは、ウェブブラウザを内蔵したスマートフォンが急激に台頭したことで一変しました。

レスポンシブ ウェブ デザインは、思い込みに疑問を投げかける考え方を奨励しました。以前は、ウェブサイトはデスクトップ パソコンでしか表示されないと想定するのが一般的でしたが、今では同じウェブサイトをスマートフォンやタブレットでもデザインすることが標準的な方法になっています。実際、ウェブでのモバイルの利用率はパソコンでの利用者を上回っています。

このレスポンシブな考え方は、将来の成功につながります。今は想像もつかないようなデバイスや画面でウェブサイトが表示される可能性があります。そしてこの考え方は、画面以外にも広がります。現在でも、画面のないデバイスを使用してコンテンツにアクセスしているユーザーがいます。セマンティック HTML の強固な基盤を使用している場合、音声アシスタントはウェブサイトを使用できます。

画面の世界でも試行錯誤を繰り返しています。現在市場には、折りたたみ式画面を搭載したデバイスがあります。そのため、設計にいくつかの課題が生じます。

デュアル スクリーン

折りたたみ式デバイスのユーザーは、ウェブブラウザを一方の画面だけに表示するか、両方の画面にまたがって表示するかを選択できます。ブラウザが 2 つの画面にまたがっていると、ディスプレイ上のウェブサイトは 2 つの画面の間にあるヒンジによって分割されます。見た目が良くありません。

ビューポート セグメント

ウェブサイトがデュアル スクリーン デバイスに表示されているかどうかを検出するよう設計された、試験運用中のメディア機能があります。メディア対象物の候補名は viewport-segments です。horizontal-viewport-segments と vertical-viewport-segments の 2 種類があります。

horizontal-viewport-segments メディア機能が 2 の値をレポートし、vertical-viewport-segments が 1 の値をレポートする場合、デバイスのヒンジが上から下に向かって流れ、コンテンツが 2 つの横並びのパネルに分割されます。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

vertical-viewport-segments メディア機能が 2 の値をレポートし、horizontal-viewport-segments が 1 の値をレポートすると、ヒンジが左右に動き、コンテンツが 2 つのパネル（上下に重ねて）に分割されます。

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

vertical-viewport-segments と horizontal-viewport-segments の両方が 1 という値を返す場合、デバイスに複数の画面がある場合でも、ウェブサイトは 1 つの画面のみに表示されていることを意味します。これは、メディアクエリを使用しないのと同じ結果になります。

環境変数

viewport-segments メディア機能だけでは、このわずらわしいヒンジのデザインには役立ちません。ヒンジのサイズを知る方法が必要です。このような場合に、環境変数が役立ちます。

CSS の環境変数を使用すると、不自然なデバイスの侵入をスタイルに反映させることができます。たとえば、「ノッチ」を中心としたデザインがiPhone X では、環境値 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left を使用します。これらのキーワードは env() 関数でラップされます。

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

環境変数はカスタム プロパティのように機能します。つまり、環境変数が存在しない場合は、フォールバック オプションを渡すことができます。

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

これらの環境変数を iPhone X で使用できるようにするには、viewport 情報を指定する meta 要素を更新します。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

これで、ページ レイアウトがビューポート全体を占有し、デバイス提供のインセット値でドキュメントを安全にパディングするようになりました。

折りたたみ式画面用に、viewport-segment-width、viewport-segment-height、viewport-segment-top、viewport-segment-left、viewport-segment-bottom、viewport-segment-right の 6 つの新しい環境変数が提案されています。

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">で確認できます。

次に、2 つの列があり、一方の列が他方よりも広いレイアウトの例を示します。

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

垂直ヒンジがあるデュアル スクリーンの場合は、最初の列を最初の画面の幅に設定し、2 番目の列を 2 番目の画面の幅に設定します。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

デュアル スクリーンをチャンスと捉えましょう。たとえば、一方の画面にスクロール可能なテキスト コンテンツを表示し、もう一方の画面に画像や地図などの固定要素を表示するという方法もあります。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

今後について

折りたたみ式ディスプレイは次世代のディスプレイになるのか？誰もわかりません。モバイル デバイスがどれほど人気が出るかは誰にも予測できなかったため、将来的なフォーム ファクタについて先入観を持たせる価値はあります。

何よりも重要なのは、将来起こりうるあらゆる状況にウェブサイトが対応できるようにすることです。そのため、レスポンシブ デザインは、単なる実用的な手法だけでなく、将来のウェブの構築に役立つ考え方も提供します。

理解度をチェックする

画面構成に関する知識をテストする