キャンセル待ちの繰り上げ、および、当日枠の受付も終了しました。
概要
| イベント名 | CSS Niteビギナーズ：HTML5+CSS3 |
|---|---|
| 日時 | 2013年4月13日(土) 13:30-19:30（開場13:10） |
| 会場 | ベルサール九段（Google マップ） |
| 定員 | 240名 |
| 出演予定 |
羽田野 太巳（futomi） 益子貴寛（サイバーガーデン） 春日井 良隆（マイクロソフト） 西畑 一馬（まぼろし） 小林 信次（まぼろし） 小山田 晃浩（ピクセルグリッド） こもりまさあき 前川 昌幸（スクイズ研究所） 鷹野 雅弘（スイッチ） |
| 司会進行 | 鷹野 雅弘（スイッチ） 山本 和泉（#fc0） |
| 主催 | CSS Nite実行委員会 |
| 協賛 |
写真素材 PIXTA（ピクスタ）、株式会社クラウドワークス クラウド型ビジネスチャットツール チャットワーク （ChatWork） |
| 協力 | サイバーガーデンbiz、H2O Space.、 サイボウズ、KDDIウェブコミュニケーションズ |
| プレゼント 協賛 |
awesome! クリエイターズショップ、マイナビ |
| メディア協賛 | Web担当者Forum |
| 参加費 | 9,000円 3,000円（フォローアップ参加） |
| 事前登録 | 必要 |
| 備考 | スクール形式（=机あり） |
| 備考 | フォローアップのみを開催直後（1週間以内）に受け取れる フォローアップ参加を試験的にご用意しています。 |
| 懇親会 | 予定しています（別途、実費） |
| ハッシュタグは #cssnite_html5 です。 | |
| URL | https://cssnite.jp/beginners/html5css3/ |
| このセミナーのFacebookイベントページで最新情報をアップデートしています。 |
タイムテーブル
2013年3月22日 時点で最新のものです。変更の可能性があります。
- タイムテーブルはあくまでも目安であり、当日の流れによって、調整しながら進行します。
- 10分程度、延長する可能性があります。
| 時間 | セッション | 出演者 |
|---|---|---|
| 13:10 | 開場 | |
| 13:25 | オープニング | |
| 13:30 | HTML5マークアップの基本 | 益子貴寛（サイバーガーデン） |
| 14:05 | HTML5時代のひな形 | 小山田 晃浩（ピクセルグリッド） |
| 14:45 | 間違いから学ぶHTML5マークアップの基礎 | 羽田野 太巳（futomi） |
| 15:15 | 休憩 | |
| 15:35 | HTML5時代のフォーム制作 | 前川 昌幸（スクイズ研究所） |
| 16:15 | CSSセレクタ | 小林 信次（まぼろし） |
| 16:50 | jQueryとCSS3アニメーションの連携 | 西畑 一馬（まぼろし） |
| 17:25 | 休憩 | |
| 17:45 | HTML5+CSS3時代のDreamweaver活用 | 鷹野 雅弘（スイッチ） |
| 18:20 | レスポンシブWebデザイン | こもりまさあき |
| 19:00 | IE10とWindows 8とHTML5 | 春日井 良隆（マイクロソフト） |
| 19:30 | 終了 |
セッション概要と出演者のプロフィール
次の内容で構成します。
- HTML5マークアップの基本／益子貴寛（サイバーガーデン）
- HTML5時代のひな形／小山田 晃浩（ピクセルグリッド）
- 間違いから学ぶHTML5マークアップの基礎／羽田野 太巳（futomi）
- HTML5でのフォーム制作／前川 昌幸（スクイズ研究所）
- CSS3セレクター／小林 信次（まぼろし）
- jQueryとCSS3アニメーションの連携／西畑 一馬（まぼろし）
- HTML5+CSS3時代のDreamweaver活用／鷹野 雅弘（スイッチ）
- レスポンシブWebデザイン／こもりまさあき
- IE10とWindows 8とHTML5／春日井 良隆（マイクロソフト）
ビギナーズとうたっていますが、XHTML1.0+CSS2.1によるサイト制作の経験があることを基本的なレベル設定としています。
HTML5マークアップの基本
W3CのHTML5仕様が2012年12月に勧告候補となり、ほぼ内容が固まりました。草案の段階からは少し変わっているところがあるので、新しい内容にキャッチアップしましょう。
このセッションでは、HTML5仕様の概要、文書構造、セクション、APIなど、HTML5の全体像とページ制作に必要な知識をコンパクトに解説します。
益子貴寛（ましこ たかひろ）
株式会社サイバーガーデン 代表取締役
1975年、栃木県宇都宮市生まれ。
Webサイトのコンサルティング、Webサービスの企画・制作、Webテクノロジー関連の執筆や教育活動などに従事。
スマートフォン向けWebサービス、HTML5、CSS3、各種APIを利用したWebサービスの開発にも積極的に関わる。
主な著書に『Web標準の教科書』（秀和システム）、『現場のプロから学ぶXHTML+CSS』（共著、マイナビ）、『Web検定 標準ガイドブックシリーズ』（監修、ワークスコーポレーション）など。
HTML5時代のひな形
このセッションでは、HTML5 のひな形について少し掘り下げて学びます。ひな形として抑えておくべきポイント、なぜこれで (が) いいのか、必須なJavaScriptライブラリー、ベストプラクティスなど、さまざまな角度からひな形について考える30分です。
このセッションを受講すれば、ひな形についてを解説できる知識、そして、日々コピー & ペーストで作業をはじめていたであろう“ひな形”作成に対して、必要に応じてカスタマイズできる能力が身につくでしょう。
セッション終了後にはお持ち帰り用にHTML5のひな形例を公開します。
小山田 晃浩 （おやまだ・あきひろ）
株式会社ピクセルグリッド
フロントエンドエンジニア
株式会社ピクセルグリッドに所属するフロントエンドエンジニア。HTMLを中心にフロントエンド技術を駆使した Webコンテンツの実装を行なっており、特に CSS, SVG, canvas, WebGL の扱いを得意とする。
外部に向けたアウトプットも行っており、雑誌・書籍の執筆、カンファレンスでの講演経験を多数持つ。2011、2012 年には Microsoft MVP for IE を受賞。
間違いから学ぶHTML5マークアップの基礎
近年、個人や企業を問わず、HTML5でマークアップされたサイトが数多く登場しています。HTML5にはいくつかの新たな概念が加わりました。セクション、アウトラインといった概念は、初心者には分かりづらいといえます。HTML5が浸透してから年月が浅いこともあり、有名な大企業のサイトですら、不適切なマークアップが見受けられます。
本セッションでは、そのような不適切なマークアップを見みながら、なぜそれが問題なのかを考察し、HTML5マークアップの基本概念を習得します。
羽田野 太巳（はたの ふとみ）
有限会社futomi 代表取締役
株式会社ニューフォリア 取締役 最高技術責任者
1993年 名古屋大学理学部数学科卒、日本電信電話(株)（NTT）入社。伝送系エンジニアとして通信系インフラの保守運用を経て、通信系SIとして企業通信系システム設計に従事。1999年 NTTぷららに出向、インターネット接続サービスおよびサーバーのシステム運用、サービス企画に従事し、IPTVサービスの立ち上げに携わる。2004年独立後、(有)futomiを設立し、ウェブ・システム開発の傍ら、ウェブコンサルティングも手がける。
HTML5の気運が高まる以前からHTML5の探求を始め、HTML5専門サイト「HTML5.JP」を立ち上げ、HTML5の普及啓蒙に関わり、HTML5関連書籍や雑誌記事執筆も行う。
2011年 (株)ニューフォリア取締役(最高技術責任者)に就任し、HTML5を使ったコンテンツ作りの指揮を執る。また、W3CにてWeb-based Signage Business Groupの共同議長を務める。
主な著書に『HTMLとJavaScriptではじめるWindowsストアアプリ開発入門』、『徹底解説 HTML5 APIガイドブック ビジュアル系API編』、『徹底解説HTML5マークアップガイドブック 最終草案対応版』（秀和システム）、共著に『HTML5ガイドブック 増補改訂版 (Google Expert Series) 』（インプレスジャパン）など。
HTML5でのフォーム制作
HTML5でフォームも大きく機能強化が行われています。dateやemailといったtype属性の大幅な追加、必須入力や入力チェックなどの新しい入力属性などが登場し仕様として策定され、各ブラウザも順次実装を進めています。ただし、策定されているものが全てのブラウザで実装されているわけではなく、状況はやや混乱していると言っていいでしょう。
今回は、現状で最大公約数的に利用できるものを中心に、未対応のブラウザへの対処法なども含めて紹介します。
前川 昌幸（まえかわ・まさゆき）
1972年兵庫県生まれ
CD/VIDEOショップ店長、バーテンダー兼会社役員、コミュニティFMパーソナリティ、職業訓練校講師を経て2006年から現職。専門はマークアップ。他にサーバ保守管理、サーバサイドプログラミング、モバイルサイト開発、iOS/Androidアプリインターフェース等担当。2011年よりokayama-jsを主宰。
岡山WEBクリエイターズ、CSS Nite in OKAYAMA、CSS Nite in TAKAMATSU、okayama-jsなどで主にJavaScript、マークアップなどのテーマで登壇。2012年から岡山WEBクリエイターズではセッション後のトークセッションのコーディネーターを担当。
CSSセレクタ
CSS2.1でも多くのセレクタが用意されていますが、旧バージョンのIEがターゲットブラウザに入っているとなかなか自由に利用することができませんでした。
CSS3でさらに豊富なセレクタが登場しています。
現在ではスマートフォン向けサイトや、Graceful Degradation（グレイスフル デグラデーション）への理解が進んだことから、多くのサイトで豊富なセレクタを利用してスタイルの指定が行われるようになっています。
本セッションではセレクタを理解するヒントや注意点、デモを通じた具体的な利用例を紹介します。
小林 信次jQueryとCSS3アニメーションの連携
CSS3でアニメーションを制御する機能が追加されたことにより、リッチでインタラクティブなサイト制作が可能になりました。ただ、さまざまなことを実現しようとするとCSS3だけではできないことも多く、そういった場合ではJavaScriptでの制御も必要になってきます。
本セッションでは、CSS3アニメーションの基礎とjQueryを利用したアニメーション連携方法について紹介します。
西畑 一馬（にしはた・かずま）
to-R 代表 / 株式会社まぼろし フロントエンドエンジニア
JavaScript / Ajaxを利用したWebアプリケーション制作やCSS3 / HTML5を利用したサイト作成を業務で行い、個人でも書籍や雑誌の執筆、Webクリエイター向けの講座 / セミナーなどの活動を行っている。
主な著書に『Web制作の現場で使う jQueryデザイン入門』、『jQuery Mobile スマートフォンサイト デザイン入門』がある。HTML5+CSS3時代のDreamweaver活用
Dreamweaver CS5の発売後、追加の拡張機能としてリリースされたHTML5 Packにより、HTML5やCSS3のコーディングの機能強化が図られています。
Dreamweaver CS5/CS5.5/CS6でのHTML5/CSS3の機能強化について解説します。
鷹野 雅弘（たかの まさひろ）
Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。
2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,000名を超える方が参加している。
テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『『よくわかるDreamweaverの教科書』（共著、マイナビ）、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』（マイナビ）など。
レスポンシブWebデザイン
スマートフォンやタブレットデバイスの登場により、Webコンテンツの配信手法のひとつとして話題になっているレスポンシブWebデザイン。
今回はレスポンシブWebデザインの基本編として、その特徴や考え方を紹介しながらMedia Queryを使った実装方法を紹介します。
こもり まさあき
1972年生まれ。黎明期からWebサイト構築などに関わる。現在はWeb関連業務に加えてテクニカルライティング、講師など業種を限定せずに活動し、仕事の合間にTwitter（@cipher）でたまに毒を吐く日々。
近著に『HTML+CSS コーディングベストプラクティス』（MdN・共著）など。
IE10とWindows 8とHTML5
今デバイスが大きく、変わろうとしています。WindowsというOSも昨年、リリースされたWindows 8で大きく変わりました。Webの制作者にとってのWindowsは、もはや、Webブラウザーが動くOSだけでも、オーサリングツールが動くOSだけでもありません。これまでに培ってきたWebのスキルをそのプラットフォームで直接、活かすことができる、それがWindows 8という新しいOSです。
このセッションでは、最新のIE10のHTML5対応のほか、そんなメッセージをお伝えしたいと思います。
春日井 良隆（かすがい よしたか）
日本マイクロソフト株式会社 デベロッパー＆プラットフォーム統括本部
岐阜大学を卒業後、大沢商会を経て、アドビ システムズに入社。After EffectsやPremiereといったビデオ編集ツールのマーケティング一筋の10年を過ごすなかで、マクロメディアとの合併後にはFlashのマーケティングにも関わる。
2007年1月、Expressionのプロダクトマネージャーとして、マイクロソフトに入社。その後、Silverlightのプロダクトマネージャーを兼務し、両製品のマーケティングを統括する。2009年7月、エバンジェリスト部門に異動。ユーザーエクスペリエンス (UX) と、その中核技術であるSilverlightとInternet Explorer、HTML5を担当。HTML5の中では<video>が一番得意。
会場プレゼント
ジャンケンなどで、下記をプレゼントいたします。
- 『魅せるWordPressサイト』（ラトルズ）
- 『スマートフォンサイトのためのHTML5+CSS3』（マイナビ）
- 『HTML5 スタンダード・デザインガイド』（マイナビ）
- 『Webデザインの新しい教科書』（MdN）
参加費とお申し込み
「CSS Niteビギナーズ：HTML5+CSS3」は有料のイベントです。ご参加いただくには参加登録と事前決済が必要です。
参加費
早めにお申し込み（+決済）いただくと割引があります。早期割引は終了しました。- 会場参加の事前決済は終了しました。当日枠のみ受け付けます（3月26日）。
- 当日枠の受付終了しました（4月9日）。
| 決済ベースでの締め切り | セミナーのみ | フォローアップ参加 |
|---|---|---|
| 1月31日15時まで | ||
| 2月28日15時まで | ||
| それ以降（事前決済） | 3,000円 | |
| 当日枠（3月26日以降） | 10,000円 | - |
なお、ご参加はお支払い済みの方から、参加確定します。
振込後に、こちらのフォームからご連絡いただけると助かります。
フォローアップ参加について
CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開しています。今回、フォローアップを早めに受け取っていただける「フォローアップ参加」を試験的に行います。
- 基本的にはスライド、音声のみをシェアします。
- 会場参加の方と同様のタイミングで、カウントダウンメール/フォローアップメールをお送りします（開催から1週間以内くらい）その中に、スライド/音声のダウンロード先が書いてあります。
- ビデオ撮影を行う予定です。開催から2週間以内にご案内します。アップ先はvimeoです。ストリーミング視聴のみ可能で、ダウンロードはできません。また、公開には期限を設定します。
- 開催当日にUstream視聴ができたり、当日のスライドなどをご案内することはありません。
- 必要な方には領収書を発行します。
- 会場参加される方は、フォローアップ参加にお申し込みいただく必要はありません。
決済のご確認（入金確認）
- PayPalでの決済
- PayPalからの自動返信メールをもって入金確認とさせていただきます。
- 銀行振込での決済
- 確認取れ次第、入金確認メールをお送りします。お振り込み後、3日から1週間ほどかかることもあります。
お願い
お申し込み前に、下記2件からのアドレスからのメール受信可能にしておいてください。
- seminar@cssnite.jp：
受講票の配信メールアドレスです - cssnite@gmail.com：
お申し込みの自動返信メールやカウントダウンメール、フォローメールの配信メールアドレスです｡ - cssnite.payment@gmail.com：
PayPal決済の自動返信メール、銀行振込確認メールの配信メールアドレスです｡
開催の背景
これまでも取り上げてきたトピックですが、じっくり勉強 したい、という方向けに、HTML5やCSS3のキホン 、および、HTML5 Boilerplate、Normalize.cssなどを取り上げ、HTML5/CSS3関連で2013年に必要とされるスキルセットをまとめて1日で学べる機会を提供します。
なお、「CSS Niteビギナーズ」という名称がついていますが、HTMLやCSSの基礎、Web制作のおおまかなワークフローについては理解されていることを前提条件とします。いいかえれば、HTML5/CSS3での差分や制作環境などにフォーカスします。
CSS Niteについて
2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っている。
名古屋、大阪、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都、石川、高松、山形、富山、静岡、宮崎、熊本、北九州、岡山、徳島、松山、山梨、長野にて“地方版”を展開。地方版は現地の有志が運営し、地方のコミュニティ活性化の一助となっている。
これまでに、300回を越える関連イベントを通して、のべ40,000名を超える方にご参加いただいている（2012年12月現在）。
FAQ
開催に関して
- 都内以外での開催はありますか？
- 今のところ、予定していません。
- 当日は何を持参すればよいですか？
- 開催の3日から1週間くらい前に受講票をメールにて発送します。そちらをプリントアウトしてご持参してください。プリントアウトが困難な方は、携帯電話の画面でのご提示でも結構です。
- 当日の配布資料はありますか？
- ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
- 視力が弱いのですが、大丈夫でしょうか？
- 心配な方は、お早めにご来場いただき、見やすい席を確保していただければ確実です（自由席です）。なお、途中でもお困りの際には移動いただいて結構ですし、お申し出くだされば、（席替えなど）対応いたします。
- 書籍販売コーナーはありますか？
- 今回はご用意いたしません。
- パソコンを持参した方がいいですか？
- いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
なお、「隣に座った方の、キーボードのタイピング音がうるさくて気が散る」といった苦情を最近よくいただきます。ご配慮をお願いします。 - 無線LANなどの環境はありますか？
- 若干のご準備はいたしますが、基本的にはご自身でご用意ください。
- 電源はありますか？
- 会場に両サイドにある電源をお使いいただいてOKですが、分け合ってお使いください（ぜひ、電源タップなど延長できるものお持ちください）。また、ACアダプターにつまづいてPCが落下などされないように、くれぐれもお気をつけください（休憩中はコードをはずしておいたり、養生テープなどで固定された方がよいかもしれません）。
- Twitterで実況中継してもいいですか？
- はい、どうぞ。ハッシュタグは「#cssnite_shift6」です。なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いいたします。
- Ustreamで中継してもいいですか？
- こちらはご容赦ください（=NGです）。主催者サイドでUstream配信する予定はありません。
- セッション登録はどのように行えばよいですか？
- 今回のCSS Niteは1トラックで開催します。つまり、同時進行で複数のセッションは進行しませんので、セッション登録などは不要です。すべてのセッションをお楽しみいただけます。
お申し込み・決済に関して
- 複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
- はい。その場合、お振り込み後に「振込名義」と、どなたの分かをフォームからご連絡ください。
- 請求書は発行いただけますか？
- PDFに限り、発行します。請求書発行依頼フォームからご連絡ください。
- 領収書はいただけますか？
- はい。開催当日、全員にお渡しします。
法人名などの宛名の記入が必要な場合には、休憩時間に受付にてお申し出ください（事前のご連絡は不要です）。銀行振込、PayPal決済に関わらず、領収書の日付は開催日です。不都合があれば、当日、ご相談ください。なお、欠席された場合でも、ご連絡いただければ領収書を郵送します。
フォローアップ参加の方で、必要な方にも領収書をお送りします（PDF、または、郵送）。 - 諸事情で、遅刻（途中退席）しなければなりません。
- 問題ありません。ただし、部分的な返金等はご容赦ください。遅刻される場合、（すでに着席されている方の注意を削ぐため）次の転換/休憩時まで、会場の後部にて待機いただきます。
- 入金確認メールはいつ届きますか？
- 早ければ翌日。状況によっては1週間くらいかかることもあります。なお、PayPal決済の場合にはPayPalからの自動返信メールをもって入金確認としますので、CSS Niteからのメールはお送りしていません。
お申し込み者と振込名が異なる場合、こちらでは照合できません。ご連絡をお願いします。
キャンセルや払い戻しについて
- 急遽参加できなくなりました。代わりの人間が参加してもよいですか？
- はい、どうぞ。その際には、フォームからご連絡ください。
- PayPalでダブって決済してしまいました。
- ご連絡いただければ払い戻し処理を行います。もちろん、こちらで気付いた場合にはご連絡します。なお、返金の際、手数料（500円）のみご負担ください。
- 諸事情により参加できなくなりました。
- キャンセルフォームからご連絡ください。キャンセル規定は次のとおりです。
-
3日前まで
（4月10日17時まで）フォローアップ参加費を除いて返金
（フォローアップあり）（計算例） 9,000円-2,500円-500円=6,000円 前々日、前日、当日 返金なし（フォローアップあり）
関連情報
バナー
ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。
（幅160ピクセル×高さ160ピクセル）
発言の最後に半角スペース＋「 #cssnite_html5」を入れてツイートしていただくと「#cssnite_html5」に自動的にリンクが張られて、「CSS Niteビギナーズ：HTML5+CSS3」関連の発言を参照することができます。中継や覚え書きなどにご利用ください。
