レスポンシブ ウェブ デザインは、多くの点で携帯電話の反応を左右していました。スマートフォンが登場する前は、ハンドヘルド デバイスでウェブサイトがどう見えるか真剣に考える人はほとんどいませんでした。この状況は、ウェブブラウザを内蔵した携帯電話の台頭によって変わりました。
レスポンシブ ウェブ デザインは、思い込みに疑問を抱くマインドセットを促しました。これまでウェブサイトはデスクトップ パソコンでのみ表示されると想定されていましたが、今ではスマートフォンとタブレットでも同じウェブサイトを設計することが標準的な方法です。実際、ウェブでのモバイルの利用はパソコンでの利用を上回りました。
このレスポンシブな考え方は、今後に活かすことができます。ウェブサイトは、今では想像もできないようなデバイスや画面で発生する可能性があります。こうした考え方はスクリーンの枠を超えて、今でも画面のないデバイスを使ってコンテンツにアクセスしています。セマンティック HTML の強固な基盤を使用している場合、音声アシスタントでウェブサイトを使用できます。
画面の世界でもテストが行われています。今日、折りたたみ式スクリーンを備えたデバイスが市販されています。そのため、設計に関するいくつかの課題が生じます。
デュアル スクリーン
折りたたみ式デバイスのユーザーは、ウェブブラウザを一方の画面にのみ表示するか、両方の画面にまたがって表示するかを選択できます。ブラウザが両方の画面にまたがっている場合、表示されているウェブサイトは、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.
}
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">
これで、ページ レイアウトがビューポート全体に表示されるようになり、デバイスが提供するインセット値でドキュメントを安全にパディングできるようになります。
折りたたみ式画面用に、6 つの新しい環境変数（viewport-segment-width、viewport-segment-height、viewport-segment-top、viewport-segment-left、viewport-segment-bottom、viewport-segment-right）が提案されています。
幅の広い 2 つの列があるレイアウトの例を次に示します。
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
垂直ヒンジを備えたデュアル スクリーンの場合は、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;
}
}
デュアル スクリーンを機会として捉える。1 つの画面を使用してスクロール可能なテキスト コンテンツを表示し、もう 1 つの画面で画像や地図などの固定要素を表示することが考えられます。
今後の計画
折りたたみ式ディスプレイは次に大きな成長を遂げるのでしょうか？誰もわかりません。モバイル デバイスの普及は誰も予測できなかったので、今後のフォーム ファクタについて率直に考える価値があります。
何よりも、ウェブサイトが将来起こりうる事態に対応できるようにすることは重要です。レスポンシブ デザインがもたらすのは、現実的な方法を示すだけでなく、未来のウェブを構築する際に役立つ考え方です。
理解度チェック
画面構成に関する知識をテストする
分割された横向きモードの折りたたみ式デバイスをターゲットとするメディアクエリはどれですか。
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)環境変数とは例: env(safe-area-inset-top)