div にスクロールバーを追加するには、指定するだけでよいoverflow属性をautoに設定します。以下の例では、div に水平スクロールバーを設定しています:

例

<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!!</div>

試してみる »

幅(width)と高さ(height)は、実際の必要に応じて設定できます。

上記の例は、div の内容の高さが 300px より大きい場合は垂直スクロールバーが表示され、300px 未満の場合はスクロールバーが表示されないことを示しています。幅が 70px より大きい場合は水平スクロールバーが表示され、小さい場合は表示されません。

div 内のスクロールバーを常に表示したい場合は、overflow 属性を scroll に設定できます:

overflow を scroll に設定することもできます。つまり:

例

<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!! サンプル -- 学ぶのは技術だけでなく、夢でもある!!!</div>

試してみる »

その他の設定

水平スクロールバーのみを設定:

<div style="width:100px;overflow-x:auto"></div>

垂直スクロールバーのみを設定:

<div style="height:300px;overflow-y:auto"></div>

水平と垂直の両方を設定:

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

参考になる記事はこちら:

CSS レイアウト - Overflow

CSS overflow 属性