お知らせなどDIV要素にスクロールバーを付ける CSS(overflow)

公開日：2013/10/13 最終更新日：2022/08/27

CSS webパーツサンプルソーススクロールバー

ページ内の特定エリア（コンテンツ）にスクロールバーを表示したい場合はどうされてますか？

楽天を運用されている方であればhtmlタグだけで実現するなら＜iframe＞インラインフレームを使って、別ファイルとして作成したものを埋め込んで使う方法を思いつく方が多いのではないでしょうか。

htmlタグ：＜iframe＞インラインフレームって何？って方は
以前の書いた記事

ネットショップ運営の気になる備忘録

[楽天]ページ作成時のIFRAMEタグの活用について

を参考にしてみてください。

ただ、特定の要素（エリア）にスクロールバーを表示する方法としては、実は他にもあります。CSSを使った方法になるのですが、本日はそれの実装方法を紹介したいと思います。

サンプル・サンプルソース「お知らせエリア」

たとえば、ショップからのお知らせとかがイメージしやすいかと思います。
↓↓↓のようなの

ショップからのお知らせ

10/06　■■■■■■が再入荷しました。
10/05　○○○を追加しました。
10/04　■■■ を追加しました。
10/03　○○■■■○が再入荷しました。
10/02　○■■■■■■○○が再入荷しました。
10/01　○○○が再入荷しました。
09/28　○○■■○■■■が再入荷しました。
09/25　○○○■■■を追加しました。
09/23　○○○■■■■■を追加しました。
09/22　○○○■■■を追加しました。
09/20　○○■■■■○■■■を追加しました。
09/18　○○■■○■■■を追加しました。
09/17　○■■○○■■■を追加しました。

サンプルソース sample1.html

<style type="text/css">
    .box_srcollbar {
        overflow:auto;
        width:300px;
        height:80px;
        padding:5px;
        border:1px solid #000;
        background-color:#F9F9F9;
        color:#000;
        font-size:12px;
    }
    .box_title{
        border:1px solid #000;
        padding:5px;
        width:300px;
        font-weight:bold;
        font-size:14px;
        background-color:#000;
        color:#fff;
    }
</style>
 
<div class="box_title">ショップからのお知らせ</div>
<div class="box_srcollbar">
    10/06　■■■■■■が再入荷しました。
    10/05　○○○を追加しました。
    10/04　■■■ を追加しました。
    10/03　○○■■■○が再入荷しました。
    10/02　○■■■■■■○○が再入荷しました。
    10/01　○○○が再入荷しました。
    09/28　○○■■○■■■が再入荷しました。
    09/25　○○○■■■を追加しました。
    09/23　○○○■■■■■を追加しました。
    09/22　○○○■■■を追加しました。
    09/20　○○■■■■○■■■を追加しました。
    09/18　○○■■○■■■を追加しました。
    09/17　○■■○○■■■を追加しました。 
</div>

３行目orverflow:auto としている部分がポイントです。
autoにすることで指定サイズをはみ出た場合にどのように表示するかを指定しています。
ちなみに、orverflowで指定できるのはauto以外にも
visible → 表示する。（ブラウザによって動きが違うので注意が必要）
hidden → はみ出た部分を表示を表示しない
scroll　→ 縦横のスクロールバーが表示される
auto　 → 縦のスクロールバーだけが表示される。
などがあります。

ちなみにtextareaでもお知らせエリアの表示は可能

ちなみにですが、入力部品の<textarea>を使うことで同様のお知らせを表示することも可能です。サンプルソースを掲載しておきます。

サンプルソース sample2.html

<style type="text/css">
    .box_textarea {
        border:1px solid #000;
        background-color:#F9F9F9;
        color:#000;
        font-size:12px;
        width:310px;    
    }
    .box_title{
        border:1px solid #000;
        padding:5px;
        width:300px;
        font-weight:bold;
        font-size:14px;
        background-color:#000;
        color:#fff;
    }
</style>
 <div class="box_title">トピックス</div>
<textarea class="box_textarea" rows="5">
    10/06　■■■■■■が再入荷しました。
    10/05　○○○を追加しました。
    10/04　■■■ を追加しました。
    10/03　○○■○■■■○が再入荷しました。
    10/02　○■■■■■■○○が再入荷しました。
    10/01　○○○が再入荷しました。
    09/28　○○■■○■■■が再入荷しました。
    09/25　○○○■■■を追加しました。
    09/23　○○○■■■■■を追加しました。
    09/22　○○○■■■を追加しました。
    09/20　○○■■■■○■■■を追加しました。
    09/18　○○■■○■■■を追加しました。
    09/17　○■■○○■■■を追加しました。
</textarea>

ただし、textareaなどの入力部品はブラウザによって見え方が変わってしまうので同じ見た目にそろえるのが難しかったりもします。また、入力部品になるのでタグを記述することが出来ません。文字にリンクを設定したりしようとしても、タグがそのまま表示されてしまいます。テキストのみでお知らせを表示する場合は、まだ使えるかもしれません。

＜iframe＞を使った方法と今回紹介したCSSで実装する方法とどちらが良いかというのは難しいところですが、お知らせ部分は修正する頻度が高くhtmlが苦手なスタッフにも更新してもらおうというのであれば、お知らせ用の別htmlファイルを作成して管理する方が良いのかなと思います。

SEO対策やページ管理上の制限があり、＜iframe＞は使わないというのであれば、CSSを使うべきだとは思います。

また、利用しているショップ環境によっては＜iframe＞が使えない可能性もありますよね。そういった際には、本日紹介したCSSで実装する方法が使えますね。

どちらにせよ、複数の実装方法を知っているということが重要ですね。その場面でもっとも良いと思われるほうを選択することが出来ます。

お知らせエリア以外にもスクロール表示をしたいという場面は、多いかと思うのでぜひ活用してみてください。

追記:スクロールバーのデザインについてCSS

スクロールバーの見た目にも少しこだわりたいというケースもあるかもしれません。そういった場合は、すべてのブラウザには対応できていませんが、見た目を変更する方法があります。

↓↓1つ目のサンプルと同じものを使っています。

ショップからのお知らせ

1つ目のサンプルと見比べてスクロールバーの見た目が変わっていることがおわかりでしょうか？少し、丸みをつけています。

ショップからのお知らせ

10/06　■■■■■■が再入荷しました。 10/05　○○○を追加しました。 10/04　■■■ を追加しました。 10/03　○○■■■○が再入荷しました。 10/02　○■■■■■■○○が再入荷しました。 10/01　○○○が再入荷しました。 09/28　○○■■○■■■が再入荷しました。 09/25　○○○■■■を追加しました。 09/23　○○○■■■■■を追加しました。 09/22　○○○■■■を追加しました。 09/20　○○■■■■○■■■を追加しました。 09/18　○○■■○■■■を追加しました。 09/17　○■■○○■■■を追加しました。

スクロールバーの見た目に関する記述は、CSSの22行目から35行目が該当箇所となります。背景色を指定したり、影をつけたり、丸みを設定するなどしています。スクロールバーの見た目にもこだわりたいという人は参考にしてみてください。