CSSのoverflowの使い方

CSSのoverflowの使い方

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

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;">
  <span>テストテストテストテスト</span>
</div>

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

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;overflow:hidden;">
  <span>テストテストテストテスト</span>
</div>

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;overflow:scroll;">
  <span>テストテストテストテスト</span>
</div>

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

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

• overflow-x
• overflow-y

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

縦だけにスクロールする

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

overflow-x:hidden;overflow-y:scroll;

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;overflow-x:hidden;overflow-y:scroll;">
<span class="danraku">テストテストテストテスト</span>
</div>

横だけにスクロールする

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

overflow-x:scroll;overflow-y:hidden;

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;overflow-x:scroll;overflow-y:hidden;">
<span class="danraku">テストテストテストテスト</span>
</div>

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

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

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

サンプル

cssです。

<div style="width:70px;height:50px;border:1px solid;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
  <span class="danraku">テストテストテストテスト</span>
</div>

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

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^