Help us understand the problem. What is going on with this article?

overflow scrollについて

overflowとは

CSSのプロパティの1つで、要素のボックスからはみ出た部分をどう扱うかを指定する。

visible:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden :はみ出た部分が隠れる。
scroll :はみ出た部分が隠れてスクロールできる状態になる。
auto :ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。

scroll

はみ出た部分が非表示になるが、スクロールにより表示することができるようになる。

white-space:nowrap;を指定することで、横向きにスクロールできるようにすることも可能。

<!-- html -->
<p class="menu">あいうえおあいうえおあいうえお</p>

/* css */
.menu {
    width: 50px;
    height: 50px;
    overflow: scroll;
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 9.24.33.png スクリーンショット 2020-11-24 9.25.59.png

参考元はこちら
(https://saruwakakun.com/html-css/basic/overflow)

yyy752
初めまして! 半年間スクールで学習後、現在はポートフォリオを開発中です。 学んだ事をこちらにアウトプットしていきますので宜しくお願い致します!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away