新着情報の枠に縦だけスクロールを出す

あらゆるサイトのトップページで必ず設置することになるのが「新着情報」。
直近の5件だけ表示してあとは「一覧を見る」でリンクさせることも多いですが、もう少し件数を多く、しかも限られたスペースで設置しなければならないこともままあるでしょう。

そんなときに必要になるのがページ内スクロールです。<div>で囲った中身をスクロールさせるやつですね。あぁ、個人情報保護方針をお問い合わせフォームの下に掲載するときにも使う技ですね（昨今はこっちの方が需要あるか）。

このページ内スクロール、cssにoverflow-y:scroll;って書いちゃうと縦横両方にスクロールバーが出てしまい、どうにもやぼったい感じになってしまいます。やぼったいどころか横のスクロールバー出てるサイトなんて見たことなくない？　どうやって消してるの！？

その答えがこちらです。

<!DOCTYPE html>
<html>
  <head>

	<style>
        .box_news{
            width:800px;
            height:150px;
            padding:20px;
            border:1px solid #999;
            overflow:auto;
            overflow-y:scroll;
        }
        
        .box_news dl{
            margin-bottom:10px;
            padding-bottom:10px;
            border-bottom:1px solid #CCC;
            display:flex;
        }
        
        .box_news dt{
            width:2.5em;
        }
        
        .box_news dd{
            width:calc(100% - 2.5em);
        }
    </style>
    
  </head>
  <body>
  
    <div class="box_news">
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事</dd>
        </dl>
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事新着の記事</dd>
        </dl>
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事</dd>
        </dl>
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事新着の記事新着の記事新着の記事</dd>
        </dl>
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事新着の記事</dd>
        </dl>
        <dl>
            <dt>00.00</dt>
            <dd>新着の記事新着の記事新着の記事</dd>
        </dl>
    </div>
     
</body>
</html>

丸ごとコピペで最低限の表示ができるよう、CSS、HTMLもそれなりに書いてありますが、横スクロールバーを出さない、縦スクロールバーだけにするために必要なのは以下の2行だけです。

overflow:auto;
overflow-y:scroll;

今日はこれだけ覚えて帰ってください。
忘れたときのためにブックマークしておいてコピペに来るのも手ですよ。

それではまた。