水平スクロールとは何か

3267 ワード
webdev beginners html tutorial テキストリンク
ウェブサイトとアプリケーションは、あなたが最初に一方向に「スクロールする」ことを考える傾向があります.事実上すべてのウェブページは垂直にその内容を構成するので、それは意味をなします.あなたのマウス、トラックパッド、またはキーボードを使用して、より多くを参照してくださいに折り返し過去をスクロールします.アニメーション要素または視差の効果では、ユーザーエクスペリエンスを高めるためにいくつかのウェブサイトで使用される可能性があります.ただし、通常は垂直方向のままである.
垂直スクロールは悪いことではありませんしかし、そのX軸の対応については、水平スクロール?あなたはそれが何であるかを知っています、それは利点です、そして、それがどこで使われることができますか?私はこの記事でこれらの質問に答えます、そして、それがあなたのサイトにふさわしいようであるならば、CSSとHTMLを使っている基本的な水平スクロールを作成する方法をあなたに教えます.

水平スクロールとは


水平方向のスクロールは、ユーザーがスクロールして左と右のウィンドウまたはコンテナの側面からコンテンツを明らかにする.あなたは水平方向のスクロールバーをクリックしてドラッグして、水平方向のスクロールバーをドラッグして横にスクロールすることができます.

水平方向にスクロールするときにユーザーエクスペリエンスに最適にすることができます


これらのシナリオの水平スクロールは、良いユーザーエクスペリエンスを作成します
彼らが簡単にを見られることができるように、異なるカテゴリーの多くの製品またはアイテムを特徴とする
  • 一瞥
    • で調べるのが難しい情報
    ウェブサイトの複数の画像を使用するための

  • 離散セクションまたはスライド
    • のアプリケーションに関する情報を示す

  • 調べにくい情報

    水平スクロールのポジショニング

  • すべてのデバイス全体では、このデザインはほぼ100パーセント一貫しています.
  • それは二次情報をページにあまりにも多くのスペースを取ることなく含めることができるように設計されています.水平スクロール、例えば、ユーザーがすぐにフォトギャラリーを介してスクロールできるように、彼らは利用可能なものの小さなサンプルを見ることができますし、その視聴機会を展開します.
  • 水平スクロールを使用して保存される垂直空間がたくさんあります.水平方向のレイアウトは、長いページに一度にコンテンツのすべてを提示する代わりに、より少ない量の情報をユーザーに提示します.水平レイアウトは、より大きな柔軟性を提供します.これは、水平方向と垂直方向の両方のコンテンツを追加することが可能です.
  • ユーザーは横にスワイプまたはスクロールダウンで別のカテゴリを表示することができます.ホラは、ユーザーが側にスワイプしてカテゴリ内のオプションの完全なビューを取得することができます.
    • ユーザーが異なるカテゴリーを閲覧することを強制することなく多様な選択を示すので、
  • ユーザーは二次元のこの使用によって利益を得られます.

    • 水平スクロールを作成する方法


    ステップ1 : HTMLを加える
    <!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" href="style.css">
   <title>
        Making a div horizontally
        scrollable using CSS
   </title>
</head>

<body>
   <center>
      <h1>Hashnode</h1>
      <h2>
        Making a div horizontally
        scrollable using CSS
      <div class="scroll">
         <a href="#home">Home</a>
         <a href="#news">News</a>
         <a href="#contact">Contact</a>
         <a href="#about">About</a>
         <a href="#support">Support</a>
         <a href="#blog">Blog</a>
         <a href="#tools">Tools</a>  
         <a href="#base">Base</a>
         <a href="#custom">Custom</a>
         <a href="#more">More</a>
      </div>
   </center>
</body>
</html>
    ステップ2:スクロール動作を適用するCSSを使用します.
    h1 {
  color: blue;
}

div.scroll {
  margin: 4px, 4px;
  padding: 4px;
  background-color: #08c708;
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
    私たちのほとんどは反射の垂直方向にスクロール-それは水平方向にスクロールよりも意味を作る.それにもかかわらず、水平スクロールはまだモダンなデザインの場所があります.このメソッドを使用すると、意図的に使用すると、ページが構造化され、コンテンツが効果的に表示されます.

    出力:


    You can now extend your support by buying me a Coffee.😊👇



    読書ありがとう😊
    Activityの使用(十一):傍受電話
    Activityにレイアウトファイルを書き込む