CSSのoverflowの使い方

求人
CSSのoverflowの使い方

overflowを使用するとブロック要素から表示しきれない部分をどうするかを指定できます。

デフォルトは、overflow: visible;で、表示しきれない部分ははみ出しても表示することになります。

サンプル

cssです。

こういう表示部分をスクロールバーを表示したり非表示にしたり制御するのがoverflowです。

overflow: hidden;にすると、はみ出た部分は表示されません。

サンプル

cssです。

表示しきれないが、その範囲でスクロールバーでスクロールして表示したい場合は、overflow:scroll;を使用します。

サンプル

cssです。

上記だと、縦横の両方にスクロールバーが表示されてしまいます。

縦だけのスクロールバーを表示させたい、横だけのスクロールバーを表示させたい、といった場合は以下のプロパティを使用します。

  • overflow-x
  • overflow-y

xが縦で、yが横です。x軸y軸と考えると覚えやすいですね。

縦だけにスクロールする

まずは縦だけにスクロールしてみたいと思います。

上記にすればよいと思います。

サンプル

cssです。

横だけにスクロールする

次に横だけにスクロールしてみたいと思います。

上記のようにすれば良いはずです。

サンプル

cssです。

サンプルを見ると、これだと横スクロールバーは表示されますが、スクロールがされませんね。

どうもwhite-space:nowrap;も指定しないとスクロールされないようです。

ということでwhite-spaceプロパティも指定します。

サンプル

cssです。

横スクロールできることが確認できました。

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA