はみ出た要素の左右の表示方法を指定する overflow-x 。

意味や役割はなんとなくわかっているけど、詳しい使い方を知らない人も多いでしょう。

こんな疑問を持っていませんか？

今回は、overflow-xの

について説明します。

overflow-xとは

overflow-xとはどういったプロパティなのか、詳しく知らない人も多いでしょう。

なのでここでは、overflow-xの意味や役割について解説していきます。

overflow-xの読み方

overflow-xは 「オーバーフロー・エックス」 と読みます。

「overflow」は 「あふれ出る・はみ出す」 という意味があり、「x」はここでは 「横方向」 を表します。

CSSでは、この「overflow-x」を 「 はみ出た要素の左右の表示方法 」 という意味で使われています。

例えば、要素内の文章がはみ出てしまった際に、横方向にスクロールさせることが可能です。

overflow-xははみ出た要素の左右の表示方法を指定するプロパティ

overflow-xは 「 はみ出た要素の左右の表示方法を指定するプロパティ 」 です。

overflow-xを指定すると、要素からはみ出た部分をスクロールで表示したり、消して見えなくしたりすることができます。

例えば、画面幅が狭いスマホで、横にスクロールできる表や文章などを作成する際によく使われます。

overflow-xで利用できる値

overflow-xでは以下の値を使うことができます。

visible 内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 overflow-yがhidden, scroll, autoのいずれかであり、このプロパティがvisibleである場合は、暗黙にautoに計算します。 hidden 水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。 scroll 水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。 ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合はvisibleと同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ Chrome Firefox Internet Explorer Opera Safari スマートフォン用ブラウザ Android webview Android版Chrome Android版Firefox Android 版 Opera iOS版Safari Samsung Internet

overflow-xの基本的な使い方

overflow-xの意味や役割についてわかりました。

なのでここでは、実際にoverflow-xの使い方を解説していきます。

まだ使い方を知らない人は、しっかりと理解していきましょう。

overflow-xの使い方

overflow-xの使い方をコードを用いて見ていきます。

実際のコードは次の通り。

※行の折り返しをさせないために、white-space: no-wrapを指定しています。

幅が200pxで高さが50pxのpタグがあったとします。

そのpタグに 「overflow-x: auto;」 と指定してみましょう。

結果は表示すると、次のようになります。

要素に収まりきらない文章をスクロールして表示することができますね。

このように、overflow-xを使えば、左右のはみ出た部分の表示方法を指定することができます。

値によって表示方法は様々なので、使い方を覚えておくといいでしょう。（それぞれの値の使い方は後ほど解説します。）

overflow-xとoverflow-yの違い

overflow-xとよく似たプロパティで、 overflow-y というものがあります。

意味はなんとなくわかるけど、どう使い分ければいいかわからない人もいるでしょう。

なのでここでは、overflow-xとoverflow-yの違いを解説していきます。

・overflow-x：はみ出た要素の 左右 の表示方法を指定するプロパティ

・overflow-y：はみ出た要素の 上下 の表示方法を指定するプロパティ

overflow-xは左右の表示方法を指定するのに対して、overflow-yは上下の表示方法を指定するものです。

実際の使い方をコードで見ていきましょう。

overflow-xを指定する様々な方法

ここまででoverflow-xの基本的な使い方がわかりました。

なのでここからは、overflow-xを指定する様々な方法について解説していきます。

overflow-xを指定する際は、auto以外に 「visible」「hidden」「scroll」 の3つの値を指定することができます。

今回は、この3つの値の使い方を見ていきましょう。

visibleで指定する方法

まずは、visibleで指定する方法です。

実際のコードは次の通り。

幅が200pxで高さが50pxのpタグに 「overflow-x: visible;」 と指定しましょう。

visibleは要素内の内容が収まらない場合、その内容は要素からはみ出て表示されます。

結果を表示すると、次の通り。

pタグの文章が、要素からはみ出て表示されていますね。

ちなみにvisibleはoverflow-xの初期値として設定されています。

なので、何も指定しなければ、同じように要素からはみ出て表示されるのです。

hiddenで指定する方法

続いて、hiddenで指定する方法です。

実際のコードは次の通り。

pタグに 「overflow-x: scroll;」 と指定します。

scrollは要素内の内容が収まらない場合、その内容は左右にスクロールして表示することができます。

結果を表示すると、次のようになります。

要素からはみ出た文章が、スクロールで表示できますね。

このようにscrollを指定すれば、幅が狭い画面でも見やすく表示することができます。

サイト制作でもよく使われるので、覚えておきましょう。

今回は、overflow-xの意味や使い方について詳しく解説しました。

overflow-xは、はみ出た要素の左右の表示方法を指定するプロパティです。

overflow-xを指定すると、要素を横方向にスクロールすることもできるので、使い方を覚えておきましょう。

この記事がoverflow-xの学習に役立つと幸いです。

参考文献： MDN web docs｜overflow-x – CSS：カスケーディングスタイルシート

ウェブカツ は 「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクール として、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。

完全初心者からフリーランスITエンジニアへと育成しているフリーランス向けオンラインプログラミングスクールとしては業界初で最大級のスクール。 2万人を超える生徒が学ばれ、1000万円プレーヤーを数多く輩出。 生徒には元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われている。 また、数多くのスクールとは全く異なり「転職はあくまで将来への通過点である」「会社でしか生きられない力より会社の外で稼げる力を培う」 との理念を持った教育を行い、講師・運営陣には元野村総研のSEや京大院卒エンジニアが携わっている。

テックアカデミーで、副業コースを受講しました。しかし、それだけでは転職には不足するし、フロントエンドの企業は門前払いなので、そのスクールの受け放題コースを追加課金し（月10万）、学んでました。
でも、カリキュラムが難しいところはYoutubeを見たりして学んでいました。本日かずきちさんのTwitterを偶然目にし、自分が全然実務とはかけ離れていることを実感しました。
正直このままでは1年後の自分は危ういと感じ、ぜひ鍛えていただきたいと思って、本日のうちに入部させていただきました。
(33歳)