新年早々のっけから「あけましてHTML5」です。

記述文章は至って独白に偏っております。とてもいい加減な感想なり、思い込みなどで綴られておりますが、
自分用のメモ書きということで、ご了承願います。(とは言え、ご意見ご教示などいただければ幸いです。)

「カミナリさん危機一髪」(音声あり)

タイトルを英訳しようと思ったのですが「カミナリさん」だと「Thunderbolt guy」なんですかね?スペイン語だったらサンダーボルティットなんてのになるんだろうけど、英語ってそんなお茶目な表現あるのかな?

下の映像の表示ですが、IE以外(もちろんMacのIEは全くの対象外です)はHTML5の"video"要素で表示されるようになっています。私は手元にiPadしか持っておりませんが、ちゃんと表示されます。よって、多分ですがiPhone(iPod tuchも)や、もしかしたらAndroid端末、所謂スマートフォンで見れるかもしれません。(見れたら教えてくれると助かります。)でもってIEですが、IE9で"video"要素が利用できるのであれば「旧バージョンは対象外にして行ってけゴー!」と思っていたのでが、どう頑張っても私の環境(MacOS上のParallelsでWindows7を走らせてます)では再生できなかったので、JavaScriptでFLashムービーに指し換わるようにしてあります。

因に映像オブジェクトは70%の透明度をかけてあるので下の色が少し透けてます。今更ながら昨今のクライアントの高パフォーマンスを感じました。いい時代になったなあ。(涙)

もひとつ余計なこと、映像をラップしてあるディビジョンに縦サイズ360pxを指定してあります。そうしないと"video"要素の下に白く余分な領域が出てしまったからなのです。いい加減だなあと思っていたら、こんどFlashムービーに対してはその360pxをきっちり守ってくれて、お陰でインターフェース分が下にはみ出てしまっているようです。対応する気になってないので今のところそのままです。見苦しくてすみません。

"section"要素
"header"要素
"hgroup"要素

HTML5タグテスト(その1)これは"h1"要素です。

とりあえず今回、というか続けるつもりなので、このセクションでは、フォーム関係以外の新顔や変更のあった要素のテストをしてみました。デフォルトのままだと見づらいのでCSSかけかけてますが、HTML5のスッピンが気になる方はCSSはJavascriptでロードしてしているのでJavascriptを切ってください。

CSSも改善して自分用デフォルトセットを作るつもりなので、後々、様子が変わると思います。置き場所も変わると思います。
悪しからず。まあ、そんなに期待されないと思いますが…。

"h2"要素:見出しグループに使う"hgroup"タグなんて使うことあるのかなあ。

"h3"要素:見出しグループに使う"hgroup"タグなんて使うことあるのかなあ。

"h4"要素:見出しグループに使う"hgroup"タグなんて使うことあるのかなあ。

"h5"要素:見出しグループに使う"hgroup"タグなんて使うことあるのかなあ。
"h6"要素:見出しグループに使う"hgroup"タグなんて使うことあるのかなあ。
"article"要素です。

パラグラフ("p"タグね)は以前と同様の概念で良いようだけど、他には細っかいところで違いがあるようです。例えば"hr"の概念は「段落の区切り」になったようですが、"br"要素と同じように使えるかと思ったら、思いっ切し横線が引かれちゃいます。(下)泣き。


その上パラグラフ分けなきゃいないとは…、まあこれは以前の仕様を引きずったんですね。はいはい、カスタマイズして使えってことですね。

"mark"要素です。ハイライトしてマーキングしてくれます。 そう言えば"blink"要素ってまだあるのかな?お、HTML5で廃止されたそうです。あれ?FireFoxでブリンクしますね。


役に立ちそうなのはこの"figure"要素です。

こっちalt属性
MouseLocator用アイコン "figcaption"要素です。キャプション要素ができたなんて嬉しいじゃありませんか。


変わり種はルビ振ってくれる"ruby"要素です。謹賀新年きんがしんねん)、このブラウザは"rp"要素に対応してませんね今現在、MacOSX10.7上のSafari 5.1.2とChrome 16.0.912.63では使つか える。IE9.0.4ではフリガナがえらい離れるなあ。FireFox 9.0.1がダメなのね。CSSでコントロールできるのでしょうかね?

でもって、他のテキスト用要素です。

試しに上の各要素を同じ要素で入れ子にしてあります。無駄かなと思ったら「small」だけ応えてくれました。「小さい」が更に小さくなってますね。ありがとう!(え?)

な訳で連続入れ子テスト「ちいさい秋、ちいさい秋、ちいさい秋、みーつけた。」うーん変。CSSと同じ扱いかあ。間違いの元になるんでない?"i"要素でどんどん斜体の傾斜がきつくなったらおもろしかったんだけどなあ。大根おろし。(なんのこっちゃ)

IE9で確認して気が付いたけど、メイリオって斜体かからないの?とも、微妙なの?今更だったらごめんなさい。


あれ?何でもかんでもインライン(でよかったっけ?)要素になっちまったのですね。え?あれ?DreamweaverのプレビューがまだHTML5の対応していないのかなあ。要素毎に検証してられないので後々…。

"div"要素です。もしやブロック要素は"div"要素だけですか?"section"やら"articl"はインラインなんだ!今のところDreamweaverはそのようにのたまっていますね。

えーと、Dreamweaverで確認できた正調ブロック要素は"div"だけ、改行されるので一応ブロック要素と言って良いのは"p"要素と"h1〜6"要素、なぜか"address"要素、リスト系は大丈夫っぽです。これはブラウザベンダー毎に仕様の違う可能性があるなあ。まあ、セクション関係はCSSで全部"display:block"しちゃうけどね。いまは鬱陶しいので"hr"しときます。