知識の枝

"All is well"

はみ出た要素をスクロール表示する方法

約205日前 2021年5月5日17:24
デジタル
HTML CSS

改訂履歴


2021/5/5 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回は枠からはみ出た要素を枠内でスクロール表示する方法を解説します。


2. ゴール


スクロール表示で見た目をスッキリさせる。


3. はじめに


例えばToDoアプリを作る際、登録したタスクが増えると元々用意した枠の範囲を超えてしまうことがあります。



枠内に要素をおさめる手段の1つとしてスクロールを採用します。



この方法を解説します。


4. スクロール方法


cssファイルにちょちょっと追加するだけで実装できます。

まずスクロール機能が無い場合のcssです。
「board」という名前の枠組みを規定しています。
css
.board {
border: 2px solid #000000;
height: 640px;
margin: 2em 0 1em 0;
background-color: #fff;
}
単純に枠線、枠の高さ、上下左右の余白、背景色を指定しているだけです。

キーポイントは「height: 640px;」の部分です。

この height: 640px を超えた要素が枠からはみ出ています。

ではここに1文追加します。
css
.board {
border: 2px solid #000000;
height: 640px;
margin: 2em 0 1em 0;
background-color: #fff;
overflow-y: scroll; #ここに1文追加
}
「overflow-y: scroll;」というものを追加しました。

「overflow」というのは先ほどの枠から溢れ出す現象を指します。
「overflow-y」によってy軸方向、つまり画面の縦方向に溢れた要素に対して「scroll」で表示できるようになります。

たったこれだけです。

縦にも横にも溢れるのであれば「overflow: scroll;」で良いですし、横方向だけなら「overflow-x」です。


「スクロールバー」が見えてるとカッコ悪い?
そんなときは下記の文章を追加しましょう。
css
.board {
border: 2px solid #000000;
height: 640px;
margin: 2em 0 1em 0;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none; #追加(IE, Edge)
scrollbar-width: none; #追加(Firefox)
}

#下記追加(Chrome, Safari)
.board::-webkit-scrollbar {
display: none;
}
使用するブラウザによって追加する内容が異なりますが、どのブラウザにも適用させるのであれば全部書きましょう。

上記のcssを適用させるとスクロールバーが無くなります。
(スクロール機能は有効です)




5. さいごに


いかがでしたでしょうか?
使う機会が割と多い機能だと思いますので、ぜひ覚えましょう。

お疲れ様でした。