-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
270 lines (259 loc) · 12.6 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
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>html5j ― 「つながる」「学べる」「盛り上がる」</title>
<meta name="description" content="html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="html5j ― 「つながる」「学べる」「盛り上がる」">
<meta property="og:type" content="website">
<meta property="og:url" content="https://html5j.org/">
<meta property="og:image" content="img/ogp.png">
<meta property="og:description" content="html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。">
<meta name="google-site-verification" content="KsOz4j9yibDbp_Shr_8V5nBAlapWmVAbl3vnIBfve9c" />
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://use.typekit.net/" crossorigin>
</head>
<body>
<header>
<div class="container">
<h1><img class="logo" src="img/logo_header.svg" alt="html5j"></h1>
<nav>
<ul class="menu">
<li><a href="#mailing-list">メーリングリスト</a>
<li><a href="#html5toka">HTML5とか勉強会</a>
<li><a href="#bukatsu">部活動</a>
<li><a href="#events">イベント</a>
</ul>
</nav>
</div>
</header>
<div class="main-visual">
<picture>
<source srcset="img/slider/slider_image_01.webp" type="image/webp">
<img src="img/slider/slider_image_01.jpg" alt="">
</picture>
</div>
<main>
<section id="about">
<h2>html5jについて</h2>
<p>html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。私たちは、日本のWebクリエイター・エンジニアのスキル向上をお手伝いして、日本が世界のWebシーンをリードするような存在になることを心より願っています。
</section>
<section id="activities">
<h2>html5jの活動</h2>
<p>html5jはWebクリエイター・エンジニアの皆さんに対し、<strong>「つながる」「学べる」「盛り上がる」</strong>を合言葉とし、以下の活動を行なっています。
<section id="mailing-list">
<h3>html5jメーリングリスト</h3>
<p>Web開発に関する話題について質問したり、共有したりするためのメーリングリストです。また、勉強会の告知なども行なっています。
<p class="subscribe"><a href="https://groups.google.com/group/html5-developers-jp/subscribe" id="subscribe" target="_blank" rel="noopener">html5jメーリングリストに参加する<br>（Googleグループに移動）</a>
<section class="post-rule">
<h4>投稿ルール</h4>
<ul>
<li>HTML5などの技術やWeb開発に関する話題であれば、どんな内容でも構いません。</li>
<li>営利目的ではない質問や情報提供については、個人・団体を問わず自由に投稿できます。</li>
<li>営利目的の質問やセミナー開催のお知らせについては、件名の先頭に <b>PR:</b> とつけてください。</li>
<li>スパムメール防止のため、初投稿の際には管理者が承認する設定になっております。ご了承ください。</li>
</ul>
</section>
</section>
<section id="html5toka">
<h3>HTML5とか勉強会</h3>
<p>東京で開催しているhtml5j主催の勉強会です。2009年11月よりスタートし、現在では毎回100人近くもの方にご参加いただけるまでになりました。
<p>勉強会の開催案内は<a href="#mailing-list">html5jメーリングリスト</a>で行なっています。
</section>
<section id="bukatsu">
<h3>部活動</h3>
<p>ひとつのテーマを探求する「部活動」も行なっています。各部活動の勉強会告知や、トピックを絞った議論も<a href="#mailing-list">html5jメーリングリスト</a>で行っています。
<div id="bukatsu-list" class="list-media">
<section>
<a href="https://www.facebook.com/ajimibu">
<h4>味見部</h4>
<img src="img/club/banner_ajimi.png" alt="">
</a>
<p>真新しい技術を実際に触ってみることを目的とした勉強会です。
</section>
<section>
<a>
<h4>エンタープライズ部</h4>
<img src="img/club/banner_enterprise.png" alt="">
</a>
<p>業務システムでのWeb技術利用に関する勉強会を開催しています。
</section>
<section>
<a href="http://html5j-begin.blogspot.jp/">
<h4>ビギナー部</h4>
<img src="img/club/banner_beginner.png" alt="">
</a>
<p>HTML5をこれから学びたいという方を対象にした勉強会を開催しています。
</section>
<section>
<a href="http://www.slideshare.net/bathtimefish/ss-24598819">
<h4>マークアップ部</h4>
<img src="img/club/banner_markup.png" alt="">
</a>
<p>HTML5のマークアップについて考えるイベントを開催しています。
</section>
<section>
<a href="https://www.facebook.com/html5jmk">
<h4>Webマーケティング部</h4>
<img src="img/club/banner_webmarketing.png" alt="">
</a>
<p>新しいWeb技術によって可能になる、マーケティングの未来を探究します。
</section>
<section>
<a>
<h4>自動車部</h4>
<img src="img/club/banner_automotive.png" alt="">
</a>
<p>Web技術と自動車の融合をテーマにイベントを開催しています。
</section>
<section>
<a href="https://www.facebook.com/html5j.entech">
<h4>エンタメ技術部</h4>
<img src="img/club/banner_entech.png" alt="">
</a>
<p>技術で人を楽しませるということをテーマに活動をしています。
</section>
<section>
<a href="https://github.com/html5j-english/README">
<h4>英語部</h4>
<img src="img/club/banner_english.png" alt=""></a>
<p>グローバルな舞台で活躍するWeb技術者を増やすことを目標に活動しています。
</section>
<section>
<a>
<h4>Webプラットフォーム部</h4>
<img src="img/club/banner_webplatform.png" alt=""></a>
<p>様々なプラットフォームでコードを動かすための知識を培う活動をしています。
</section>
<section>
<a>
<h4>パフォーマンス部</h4>
<img src="img/club/banner_performance.png" alt=""></a>
<p>データに基いてパフォーマンス計測・改善する知識や手法の普及を目的としています。
</section>
<section>
<a href="https://www.facebook.com/groups/html5j.epublishing/">
<h4>電子出版部</h4>
<img src="img/club/banner_epublishing.png" alt=""></a>
<p>Web技術を活用した次世代出版の可能性を、技術面と産業面の双方から探ります。
</section>
<section>
<a>
<h4>TV部</h4>
<img src="img/club/banner_tv.png" alt=""></a>
<p>TVに関わるすべてに対する可能性を追求すべく活動しています。
</section>
<section>
<a>
<h4>ロボット部</h4>
<img src="img/club/banner_robot.png" alt=""></a>
<p>ロボット×Webでどこまで出来るかを追求しています。
</section>
</div>
</section>
</section>
<section id="events">
<h2>html5jのイベント</h2>
<p>html5jでは、HTML5とか勉強会や部活動のイベント以外にも、イベントの企画・運営をしています。
<p>また、地域のWeb開発コミュニティが開催するイベントに参加させていただくこともあります。html5jでは主催に限らず、Web開発に関する勉強会・セミナーは積極的に応援したいと考えています。
<section id="html5conf">
<h3>HTML5 Conference</h3>
<p>2011年より、より多くの人がつながり、学べ、盛り上がるためのカンファレンスを開催しています。
<div id="html5conf-list" class="list-media">
<section>
<a href="https://events.html5j.org/conference/2015/1/">
<h4>HTML5 Conference 2015</h4>
<img src="img/conference/fig_conference_2015_1.jpg" alt="">
</a>
<p>2015年1月開催。「Web is Everywhere」をテーマに29セッションと展示を設け、約1,000人の方に参加いただきました。
</section>
<section>
<a>
<h4>HTML5 Conference 2013</h4>
<img src="img/conference/fig_conference_2013.png" alt="">
</a>
<p>2013年11月開催。30セッション、1,300人参加という過去最大規模のイベントになりました。
</section>
<section>
<a href="https://events.html5j.org/conference/2012/09/">
<h4>HTML5 Conference 2012</h4>
<img src="img/conference/fig_conference_2012.jpg" alt="">
</a>
<p>2012年9月開催。html5j単独主催、のべ1,000人の方に参加いただきました。
</section>
<section>
<a href="https://events.html5j.org/conference/2011/08/">
<h4>Chrome+HTML5 Conference</h4>
<img src="img/conference/fig_conference_2011.jpg" alt="">
</a>
<p>2011年8月開催。Googleと共催したhtml5j初のカンファレンスです。
</section>
</div>
</section>
<section id="htmlday">
<h3><htmlday></h3>
<img src="img/htmlday/banner_htmlday_2014.png" alt="htmlday">
<p>2013年から開催している全国規模のWeb開発者向けイベント「<htmlday>」、2014年は32イベントが行われました。
<p><a href="http://htmlday.jp/"><htmlday>公式サイト</a>
</section>
</section>
</main>
<footer>
<p class="contact">© html5j (<a href="https://docs.google.com/spreadsheet/viewform?formkey=dGc2NmdtcndwLWc5WHdnVVJPWDQ0Q2c6MQ">お問い合わせ</a>)
<section id="accounts">
<h4 class="visuallyhidden">html5j関連リンク</h4>
<ul>
<li><a href="https://twitter.com/html5j" title="Twitter (@html5j)"><img src="img/footer_icon_twitter.svg" alt="Twitter (@html5j)"></a>
<li><a href="https://www.youtube.com/user/html5j" title="YouTubeチャンネル"><img src="img/footer_icon_youtube.svg" alt="YouTubeチャンネル"></a>
</ul>
</section>
</footer>
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create','UA-44039742-1','html5j.org')
ga('require', 'mediaQueryTracker', {
definitions: [
{
name: 'Breakpoint',
dimensionIndex: 1,
items: [
{name: 'lg', media: 'all'},
{name: 'md', media: '(max-width: 48em)'},
{name: 'sm', media: '(max-width: 35em)'},
]
},
{
name: 'Pixel Density',
dimensionIndex: 2,
items: [
{name: '1x', media: 'all'},
{name: '1.5x', media: '(min-resolution: 144dpi)'},
{name: '2x', media: '(min-resolution: 192dpi)'},
{name: '3x', media: '(min-resolution: 288dpi)'},
{name: '4x', media: '(min-resolution: 384dpi)'},
]
},
{
name: 'Orientation',
dimensionIndex: 3,
items: [
{name: 'landscape', media: '(orientation: landscape)'},
{name: 'portrait', media: '(orientation: portrait)'},
]
}
]
})
subscribe.onclick=function(){
ga('send','event','button','click','subscribe')
}
ga('send', 'pageview')
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="js/autotrack.custom.js"></script>
<!-- TypeKit: for Source Han Sans -->
<script src="https://use.typekit.net/diw6hic.js"></script>
<script>try{Typekit.load({async:true})}catch(e){}</script>
</body>
</html>