こんにちは。森和恵です。
このところ告知していました自主開催の勉強会『HTML5とCSS3を書籍と学ぼう！』
の第一回目が無事に終わりました。
< http://r360studio.com/coworklabo/
>
無事に終わったのがうれしくて、Facebookにアップしたのがこの写真です。
< https://www.facebook.com/photo.php?fbid=760870870646111
>
アンケートなどはこれからなのですが、みなさん楽しんで勉強して頂けたようで一安心です。
今日は、どんなことをお話ししたのかの内容をここでまとめておきたいと思います。
このところ告知していました自主開催の勉強会『HTML5とCSS3を書籍と学ぼう！』
の第一回目が無事に終わりました。
< http://r360studio.com/coworklabo/
>
無事に終わったのがうれしくて、Facebookにアップしたのがこの写真です。
< https://www.facebook.com/photo.php?fbid=760870870646111
>
アンケートなどはこれからなのですが、みなさん楽しんで勉強して頂けたようで一安心です。
今日は、どんなことをお話ししたのかの内容をここでまとめておきたいと思います。
●「HTML5になって変わった部分」はざっくりとこんな感じ
以前のHTMLから、HTML5になって変わった部分をまず認識してもらおうと、第一回目は、そこをざっくりとまとめた内容にしました。
◆HTMLの基本構造
HTML5になって、下記の基本構造のタグに変化がでています。
以前に比べて無駄が省かれ、短くなっているのがポイントです。
---------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
---------------------------------
また、外部ファイルを読み込む要素の記述にも変化がありました。
下記のCSSファイルやJavaScriptファイルを読みこむコードを見てください。
---------------------------------
<link href="aaa.css" rel="stylesheet">
<script src="aa.js"></script>
---------------------------------
以前は、「type="text/css"」や「type="text/javascript"」のように、type属性でデータ種類を明確にしていましたが、それを省略してもOKになります。
◆img要素について
img要素を使う時には、かならず通る「alt属性」についての使い方に変化がでてきています。
まずは、下記のリンク画像のコード例を見てください。これは、よくある「ホーム」へ戻るボタンなのですが、画像の代替テキストの指定をalt属性ではなくtitle属性で指定しています。
---------------------------------
<a href="#"><img src="img/home.png" title="ホームへ戻る" /></a>
---------------------------------
最近のブラウザでは、画像のロールオーバー時のツールチップ（画像の上にマウスを重ねたときに表示されるポップアップメッセージ）が、alt属性の指定からtitle属性に変更されています。そのために、この例ではtitle属性で代替テキストを指定しています。
ツールチップを出す出さないという以前の話として、HTML5からは、alt属性の文法上の意味合いも変わっています。
alt属性は、画像の代替テキストという位置づけから、画像の置き換えとなるテキストという位置づけになっていて、もし、この例の「ホーム」へ戻るボタンにalt属性をつけるのであれば、下記のように「画像を目で見たときの説明」を記載しなくてはなりません。
---------------------------------
<a href="#"><img src="img/home.png" alt="ホームページへのリンクボタン。
文字は赤色で表示されていて、立体的な四角形で囲まれている。" title="ホームへ戻る" /></a>
---------------------------------
みなさんお気づきだと思いますが、この場合、ホームボタンを表示している「home.pnp」が、どんな画像なのかを説明する必要はありませんよね。それよりも「このボタンを押すとどうなるのか？」という動きを伝える方が大切です。
title属性は、画像のキャプション（タイトル・見出し）として使うことができるため「ホームへ戻る」というボタンの動きを説明するのであれば、title属性が適していることになります。加えて、HTML5から、必要のない場合はalt属性をつけなくてもよくなったので、title属性のみ指定すればOKということになるのです。
その他、alt属性の使い方について、細かく説明がされているので、一度、HTML5の文法的な説明を読んでおくことをお奨めします。
【 html5.jp：img 要素の文法説明 】
< http://www.html5.jp/tag/elements/img.html
>
◆意味や用途が変わった要素について
HTMｌ5になってから、細かくいろいろな要素に変更があり、受講されていた方からも驚きがでていました。
<dl><dt><dd>など、定義リストだった要素が用語説明リストに変わっています。
これによって、「何かの言葉を定義・解説する」だけだった用途が、「質問と回答」、「日付と説明」など、「キーワードと説明」というデータ全般の組み合わせで使えるようになりました。
<strong>が、「より強調」という意味から、「重要なテキスト」という意味に変わり、<em>からは、「強調」という意味が無くなって、読み上げる時のアクセントを強めてニュアンスを変更するという意味に変わっています。
<small>が、「文字のサイズを小さくする」という用途から、「注釈や細目を表す」という用途に変わっています。
これは、ほんの一例で、他にもありますので、一度確認しておきましょう。
HTML5になってから、このような変更を知らないまま使い続けてしまうと、コンテンツが間違った意味として伝わってしまうかもしれません。
◆HTML5の現状
まだ、正式にはリリースされていないHTML5の状況について、最後にお話しま
した。
これほど広く使われるようになっているのですが、じつは現在、HTML5は、W3Cから正式に勧告される前の「勧告候補」という状態です。今年の6月に、勧告候補の状態から、ひとつ前の「最終草案」の状態に後戻りしてしまい、本年度中の正式勧告は無理なのか？ と危ぶまれましたが、何とか年末までには予定通り勧告の運びとなりそうです。
【 W3CのHTML5仕様が勧告候補から最終草案へ戻り、秋には再び勧告候補へ 】
< http://www.publickey1.jp/blog/14/w3chtml5_1.html
>
【 HTML5 仕様が再び勧告候補 （Candidate Recommendation） に 】
< http://hyper-text.org/archives/2014/08/html5_candidate_recommendation.shtml
>
すでに、各メーカーのブラウザーには、HTML5が先行実装されているのですが、やはり勧告されないと落ち着かないものです。これで、ようやく安心し、大手を振ってHTML5を使えるようになりそうです。
●勉強会を終えて
ここまで、お話した内容は、先日の勉強会のほんの一部ですが、今回のカリキュラムで何をお伝えするのか？ については、すごく悩みました。
今回は、初心者の方ではなく、Web制作の経験者の方に向けての勉強会でしたので、「お話するレベルはちょうどいいのか？」や「進め方はこれでいいのか？」など、不安要素もたくさんありましたし…。
やはり、受講される方と教える内容のマッチングが取れてないと、お互い辛い時間を過ごしただけになりますので、そこには慎重になってしまいます。
冒頭にも書きましたが、みなさん楽しそうに受講されていて、話す内容にもうなずかれて、質問もたくさん頂けて、充実した時間を過ごしてもらえたのではないかと思います。結果オーライで、本当によかったです。
勉強会ですが、第二回目以降の受付をしていますので、これを読んでいるあなたもぜひ参加してお役立て頂き、またいろいろとご意見をいただけますと幸いです。
『HTML5とCSS3を書籍と学ぼう！』
< http://r360studio.com/coworklabo/
>
今後も、教える方も、教えられる方も、お互いがよい時間を過ごせるように頑張っていきたいと思います。
ひとりで悩んでスキルアップに行き詰まっている方にのお役に立てればなと思
います。
・・・さて、今回はここまで。次回こそは、勉強会の内容に合わせて、何かしらお役立ち情報をお届けする予定でいます。11月に実施するCSS編の内容をデジクリの読者さんに少しだけ見てもらえるような感じにしたいなと思います。11月になったらお会いしましょう！
※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg
>
【 森和恵 r360studio 〜 Web系インストラクター 〜 】
< site: http://r360studio.com
> < twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>
前回レポートしました、まにフェスで登壇した内容をまとめたページを公開しています。スライドやら、当日の写真などが見れます。ご興味ありましたら、ご覧くださいませ。(^^)
【「ふつうの人もコレは押さえたい とり残されないためのこれからのWeb制作の学び方、学び所 」フォローアップ】
< http://r360studio.com/manifes3/
>
以前のHTMLから、HTML5になって変わった部分をまず認識してもらおうと、第一回目は、そこをざっくりとまとめた内容にしました。
◆HTMLの基本構造
HTML5になって、下記の基本構造のタグに変化がでています。
以前に比べて無駄が省かれ、短くなっているのがポイントです。
---------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
---------------------------------
また、外部ファイルを読み込む要素の記述にも変化がありました。
下記のCSSファイルやJavaScriptファイルを読みこむコードを見てください。
---------------------------------
<link href="aaa.css" rel="stylesheet">
<script src="aa.js"></script>
---------------------------------
以前は、「type="text/css"」や「type="text/javascript"」のように、type属性でデータ種類を明確にしていましたが、それを省略してもOKになります。
◆img要素について
img要素を使う時には、かならず通る「alt属性」についての使い方に変化がでてきています。
まずは、下記のリンク画像のコード例を見てください。これは、よくある「ホーム」へ戻るボタンなのですが、画像の代替テキストの指定をalt属性ではなくtitle属性で指定しています。
---------------------------------
<a href="#"><img src="img/home.png" title="ホームへ戻る" /></a>
---------------------------------
最近のブラウザでは、画像のロールオーバー時のツールチップ（画像の上にマウスを重ねたときに表示されるポップアップメッセージ）が、alt属性の指定からtitle属性に変更されています。そのために、この例ではtitle属性で代替テキストを指定しています。
ツールチップを出す出さないという以前の話として、HTML5からは、alt属性の文法上の意味合いも変わっています。
alt属性は、画像の代替テキストという位置づけから、画像の置き換えとなるテキストという位置づけになっていて、もし、この例の「ホーム」へ戻るボタンにalt属性をつけるのであれば、下記のように「画像を目で見たときの説明」を記載しなくてはなりません。
---------------------------------
<a href="#"><img src="img/home.png" alt="ホームページへのリンクボタン。
文字は赤色で表示されていて、立体的な四角形で囲まれている。" title="ホームへ戻る" /></a>
---------------------------------
みなさんお気づきだと思いますが、この場合、ホームボタンを表示している「home.pnp」が、どんな画像なのかを説明する必要はありませんよね。それよりも「このボタンを押すとどうなるのか？」という動きを伝える方が大切です。
title属性は、画像のキャプション（タイトル・見出し）として使うことができるため「ホームへ戻る」というボタンの動きを説明するのであれば、title属性が適していることになります。加えて、HTML5から、必要のない場合はalt属性をつけなくてもよくなったので、title属性のみ指定すればOKということになるのです。
その他、alt属性の使い方について、細かく説明がされているので、一度、HTML5の文法的な説明を読んでおくことをお奨めします。
【 html5.jp：img 要素の文法説明 】
< http://www.html5.jp/tag/elements/img.html
>
◆意味や用途が変わった要素について
HTMｌ5になってから、細かくいろいろな要素に変更があり、受講されていた方からも驚きがでていました。
<dl><dt><dd>など、定義リストだった要素が用語説明リストに変わっています。
これによって、「何かの言葉を定義・解説する」だけだった用途が、「質問と回答」、「日付と説明」など、「キーワードと説明」というデータ全般の組み合わせで使えるようになりました。
<strong>が、「より強調」という意味から、「重要なテキスト」という意味に変わり、<em>からは、「強調」という意味が無くなって、読み上げる時のアクセントを強めてニュアンスを変更するという意味に変わっています。
<small>が、「文字のサイズを小さくする」という用途から、「注釈や細目を表す」という用途に変わっています。
これは、ほんの一例で、他にもありますので、一度確認しておきましょう。
HTML5になってから、このような変更を知らないまま使い続けてしまうと、コンテンツが間違った意味として伝わってしまうかもしれません。
◆HTML5の現状
まだ、正式にはリリースされていないHTML5の状況について、最後にお話しま
した。
これほど広く使われるようになっているのですが、じつは現在、HTML5は、W3Cから正式に勧告される前の「勧告候補」という状態です。今年の6月に、勧告候補の状態から、ひとつ前の「最終草案」の状態に後戻りしてしまい、本年度中の正式勧告は無理なのか？ と危ぶまれましたが、何とか年末までには予定通り勧告の運びとなりそうです。
【 W3CのHTML5仕様が勧告候補から最終草案へ戻り、秋には再び勧告候補へ 】
< http://www.publickey1.jp/blog/14/w3chtml5_1.html
>
【 HTML5 仕様が再び勧告候補 （Candidate Recommendation） に 】
< http://hyper-text.org/archives/2014/08/html5_candidate_recommendation.shtml
>
すでに、各メーカーのブラウザーには、HTML5が先行実装されているのですが、やはり勧告されないと落ち着かないものです。これで、ようやく安心し、大手を振ってHTML5を使えるようになりそうです。
●勉強会を終えて
ここまで、お話した内容は、先日の勉強会のほんの一部ですが、今回のカリキュラムで何をお伝えするのか？ については、すごく悩みました。
今回は、初心者の方ではなく、Web制作の経験者の方に向けての勉強会でしたので、「お話するレベルはちょうどいいのか？」や「進め方はこれでいいのか？」など、不安要素もたくさんありましたし…。
やはり、受講される方と教える内容のマッチングが取れてないと、お互い辛い時間を過ごしただけになりますので、そこには慎重になってしまいます。
冒頭にも書きましたが、みなさん楽しそうに受講されていて、話す内容にもうなずかれて、質問もたくさん頂けて、充実した時間を過ごしてもらえたのではないかと思います。結果オーライで、本当によかったです。
勉強会ですが、第二回目以降の受付をしていますので、これを読んでいるあなたもぜひ参加してお役立て頂き、またいろいろとご意見をいただけますと幸いです。
『HTML5とCSS3を書籍と学ぼう！』
< http://r360studio.com/coworklabo/
>
今後も、教える方も、教えられる方も、お互いがよい時間を過ごせるように頑張っていきたいと思います。
ひとりで悩んでスキルアップに行き詰まっている方にのお役に立てればなと思
います。
・・・さて、今回はここまで。次回こそは、勉強会の内容に合わせて、何かしらお役立ち情報をお届けする予定でいます。11月に実施するCSS編の内容をデジクリの読者さんに少しだけ見てもらえるような感じにしたいなと思います。11月になったらお会いしましょう！
※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg
>
【 森和恵 r360studio 〜 Web系インストラクター 〜 】
< site: http://r360studio.com
> < twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>
前回レポートしました、まにフェスで登壇した内容をまとめたページを公開しています。スライドやら、当日の写真などが見れます。ご興味ありましたら、ご覧くださいませ。(^^)
【「ふつうの人もコレは押さえたい とり残されないためのこれからのWeb制作の学び方、学び所 」フォローアップ】
< http://r360studio.com/manifes3/
>