シンプルなデザインの目次をhtml・cssのソースコードのコピペで簡単に実装完了！

<div class="toc">
	<p class="toc__ttl">＜　目次　＞</p>
	<div class="toc__list">
		<a href="#" class="toc__item">目次1</a>
		<a href="#" class="toc__item">目次2</a>
		<a href="#" class="toc__item">目次3</a>
		<a href="#" class="toc__item">目次4</a>
	</div>
</div>

.toc {
    border: 1px dotted #191919;
    padding: 20px 20px 30px 20px;
    margin-top: 20px;
}
.toc p {
    font-size: 14px;
    color: #191919;
}
.toc__item {
    display: block;
    color: rgba(25,25,25,0.75);
    border-bottom: 1px dotted #191919;
    padding: 10px 5px;
}
@media screen and (min-width: 768px) {
    .toc p {
        font-size: 16px;
    }
    .toc__list {
        padding: 0 50px;
    }
}