最終更新日:2017年12月26日 15時41分閲覧回数:309

目次風のリストを作る

リストの区切りや目次風のメニューを作りたいときに
表示例

目次

  1. サンプル 1
    1ページ
  2. サンプル 2
    2ページ
  3. サンプル 3
    3ページ
  4. サンプル 4
    4ページ
  5. サンプル 5
    5ページ

ソース
<style>
ol{
    padding: 0;
}
li{
    display: flex;
}
hr{
    flex-grow: 1;
    margin: 1em;
    border-bottom: dotted .1em gray;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 1em;
}
</style>
<h2>目次</h2>
<ol>
    <li>サンプル 1<hr>1ページ</li>
    <li>サンプル 2<hr>2ページ</li>
    <li>サンプル 3<hr>3ページ</li>
    <li>サンプル 4<hr>4ページ</li>
    <li>サンプル 5<hr>5ページ</li>
</ol>

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。