HTML5KARUTAロゴ

「HTML5カルタ」で覚えるHTML5の108つのタグ

動画が表示されない場合は
html5jのYoutubeチャンネルへ!

Created by
WEBCRE8.jp
四畳半ワークス

Supported by
CodeIQ
アシアル株式会社
プライム・ストラテジー株式会社
株式会社ラテール

札一覧

html

HTML自体のタグ

ルート要素

manifest属性でキャッシュさせるファイルを定義できる

head

ページ自体のメタ情報をまとめるタグ

ドキュメントのメタデータ

例外を除きtitle要素が一つだけ必須

title

ページ自体の題名のタグ

ドキュメントのメタデータ

HTMLメールなどでは件名が代わりになるので省略可能

link

外部ファイルとのリンクのタグ

ドキュメントのメタデータ

type="text/css"は省略可能

meta

ページ自体のメタ情報のタグ

ドキュメントのメタデータ

title, base, link, style, script要素で表現できない全てのメタ情報を表す

style

主にCSSをページ内に書き込むタグ

ドキュメントのメタデータ

scoped属性で親要素内のみにCSSを適用できる

script

主にJavaScriptをページに埋め込むタグ

スクリプティング

type属性は"text/javascript"のときのみ省略可能。JavaScript以外も指定できる

body

ブラウザに表示する内容全体のタグ

セクション

background,vlinkなどの属性は廃止されている

h1

見出しのタグ1

セクション

主にセクショニング・ルートの見出しとして使われる

p

文章の段落のタグ

コンテンツのグループ化

会話文にも使われる。フレージング・コンテンツしか入れることが出来ない

blockquote

引用するコンテンツのタグ

コンテンツのグループ化

cite属性にURLを指定することでどこから引用されたコンテンツかを示せる

ol

順番の決まったリストのタグ

コンテンツのグループ化

reversed属性で逆順のリストも作れる。CSS3でマーカーの自由度が増している

ul

順番の決まってないリストのタグ

コンテンツのグループ化

type属性は廃止された。順不同リストではあるがCSSで番号を振ることもできる

li

リストの内容のタグ

コンテンツのグループ化

ol,ul要素以外にmenu要素の子にもなる

dl

項目に関する記述リストのタグ

コンテンツのグループ化

単語の定義以外にも単なる項目への説明にも使えるようになった

dt

項目に関する記述リストの項目のタグ

コンテンツのグループ化

用語の定義などに使う場合は子要素にdfn要素を置く

dd

項目に関する記述リストの記述のタグ

コンテンツのグループ化

p要素と違い、フロー・コンテンツをなんでも置ける

div

特定の意味を持たないブロックのタグ

コンテンツのグループ化

レイアウトのためだけに用いる。div=division(分割・区画)の意

a

テキストや画像に埋め込むリンクのタグ

テキストレベルの意味づけ

divなどのフロー・コンテンツも入れられる

strong

文章内の重要性の高いテキストのタグ

テキストレベルの意味づけ

strong要素を入れ子にして重要性のレベルも明示できる

span

文章内の特定の意味を持たないテキストのタグ

テキストレベルの意味づけ

何かの意味を持つ他のフレージング・コンテンツに該当しない場合のみ使う

br

文章内の改行のタグ

テキストレベルの意味づけ

詩など、改行がコンテンツの一部となる場合に使う

img

写真や画像のタグ

組込コンテンツ

figcaption要素を持つfigure要素の子の場合などでalt属性を省略できる

table

表組み自体のタグ

テーブルデータ

border属性やcaption要素を持つことでレイアウト目的でないことを示すことが出来る

tr

表組み内の行のタグ

テーブルデータ

デフォルトでunicode-bidi:isolate(文章方向の独立)が設定されている

td

表組み内の行の内容のタグ

テーブルデータ

セクショニング・ルートである為内容にセクションがある場合見出しが必要

th

表組み内の行の見出しのタグ

テーブルデータ

使用することでレイアウト目的のtable要素でないことを示すことが出来る

section

見出しと内容をまとめるセクションのタグ

セクション

見出しのある段落(章や節)というような意味なので見出しはほぼ必須

nav

リンクをまとめるセクションのタグ

セクション

含まれるリンクがページ内か通常のリンクか、主要かそうでないかを問わず使用出来る

article

単独で扱える記事のようなセクションのタグ

セクション

ブログの記事や、ページの本文とその見出しが入る

aside

本筋から逸れる解説などのセクションのタグ

セクション

「関連する記事の紹介」のような補助的なコンテンツや、広告などにも使える

header

コンテンツのヘッダー情報をまとめるタグ

セクション

見出し、リード、目次、ナビゲーションなどを入れる

footer

コンテンツのフッター情報をまとめるタグ

セクション

address、フッターリンク、補足情報などを入れる

address

コンテンツの作者の連絡先のタグ

セクション

ルートまたは記事等、親要素についての作者の連絡先を示す

figure

本文を補足するコンテンツのタグ

コンテンツのグループ化

図表、画像、コード等、どのフロー・コンテンツも入れられる

figcaption

figureタグにつけるキャプションのタグ

コンテンツのグループ化

figureの内容がいくつあってもキャプションは一つになる

このサイトの使い方

2012年現在、W3Cで正式に採用されているHTML5のタグは108つあります。HTML5KARUTAは、このHTML5のタグを日本古来から伝わる伝統的な遊戯、カルタとして遊びながら覚えようというものです。

HTML5KARUTAサイト単体での遊び方

パソコンの場合

このページの殆どの機能がご利用できます。

札一覧にはHTML5の36つのタグの意味が書かれています。マウスを合わせるとそのタグの名前が分かります。

タブレットの場合

このページの殆どの機能がご利用できます。

札一覧にはHTML5の36つのタグの意味が書かれています。タップするとそのタグの名前が分かります。

スマートフォンの場合

このページの殆どの機能がご利用できます。

札一覧にはHTML5の36つのタグの意味が書かれています。タップするとそのタグの名前が分かります。

スマートフォンでアクセスした場合に限り、札一覧では札が一枚ずつ表示されます。HTML5KARUTAのPDF版で遊ぶ場合にご利用ください。

フィーチャーフォン(普通の携帯)の場合

このページの一部の機能がご利用できます。

札一覧にはHTML5の36つのタグの名前と意味が書かれています。簡単なリファレンスサイトとしてご利用できます。

HTML5KARUTAを使った遊び方

まず購入またはダウンロードからHTML5KARUTAを手に入れてください。

ダウンロードできるPDF版の絵札とwebサイトの札一覧にある読み札は、108あるタグの中からHTML5のページにおいて一般的なタグだけを選んだ36枚です。これだけで一通りHTML5のタグを網羅しています。

購入できるHTML5KARUTAは、初級セット中級セット上級セットの三つがあります。これらは裏面の色が違いますが、参加者の人数やHTML5の理解度、プレイ時間に合わせてセットを合わせたりすることもできます。

PDF版
初級セット中級セットからHTMLの代表的なタグを36個集めたもの
初級セット
HTML4、XHTMLのころからそのまま受け継がれたタグを36個集めたもの
中級セット
HTML5から追加されたタグ、よく使われるタグを36個集めたもの
上級セット
HTML5になって意味の変化したタグ、あまり使わないタグを37個集めたもの

HTML5KARUTAはタグについて学びながらプレイするため、1セットは36枚と普通のカルタより少なめになっています。

遊び方

  1. ゲームの参加者の中から、読み札を読む係を一人決めます
  2. タグの名前が書かれた絵札をバラバラに床に置き、それを参加者全員で輪になって囲みます
  3. 係の人が一枚ずつ、読み札を読み上げます。それがどのタグの事を言っているか分かった人は分かった時点でその札を取ってください。最初に札に手を触れた人の取り札になります
  4. 3を場のカードがなくなるまで繰り返します。最後の一枚だけは、読み上げが終わった後で一番最初に触った人の取り札になります
  5. 全ての札がなくなった時、一番札を取っていた参加者の勝ちです

普通の遊び方に飽きたら

他にもHTML5KARUTAには次の様な使い方があります。

得点制カルタ
初級セットのタグを1点、中級セットを2点、上級セットを3点としてかるたをプレイします。あまり使わないタグを覚える練習になるでしょう。
神経衰弱
裏返しにした読み札と絵札を合わせる72枚セットの神経衰弱が出来ます。
単語帳
1対1で、読み札を読んでもらい、正解のタグがなんなのかを当てます。反対に、意味を説明できるかのチェックもできるでしょう。

こういうシーンにどうぞ

HTML5KARUTAを使って遊ぶなら、こういったシーンにオススメです。

  • 勉強会、セミナー後の余興に
  • 学校、会社での休憩時間に
  • web制作者同士の話題づくりに

名刺サイズなので、名刺入れに好きなタグをしのばせたりも出来ます★

購入またはダウンロード

HTML5KARUTAを遊ぶには二つの方法があります。

PDF版HTML5KARUTAをダウンロードする

HTML5のコーディングにおいてよく使われる36のタグを選び、その絵札をPDF形式で配布しています。これを印刷し、厚紙などに貼りつけることでカルタを遊ぶことができます。なお、読み札にはこのページの札一覧をお使いください。スマートフォンでのご利用が便利です。

html5karuta-pdf.zip
ダウンロードする

ダウンロードする場合は上のボタンを押してください。PDFファイルでダウンロードできます。購入する場合はHTML5KARUTAを購入するの項に進んでください。

HTML5KARUTAを購入する

HTML5KARUTAには、HTML5以前から変わらず残っているタグで構成される初級セット、HTML5でコーディングをするとき使う事の多いタグで構成される中級セット、あまり使われることのないタグや解釈の変わったタグで構成される上級セットがあります。これらのセットをそれぞれ購入することができます。

各セットは名刺サイズ、36つのタグの読み札と絵札が一枚づつ、計72枚のセットです。

※近日中に購入受付を開始致します。販売スタートは@webcre8から、またはWEBCRE8.jpのブログ記事等で告知しますので、情報を知りたい方はフォローもしくはRSS登録を宜しくお願いします。

HTML5KARUTA
初級セット

HTML5KARUTA初級セットのイメージ画像

1980(税込)

HTML5KARUTA初級セット
購入ページヘ

HTML5KARUTA
中級セット

HTML5KARUTA中級セットのイメージ画像

1980(税込)

HTML5KARUTA中級セット
購入ページヘ

HTML5KARUTA
上級セット

HTML5KARUTA上級セットのイメージ画像

1980(税込)

HTML5KARUTA上級セット
購入ページヘ

イベント等のお知らせ

2013年1月6日(日)新春!!HTML5KARUTA大会

来る2013年1月6日(日)、このカルタを使ったカルタ大会を行います
カルタ大会は13:00から16:00までの間、各コワーキングスペースで行われます。

まずカルタを使って軽くHTML5のタグにはどんなものがあるのか、これまでのHTMLとはどう変わったのか等の解説を致します。その後軽い練習の後、皆さんでカルタを遊びましょう。

HTML5がよくわからない人には解説をしながらゲームを進めますので、お気軽に遊びに来てください。ゲームの勝者には各スペースごとにHTML5関連グッズなどの賞品をご用意させて頂いております★
当日はどうぞ着物を着てきたりして、お正月イベントとしてお楽しみください!場所によっては懇親会も行われる予定です。

Twitterでのハッシュタグは#HTML5KARUTAです。

イベント内容

日時
2013年1月6日(日)13:00~16:00
場所
東京
下北沢 オープンソースCafe
イベントページはHTML5 KARUTA 大会 (仮) | Facebook
渋谷 JELLY JELLY CAFE
イベントページは新春!!HTML5KARUTA大会 @渋谷 JellyJellyCafe on Zusaar
高円寺 こけむさズ
イベントページは新春!!HTML5KARUTA大会 @高円寺 こけむさズ on Zusaar
茅場町 コワーキングスペース茅場町 Co-Edo(コエド)
イベントページは新春!!HTML5KARUTA大会 @ Co-Edo(コエド) | Facebook
神奈川
横浜 タネマキ
イベントページは新春!!HTML5KARUTA大会 @横浜 タネマキ on Zusaar
埼玉
大宮 7F
イベントページは新春!!HTML5KARUTA大会 @大宮 7F on Zusaar
大阪
十三 JUSO Coworking
イベントページは新春!!HTML5KARUTA大会 @十三 JUSO Coworking on Zusaar
愛知
伏見 MYCAFE
イベントページは新春!!HTML5KARUTA大会 @ on Zusaar
福岡
福岡 Future Studio 雁林
イベントページは新春!! HTML5KARUTA大会 @福岡 Future Studio 雁林 #HTML5KARUTA | Facebook
北海道
札幌 Coworking Cafe 36
イベントページは新春!!HTML5KARUTA大会 @札幌 Coworking Cafe 36 #HTML5KARUTA : ATND

その他、この日に同じようにイベントを行いたいという団体やスペースがございましたらmail@webcre8.jpまたは@webcre8までご連絡ください。

参加費
1500円程度(コワーキングスペースの利用料を含みます)
着物を着てご来場頂いた方は500円割引き致します。その際、イベントの参加表明時に「着物で参加します」と宣言して頂けると幸いです。
懇親会
イベントの後の懇親会などは各スペースによりますので実際の各イベント参加ページを御覧ください。
賞品
各コワーキングスペース様からご提供頂きましたグッズや、HTML5のTシャツ、ステッカー、ピンバッジ、お好きなカルタ一つ、またweb制作に関する書籍などをご用意させて頂いております。
イベント運営(司会、札読み係)
オープンソースCafe
@yando
@cognitom
JELLY JELLY CAFE
@webcre8
@daybreak_dawn
こけむさズ
@kojika17
@poyosi
Co-Edo
@mon_sat
タネマキ
@barchin
@uetsuhara
@ginpei_jp
@Bamboo_C
7F
@anticyborg
@xxeimixx
JUSO Coworking
@HissyNC
MYCAFE
@kiyotchi
@girigiribauer
Future Studio 雁林
@ksmzdsk
Coworking Cafe 36
@mamiline6
@komomoaichi

その他わからないことなどありましたらTwitterの@webcre8または@glatyou、メールではmail@webcre8.jpまでご連絡ください。

スポンサー募集

HTML5KARUTAは個人の完全な自主制作です。もしこのプロジェクト自体にご興味があり、かつ一緒に盛り上げていきたいという意志をお持ちの方がおられましたらmail@webcre8.jpまでご連絡ください。

当イベントはweb制作に興味を持つ方を対象としております。スポンサーになることをご検討頂ける方に対しましてこちらで可能な貢献の仕方としては以下になります。

  • 会場でのグッズや書籍の販売、頒布
  • カルタに広告を同梱する
  • イベント会場での告知(担当者様がいずれかの会場にご来場なさる場合)
  • スポンサーとしてwebサイトで告知

ご協力頂きたいものは以下になります。

  • 大会の賞品(web制作やHTML5に関係のあるもの)
  • カルタの作成代金
  • 当日の懇親会でのケータリング等

以上何卒よろしくお願い致します。とりあえず、Twitterやメールなどでもお気軽にお声がけください。

スポンサー様紹介 - Forkwell

Forkwell

エンジニアとクリエイターがスキルを軸に、仲間や仕事に出会うためのサービスForkwell様にスポンサーとしてご協力頂いております。