タグ「HTML5」
HTML5の技術的考察
はじめに
2014年10月末、HTMLの最新版である「HTML5」が、遂にというか、やっとというか、正式な仕様として確定されました。HTML5に対しては、4年ぐらい前から関心を持ち、その技術を試してみる目的で、2010年10月に「音の無いアルバム」というWebサイトを制作しました。また、その制作過程で得た知識を基に、同サイトに「HTML5の技術・政治的考察」という記事も掲載しました。それから4年経ち、HTML5の仕様も部分的に改訂されながら策定が進んだため、以前の記事に加筆・修正し、2014年版として作り直してみました。それが、本記事です。
HTML5がやっと日の目を見るに至ったとはいえ、2010年と比べ現在は、せっかく政治の表舞台から掃き捨てられたと思っていた安倍晋三が首相に返り咲き、また中国・韓国を念頭に民族主義や排外主義を振りかざす連中が厚顔無恥にも闊歩する、見るも無残な時代状況に陥っていますが、当然、本記事の読者としては、そういった輩を想定してはいません。いかなる科学技術も、政治に対して中立であることはなく、何らかの形で政治を媒介するものである以上、主要にはWeb技術を扱っている本記事も、何らかの政治的傾向の下にあることは間違いありません。なんて、回りくどいことを言わずとも、本記事は左翼が書いたのだから、もしも保守や右翼が（ついでにスターリニストも）本記事を利用するなんてことがあるとしたら、そうした連中の価値観からしても、恥知らずの誹りを免れないでしょう。というわけで、民族だの国益だののくだらなさ、そして金儲けの卑劣さや恥ずかしさ（←記事本文の中では、ここにだけstrong要素を使っています）を知っている、そんな心の美しい方々に向けて、本記事は幅広く技術的門戸を開いています。
なお、演習用として利用可能なHTMLや画像ファイルは、「krzm_html5.zip」にまとめてアップロードしてあります。この記事で紹介しているコーディング内容は、krzm_html5.zip内のchapter02_test.htmもしくはcanvas.htmファイルで試すことができます。
HTML5
HTML5の仕様が、「W3C勧告」として確定しました。
HTML5
A vocabulary and associated APIs for HTML and XHTML
W3C Recommendation 28 October 2014
IE11と縦組み・ルビ・組数字
概要
Microsoft社が、Internet Explorerの開発者向けに情報提供を行っている「IEBlog」によると、2014年6月のInternet Explorer 11（以下IE11）に対するアップデートで、縦組みテキストに対する改良が行われたそうです。
Vertical writing mode improvements in IE11
また、その効果を確認するデモが、IE Test Driveサイトにも設けられています。
Vertical Writing Mode Improvements
これらの情報を頼りに、私もIE11で縦組み、ルビ、そして組数字（縦中横）を実際のサンプルで試してみました。この記事内に、そのサンプルテキストを6つ掲載していますが、これらを期待どおりに表示させるには、当然ながら、2014年6月のアップデートが適用されたIE11が必要です。また、テキストにはWindows 8.1でOSに添付されるようになった、游ゴシック／游明朝フォントを使用しているので、Windows 8.1以降での閲覧を推奨します。
なお、縦組み・ルビ・組数字にFirefoxは全く対応していないので、このブラウザーでは全くお話になりません。
知の好循環
HTML5でHTMLページを記述する際、新しく追加された要素に対応していない、旧バージョンのブラウザーへの対応が必要になります。
新しい要素、すなわち旧いブラウザーにとっては「未知の要素」ですが、少なくともタグとして< >を付けておけば、「何かの要素なんだね、僕にはわからないけど」とブラウザーは好意的に解釈してくれるので、基本的には表示に影響を与えません。ただし、インライン表示で扱われるので、たとえばsection要素のようにブロックレベル表示であるべきものには、スタイルシートで指定しなければなりません。
一方、Internet Explorer 8以下は、「僕にはわからないから迷っちゃうな」という感じで、未知の要素の開始タグと終了タグを、別個の空要素として閉じてしまいます。section要素であれば、以下のような結果になり、囲んであった要素内容は外に放り出されてしまいます。
<section />
要素内容
</section />
というのが、HTML5での注意点なのですが、この記事の本題は、そこにはありません。
SVGファイルの利用
はじめに
当サイトでも各所に使用しているのが、SVGという形式の画像ファイルです。
SVGは、W3CがWeb用の標準画像形式として仕様を定めているもので、Internet Explorerの場合は9以上、他のブラウザーは最新版であればすべて表示可能です。そして、いわゆる「HTML5」の括りの中に、SVGも組み込まれています。その意味では、今後の流行りの画像形式かもしれません。
ナビゲーションメニューの動的効果
先週、とある授業を行った際に、約1年ぶりにWordPressの構造やテンプレート等の作り方を調べ直し、少しだけWordPressサイトへの関心が復活しました。そこで、当サイトトップページのデザインも、実験ついでに、若干、変更してみました。主として変更を加えたものは、サイトのナビゲーションメニューです。
従来は、ヘッダー画像の下に、他のページと同じように黒い棒状のデザインで、横並びにメニューを配置していましたが、これをヘッダー画像の上に分散して配置してみました。