目的
- テキストのみのシンプルなニューステンプレートが欲しい。
- 高さ(height)を固定し、ニュース数が増えたらスクロールが出来るようにしたい。
実行結果
- 2026/03/21(土)
- 新着情報のページを追加しました。
- 2026/03/19(木)
- 本文に入る前の見出しを複数用意しました。
- 2026/03/10(火)
- 構造のページを追加しました。パンくずリストやタブメニューなど、サイトの利便性向上に役立つ構文が揃っています。
- 2026/12/10(水)
- 装飾のページを追加しました。リスト、画像メニュー、均等横並びなど様々な装飾を紹介しています。
- 2026/10/20(月)
- 当サイトが開設しました。
HTML
<dl class="structure_3_1">
<div>
<dt>2026/03/21(土)</dt>
<dd>新着情報のページを追加しました。</dd>
</div>
<div>
<dt>2026/03/19(木)</dt>
<dd>本文に入る前の<a href="https://note-book.foo/layout/2/">見出し</a>を複数用意しました。</dd>
</div>
<div>
<dt>2026/03/10(火)</dt>
<dd><a href="https://note-book.foo/structure/">構造</a>のページを追加しました。パンくずリストやタブメニューなど、サイトの利便性向上に役立つ構文が揃っています。</dd>
</div>
<div>
<dt>2026/12/10(水)</dt>
<dd><a href="https://note-book.foo/layout/">装飾</a>のページを追加しました。リスト、画像メニュー、均等横並びなど様々な装飾を紹介しています。</dd>
</div>
<div>
<dt>2026/10/20(月)</dt>
<dd>当サイトが開設しました。</dd>
</div>
</dl>
CSS
.structure_3_1 {
width: 94%;
height: 116px;
margin-top: 12px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
overflow: auto;
}
.structure_3_1 div {
display: flex;
align-items: flex-start;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #333333;
}
.structure_3_1 dt {
font-size: 14px;
font-weight: bold;
flex-shrink: 0;
width: 110px;
}
.structure_3_1 dd {
font-size: 14px;
line-height: 1.7;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}
.structure_3_1 {
width: 94%;
height: 135px;
margin-top: 12px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
overflow-y: scroll;
}
.structure_3_1::-webkit-scrollbar {
width: 5px;
}
.structure_3_1::-webkit-scrollbar-thumb {
background: gray;
border-radius: 10px;
}
.structure_3_1::-webkit-scrollbar-track-piece:start {
background: #C1C1C1;
}
.structure_3_1::-webkit-scrollbar-track-piece:end {
background: #FFFFFF;
}
.structure_3_1 div {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #333333;
}
.structure_3_1 dt {
font-size: 12px;
line-height: 12px;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.structure_3_1 dd {
font-size: 14px;
line-height: 1.7;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
