【CSS】overflow-x、overflow-yの使い方

CSS

CSSのoverflow-xとoverflow-yは、要素の内容がはみ出した際にどのように表示されるかを指定するプロパティです。

overflow-xは、水平方向にはみ出した内容の表示方法を指定し、overflow-yは、垂直方向にはみ出した内容の表示方法を指定します。

基本的にoverflow-xとoverflow-yは、次のような値を取ります。

  • visible：はみ出した部分を表示します
  • hidden：はみ出した部分を非表示にします
  • scroll：はみ出した部分にスクロールバーを表示します
  • auto：はみ出した部分にスクロールバーを表示するかどうかは、ブラウザによります。

例えば、水平方向にはみ出した内容を非表示にし、垂直方向にはみ出した内容にスクロールバーを表示する場合は、以下のように設定します。

.example {
  overflow-x: hidden;
  overflow-y: scroll;
}

これにより、要素の中の文字などが水平方向にはみ出したときにはみ出した部分を隠し、垂直方向にはみ出したときにはスクロールバーが表示されるようになります。

また、両方向に対して同じ設定をする場合には、overflowプロパティを使用することもできます。

.example {
  overflow: hidden; 
}

上記のように設定することで、水平方向・垂直方向の両方に対してoverflow-x: hidden; overflow-y: hidden; と同じ設定が適用されます

overflowプロパティやoverflow-x, overflow-yを使用することで、要素の内容がはみ出した際に、どのように表示するかを細かく調整することができ、より視認性の高いWebページを作成することができます。