スポンサーリンク

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

2019年8月5日HTML・CSS

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

お知らせ

※これはサンプルです。

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

2019年7月28日曜日

WordPressで自動で挿入されるPタグを自動で挿入されないようにする方法について書いています。

きらり

きらり

ボクは見たことあるよ！内容はサイトによって違うけどね。

結耶

結耶

私もちょくちょく見かけていて「どうやるんだろう？」と思ってたんだよね。やり方調べてみたら意外と簡単にできたよ！w

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

スポンサーリンク

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

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

HTML
<div class="sample_title">お知らせ</div>
<div class="sample">
<strong>2019年8月5日</strong>
サイトの更新をししました。
今回はボックスの中身(内容)をスクロールさせる方法について書いています。

<strong>2019年7月28日曜日</strong>
WordPressで自動で挿入されるPタグを自動で挿入されないようにする方法について書いています。</div>
CSS
.sample {
    overflow:auto;
    margin:0 auto 20px;
    padding:1em;
    width:300px;
    height:120px;
    color:#000;
    border:2px solid #ff8c00;
}

/*ボックスのタイトル*/
.sample_title {
    margin:20px auto 0;
    padding:2px;
    width:300px;
    text-align:center;
    color:#fff;
    font-weight:bold;
    background:#ff8c00;
}

overflowでスクロールさせる

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

CSSoverflow: 値 ;

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

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

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

きらり

きらり

ボックスの中身をスクロールさせたいときはoverflowのscrollかautoを使えばいいんだね！

結耶

結耶

そういうことになるね。

横方向にスクロール

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

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

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

最後に

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

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM