CSS で水平スクロール可能なセクションを作成する

水平方向にスクロール可能なセクションは、ビューポートの幅を超えるコンテンツを表示するために使用される一般的な Web デザイン パターンです。このデザイン パターンにより、ユーザーは水平方向にスクロールでき、大きな画像、ギャラリー、タイムライン、地図、その他のコンテンツを表示するユニークで魅力的な方法が提供されます。これは、overflow-x: auto や overflow-x:scroll などの CSS プロパティを使用して実現されます。

これは水平スクロールにネイティブのブラウザ機能を使用しており、デバイス間で応答性があります。コンテンツのナビゲーションと探索が簡単に行えます。追加のライブラリやプラグインは必要ありません。

「container」クラスを使用してコンテナ要素を定義します。
コンテナの「overflow−x」プロパティを「auto」に設定して、水平スクロールを有効にします。
セクションが次の行に折り返されないようにするには、コンテナの「white-space」属性を「nowrap」に設定します。
クラスを使用して、「セクション」のセクション要素を定義します。
各セクションの「display」属性を「inline-block」に設定して、並べて表示します。
各セクションの「width」プロパティを「100vw」に設定して、各セクションの幅をビューポートの全幅に設定します。
各セクションの「高さ」プロパティを「80vh」に設定して、各セクションの高さをビューポートの高さの 80% に設定します。
「margin-right」属性を使用して、各セクションの右側にマージンを追加します。
「vertical-align」属性を使用して、各セクションの上部をコンテナの上部に揃えます。
セクション要素をコンテナ要素内に配置します。

• ＃＃＃例＃＃＃ リーリー
これは、コンテンツをさまざまなセクションに分割する、ページングまたはタブを使用した従来の垂直スクロールによっても実現できます。グリッドまたはフレックスボックス レイアウトを使用すると、水平スクロールに依存せずに、応答性が高く視覚的に魅力的な方法でコンテンツを表示できます。

設計時には次のガイドラインに留意してください:

シンプルにしてください。あらゆる領域に情報を詰め込むことは避けてください。重要な点を簡潔かつ明確に述べることに重点を置きます。

目を引くビジュアルを使用する: 視聴者の興味を引き付け、セクションをより面白くするには、一流の写真、ビデオ、またはアニメーションを使用します。
一貫したデザインを使用する: シームレスな全体的なルック アンド フィールを実現するには、すべての領域が一貫したデザインになっていることを確認してください。
ナビゲーションの提供: ユーザーが水平スクロール ページのセクション間を簡単に移動できるようにします。それらを動かすには、矢印、ポイント、ナビゲーション接続を追加します。

以上がCSS で水平スクロール可能なセクションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。