<main class="main-wrapper">
<div id="top" class="js-smooth-scroll toc-container">
<span class="toc-title">目次</span>
<details class="toc-open">
<summary><span class="summary-text">[ 開く ]</span></summary>
<ul class="toc">
<li>
<a href="#prologue" class="toc__link">はじめに</a>
</li>
<li>
<a href="#middle" class="toc__link">中間に</a>
</li>
<li>
<a href="#epilogue" class="toc__link">おわりに</a>
</li>
</ul>
</details>
</div>
<section id="prologue" class="section" style="margin-top:15rem;">
<h2>はじめに</h2>
<p></p>
</section>
<section id="middle" class="section" style="margin-top:15rem;">
<h2>中間に</h2>
<p></p>
</section>
<section id="epilogue" class="section" style="margin-top:15rem;">
<h2>おわりに</h2>
<p></p>
</section>
<div class="js-smooth-scroll back-to-top-container -text" style="margin-top:15rem;">
<a href="#top" class="back-to-top">ページトップへ↑</a>
</div>
</main>
<main class="main-wrapper">
<div id="top" class="js-smooth-scroll toc-container">
<span class="toc-title">目次</span>
<details class="toc-open">
<summary><span class="summary-text">[ 開く ]</span></summary>
<ul class="toc">
<li>
<a href="#prologue" class="toc__link">はじめに</a>
</li>
<li>
<a href="#middle" class="toc__link">中間に</a>
</li>
<li>
<a href="#epilogue" class="toc__link">おわりに</a>
</li>
</ul>
</details>
</div>
<section id="prologue" class="section" style="margin-top:15rem;">
<h2>はじめに</h2>
<p></p>
</section>
<section id="middle" class="section" style="margin-top:15rem;">
<h2>中間に</h2>
<p></p>
</section>
<section id="epilogue" class="section" style="margin-top:15rem;">
<h2>おわりに</h2>
<p></p>
</section>
<div class="js-smooth-scroll back-to-top-container -text"style="margin-top:15rem;">
<a href="#top" class="back-to-top">ページトップへ↑</a>
</div>
</main>
/* No context defined. */
/* /js/modules/ToggleToc.js */
export function toggleToc() {
const detailsElement = document.querySelector('.toc-open');
const summaryElement = document.querySelector('.toc-open > summary');
const summaryText = document.querySelector('.toc-open .summary-text');
if (detailsElement !== null) {
detailsElement.addEventListener("toggle", () => {
if (detailsElement.open) {
summaryText.innerText = '[ 閉じる ]'
} else {
summaryText.innerText = '[ 開く ]'
}
});
}
}
/* /js/main.js */
import { toggleToc } from './modules/ToggleToc.js';
toggleToc();
.toc-container {
margin: auto;
padding: .5rem 2rem;
border: 1px dotted #333;
text-align: center;
}
@media print, screen and (min-width:48em) {
.toc-container {
width: 30rem;
}
}
@media print, screen and (max-width:47.96875em) {
.toc-container {
width: 90%;
}
}
.toc-title {
display: block;
font-weight: bold;
}
.toc-open {
display: inline-block;
font-family: var(--base-font);
}
@media print, screen and (max-width:47.96875em) {
.toc-open {
font-size: calc(var(--font-size-s1));
}
}
.toc-open summary {
cursor: pointer;
}
.toc-open .summary-text {
text-decoration: underline;
}
.toc-open .summary-text:hover, .toc-open .summary-text:focus {
text-decoration: none;
}
.toc {
list-style-type: disc;
}
.toc > li {
margin-top: .5rem;
margin-left: 1.4em;
text-align: left;
}
.toc__link {
text-decoration: underline;
font-family: var(--base-font);
}
@media print, screen and (min-width:48em) {
.toc__link:hover, .toc__link:focus {
text-decoration: none;
}
}
@media print, screen and (max-width:47.96875em) {
.toc__link {
padding-top: .4rem;
}
}
.toc__link.is-current {
text-decoration: none;
font-weight: bold;
}
.back-to-top-container.-text {
display: flex;
justify-content: center;
}
.back-to-top-container.-text .back-to-top {
display: flex;
justify-content: center;
margin: 2rem;
text-decoration: underline;
}
.back-to-top-container.-text .back-to-top:hover, .back-to-top-container.-text .back-to-top:focus {
text-decoration: none;
}
No notes defined.