【html】ページ内に「小窓」を作って、「利用規約」とか「同意文」みたいなのを表示させる方法（inline box）

webサイトを作っていると、「利用規約」とか「個人情報に関する～」とか「●●同意書」みたいな感じで、ページの中に小窓（スクロールバー付き）を作って、そこで簡易的に表示させたい、っていうケースがしばしば出てくる。

▼完成見本がこちら

こちらは「inline box」という手法を使っている。

同じようなやつで「inline frame」というのがあるが、こっちは「別のwebページを埋め込み表示する」時に使用するので、要るに埋め込み表示させるページを「別途用意」しなければいけない。

が、今回の「inline box」はcssとhtmlで対応できる。webページを複数作りなくない、という人にはこちらがオススメ。太字にしたり、色を加えたりとhtmlも効かせることが可能なので個人的には気に入っている。

※テキストエリアとの違いは「テキストエリアはhtmlが効かない」
同じような小窓表示で「テキストエリア」というのもある。が、こちらは太字にしたり文字色を変更したりというhtmlが効かない。シンプルでいいという場合はテキストエリアを使用するのもありだろう。

▼追加CSS

.inline_box {
width: 100%;
height: 80px;
overflow: auto;
background: #ffffff;
border: 1px solid #cccccc;
padding: 10px;
}

▼html

<div class="inline_box">
ここが表示されます。ここが表示されます。
</div>