このページの本文へ

前へ 1 2 次へ

SwapSkillsのHTML5勉強会レポート

HTML5って結局何が変わるの?制作者向け勉強会に潜入

2010年06月18日 17時05分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 Web業界は“勉強会好き”だ。有料・無料、規模を問わず、週末ともなると必ずどこかで何らかの勉強会が開催されていて、多くの制作者や開発者が参加している。常に新しい技術への対応が欠かせない業界とはいえ、これほど勉強熱心な人が多い業界はほかに思い浮かばない。

 4月、5月と「HTML5」をテーマに都内で開催された勉強会「SwapSkills」(主催=allWebクリエイター塾)に潜入する機会があったので、当日の様子をお届けしよう。

4月のSwapSkillsの様子

HTML5のマークアップで変わること

 4月29日の「今から、ハジメる人へのHTML5」は、タイトルのとおり、HTML5ビギナーのための勉強会だ。スピーカーにallWebクリエイター塾講師の菊池 崇さん、「HTML5本」をそれぞれ執筆した羽田野太巳さん、白石俊平さんの3名を迎えて、約80人がHTML5の概要と基本を学んだ。

 HTML5と一口に言っても、マークアップの方法から関連APIと組み合わせたJavaScriptプログラミングまで、多岐にわたる。(Web Professionalも含めて)よくメディアが取り上げるのはvideoやcanvasなどの新しいタグ(要素)、Webアプリのプラットフォームとしての可能性、といったあたりだが、実はマークアップの変更点も大きい。菊池さんはHTML5が登場した背景の1つに「XHTMLは厳格すぎてエラーが含まれるWebサイトばかりになってしまったこと」への反省があるという。そこで「HTML5では寛容な書き方を許容している」と特徴を説明する。

羽田野太巳さん

 一方でHTML5は「セマンティックの徹底」と話すのは羽田野さん。ブロックレベル要素/インライン要素を廃止し、コンテンツモデルという新しい考え方に移行するHTML5では、section(節)、article(記事)、nav(ナビゲーション)など、従来はいずれもdivでマークアップしていた要素を使い分ける必要がある。また、見た目の制御に使われていたsmallやhrなどの要素も、それぞれ「脚注などに使われる細目用のテキスト」「文脈の区切り」のように意味を持つ要素へと役割が変わるのも従来のHTML/XHTMLとの違いだ。

 羽田野さんは、主な要素の意味・役割を説明し、実際のWebページにおけるHTML5でのマークアップの勘所を解説。サンプルページをHTML5でどうマークアップすべきか、参加者とともに考える簡単なワークショップを実施した。セッション自体は約1時間ほどとそれほど長くはなかったが、実例を交えた説明は分かりやすく、「HTML5はまったくの初めて」というWeb制作者にもうれしい勉強会になったはずだ。

実際のページのマークアップを考えるワークショップ

前へ 1 2 次へ

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

みんなが買ってる最新アイテムはコレだ!

Microsoft Windows 7 Home Premium 通常版 Service Pack 1 適用済み

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

マイクロソリューション Micro Solution Inc.

83人が購入

BenQ 24型 LCDワイドモニタ XL2420T

BenQ 24型 LCDワイドモニタ XL2420T

ベンキュージャパン

37,238円〜

3人が購入

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

20人が購入

メモリーカード 32GB (PCH-Z321J)

メモリーカード 32GB (PCH-Z321J)

ソニー・コンピュータエンタテインメント

7,772円〜

6人が購入

Amazon.co.jp