ywork2020.com

Title

ボックスに収まらない内容の水平方向への表示方法

目次 (INDEX)

overflow-xとは

ここで説明するoverflow-x とは次の語句からなるCSSのプロパティです。
overflow
読み: オーバーフロー
意味: あふれる、こぼれる
x
読み: エックス
意味: x軸、水平軸

目次に戻る

overflow-xプロパティの概要

このプロパティは要素のコンテンツボックスに収まらない内容の表示方法を要素のx軸に対して設定することができます。

つまり、要素から溢れた内容を表示させるかどうか、また水平方向にスクロールバーを表示させるかどうかを設定するということです。

このプロパティは個別プロパティであり、総合プロパティの overflow を使うことで水平、垂直の設定を一括で指定することも可能です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{overflow-x: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

下記のサンプルにはdiv要素を使用します。 このdiv要素にはコンテンツが要素の外にはみ出すように、予め横幅と高さを100pxに設定しています。

div{
	width: 100px;
	height: 100px;
}

目次に戻る

初期値: visible

初期値のvisibleは「明らかに見てわかる」という意味です。 このキーワードを使うと、 そのボックス内に留めることができずはみ出した内容は要素の外側に表示されます。 ただし、これは overflow-y がvisibleの場合であり、仮にoverflow-yがhiddenの場合はx軸にスクロールバーが表示されます。

overflow-x: visible;
overflow-y: visible;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.
overflow-x: visible;
overflow-y: hidden;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.

div{
	width: 100px;
	height: 100px;
	overflow-x: visible;
}

目次に戻る

キーワード値: hidden

hiddenキワードは、「隠れた」という意味です。 このキーワードを使うと、 水平方向でボックスに収まりきらない内容は切り取られ、スクロールバーも表示されません。 しかし、垂直方向へはスクロールバーは表示されます。

ただし、これは overflow-y がvisibleの場合であり、仮にoverflow-yがhiddenの場合はy軸にもスクロールバーは表示されません。

overflow-x: hidden;
overflow-y: visible;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.
overflow-x: hidden;
overflow-y: hidden;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.

div{
	width: 100px;
	height: 100px;
	overflow-x: hidden;
}

目次に戻る

キーワード値: scroll

scrollキーワードは、「巻物」という意味です。 このキーワードを使うと、 ボックスのサイズに合わせて内容が切り取られますが、コンテンツに関係なく常にスクロールバーが表示されるので内容を見ることは可能です。

ただし、これは overflow-y がvisibleの場合であり、仮にoverflow-yがhiddenの場合はy軸にスクロールバーは表示されません。

overflow-x: scroll;
overflow-y: visible;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.
overflow-x: scroll;
overflow-y: hidden;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.

div{
	width: 100px;
	height: 100px;
	overflow-x: scroll;
}

目次に戻る

キーワード値: auto

autoキワードは「自動」という意味です。 ブラウザーのレンダリングに依存しますが、このキーワードを使うと、 ボックスに内容が収まる場合にはvisibleキーワードを使用した場合と同じように表示され、 内容が溢れる場合には自動でスクロールバーが表示されます。

ただし、これは overflow-y がvisibleの場合であり、仮にoverflow-yがhiddenの場合はy軸にスクロールバーは表示されません。

overflow-x: auto;
overflow-y: visible;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.
overflow-x: auto;
overflow-y: hidden;
ThisIsDeliberatelyConnectingLetters. This site provides information for self-taught web programming learners.

div{
	width: 100px;
	height: 100px;
	overflow-x: auto;
}

目次に戻る

グローバル値

overflow-xプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のvisibleに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{overflow-x: グローバル値;}

目次に戻る

補足説明

  • ブロックレベル要素、非置き換えインラインブロック要素、テーブルセルに適用可能に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

overflow-x: visible;

overflow-x: hidden;

overflow-x: scroll;

overflow-x: auto;

サンプル: ブロック要素 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

サンプル: インライン要素: abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

目次に戻る