画面構成

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

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

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

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

さまざまな構成の折りたたみ式スマートフォンのモンタージュ。

デュアル スクリーン

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

2 つの画面にまたがるウェブサイト。テキストの水平方向の流れは、画面間のヒンジによって中断されます。

ビューポート セグメント

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

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

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

vertical-viewport-segments メディア機能が 2 の値をレポートし、horizontal-viewport-segments1 の値をレポートすると、ヒンジが左右に動き、コンテンツが 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">
</ph> Microsoft Edge Explainers の図。

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

環境変数

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

CSS の環境変数を使用すると、不自然なデバイスの侵入をスタイルに反映させることができます。たとえば、「ノッチ」を中心としたデザインがiPhone X では、環境値 safe-area-inset-topsafe-area-inset-rightsafe-area-inset-bottomsafe-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-widthviewport-segment-heightviewport-segment-topviewport-segment-leftviewport-segment-bottomviewport-segment-right の 6 つの新しい環境変数が提案されています。

で確認できます。 <ph type="x-smartling-placeholder">
</ph> デュアル スクリーンの環境変数を示す図。 <ph type="x-smartling-placeholder">
</ph> Microsoft Edge Explainers の図。
で確認できます。

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

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

レイアウトは 2 つの画面に分割され、ヒンジが幅の広い列を遮ります。

垂直ヒンジがあるデュアル スクリーンの場合は、最初の列を最初の画面の幅に設定し、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;
 
}
}

レイアウトは 2 つの画面に均等に分割され、目に見える中断はありません。

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

<ph type="x-smartling-placeholder">
</ph> 位置情報サービスが 2 つの画面に分割され、一方の画面に地図、もう一方に経路が表示されている図。 <ph type="x-smartling-placeholder">
</ph> Microsoft Edge Explainers の図。

今後について

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

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

理解度をチェックする

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

分割された横表示の折りたたみ式デバイスをターゲットとするメディアクエリはどれですか。

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)
@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)

環境変数とは例: env(safe-area-inset-top)

緑色で、環境にとってより安全な変数。
カスタムビルド時間変数。
ブラウザとデバイスに合わせてサイトを調整するときに使用する、ブラウザ固有の属性を含む変数。
ユーザーの現在地に関する変数。