7-5_Lists within lists

1
7-5 Lists within lists
2
3
4 ■ Lists within lists
5
6 Now that you have your profile sections set up, it's time to add in your
favorite things!
7
8 You can do this by creating additional lists within your unordered list's
<li> tags, like this:
9
<ul>
10
<li>Interests
11
12
<ol>
13
<li>Learning to code</li>
14
<li>Watching basketball</li>
15
<li>Playing music</li>
16
</ol>
17
18
</li>
19
</ul>
20
21
22 Within the <li> tag for Interests, we created an ordered list (<ol>) with
three interests.
23
24
25 □ Instructions
26 Go nuts with your lists within lists! The only requirement is that you have
at least one ordered list(<ol>) and one unordered list (<ul>).
27
28 Click "Stuck? Get a hint!" for more examples.
29
30
31 □ Hint
32 Remember, unordered lists work like this:
33
<ul>
34
<li>An item</li>
35
<li>Another item</li>
36
</ul>
37
38 And ordered lists work like this:
39
<ol>
40
<li>Item #1</li>
41
<li>Item #2</li>
42
</ol>
43
44 A list within a list might look like this:
45
<ul>
46
<li>Interests
47
<ul>
48
<li>Golf</li>
49
<li>Sleep</li>
50
<li>Lasers</li>
51
</ul>
52
</li>
53
<li>Favorite Teams
54
<ol><li></li><li></li><li></li></ol>
55
</li>
56
</ul>
57
58
59
60 ○単語・熟語・文型
61
62
63
64 ○説明&補足
65 ■ Lists within lists
66
/ リストの入れ子(リストの中にリストを作る)
67
68 これで、プロファイルページの外枠(そとわく)は完成です。
69 いよいよ、
70
あなたの好きなこと
71 を、具体的に加えていきます。
72
73 やり方:
74 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
75
<ul>
76
<li>好きなこと
<!-- ① -->
77
78
<ol>
79
<li>プログラミング</li>
80
<li>バスケットボール観戦</li>
81
<li>演奏</li>
82
</ol>
83
84
</li>
<!-- * ①’ -->
85
86
<li>きらいなこと
87
<ol>
88
<li></li><li></li>
</ol>
</li>
89
</ul>
90 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
91 ①の
92
「<li>好きなこと」タグ
93 の中の、
94
順序付きリスト(<ol> . . . </ol>)
95 に、
96
3つの好きなこと(<li> . . . </li>)
97 を加えています。
98 ①ʼ で、
99
①「<li>好きなこと」
100 を、
101
閉じます。
102 * この"閉じる位置"に気を付けてください!
103
104
105 □ Instructions: あなたへのミッション
106 ========================================
107 <!DOCTYPE html>
108 <html>
109
<head>
110
<title>なまえ</title>
111
</head>
112
<body>
113
<img
src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5db
e37a.jpg" />
114
<p>年齢、性別、故郷</p>
115
<ul>
116
<li>項目 ①</li>
117
<li>項目 ②</li>
118
<li>項目 ③</li>
119
<li>項目 ④</li>
120
</ul>
121
</body>
122 </html>
123 ========================================
124 ちょっと、目が回りそうなことですが、
125 気持ちを集中して挑戦しましょう!
126
リストの中にリストを入れること
127 を!
128
129 クリアするための最低条件は、
130 今ある、箇条書きのリスト
131
の中
132 に、
133
順序付きリスト 1つ
134
箇条書きリスト 1つ
135 を、作ることです!
136
137
138 □ Hint
139 ここに、いろいろな例を⽰します。
140
141 ① 箇条書きリスト
142
<ul>
143
<li>あるアイテム</li>
144
<li>他のアイテム</li>
145
</ul>
146
147 ②順序付きリスト
148
<ol>
149
<li>1番目のアイテム</i>
150
<li>2番目のアイテム</li>
151
</ol>
152
153 ③箇条書きリスト の中に 箇条書きリスト/順序付きリスト です.
154
155
<ul>
<li>好きなこと
156
<!--好きなこと、開く-->
<ul>
157
<li>ゴルフ</li>
158
<li>寝ること</li>
159
<li>レーザーって何さ?</li>
160
161
</ul>
</li>
<!--好きなこと、閉じる-->
163
<li>好きなチーム
<!--好きなチームリスト、開く-->
164
<ol>
162
165
166
<li></li><li></li><li></li>
</li>
</ul>
167
168
169
7-5 Lists within lists
</ol>
<!--好きなチームリスト、閉じる-->