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

公開日:  最終更新日:2018/07/24

お知らせエリアなどのDIV要素にスクロールバーを付ける CSS(oeverflow)について
ページ内の特定エリア(コンテンツ)にスクロールバーを表示したい場合はどうされてますか?

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

htmlタグ:<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>

3行目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つ目のサンプルと同じものを使っています。

ショップからのお知らせ
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 ○■■○○■■■を追加しました。

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行目が該当箇所となります。背景色を指定したり、影をつけたり、丸みを設定するなどしています。スクロールバーの見た目にもこだわりたいという人は参考にしてみてください。


また、よければ他のお知らせを表示する方法も参考にしてみてください

特定期間、曜日に応じて表示を切り替えるのに下記が参考になるかもしれません




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑