-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (155 loc) · 6.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>N予備校 Webプログラミング入門コースでの作成サンプル集</title>
<style>
body {
margin: 50;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
color: #333333;
background-color: #f6f6f6;
word-wrap: break-word;
overflow-wrap: break-word;
}
.main {
width: 100%;
text-align: center;
}
.container {
width: 750px;
margin: 0 auto;
text-align: left;
}
.box {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div align="center">
<a href="http://www.nnn.ed.nico/"><img src="ny-logo-128.png" width="128" alt="N予備校"></a>
<h3>N予備校 Webプログラミング入門コースでの作成サンプル集</h3>
<p>Webプログラミング入門コースの全17回内で受講者が実際に手を動かして実装するサンプル。<br>
このサンプルはChromeでしか動作を保証しません。
</p>
</div>
<div class="main">
<div class="container">
<div class="box" style="float:left;" align="center">
<figure>
<a href="my-first.html"><img src="my-first-html.png" alt="" width="200" height="150"></a>
<figcaption>第2回 はじめてつくる Web ページ</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="haiku.html"><img src="haiku-html.png" alt="" width="200" height="150"></a>
<figcaption>第2回 HTML でつくる俳句</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="tags.html"><img src="tags-html.png" alt="" width="200" height="150"></a>
<figcaption>第3回 さまざまな HTML タグを使った Web ページ</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="self-introduction.html"><img src="self-introduction-html.png" alt="" width="200" height="150"></a>
<figcaption>第4回 HTMLで作る自己紹介ページ</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="my-first-javascript.html"><img src="my-first-javascript.png" alt="" width="200" height="150"></a>
<figcaption>第5回 JavaScript で作る HTML</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-calc.html"><img src="js-calc.png" alt="" width="200" height="150"></a>
<figcaption>第6回 JavaScript で計算を実行する</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-logic.html"><img src="js-logic.png" alt="" width="200" height="150"></a>
<figcaption>第7回 JavaScript で成年/未成年を判断させる</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-logic-ex.html"><img src="js-logic-ex.png" alt="" width="200" height="150"></a>
<figcaption>第7回 JavaScript で映画のチケットの値段を計算させる</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-loop.html"><img src="js-loop.png" alt="" width="200" height="150"></a>
<figcaption>第8回 1 から 10万 までを表示する</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-loop-ex.html"><img src="js-loop-ex.png" alt="" width="200" height="150"></a>
<figcaption>第8回 10万まで FizzBuzz を表示する</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-collection.html"><img src="js-collection.png" alt="" width="200" height="150"></a>
<figcaption>第9回 全学年全組の組み合わせを書き出す</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-collection-ex.html"><img src="js-collection-ex.png" alt="" width="200" height="150"></a>
<figcaption>第9回 組み合わせで名前の候補を作る</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-function.html"><img src="js-function.png" alt="" width="200" height="150"></a>
<figcaption>第10回 生まれてからの秒数をアニメーション表示する</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-function-ex.html"><img src="js-function-ex.png" alt="" width="200" height="150"></a>
<figcaption>第10回 生まれてからの日数をアニメーション表示する</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="js-object.html"><img src="js-object.png" alt="" width="200" height="150"></a>
<figcaption>第11回 JavaScript で作る時間あてゲーム</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="self-introduction-css.html"><img src="self-introduction-css.png" alt="" width="200" height="150"></a>
<figcaption>第12回 CSSで装飾された自己紹介ページ</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="css-programming.html"><img src="css-programming.png" alt="" width="200" height="150"></a>
<figcaption>第13回 CSSを使ったアニメーション</figcaption>
</figure>
</div>
<div class="box" style="float:left;" align="center">
<figure>
<a href="assessment.html"><img src="assessment.png" alt="" width="200" height="150"></a>
<figcaption>第14〜17回 あなたのいいところ診断</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>