HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9
10<body>
11    <!-- ＃01 -->
12    <div>
13        <h5>#01</h5>
14        <q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
15    </div>
16
17
18    <!-- ＃02 -->
19    <div>
20        <h5>#02</h5>
21        <span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
22    </div>
23
24    <!-- #03 -->
25    <div>
26        <h5>#03</h5>
27        <ul>
28            <li>牛乳を買う</li>
29            <li>犬の散歩をする</li>
30            <li>エクササイズ</li>
31            <li>コードを書く</li>
32            <li>音楽を演奏する</li>
33            <li>リラックスする</li>
34        </ul>
35    </div>
36
37
38    <style>
39        div {
40            margin: 10px;
41        }
42
43        h5 {
44            margin: 0;
45        }
46
47        /* ＃01 */
48        q::before {
49            content: "«";
50            color: blue;
51        }
52
53        q::after {
54            content: "»";
55            color: red;
56        }
57
58        /* ＃02 */
59        .ribbon {
60            background-color: #5bc8f7;
61        }
62
63        .ribbon::before {
64            content: "このオレンジのボックスを見てください。";
65            background-color: #ffba10;
66            border-color: black;
67            border-style: dotted;
68        }
69
70        /* #03 */
71        li {
72            list-style-type: none;
73            position: relative;
74            margin: 2px;
75            padding: 0.5em 0.5em 0.5em 2em;
76            background: lightgray;
77            font-family: "Yu Mincho";
78        }
79
80        li.done {
81            background: #ccff99;
82        }
83
84        li.done::before {
85            content: "";
86            position: absolute;
87            border-color: #009933;
88            border-style: solid;
89            border-width: 0 0.3em 0.25em 0;
90            height: 1em;
91            top: 1.3em;
92            left: 0.6em;
93            margin-top: -1em;
94            transform: rotate(45deg);
95            width: 0.5em;
96        }
97    </style>
98
99
100    <script>
101        'use strict';
102
103        // #03
104        var list = document.querySelector('ul');
105        list.addEventListener('click',        
106            function (ev) {
107                if (ev.target.tagName === 'LI') {
108                    ev.target.classList.toggle('done');
109                }
110            }, false,
111        );
112
113        
114    </script>
115
116</body>
117
118</html>

li.done::before {(84行から96行）で何をしてるのかよく分かりません。
そもそもli.doneはどこを指しますか？

106行からのfunction全体の解説もお願いします。
tagもclassも作ってないですけど
LIはなぜ大文字？

質問が多くてすいませんが宜しくお願いします。

maisumakun

2024/10/09 02:03

外部サービスに頼らず、質問文を見れば判断ができるレベルまでのコードの提示をお願いいたします。

zawber

2024/10/09 02:49

行番号が付かないんですよね <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  <div> <h5>#01</h5> <q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q> </div>  <div> <h5>#02</h5> <span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span> </div>  <div> <h5>#03</h5> <ul> <li>牛乳を買う</li> <li>犬の散歩をする</li> <li>エクササイズ</li> <li>コードを書く</li> <li>音楽を演奏する</li> <li>リラックスする</li> </ul> </div> <style> div { margin: 10px; } h5 { margin: 0; } /* ＃01 */ q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } /* ＃02 */ .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "このオレンジのボックスを見てください。"; background-color: #ffba10; border-color: black; border-style: dotted; } /* #03 */ li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgray; font-family: "Yu Mincho"; } li.done { background: #ccff99; } li.done::before { content: ""; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } </style> <script> 'use strict'; // #03 var list = document.querySelector('ul'); list.addEventListener('click', function (ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('done'); } }, false, ); </script> </body> </html>

juner

2024/10/09 04:03

コメントではなくて、質問文に反映してください。（質問文であればシンタックスハイライトも利きますので

zawber

2024/10/09 06:17

ちょっとおかしくなりました。

juner

2024/10/09 07:29 編集

コードの挿入で ```html <html> </html> ``` の様に囲ってください。中に中途半端なところに ``` があるのではないでしょうか？

zawber

2024/10/09 08:28

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

行動規範の内容に同意します

回答2件

li.done::before {で何をしてるのかよく分かりません。

「done」クラスがついたliタグの前に「なにか」をしています

そもそもli.doneはどこを指しますか？

javascriptでliをクリックしたときにdoneクラスをつけ外ししています

106行のfunctionの解説もお願いします。
tagもclassも作ってないですけど
LIはなぜ大文字？

大文字なのはdomから取得するtagNameの値はつねに大文字だからです

html
1<div id="hoge">test</div>
2<script>
3console.log(hoge.tagName); //DIV
4</script>

なおクリックされたHTML要素（イベントターゲット）は以下のような選び方が可能です

html
1<script>
2document.addEventListener('click',({target})=>{
3  if(target.matches('li')){
4    console.log(1);
5  }
6  if(target.tagName=="LI"){
7    console.log(2);
8  }
9  if(target instanceof HTMLLIElement){
10    console.log(3);
11  }
12});
13</script>
14<ul>
15<li>A</li>
16<li>B</li>
17<li>C</li>
18</ul>

追記

.toggleはこれによって背景が変わってチェックマークが付いたり消えたり

はい、クラスのつけ外しは、classListをtoggleすることで可能です

html
1<style>
2.done{color:red;}
3</style>
4<script>
5document.addEventListener('click',({target})=>{
6  if(target.matches(".hoge")){
7    target.classList.toggle('done'); //hogeをクリックするたびにdoneクラスがついたり消えたりする
8  }
9});
10</script>
11<div class="hoge">hoge</div>
12<div class="fuga">fuga</div>