animate.cssを読み込む

<link rel="stylesheet" href="animate.css" type="text/css">

今回はオンマウス時にアニメーション効果をつけようと思いますのでサンプルのソースコードは<a>を使ってください。
 

マークアップ

<a class="animated flash" href="#">flash</a>

class名でanimatedと使いたい効果の名前を指定するだけでOKです。でもせっかくなのでもう少し・・・。
 

オンマウス時に動くように設定

animate.cssの55行目近辺を見てもらうと下記のコードが見つかると思います。

.flash {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
}

これを

.flash:hover {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
}

に変えるだけ、非常に簡単ですね。flash以外の効果もオンマウスにしたい場合はこちらのページの効果一覧から好きな効果の名前抽出してanimate.cssの中身を書き換えてください。
 
サンプルページは全部a:hoverで設定しました。見ていただいた方はわかると思うんですが6割がたa:hoverではきついですね・・・。
対応ブラウザはもちろんIEは入ってません。IEをでもという方はModernizrをつかうという話なんですが色々調べてみてまともにIEで動いてくれるものがありませんでした。
たぶん僕が間違っているんだろうとは思うんですが、申し訳ありません。IEでの対処法が分かり次第記事を追加しようと思います。
 

HTML5で追加になったタグは次の通りです。 全部で31タグです。
 

追加タグ一覧

 
<section>とか<article>なんかは雰囲気でどう使えばいいか判るけど、<command>やら<progress>とかは概要を見ても、
 
「だから、どーいうことだってばよ！？」
 
ってなっちゃいますね・・・。HTML5を使い続けて行けば其の内判るようになるのかな??
 

概要変更タグ+属性

<a>タグ変更点１.「アンカー設定（同一ページ内リンク）」

XHTMLでアンカーを設定するときは以下のようにしていましたが、

<h1><a id="top" name="top">アンカー着地点</a></h1>
～中略～
<a href="#top">このページの先頭へ</a>

HTML5でコーディングする時はname属性を指定しなくてもOKとなりました

<h1><a id="top">アンカー着地点</a></h1>
～中略～
<a href="#top">このページの先頭へ</a>

<a>タグ変更点2.「target属性が非推奨じゃなくなった」

これは嬉しいですね!!

<a href="http://study.guidebook.jp/web_create/" target="_blank">別窓で開く</a>

<a>タグ変更点3.「複数のコンテンツを囲める様になった」

<section>
  <article>
    <a href="http://study.guidebook.jp/web_create/">
      <h1>記事のタイトル</h1>
      <div class="ph"><img alt="画像" src="○○.jpg" width="100" height="100" /></div>
      <div class="txt">ブロック要素の中に入れなくてもOK!!</div>
    </a>
  </article>
</section>

こいつは驚きの新機能ですね!!というか、そもそもHTML5には「ブロック」「インライン」というタグの振り分けじゃなく、もっと細分化されてXHTMLより遥かに文書構造がきちっとしたタグ分類の振り分けがされております。なので<div>やらを<a>で囲んでも文法エラーにならないのです。 とは言え、最初は違和感感じちゃいますね(笑)。
 

<address>タグ変更点.「コピーライトで使っちゃダメ」

僕はそんなにコピーライトを表記するのに<address>タグは使って無かったので個人的にはそんなに衝撃を受けないんですが、とりあえずXHTML以前の<address>タグのメジャーな使われ方として

<address>&copy; 2013 WEBCreate PRACTICE!!<address>

という感じでコピーライトをマークアップしていたと思うんですが、<address>タグの概要が、記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならWebサイト管理者への連絡先を意味するというように変更されました。じゃあ、今後コピーライトをマークアップするタグはどうしたらいいんじゃい!!って話になると思うのですが、単純に<p>であったりでも良いし<h4>あたりでも良いし、要は文書の位置づけ的な間違いがなければ何でも良いんだろうと思います。僕はもっぱら<small>を使用しています。

<small>&copy; 2013 WEBCreate PRACTICE!!</small>

<b>タグ変更点.「非推奨からの華麗なる復帰」

<b>タグはもともと太文字を表示する見た目だけに特化した要素でしたが、CSSとHTMLの役割上非推奨になっていたタグの一つです。ガラケーのサイトでは使われていましたがPCサイトの場合は単純に太くしたいならCSSのfont-weight、キーワードとしての重要性も持たせたいなら<strong>で、という感じで完璧に<b>という存在は消えかかってました。HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。実際に使う場合は

『strong要素・em要素・mark要素・cite要素』

などの使用用途が定義されている要素に適さない場合に使用することになります。
 

<dl>タグ変更点.「定義リスト→記述リストへ」

XHTMLの時は定義リストという概念で料金表などで使われていましたがHTML5から記述リストという概要に変更されました。従来の定義リストとしての使用も可能ですが、定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。すこし面倒な感じになってしまいました。

<dl>
  <dt>ジョン・レノン</dt>
  <dd>１９４０年１０月９日リヴァプール生まれ。</dd>
  <dt>ポール・マッカートニー</dt>
  <dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>

上記はHTML5では定義リストにならず記述リストになってしまいます。HTML5で定義リストにしたい場合は

<dl>
  <dt><dfn>ジョン・レノン</dfn></dt>
  <dd>１９４０年１０月９日リヴァプール生まれ。</dd>
  <dt><dfn>ポール・マッカートニー</dfn></dt>
  <dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>

としなければいけません。
 

<hr>タグ変更点.「単なる水平線→話題の区切り線」

hr要素は水平線を表す要素でしたが、HTML5からは意味的な段落を表すようになります。ただし、セクションの区切りに使用することはできませんので注意が必要です。たとえば<section>のなかで話題の切り替えがある時などに使われるようです。
 

<i>タグ変更点.「非推奨からの華麗なる復帰その2」

<i>タグはもともと斜体文字を表示する見た目だけに特化した要素でしたが、CSSとHTMLの役割上非推奨になっていたタグの一つです。ガラケーのサイトでは使われていましたがPCサイトの場合は単純に太くしたいならCSSのfont-style、キーワードとしての重要性も持たせたいなら<em>で、という感じで完璧に<i>という存在は消えかかってました。HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使用するみたいです。
 

<strong>タグ変更点.「強調→重要性という概要へ」

<strong>は強調の意味が無くなり重要性という意味合いに変更されました。強調を表したいテキストにはem要素を使うようにします。また、入れ子にすることで重要度を高めることができます。

<strong>
  おれはジャイ*ン、<strong>ガキ大将</strong>
</strong>

まだ何個か仕様が変わったタグがあるんですがとりあえず今回はこれくらいで・・・。
また機会があったら続きを書こうと思います。