iA

多摩美 - メディアリテラシー 2010
HTML5+CSS3 入門


Webを記述する言語の標準の現状

昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。

  • HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1
  • CSS (文書の体裁・デザインを指定する言語) – CSS 2

しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。

HTML (Webサイトの記述言語) の標準化巡る闘争の歴史

HTML年表AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] より

HTMLを巡る標準化の動きは、様々な組織や企業が、それぞれの思惑を抱えながら覇権争いをくりひろげた闘争の歴史でもあります。Webブラウザの開発者、ソフトウェアメーカー、MicrosoftやAppleなどのOSの開発会社、標準化団体などが、それぞれの立場で標準を主張してきました。その結果、HTMLのバージョンの歴史はとても複雑怪奇なものとなっています。

長年にわたる闘争の末、数年前にようやくHTMLの標準は落ちつくかと思われました(XHTML + CSS)。しかしながら、現実は予想に反してXHTML 1.0という当初の規格は思うように普及せず、その後継として計画されてたXHTML 2の標準化も途中で頓挫してしまい、最終的に標準化のためのワーキンググループは解散するという事態になってしまいました。

そのため、標準化を巡る流れはおおきく方向転換を余技なくされ、そこでいままでの標準化団体とは別にブラウザのベンター(Apple, Mozilla, Opera, Google) 達が新たな標準化を押しすすめるようになり、その結果XHTML 2.0に代わるものとして提案された規格が、HTML 5 です。

現在 HTML 5 は2012年の勧告(一般に向けて仕様を公開する)に向けて、標準化の仕様策定の作業が続けられています。その機能は徐々に現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での HTML 5 の進行状況は、◎Chrome、◎Safari、○Firefox、○Opera、△IE8、(× IE6) といったところです。

HTML 5 とは何なのか?

では、HTML 5とは何なのでしょうか。その機能は多岐にわたります。下記の資料がその全貌をわかりやすく解説しているので、参考にしてみましょう。

HTML 5 の特徴を要約すると、だいたい以下のような感じになるでしょう。

  • Webアプリケーションを実現するための、機能の拡張
  • HTMLに、新しい要素や属性の導入
  • ローカルの記憶領域、DBとの連携強化
  • UIの向上 (ドラッグ&ドロップ、FORMの拡張)
  • 地図情報
  • オーディオ、ビデオの取り扱い
  • キャンバス (図形の描画)
  • CSS (文書の要素のデザイン機能) の大幅な拡張

これらの機能の追加により、今まではHTML文書単体では不可能であった様々なリッチなユーザ体験が可能となることでしょう。

HTML 5 になると、古い記述(XHTML 1.0)が使えなくなるわけではない

では、HTML 5 を導入すると、以前仕様していた古い記述方法を仕様することはできなくなるのでしょうか。実は、そのようなことはありません。HTML 5 はいままで普及していた書式、HTML 4.xや、XHTML 1.0 の書式を包括するより広い範囲での記述の仕様となります。いままでの古い記述の方法もまた、HTML 5 に含まれているというイメージです。下記のマンガがこの概念をわかりやすく解説しています。

今学期のイメージリテラシーでのHTMLの方針

以上の点を踏まえて、この授業では以下のような基準で「正しい」HTMLというものを決定していきます。

  • 基本的な文法は、現状普及している XHTML 1 に準拠する。
  • ただし、現在でも使用可能な機能に関しては、積極的に HTML 5 と CSS 3 に関するトピックスも扱っていく

現在のWebブラウザに配慮しつつ、将来を見据えた標準についても同時に学んでいこうというのが、この授業での基準となります。

HTML 5 の新要素、文書の構造を示すための要素を使用する

HTML 5 の導入として、HTML 5 から導入された数多くの新機能の中から、HTML 5 から加わったページ全体の構造をマークアップする新要素を使用してみましょう。

これまでのHTMLでは、ヘッダーやフッター、サイドメニューなどのページ全体のアウトラインを画面上で実現しようとした場合、古くはtable要素、CSS2によってある程度レイアウトができるようになると、div要素にidやclass属性としてheaderやfooterなどと命名してマークアップしていました。これらはページの中で全く違う役割を果たしているにもかかわらず、全て同じdiv (tableの場合は、trやtd) 要素でマークアップしています。HTML 5 以前にはこれ以外に方法がなかったためです。

しかし、HTTML 5 からは、最初からページ内での役割を明示した、論理区域を区別するための新要素が導入されました。ヘッダーやフッター、記事など文書を意味によって区分していく際に、tableやdivで区分するのではなく、意味に応じて新規の構造化要素の使用が奨励されています。またページ制作者にとっても新しい構造化要素を使用することで、非常にシンプルにページ全体のアウトラインを行うことができるようになり、とても便利になりました。

実際に新要素を使用しながら、HTML 5 の利便性を体感してみましょう。

ページ全体の構成

要素の理解のために、今回は典型的なヘッダーとフッターをもった2コラムのレイアウトを想定してページを作成します。ヘッダーとフッターに挟まれた左側のコラムにはナビゲーションのメニューが、右側にはメインのコンテンツが入り、メインのコンテンツの中には複数の記事が格納されるものとします。このページの構造を簡単に図示すると下記のようになります。

この構造を今までのXHTML 1 + CSS2 によってレイアウトしようとした場合、div要素で範囲を分割し、それぞれのdiv要素の中身にclass属性もしくはid属性をつけることでCSSから参照する方法が一般的でしょう。図にすると下記のようなイメージです。

しかし、div要素は複数の要素をまとめて、ページを分割するという意味はあるものの、それ事態に「ヘッダー」や「フッター」「サイドバー」といったレイアウトに相当する意味は本来付与されていません。また、実際にCSS2でブラウザ上で崩れないようにレイアウトするには、さらに複数のdiv要素を包括するためのdiv要素が必要になることもあり、気付くとdiv要素が幾重にも入れ子上に複雑に配置されていることも少なくありません。

そうした問題を解決するのが HTML 5 から導入された構造化のための新要素になります。

HTML 5 から導入された構造化要素

HTML 5 から導入されたページの構造を指定する要素には下記のものがあります。

  • section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの。
  • header: ページに表示されるページ・ヘッダー。head 要素と同じではありません。
  • footer: 細かい文字での説明が入るページ・フッター。Email・メッセージの署名。
  • nav: 他のページへのリンクの集まり。
  • article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー。

これらの要素を利用して、先程のレイアウトを整理すると下記のようになります。

HTML 5 ではこれらの名称をdiv要素などの属性としてではなく、要素名として使用可能となります。このことは、HTMLページ自体にレイアウト構造の意味を指定しているという点で重要です。それぞれのサイトで独自に命名されたクラス名やid名ではなく、標準化された要素名としてそのセクションの役割を類推できるということは、様々なメディアや検索エンジンなどからページを参照する際に重要な役割を果たします。

※ ただし、ページのコンテンツを区切るためにsection要素を使用すべきかどうかという部分には、議論があります。詳しくは、「section 要素 – html5doctor – HTML5.JP」の記事を参照してください。

実際に HTML 5 の構造化要素を試してみる

では早速 HTML 5 の構造化要素を試してみましょう。サンプルとして以下の簡単なHTMLファイルで試してみることにしましょう。サンプルとして下記のようなシンプルなHTMLファイルを用意しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML5とCSS3によるページサンプル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>HTML5 + CSS3, Layout Sample</h1>
    <h2>Media Literacy 2010, Tama Art University</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
    <h1>このサイトについて</h1>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h2>HTML5とCSS3による豊かな表現</h2>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h1>さらに別の記事</h1>
    <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
    <h1>Navigation</h1>
    <ul>
      <li><a href="#">example 1 </a></li>
      <li><a href="#">example 2 </a></li>
      <li><a href="#">example 3 </a></li>
      <li><a href="#">example 4 </a></li>
      <li><a href="#">example 5 </a></li>
      <li><a href="#">example 6 </a></li>
      <li><a href="#">example 7 </a></li>
      <li><a href="#">example 8 </a></li>
    </ul>
    <p>This site is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 License</a></p>
  </body>
</html>

このHTMLファイルの意味構造を整理すると以下のようにまとめられるでしょう。

  • ヘッダー
    • 大見出し h1
    • 中見出し h2
    • ヘッダーメニュー ul, li
  • セクション
    • 記事
      • 大見出し h1
      • 段落 p
      • 中見出し h2
      • 段落 p
    • 記事
      • 大見出し h1
      • 段落 p
  • ナビゲーション
    • 大見出し h1
    • ナビゲーションメニュー ul, li
  • フッター
    • 段落

このHTMLに先程学んだ構造化要素を意味の構造に準拠してマークアップしてきます。使用する要素は、header, hgroup, section, article, nav, fotter になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML5とCSS3によるページサンプル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <header>
      <hgroup>
        <h1>HTML5 + CSS3, Layout Sample</h1>
        <h2>Media Literacy 2010, Tama Art University</h2>
      </hgroup>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </header>
    <section>
      <article>
        <h1>このサイトについて</h1>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
        <h2>HTML5とCSS3による豊かな表現</h2>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
      </article>
      <article>
        <h1>さらに別の記事</h1>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
      </article>
    </section>
    <nav>
      <h1>Navigation</h1>
      <ul>
        <li><a href="#">example 1 </a></li>
        <li><a href="#">example 2 </a></li>
        <li><a href="#">example 3 </a></li>
        <li><a href="#">example 4 </a></li>
        <li><a href="#">example 5 </a></li>
        <li><a href="#">example 6 </a></li>
        <li><a href="#">example 7 </a></li>
        <li><a href="#">example 8 </a></li>
      </ul>
    </nav>
    <footer>
      <p>This site is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 License</a></p>
    </footer>
  </body>
</html>

しかし実際にこのHTMLファイルをブラウザから開いてみても、想定したレイアウト(ヘッダーやフッター、ナビゲーション)にはなっていません。実は、HTML 5 の構造化要素は文章の区分構造をマークアップするだけで、そのレイアウトの具体的な方法を指示しているわけではありません。この意味構造を受けて、どのようにレイアウトするのかは、いままでのHTMLと同様にスタイルシートを使用してレイアウトの方法や視覚的な効果を指定していくことになります。

ブラウザで開く

CSS3を使用してレイアウトする

まず、head要素内に外部スタイルシートへのリンクを指定します。style.cssというファイルにスタイルを書いていくこととします。

また、現状ではInternet Explorerの HTML 5 への対応状況があまり良くありません(対応していない要素がほとんど)。このサンプルでは、IE対策のために、html5shimというIEをHTML 5に対応させるためのJavascript (html5.js) を利用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML5とCSS3によるページサンプル</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    <link rel="stylesheet" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <!-- 以下省略 -->

次にこのHTML 5のレイアウトを行うCSSを記述します。全体の幅を960pxとして、ヘッダー(header要素)とフッター(footer要素)に挟まれて、左にナビゲーション(nav要素)、右にメインのコンテンツ(section)が2コラムで並ぶようにします。

body {
    width:960px;
    margin:20px auto;
}
header, nav, section, footer {
    display:block;
    border:1px solid #ccc;
    margin:5px;
    padding:20px;
}
header {
    text-align:center;
    padding:30px;
}
header ul, header li {
    list-style-type:none;
    display:inline;
}
nav {
    float:right;
    width:236px; 
}
section {
    float:right;
    width:620px;
}
footer {
    clear:both !important;
    text-align: center;
}

このスタイルシートを適用すると、以下のように設計した通りのレイアウトになります。

ブラウザで開く

CSS3の視覚効果を利用する

CSS3では、以前のバージョンに比べて大幅に機能が強化されました。ドロップシャドウやグラデーション、角丸などの様々な視覚効果や、フォントの読み込み、マルチコラムレイアウトなど多彩な機能が追加されています。(参考：HTML 5 Rocks Slide)

ここでは、そのいくつかの効果を利用してページの視覚効果をより詳細にデザインしています。外部画像は一切使用しなくても多彩な視覚効果を生成できることが実感できるでしょう。指定されたCSSファイル style.css を下記のように書き換えると多彩な効果が付加されます。

body {
    background:#aaa;
    font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
    color:#000;
    margin:20px auto;
    text-align:center;
    line-height:1.5em;
    width:960px;
}
h1, h2, h3, h4, h5, h6 {
    font-family:"Hiragino Kaku Gothic Pro",  Meiryo, sans-serif;
    font-weight:lighter;
}
a:link, a:visited {
    color:#c00;
    text-decoration:none;
}
a:hover {
    color:#0cc;
}
header, nav, section, footer {
    display:block;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 4px #666;
    -moz-box-shadow: 0px 0px 4px #666;
    box-shadow: 0px 0px 4px #666;
    border: 1px solid #d3d3d3;
    background-color: #fff;
    margin:5px;
    padding: 0 20px 10px 20px;
    font-size: 12pt;
    color: #000;
    text-align: left;
}
header {
    text-align:center;
    padding:30px;
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #888), color-stop(1.0, #333));
    background-color: #444;
    border:none;
    color:#fff;
    text-shadow: 0px 0px 4px #000000;
}
header h1, header h2, header h3, header h4, header h5, header h6, header li, header p {
    font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
}
header h1 {
    font-size:2.3em;
    text-transform:none;
    letter-spacing:0em;
}
header h2 {
    margin:-10px 0px 20px;
    font-size:1.3em;
}
header ul {
    padding:0px;
    list-style-type:none;
    display:inline;
}
header li {
    margin:0px 10px;
    padding:0px;
    list-style-type:none;
    display:inline;
}
header a:link, nav a:visited {
    font-weight:normal;
}
nav {
    float:right;
    width:200px;
}
nav h1 {
    font-size:1.4em;
}
section {
    float:right;
    width:656px;
    text-align:left;
    margin-bottom:10px;
}
section h1, nav h1 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color:#444;
    color:#fff;
    padding:10px;
    margin:10px -10px;
    text-shadow:1px 1px 5px #000;
}
section ul {
    padding:0px;
    list-style:none;
    border-top:1px solid #e7e2d7;
    margin:14px 0px;
}
section li {
    margin:0px;
    padding:0px;
    list-style:none;
}
section li a:link, section li a:visited {
    float:left;
    width:96%;
    padding:3px 1%;
    border-bottom:1px solid #e7e2d7;
}
section li a:hover {
    background:#f2f1ec;
}
section p {
    font-size:0.9em;
}
article {
    margin:0 0 30px 0;
}
footer {
    clear:both !important;
    padding:10px;
    background-color: #444;
    border:none;
    color:#fff;
    font-size:0.8em;
    text-align:center;
}
footer a {
    margin:0px 5px;
}

このスタイルシートを適用してみましょう。

ブラウザで開く

今日のまとめ

今回の授業では、HTML 5 とCSS3の導入として、構造化のための新要素を利用してHTMLに意味要素を与え、それを利用してCSS3でレイアウトやデザインを行う方法について学びました。

しかし、HTML 5 で可能となったことはより広範囲に渡ります。今回は静的なサンプルでしたが、HTML 5 とJavascriptを使用することで、グラフィックの生成や、アニメーション、地図との連携など様々な動的なページをFlashPlayerなどのプラグインを使用することなく実現することが可能となっています。次回はより動的な表現についてとりあげいきたいと思います。

サンプルファイルのダウンロード

今回の授業で使用した全てのサンプルは、下記からダウンロード可能です。