スクロールボックス1

無料・有料 レンタルサーバー比較


スクロールできるボックスを作成するHTMLとCSSのサンプルコードです。

テンプレートのご利用について


【ボックス】

ボックスの内容

ボックスの内容

ボックスの内容

ボックスの内容

ボックスの内容

ボックスの内容

ボックスの内容

  • このサンプルでは、枠線を含めたボックスの幅は300pxになります。(親要素の幅に合わせる場合は、「ボックスの幅」の指定は必要ありません)
  • ボックスの高さからはみ出た内容が、スクロールで表示されるようになります。

コード

CSSコード
/* --- ボックス --- */
.section {
width: 298px; /* ボックスの幅 */
height: 120px; /* ボックスの高さ */
overflow: auto;
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 dotted; /* ボックスの枠線 */
font-size: 80%; /* 文字サイズ */
color: #000000; /* 文字色 */
}

/* --- ボックス内の段落 --- */
.section p {
margin: 1em 10px; /* 段落のマージン(上下、左右) */
}
HTMLコード
<div class="section">

<p>【ボックス】</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>

</div>


inserted by FC2 system