スマートフォンのモック
シルバー背景&枠線付き
フラットデザイン
フラットデザイン&枠線付き

HTML・CSSでつくるおしゃれな目次のデザイン5選

ブログなどで記事内に設置することの多い「目次」。コンテンツの要約だけでなくページ内リンクとしての役割も持つなど、ユーザビリティをグッと向上させてくれる要素です。今回はそんな目次のHTML・CSSによるデザインをまとめました。開閉機能のON・OFFに対応しており、どれもコピペだけで取り入れることが可能となっています。

シンプルな目次

シンプルな目次のシルバー背景&枠線付きバージョン

シルバー背景&枠線付き

step1
デザインを調整する
  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

とてもシンプルな、由緒正しきデザインの目次です。aタグのスタイルに手を加えないことによって、各見出しがクリック可であることが直感的に伝わりやすくなっています。

step2
HTMLをコピペする
HTML
<div class="toc-001">
    <div>
        目次
    </div>
    <ol>
        <li><a href="#">見出し1</a></li>
        <li>
            <a href="#">見出し2</a>
            <ol>
                <li><a href="#">見出し2-1</a></li>
                <li><a href="#">見出し2-2</a></li>
            </ol>
        </li>
    </ol>
</div>
step3
CSSをコピペする
CSS
.toc-001 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #999;
    background-color: #f7f7f7;
}

.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}

.toc-001 ol ol {
    margin-top: 5px;
}

.toc-001 li {
    padding: 5px 0;
}

.toc-001 a {
    color: #166c9d;
}
シンプルな目次のフラットデザインバージョン

フラットデザイン

step1
デザインを調整する
  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類
step2
HTMLをコピペする
HTML
<div class="toc-005">
    <div>
        目次
    </div>
    <ol>
        <li><a href="#">見出し1</a></li>
        <li>
            <a href="#">見出し2</a>
            <ol>
                <li><a href="#">見出し2-1</a></li>
                <li><a href="#">見出し2-2</a></li>
            </ol>
        </li>
    </ol>
</div>
step3
CSSをコピペする
CSS
.toc-005 {
    margin-bottom: 30px;
    border-radius: 3px;
    background-color: #f2f2f2;
}

.toc-005 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc-005 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

.toc-005 ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.toc-005 > ol {
    padding: 1em 1em 1em 3em;
}

.toc-005 ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-005 li {
    padding: 5px 0;
    font-weight: 600;
}

.toc-005 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-005 a {
    color: #333;
    text-decoration: none;
}
シンプルな目次のフラットデザイン&枠線付きバージョン

フラットデザイン&枠線付き

step1
デザインを調整する
  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

タイトルの背景と枠線の色を統一した、可愛らしい目次です。ぜひご自身のサイトのテーマカラーを基調色として設定してみてください。

step2
HTMLをコピペする
HTML
<div class="toc-002">
    <div>
        目次
    </div>
    <ol>
        <li><a href="#">見出し1</a></li>
        <li>
            <a href="#">見出し2</a>
            <ol>
                <li><a href="#">見出し2-1</a></li>
                <li><a href="#">見出し2-2</a></li>
            </ol>
        </li>
    </ol>
</div>
step3
CSSをコピペする
CSS
.toc-002 {
    margin-bottom: 30px;
    border: 2px solid #2589d0;
    border-radius: 3px;
}

.toc-002 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc-002 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

.toc-002 ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.toc-002 > ol {
    padding: 1em 1em 1em 3em;
}

.toc-002 ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-002 li {
    padding: 5px 0;
    font-weight: 600;
}

.toc-002 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-002 a {
    color: #333;
    text-decoration: none;
}

WordPressテーマ風の目次

WordPressテーマ風の目次のSANGO風バージョン

SANGO風

step1
デザインを調整する
  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

WordPressテーマ「SANGO」のデザインに寄せた目次です。マテリアルな可愛らしいデザインにしたい場合はイチオシのパーツです。

step2
HTMLをコピペする
HTML
<div class="toc-003">
    <div>
        目次
    </div>
    <ol>
        <li><a href="#">見出し1</a></li>
        <li>
            <a href="#">見出し2</a>
            <ol>
                <li><a href="#">見出し2-1</a></li>
                <li><a href="#">見出し2-2</a></li>
            </ol>
        </li>
    </ol>
</div>
step3
CSSをコピペする
CSS
.toc-003 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border-top: 5px solid #2589d0;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
    background-color: #f7f7f7;
}

.toc-003 div {
    display: flex;
    align-items: center;
    margin: 0;
    color: #2589d0;
    font-weight: 600;
    font-size: 1.2em;
}

.toc-003 div::before {
    display: inline-block;
    width: 2.2em;
    height: 2.2em;
    margin-right: 5px;
    border-radius: 50%;
    background: #2589d0 url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat center / 1em;
    content: '';
}

.toc-003 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}

.toc-003 > ol {
    margin-top: 15px;
}

.toc-003 ol ol {
    margin-top: 5px;
}

.toc-003 li {
    padding: 5px 0;
    font-weight: 600;
}

.toc-003 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-003 a {
    color: #555;
    text-decoration: none;
}
WordPressテーマ風の目次のSWELL風バージョン

SWELL風

step1
デザインを調整する
  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

WordPressテーマ「SWELL」のデザインに寄せた目次です。上下の枠線と斜線が細かく入った背景が程よい開放感を与えてくれる、とてもお洒落なパーツです。

step1
HTMLをコピペする
HTML
<div class="toc-004">
    <div>
        目次
    </div>
    <ol>
        <li><a href="#">見出し1</a></li>
        <li>
            <a href="#">見出し2</a>
            <ol>
                <li><a href="#">見出し2-1</a></li>
                <li><a href="#">見出し2-2</a></li>
            </ol>
        </li>
    </ol>
</div>
step2
CSSをコピペする
CSS
.toc-004 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border-top: 4px double #ddd;
    border-bottom: 4px double #ddd;
    background-image: linear-gradient(-45deg, transparent 25%, #eee 25%, #eee 50%, transparent 50%, transparent 75%, #eee 75%, #eee);
    background-clip: padding-box;
    background-size: 4px 4px;
}

.toc-004 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-004 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

.toc-004 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}

.toc-004 ol ol {
    margin-top: 5px;
}

.toc-004 li {
    padding: 5px 0;
}

.toc-004 a {
    color: #333;
    text-decoration: none;
}