-
Notifications
You must be signed in to change notification settings - Fork 0
/
html5reading.html
340 lines (308 loc) · 9.51 KB
/
html5reading.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<!--
Google HTML5 slide template
Authors: Luke Mahé (code)
Marcin Wichary (code and design)
Dominic Mazzoni (browser compatibility)
Charles Chen (ChromeVox support)
URL: http://code.google.com/p/html5slides/
-->
<html>
<head>
<title>第2回HTML5読書会</title>
<meta charset='utf-8'>
<script
src='./slides.js'></script>
</head>
<style>
/* Your individual styles here, or just use inline styles if that’s
what you want. */
</style>
<body style='display: none'>
<section class='slides layout-regular template-default'>
<article>
<h1>
第2回HTML5読書会
<br>
4,5章
</h1>
<p>
kzfm
<br>
Dec 10, 2011
</p>
</article>
<article>
<h3>
前回のおさらいと今回の内容
</h3>
<ul>
<li>
HTML5はセマンティクス重視
</li>
<li>
見た目のほうはCSSに任せる
</li>
<li>
4章は見た目を良くするためのCSS3の入門的な内容
</li>
<li>
5章はセマンティクスとアクセシビリティの話題
</li>
</ul>
</article>
<article>
<h2>
4章 <br>CSS3を使った<br>ユーザーインターフェースの改善
</h2>
</article>
<article>
<h3>CSS3のセレクタとは何か</h3>
<p>
セレクタとは、HTMLドキュメント内の要素を検索する際に指定するパターン
</p>
<ul class="build">
<li>
<dl>
<dt>:nth-of-type</dt>
<dd>特定のタイプのn番目の要素を全て検索</dd>
</dl>
</li>
<li>
<dl>
<dt>:first-child</dt>
<dd>最初の子要素を検索</dd>
</dl>
</li>
<li>
<dl>
<dt>:nth-child</dt>
<dd>先頭から数えて指定された位置にある子要素を検索</dd>
</dl>
</li>
<li>
<dl>
<dt>:last-child</dt>
<dd>最後の子要素を検索</dd>
</dl>
</li>
</ul>
</article>
<article>
<h3>CSS3のセレクタ(続き)</h3>
<ul class="build">
<li>
<dl>
<dt>:nth-last-child</dt>
<dd>末尾から数えて指定された位置にある子要素を検索</dd>
</dl>
</li>
<li>
<dl>
<dt>:first-of-type</dt>
<dd>指定されたタイプの最初の要素を検索</dd>
</dl>
</li>
<li>
<dl>
<dt>:last-of-type</dt>
<dd>指定されたタイプの最後の要素を検索</dd>
</dl>
</li>
<li>
<dl>
<dt>列のサポートと:after</dt>
<dd>後の事例を実際に触ったほうがわかりやすい</dd>
</dl>
</li>
<li>
<dl>
<dt>メディアクエリ</dt>
<dd>デバイスの画像解像度に応じてcssを切り替える（レスポンシブ・ウェブデザイン）</dd>
</dl>
</li>
</ul>
</article>
<article class="smaller">
<h3>nth-of-typeとnth-childの違い</h3>
<h4>div p:nth-of-type(3){color:#f00;}</h4>
<div>
<p>1番目のp</p>
<hr>
<p>2番目のp</p>
<p style="color:#f00">3番目のp</p>
</div>
<h4>div p:nth-child(3){color:#f00;}</h4>
<div>
<p>1番目のp</p>
<hr>
<p style="color:#f00">2番目のp</p>
<p>3番目のp</p>
</div>
</article>
<article>
<h3>レスポンシブウェブデザイン</h3>
<p><a href="http://mediaqueri.es/">こういったあたり</a></p>
<p><img style='width: 600px' src='images/responsiveweb.png'></p>
<p><a href="http://responsivepx.com/">responsivepx</a>が地味に便利です</p>
</article>
<article class='smaller'>
<h3>擬似クラスを使ってテーブルのスタイルを設定する</h3>
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffee mug</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>$20.00</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Red stapler</td>
<td>$9.00</td>
<td>4</td>
<td>$36.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$186.00</td>
</tr>
<tr>
<td colspan="3">Shipping</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>
<p>サンプルHTMLは<a href="https://github.com/kzfm/HTML5reading2">Git</a>においておきました。</p>
<p>または<a href="http://pragprog.com/titles/bhh5/source_code">書籍のサポートサイト</a>からダウンロードして下さい。</p>
</article>
<article>
<h2>本を見ながらテーブルを改善するタイム</h2>
</article>
<article>
<h3>4章まとめ</h3>
<ul>
<li>CSS3つまりプレゼンテーション層でユーザーインターフェースの改善ができる</li>
<li>モダンでないブラウザのためのフォールバックも考慮する</li>
<li>ベンダープレフィックス</li>
<ul>
<li>すべて書く</li>
<li>標準的なプロパティを最後に記述する</li>
</ul>
</ul>
</article>
<article>
<h2>5章 <br>アクセシビリティの向上</h2>
</article>
<article>
<h3>
WAI-ARIAとは
</h3>
<p>
WAI-ARIAとは、Web Accessibility Initiative-Accessible Rich
Internet Applicationsの略で、W3Cが現在、勧告に向けて策定作業
を進めているリッチなインターネットアプリケーションのアクセシ
ビリティに関する仕様書のことです。
</p>
<p>
<span class="red">JavaScriptやAjaxなどを使用した動的なコンテンツは、スクリーン
リーダーやキーボード操作では利用できないことがあります。</span>
WAI-ARIAは、そういった問題を解決すべく、W3CのProtocols and
Formats ワーキンググループ (PFWG) において策定されています。
</p>
<div class='source'>
Source: WAI-ARIA（日本語訳）
</div>
</article>
<article>
<h3>Screen Readerの説明</h3>
<div style="width:595px" id="__ss_6738595"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/nishimotz/nishimotz-pycon2011jan" title="Nishimotz pycon2011jan" target="_blank">Nishimotz pycon2011jan</a></strong> <object id="__sse6738595" width="595" height="497"> <param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=nishimotz-pycon2011jan-110128162904-phpapp01&stripped_title=nishimotz-pycon2011jan&userName=nishimotz" /> <param name="allowFullScreen" value="true"/> <param name="allowScriptAccess" value="always"/> <param name="wmode" value="transparent"/> <embed name="__sse6738595" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=nishimotz-pycon2011jan-110128162904-phpapp01&stripped_title=nishimotz-pycon2011jan&userName=nishimotz" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="595" height="497"></embed> </object> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/nishimotz" target="_blank">Takuya Nishimoto</a> </div> </div>
</article>
<article class='nobackground'>
<h3>静岡だと三島のユニバーサルワークス</h3>
<iframe src='http://www.u-works.co.jp/services/accessibility'></iframe>
</article>
<article class='fill'>
<h3>WAI-ARIA</h3>
<q>Webサイト、特にWebアプリケーションのアクセシビリティを改善するための仕様</q>
</article>
<article>
<h3>
This slide has some code
</h3>
<section>
<pre>
<script type='text/javascript'>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: 'umber' }
</style>
</pre>
</section>
</article>
<article class='smaller'>
<h3>
This slide has some code (small font)
</h3>
<section>
<pre>
<script type='text/javascript'>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: 'umber' }
</style>
</pre>
</section>
</article>
<article class='nobackground'>
<iframe src='http://www.google.com/doodle4google/history.html'></iframe>
</article>
<article class='fill'>
<h3>
Full-slide embed with (optional) slide title on top
</h3>
<iframe src='http://www.google.com/doodle4google/history.html'></iframe>
</article>
<article>
<h3>
Thank you!
</h3>
<ul>
<li>
<a href='http://www.google.com'>google.com</a>
</ul>
</article>
</section>
</body>
</html>