【クロスメディアキーワード】HTML5とCSS3

掲載日:2016年10月3日
このエントリーをはてなブックマークに追加

今後のWeb コンテンツの方向性を示す規格であるHTML5 とCSS3 について、その技術の特徴と歴史的背景を確認する。

HTML5 登場の背景

「HTML(HyperText Markup Language)」は、標準化団体「W3C(World Wide Web Consortium)」により策定された、Web ページを記述するためのマークアップ言語である。「HTML5」は、1999 年に勧告となった「HTML4.01」の大幅な改定版であり、「XML(Extensible Markup Language)」の文法で記述する場合は、「XHTML5(Extensible HyperText Markup Language 5)」と呼ばれることもある。
「HTML5」では、文書のマークアップの改善とWebアプリケーションへの応用に向けた対応が図られている。
第一には、マルチメディアに関する仕様が追加されている。第二には、セマンティックWeb の実現を図るため、Web ページのスタイル(視覚的な表現)に関する幾つかのタグが削除され、「CSS(Cascading Style Sheet)」による集中的なスタイル記述といった仕様になっている。

対応Web ブラウザー

「HTML5」は2014 年に勧告となる見通しではあるが、2008 年以降に発表された主要なWeb ブラウザー(Internet Explorer、Firefox、Safari、Chrome、Opera など)は、「HTML5」に段階的に対応している。
「HTML5」対応のWeb ブラウザーは、後方互換性を保つために、既にWeb で公開されている「旧バージョン対応」や「誤った文法」で記述されたWeb ページに対し、一貫したふるまいで動作するように規定している。
これは、主要なWeb ブラウザーやWeb オーサリングツールによる「HTML5」への対応が、勧告時点で実現した場合でも、既に公開されている膨大なWebページの対応が、極めて長期間に渡ることが予想され、それを考慮した結果である。
「HTML5」では、プロプライエタリー(ソフトウェアの使用、改変、複製を法的かつ技術的な手法で制限)なプラグインとして提供されている「RIA(Rich Internet Applications)」のプラットフォーム(JavaFX、Adobe Flash、Silverlight など)と代替することを標榜しており、Web アプリケーションに対するプラットフォームとしての機能や、マルチメディア要素が追加されている。

HTML5 における変更点

「HTML5」における主な変更点は、次のとおりである。
・文書構造の表現を充実
・文書構造とスタイルを分離
・マルチメディアの実現(プロプライエタリーなプラグインを代替)
・使用されていなかった要素の廃止
文書構造の表現の充実を目的に、「header(ナビゲーションのグループ化)」「hgroup(セクションのヘッダー)」「section(セクション)」「footer(セクションのフッター)」「nav(ナビゲーションとなるセクション)」などの要素が追加される。この要素は、「EPUB」のようなhtml の応用分野において、重要なマークアップになることが予想される。
一方、文書構造とスタイルを分離するために、「basefont(基本フォント)」「center(中央揃え)」「font(フォント)」「strike(打ち消し線)」「frame(フレーム)」などの要素が削除され、CSSで集中的にコンテンツを表現する。マルチメディアを実現するために、「audio(オーディオの再生)」「video(ビデオの再生)」「canvas(グラフィックスの描画)」などといった要素が追加される。これらの要素により、「API(Application Programming Interface)」を介すことで、動作が可能となる。

CSS3

「CSS」は、文書構造とスタイルを分離するため、「HTML」や「XML」の要素に対してスタイル(フォント、色、文字間など)を指定する規格である。「HTML」の規格と同様に「W3C」により策定されている。
「CSS3(Cascading Style Sheets, level 3)」の仕様はドラフト段階であるが、「HTML5」と同様に、対応したWeb ブラウザーが既に普及している。
「CSS3」の仕様策定では、セレクター、テキスト、カラー、ボックスモデル、バックグランド、ボーダーなどの各仕様がモジュール単位になっている。モジュールごとに承認されるといった期待により、Web ブラウザー開発者には、モジュールごとに段階的に対応していく余裕が与えられている。

CSS3 における追加機能

「CSS3」における主な変更点は、次のとおりである。
・「XPath」のように文書構造を指定できるセレクター
・テキストのハイフネーション、空白文字、揃えについての指定
・カーニングの効果とドロップキャップの揃えについての指定
・ヘッダー、フッター、ページ番号、脚注、相互参照についての指定
・複数コラム(段組み)のレイアウトについての指定
・日本語表示のルビ(横書き、縦書き)
セレクターでは、「XPath(XML Path Language)」のような表現で属性の値を指定し、その要素の内容表示を変更できることから、文書構造とスタイルの分離を可能にしている。ただし、内容の文字列を指定することはできない。指定する場合は、HTML により記述されたコンテンツデータに対する「XSL(Extensible Stylesheet Language)」変換やスクリプトとの組み合わせによる対応が必要となる。

JAGAT CS部
Jagat info 2014年4月号より転載