テレビ、スマートフォン、パソコンなど向けにレスポンシブな横向きスクロールビューを作成する方法の基本的な概要です。
この投稿では、横スクロールを作成する方法についての考え方をご紹介します。 最小限の応答性とアクセス性を備えた ウェブ向けのエクスペリエンスを ブラウザやプラットフォーム（TV など）にも対応しています。ぜひ、 demo。
<ph type="x-smartling-placeholder">動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
概要
コンテンツのサムネイルをホストするための水平スクロールレイアウトを作成します
広告ですコンポーネントはシンプルな <ul> リストとして始まりますが、
CSS を使って快適でスムーズなスクロール操作を実現し、
グリッド表示にすることもできますJavaScript を追加して
移動とインデックスのインタラクションにより、キーボード ユーザーは 100 以上のアイテム間を移動をスキップできます。
さらに、試験運用版のメディアクエリ prefers-reduced-data を使用して、
メディア スクローラーを軽量のタイトル スクローラー エクスペリエンスに変更します。
アクセス可能なマークアップから始める
メディア スクローラーは、いくつかのコア コンポーネント、つまりアイテムのリストで構成されます。 最もシンプルな形式で世界中を飛び回り、 消費するものです。このページにアクセスしたユーザーは、リストを参照してリンクをクリックできる アイテムを表示します。ここが、私たちのアクセス可能な基地です。
<ul> 要素を使用してリストを提供する:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
<a> 要素を使用してリストアイテムをインタラクティブにします。
<li>
<a href="#">
...
</a>
</li>
<figure> 要素を使用して、画像とそのキャプションを意味的に表現します。
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
<img> の alt 属性と loading 属性に注目してください。メディアの代替テキスト
スクローラーは、サムネイルに追加のコンテキストを提供する UX の機会
画像が読み込まれなかった場合は代替テキストが表示されます。また、ユーザーに音声 UI が提供されます。
スクリーン リーダーなどの支援技術に依存しています。Five Golden で詳細を確認する
準拠する alt ルール
text です。
loading 属性には、この画像を示す方法としてキーワード lazy を指定できます。
source は、画像がビューポート内にある場合にのみ取得する必要があります。これは次のいずれかです。
ユーザーは自分が閲覧しているアイテムの画像だけをダウンロードするので、大規模なリストに適しています。
ビューにスクロールしました
ユーザーが希望するカラーパターンをサポートする
color-scheme を <meta> タグとして使用して、ページが閲覧されていることをブラウザに伝えます
両方のユーザー エージェント スタイルが必要です。無料のダークモードです
見方に応じて、[ライトモード] または [ライトモード] を選択できます。
<meta name="color-scheme" content="dark light">
メタタグが可能な限り早く通知されるため、ブラウザは ユーザーがダークモードを設定している場合は、暗いデフォルトのキャンバス色を選択できます。 つまり、サイトのページ間を移動しても白いキャンバスは点滅しません バックグラウンドで実行される場合があります。読み込み間でのシームレスなダークモード、より快適に 目。
Thomas Steiner の詳細: https://web.dev/color-scheme/.
コンテンツを追加
上記の ul > li > a > figure > picture > img のコンテンツ構造を考えると、次のようになります。
次のタスクは、スクロールする画像とタイトルの追加です。デモについては以上です
静的なプレースホルダ画像とテキストが
使用されますが
お好みのデータソースです
CSS でスタイルを追加する
次に、CSS はこの汎用的なコンテンツ リストを使用して、 体験できますNetflix、アプリストアなど、多くのサイトやアプリで横向きが使用されています スクロール領域を使用して ビューポートをカテゴリやオプションを詰め込みます
スクローラー レイアウトの作成
レイアウトでコンテンツが途切れることや、テキストに頼ることは避けることが重要です。 省略記号付きで切り捨てられます。多くのテレビには、メディア スクローラーが コンテンツを省略する傾向がありますこのレイアウトは違います。 また、メディア コンテンツが列サイズをオーバーライドして、1 つのレイアウトになるようにすることもできます。 多くの興味深い組み合わせを処理できる 柔軟性が得られます
コンテナでは、デフォルトのサイズを次のように指定することで、列のサイズをオーバーライドできます。 カスタムプロパティを作成しますこのグリッド レイアウトは列のサイズに関するものであり、 間隔と方向のみを管理する:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
このカスタム プロパティを <picture> 要素で使用して、基本アスペクト比であるボックスを作成します。
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
マイナー スタイルをいくつか追加するだけで、メディア スクローラーの最低限の機能が完成します。
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
overflow を設定すると、<ul> が設定され、スクロールとキーボード ナビゲーションが可能になります。
直接的な子要素である各 <li> 要素の ::marker が削除される
新しいディスプレイタイプ inline-block を取得します。
画像がまだ反応しておらず、箱から出してすぐにバーストする 探しますサイズ、フィット感、枠線のスタイルを変える。 遅延読み込み時の背景グラデーション:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
スクロールのパディング
ページ コンテンツに合わせた配置と、端から端までのスクロール領域は、 調和のとれた最小限の要素に不可欠です
タイポグラフィに合わせて端から端までのスクロール レイアウトを実現する
レイアウト行については、scroll-padding に一致する padding を使用します。
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
水平スクロールのパディングのバグの修正 上の図は、Google Cloud で スクロール コンテナはパディングされているが、互換性に関する未解決の問題がある （ただし、Chromium 91 以降では修正されています）。詳しくは、 こちら 簡単に言えばパディングは 確認できます。
ブラウザがスクローラーの最後にパディングを追加するよう、 各リストの最後の図をターゲットとして、 調整します。
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
論理プロパティを使用すると、メディア スクローラーがあらゆる書き込みモードで動作できるようになります。 ドキュメントの方向性を決定します
スクロールのスナップ
オーバーフローのあるスクロール コンテナは、1 行の CSS を使用してスナップするビューポートになり、子でそのビューポートとどのように配置するかを指定します。
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
フォーカス
このコンポーネントの着想は、テレビでの 。多くのビデオゲーム プラットフォームでは、メディア スクローラーが メインのホーム画面レイアウトとして これに似ています焦点は巨大な UX 少し追加するのではなく、このメディアスクローラーを たとえば
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
これにより、フォーカス アウトライン スタイル 7px がボックスから切り離され、見栄えが良くなります。
選択します。ユーザーにモーションの抑制に関する好みがない場合、オフセットは
フォーカス イベントに微妙な動きを加えます。
ロービング指数
次の長いリストでは、ゲームパッドとキーボードの使用に特別な注意が必要になります。 オプションを使用します。これを解決する一般的なパターンは、 ローリング インデックス。このとき、 アイテムのコンテナはキーボード フォーカスですが、フォーカスを保持できるのは 1 つの子のみです 一度に 1 つずつですフォーカス可能な 1 つのアイテムを一度に表示する機能により、次のことが可能になります。 Tab キー 50+ する必要があります。
デモの最初のスクローラーには 300 のアイテムがあります。自分の考えをまとめるよりも、 そのすべてを走査して次のセクションに進みます
この機能を実現するには、JavaScript でキーボード イベントを監視してフォーカスする必要があります。 できます。Google Cloud 上に小さなオープンソース ライブラリを npm で、このユーザーが 簡単に達成できます。3 つのスクローラーでの使用方法は次のとおりです。
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
このデモでは、ドキュメントに対してスクローラーのクエリを実行し、スクローラーごとに
rovingIndex() 関数を使用します。rovingIndex() に要素を渡すと、ロービングを取得できます。
ターゲット クエリ セレクタを利用できる場合は、
直接の子孫ではありません
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
このエフェクトについて詳しくは、オープンソース ライブラリをご覧ください。 roving-ux。
アスペクト比
この投稿の執筆時点では、
aspect-ratio は
Chromium ブラウザやセットトップ ボックスでは使用できます。以降、
メディア スクローラーのグリッド レイアウトでは、方向と間隔のみを指定します。
アスペクト比のサポートを確認する機能です。
より動的なメディア スクローラーへの段階的な機能強化。
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
ブラウザが aspect-ratio 構文をサポートしている場合、メディア スクローラーの画像は
aspect-ratio サイズにアップグレードしました。ドラフトのネスト構文を使用すると、
は、1 行目、2 行目、3 行目に応じてアスペクト比を変更します。「
nest 構文では、いくつかの小さな関数を
他のサイズロジックでも同じように使用できます。
この CSS では、この機能をより多くのブラウザ エンジンで利用できるようになるため、 より視覚に訴えるレイアウトがレンダリングされます。
データを削減する
この次の手法は
カナリア
今回はページ読み込み時間を大幅に短縮し
数行の CSS でデータを使用することができます。prefers-reduced-data メディアクエリ:
レベル 5: デバイスが設置されているかどうかを尋ねることができます。
データセーバー モードなど、データの縮小状態。存在する場合は、
この場合は、画像を非表示にします。
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
コンテンツは引き続き操作可能ですが、サイズの大きな画像を
ダウンロードされます。以下は、prefers-reduced-data CSS を追加する前のサイトです。
（131 ミリ秒で 7 件のリクエスト、100 KB のリソース）
CSS 「prefers-reduced-data」を追加した後のサイトのパフォーマンスは次のようになります。
（71 件のリクエスト、1.07 秒で 1.2 MB のリソース）
リクエストが 64 回減る。ビューポート内の画像は最大 60 枚になる（テストは （ワイド スクリーン ディスプレイに表示）され、ページの読み込みが約 80% 増加しました。 データの 10% が転送されています非常に強力な CSS です。
まとめ
私のやり方わかったな、どうやって？！🙂
アプローチを多様化して、ウェブで構築するすべての方法を学びましょう。 Codepen を作成するか独自のデモをホストして、ツイートしてください。 以下のコミュニティ リミックスのセクションをご確認ください。
ソース
コミュニティ リミックス
ここにはまだ何も表示されません。