回答編集履歴

1

コメントを受けて追記

2025/03/07 02:43

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37345

test CHANGED
@@ -145,3 +145,183 @@
145
145
 
146
146
  </html>
147
147
  ```
148
+
149
+
150
+ ---
151
+
152
+ ### コメントを受けて追記
153
+
154
+ ひとまず、書いてみました。
155
+ ご自分のコードに組み込む際に解説が必要な部分がありましたら、コメントでお知らせください。
156
+
157
+ ```html
158
+ <!doctype html>
159
+ <html lang="ja">
160
+
161
+ <head>
162
+ <meta charset="UTF-8" />
163
+ <meta name="robots" content="noindex,nofollow" />
164
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
165
+ <!-- <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css"> -->
166
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css">
167
+
168
+ <style media="screen">
169
+ section.toc-demo {
170
+ margin: 0 auto;
171
+ }
172
+
173
+ h2 {
174
+ font-size: 20px;
175
+ background-color: #f3f3f3;
176
+ border-bottom: 3px solid #333;
177
+ padding: 5px 0 5px 10px;
178
+ }
179
+
180
+ p {
181
+ padding-left: 10px;
182
+ }
183
+
184
+ ol {
185
+ width: 43px;
186
+ width: auto;
187
+ position: fixed;
188
+ top: 4vh;
189
+ right: 25px;
190
+ writing-mode: vertical-rl;
191
+ display: flex;
192
+ line-height: 1;
193
+ counter-reset: index;
194
+ }
195
+
196
+ li {
197
+ list-style-type: none;
198
+ list-style-position: inside;
199
+ /* list-style-type: symbols('①' '②' '③' '④' '⑤'); */
200
+ text-orientation: sideways;
201
+ counter-increment: index;
202
+ display: flex;
203
+
204
+ &::before {
205
+ content: counter(index);
206
+ text-orientation: upright;
207
+ border: 1px solid;
208
+ border-radius: 50%;
209
+ }
210
+
211
+ &.current {
212
+ &::before {
213
+ background-color: #000;
214
+ color: white;
215
+ }
216
+
217
+ }
218
+ }
219
+
220
+ a {
221
+ display: block;
222
+ width: 100%;
223
+ color: #fff;
224
+ margin-bottom: 1px;
225
+ text-decoration: none;
226
+ padding: 3px 5px 3px 10px;
227
+ }
228
+
229
+ a.current {
230
+ background-color: #dd5eb3;
231
+ color: #000;
232
+ writing-mode: vertical-rl;
233
+ -webkit-writing-mode: vertical-rl;
234
+ -moz-writing-mode: vertical-rl;
235
+ -ms-writing-mode: tb-rl;
236
+ -ms-writing-mode: vertical-rl;
237
+ }
238
+
239
+ .top {
240
+ width: 100%;
241
+ height: 70vh;
242
+ background-color: #fbb03b;
243
+ }
244
+
245
+ .writing-mode {
246
+ writing-mode: vertical-rl;
247
+ -webkit-writing-mode: vertical-rl;
248
+ -moz-writing-mode: vertical-rl;
249
+ -ms-writing-mode: tb-rl;
250
+ -ms-writing-mode: vertical-rl;
251
+ }
252
+
253
+ .content {
254
+ width: 100%;
255
+ height: 100vh;
256
+ }
257
+
258
+ .toc-demo .content:nth-child(2) {
259
+ background: #8cc63f;
260
+ }
261
+
262
+ .toc-demo .content:nth-child(3) {
263
+ background: #0092ff;
264
+ }
265
+ </style>
266
+ </head>
267
+
268
+ <body>
269
+ <ol>
270
+ <li></li>
271
+ <li></li>
272
+ <li></li>
273
+ <li></li>
274
+ <li></li>
275
+ </ol>
276
+ <section class="top">TOP</section>
277
+ <section class="toc-demo">
278
+ <div class="content">
279
+ <h2 class="h2test">見出し1</h2>
280
+ </div>
281
+ <div class="content">
282
+ <h2 class="h2test">見出し2</h2>
283
+ </div>
284
+ <div class="content">
285
+ <h2 class="h2test">見出し3</h2>
286
+ </div>
287
+ <div class="content">
288
+ <h2 class="h2test">見出し4</h2>
289
+ </div>
290
+ <div class="content">
291
+ <h2 class="h2test">見出し5</h2>
292
+ </div>
293
+ </section>
294
+
295
+ <script>
296
+ document.querySelectorAll('.content').forEach(element => {
297
+ new IntersectionObserver(
298
+ (entries, observer) => {
299
+ entries.forEach((entry) => {
300
+ if (entry.isIntersecting) {
301
+ document.querySelectorAll(`li`).forEach(x => {
302
+ x.textContent = '';
303
+ x.classList.remove('current')
304
+ });
305
+
306
+ const target = document.querySelector(`li:nth-child(${[...document.querySelectorAll('.content').values()].indexOf(entry.target) + 1})`)
307
+ target.textContent = entry.target.querySelector('.h2test').textContent;
308
+ target.classList.add('current')
309
+ } else {
310
+ }
311
+ });
312
+ },
313
+ {
314
+ root: null,
315
+ rootMargin: "-50% 0% -50% 0%",
316
+ threshold: (x => Array.from(Array(x + 1), (...[, i]) => i / x))(1),
317
+ })
318
+ .observe(element);
319
+ })
320
+
321
+ </script>
322
+
323
+
324
+ </body>
325
+
326
+ </html>
327
+ ```