CSSを使ってボックスの内容をスクロールさせる方法

みなさん、いろんなサイトでお知らせなど内容がスクロールするボックス(囲み枠)を見たことありませんか?

お知らせ
※これはサンプルです。

2019年8月5日
サイトの更新をししました。
今回はボックスの中身(内容)をスクロールさせる方法について書いています。

2019年7月28日曜日
WordPressで自動で挿入されるPタグを自動で挿入されないようにする方法について書いています。

 

きらり
きらり
ボクは見たことあるよ!内容はサイトによって違うけどね。
結耶
結耶
私もちょくちょく見かけていて「どうやるんだろう?」と思ってたんだよね。やり方調べてみたら意外と簡単にできたよ!w

ということで今回はサンプルのようにボックスの内容をスクロールさせる方法についてご紹介sます。

 

スポンサーリンク

 

ボックスの中身をスクロール

まずはサンプルのHTMLとCSSです。

HTML
CSS

 

overflowでスクロールさせる

上のサンプルのソースの中で注目は CSS の2行目の「overflow」プロパティです。

CSSoverflow: 値 ;

overflowプロパティはボックスの内容の表示方法を指定するものです。
指定できる値は以下の通りです。

  • visible
    ボックスの内容が収まらない場合、収まらない部分はボックスからはみ出して表示される(初期値)
  • hidden
    ボックスの内容が収まらない場合、収まらない部分は非表示になる。スクロールバーも表示されない。
  • scroll
    ボックスの内容が収まらない場合、収まらない部分はボックスからはみ出すことなく、スクロールバーが表示される。
  • auto
    ボックスの内容が収まらない場合の処理はブラウザで決められます。縦方向のスクロールバーが表示される。

※指定できる値は他にも「no-display」「no-content」がありますが、説明は省きます。


きらり
きらり
ボックスの中身をスクロールさせたいときはoverflowのscrollかautoを使えばいいんだね!
結耶
結耶
そういうことになるね。

 

横方向にスクロール

横方向にスクロールさせたい場合は、overflow:scroll; に加えを指定すると横方向にスクロールします。

横にスクロールします。横にスクロールします。横にスクロールします。

 

※overflowの詳しい使い方はこちらで詳しく説明されていますので参考にしてください。


 

最後に

今回は「ボックスの内容をスクロールさせる方法」について書いてみました。
これで長文もスッキリ、コンパクトにまとめられます。

ただし、スクロールで表示にすると飛ばされて読んでもらえないかもしれません。
絶対に読んでもらいたい内容はそのまま表示させた方がいいかもしれません。

使い方によっては非常に便利なスタイルです。それじちょっとオシャレですよねw
上手く使って読みやすいサイトを作りましょう!

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。