16-6_Lists inside a list

1 ■ Lists inside a list
2
3 So you've made ordered lists and unordered lists. Top work!
4
5 What if you have an ordered list, but each item in the ordered list also
has an unordered list nested in it? Nested simply means 'inside' the list.
The editor has a small example of this. Hit save & submit to see what the
result looks like!
6
7 Remember: you've been nesting tags already. When you nest tags, the
last tag you open is the first one you close. Here's an example:
8
<ul><li>Tacos!</li></ul>
9
10
11 □ Instructions
12 1. On line 21, create an unordered list.
13 2. Your unordered list should have two items: "Favorite Boys' Names"
and "Favorite Girls' Names."
14 3. Under each item of the unordered list, create an ordered list. Use the
ordered list to specify your three favorite boys' names and three favorite
girls' names. Use the sample nested lists above as examples of how to do
this.
15
16
17 □ Hint
18 Try to keep your formatting neat and tidy like the example. This will help
you as you type out your HTML.
19
20 a. Start off first by creating the <ul> and </ul> tags.
21 b. Then you'll use the <li> related to Favorite Boy and Girl names
22 c. Then under each respective <li> item, create an ordered list using
<ol>. Note: You should not close your <li> before you open and close
your <ol>.
23
24 Here is an example:（これは悪い例）
25
<ul>
26
<li></li>*
27
<ol>
28
<li></li>
29
</ol>
30
<li></li>*
31
<ol>
32
<li></li>
33
<li></li>
34
</ol>
35
<li></li>*
36
・・・
37
</ul>
38
39
40
41 ○単語・熟語・文型
42 top
43
(形容詞)最上級の
44
45 Tacos
46
(名詞)タコス（メキシコ料理）
47
48 specify
49
(他動詞)〜を、明確に/詳細に、記述する/述べる
50
51 +(Use)+ @(the sample nested lists above as examples of how to do
this)@.
52
@(the sample nested lists above as examples of how to do this)@
53
:[the sample] <nested lists> (above) <as examples of how to
54
do this>
55
:[サンプル]<ネストされたリスト>(上の)<作り⽅の例として>
56
（作り⽅の例として、上にあるネストされた、リストのサンプル）
57
58 relate
59
(他動詞)〜を結びつける/関連付ける
60
61 formatting
62
(名詞)整形、書式作成
63
64 neat
65
(形容詞)整頓された
66
67 tidy
68
(形容詞)几帳面（きちょうめん）な
69
70 -(Try)- +(to keep your formatting neat and tidy like the example)+.
71
+(to keep your formatting neat and tidy like the example)+
72
:+(to keep)+ @(your formatting)@ =(neat and tidy)= (like the
73
example)
74
:+(保つ)+ @(あなたのコード)@ =(インデントを使ってきれいに)= (例の
75
コードのように)
76
77 start off
78
[他動詞句]〜に着⼿する
79
80 respective
81
(形容詞)それぞれの
82
83 type out
84
[他動詞句]タイプで打つ
85
86
87
88 ○説明&補足
89 順序付きリストも、箇条書きリストも、作れましたね！、、ハイレベルな仕事達成です！
90
91 ところで、
92 あなたは、
93
順序付きリストを作りました。
94 しかし、
95
その順序付きリスト一つ一つに対して、
96
箇条書きリストを付けたい
97 と、あなたは思っています。
98 つまり、こんな風に、、
99
1. パパの趣味
100
・フットボール観戦
101
・編み物
102
2. ママの趣味
103
・フットボールは嫌い
104
・スカイダイビング
105 これのHTMLコードは、こんな風です。
106
107 ===パパとママの趣味について、リストを作りました.html================
108 ・・・
109
<body>
110
<ol>
111
<li>パパの好きなこと
112
<ul>
113
<li>フットボール観戦</li>
114
<li>編み物をすること</li>
115
</ul>
116
</li>
117
<li>ママの好きなこと
118
<ul>
119
<li>フットボールが嫌い</li>
120
<li>スカイダイビングをすること</li>
121
</ul>
122
</li>
123
</ol>
124
125
</body>
126 ・・・
127 ============================================
128
129 ここで、注意すべきは、
130
「最後に」作った、「開始タグ」は、
131
内容(content)
132
の後に、
133
「最初に」閉じる！
134 つまり、
135
<tag1st><tag2nd>内容</tag2nd></tag1st>
136 ということです。
137 つまりつまり、
138
<tag2nd>は、最後に作ったタグですね、、
139 なので、
140
内容の後すぐに
141
閉じています。　・・・　</tag2nd>
142 もっと簡単なイメージは、
143
<あ><い>easy!</い></あ>
144 こんな風です。
145
146 これを、リストの場合に当てはめると、例えば、
147
<ul><li>あ</li></ul>
148 です。
149
150 でも、普通は、
151
<ul><li>あ</li><li>い</li><li>う</li></ul>
152 こんな風でしょう。
153 でもでも、もっと普通は、こうでしょう。
154
155 ===買い物リスト.html================================
156 ・・・
157
<p>買い物リスト</p>
158
<ul>
159
<li>りんご</li>
160
<li>バナナ</li>
161
<li>はちみつ</li>
162
<li>ヨーグルト</li>
163
</ul>
164 ・・・
165 ============================================
166
167
168 □ Instructions:　あなたへのミッション
169 ============================================
170 <!DOCTYPE html>
171 <html>
172
<head>
173
<title>Nested lists</title>
174
</head>
175
<body>
176
<ol>
177
<li>Dad's interests
178
<ul>
179
<li>football</li>
180
<li>knitting</li>
181
</ul>
182
</li>
183
<li>Mom's interests
184
<ul>
185
<li>hating football</li>
186
<li>skydiving</li>
187
</ul>
188
</li>
189
</ol>
190
191
</body>
192 </html>
193 ============================================
194 ①　190⾏⽬（21⾏⽬）:
195 箇条書きリスト(unordered list)を作ってください。
196
197 ②　あなたの作る、箇条書きリストには、2つの項目があります。
198
・好きな男性の名前
199
・好きな⼥性の名前
200 です。
201
202 ③　箇条書きリストの、それぞれの項目の下に、
203 つまり、男性名、⼥性名の、項⽬の下に、
204 今度は、
205
順序付きリスト(ordered list)
206 を、作ります。
207 そのリストには、
208
好きな名前ベスト3
209 を、書いてください。
210 ネストのやり方は、その上にある、
211
176⾏⽬〜189⾏⽬（7⾏⽬〜20⾏⽬）
212 を、⾒てみましょう。
213
214
215 □ Hint
216 あなたのHTMLコードを、必要に応じてインデントを使って、綺麗に/⾒やすくしましょう。
217
/ index.html（右の例）の、7⾏⽬〜20⾏⽬のようにですね。
218 そうすることで、タイプしやすくなりますよ。
219
220 a.　<ul>,</ul>タグを、まず作ります。
221
/ unordered list 、、箇条書き・順番は関係ないリストが、一番外に来る.
222
/ ということは、</ul>が、最後に来るはずだ！
223
/ <ul>〜</ul>の間にコードを書いていく.
224
225 b.　次にあなたの
226
好きな男性名と好きな⼥性名
227 と、題するために、
228
<li>タグを使います。
229
230 c.　そしてそして、それぞれの
231
<li>（好きな男性名・好きな⼥性名）
232 の下に、今度は、
233
順番付きリスト（ordered list / <ol>タグ）
234 を作るわけですね。
235
236 d.　順番付きリストを、書き終わった後に、
237
</li>
238 を、書きましょう！
239
240 e（おまけ）:
241
最後の最後は、</ul>ですね。
242
243
244 注意 ! :
245 <ul>タグで書き始めました、、つまり、一番最後に、</ul>で、閉じることになるわけです！
246
247 ここにイメージを書いておきます:
248 <ul>
249
<li>好きな動物
250
<ol>
251
<li>ねこ</li>
252
<li>いぬ</li>
253
<li>パンダ</li>
254
</ol>
255
</li>
256
<li>好きな曲
257
<ol>
258
<li>step on</li>
259
<li>baby, you're a rich man</li>
260
<li>キクタン中国語</li>
261
262
</ol>
</li>
263 </ul>
264
265
266 *注意2 ! :
267 ⾒かけも、
268
https://thimble.webmaker.org/en-US/
269
（Mozilla Thimble）
270 で、チェックしても、
271
バグにはならないのですが、
272 やはり、
273
コードの「意図」を明確にするためには、
274 下記のようには書かないようにした方がいいです。
275
276 <ul>
277
<li>好きな動物</li>（ *　</li>は、282⾏⽬の下に書くべき）
278
<ol>
279
<li>ねこ</li>
280
<li>いぬ</li>
281
<li>パンダ</li>
282
283
</ol>
<li>好きな曲</li>（ *　</li>は、288⾏⽬の下に書くべき）
284
<ol>
285
<li>step on</li>
286
<li>baby, you're a rich man</li>
287
<li>キクタン中国語</li>
288
289 </ul>
290
291
292 [ここまで]
293
</ol>

Download Report