↩ プログラミング言語 Web関連 css3 CSS スクロールバーのスタイル (オーバーフロー)

CSS スクロールバーのスタイル (オーバーフロー)

 
 
「 CSS Box Model 」セクションの学習を通じて、ページ上の各要素は長方形のボックスと見なすことができ、CSS を使用してボックスのサイズ、位置、およびその他の情報を制御できることがわかりました。デフォルトでは、要素内のコンテンツがボックスのサイズを超える場合、たとえば、要素のコンテンツ領域の幅と高さによって形成される長方形の領域が要素内のコンテンツを収容するのに十分でない場合、コンテンツの一部がボックスからはみ出します。

 

コンテンツ 表示

1.overflow(オーバーフロー)

オーバーフローしたコンテンツをより適切に処理するために、CSS にはオーバーフローという名前の属性が用意されており、オーバーフローした要素のコンテンツ領域のコンテンツを処理する方法を設定できます。属性のオプションの値を次の表に示します。 :

価値 説明
visible デフォルト値では、オーバーフローしたコンテンツを処理せず、コンテンツは要素コンテンツ領域の外に表示されます
hidden オーバーフロー要素のコンテンツ領域のコンテンツを非表示にします
scroll オーバーフロー要素コンテンツ領域のコンテンツを非表示にし、要素の左と下にスクロール バーを作成し、スクロール バーをスライドして要素内のすべてのコンテンツを表示します
auto コンテンツがオーバーフローすると、要素の左側にスクロール バーが作成され、スクロール バーをスライドさせることで要素内のすべてのコンテンツを表示できます。
inherit 親要素からオーバーフロー属性の値を継承する

【例】オーバーフロー属性を使用して、要素コンテンツ領域でのオーバーフローの処理方法を設定する:

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 550px;
            height: 100px;
            margin-top: 20px;
            border: 1px solid red;
        }
        div.hidden {
            overflow: hidden;
        }
        div.scroll {
            overflow: scroll;
        }
        div.auto {
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="hidden">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
    <div class="scroll">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
    <div class="auto">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
</body>
</html>

実行結果は次の図のとおりです。

図: オーバーフロー プロパティのデモ
図: オーバーフロー プロパティのデモ

2.overflow-x, overflow-7

CSS3 には、overflow-x と overflow-y の 2 つの属性も用意されています。これらの機能は、overflow 属性に似ています。属性のオプションの値は、overflow 属性と同じです。

  • overflow-x: 要素コンテンツ領域のコンテンツが要素から水平方向にはみ出した場合の、はみ出したコンテンツの処理方法を設定します。
  • overflow-y : 要素のコンテンツ領域のコンテンツが要素を垂直方向にオーバーフローした場合のオーバーフロー コンテンツの処理方法を設定します。

ヒント: overflow-x または overflow-y のプロパティの 1 つが非表示に設定されている場合、他のプロパティは自動的に auto に設定されます。また、CSS3 はまだ確定していないため、これら 2 つのプロパティの効果は変更または調整される可能性があります。

 

「 CSS スクロールバーのスタイル (オーバーフロー)」についてわかりやすく解説！絶対に観るべきベスト2動画

CSS Tips & Tricks – How to hide scrollbars on div elements.
https://www.youtube-nocookie.com/shorts/_-eW4o73CkI
Hướng dẫn tùy biến scrollbar trong CSS
https://www.youtube-nocookie.com/watch?v=iUFOP-kuRUg&pp=ygVHIENTUyDjgrnjgq_jg63jg7zjg6vjg5Djg7zjga7jgrnjgr_jgqTjg6sgKOOCquODvOODkOODvOODleODreODvCkmaGw9SkE%3D

最新記事一覧

関連記事一覧