[Infinity Lithium Reverse]

ウェブ関連

HTML5 のテンプレート

最新のウェブ規格として HTML5 の草案が公開され W3C で標準化されようとしている。
HTML5 でウェブを作成するときのテンプレートについてまとめておく。

このテンプレートでは、Safari 5.0, Firefox 3.6, Chrome 9.0, Opera 11.01, Internet Explorer 8.0,
Lynx 2.8 以上に対応し、W3C の検証に合格し、xmllint などで書式を検証できる
ようにするために見かけ上 XML 文章としても扱えることを想定している。

XML 宣言

HTML5 では文章を XML でも HTML でも記述できる。

XML で記述するときは mime type を「application/xml」か「application/xhtml+xml」に
する必要があるがこれは Internet Explorer など対応していないブラウザもある。
そこで、mime type を「text/html」にするために HTML で記述する必要がある。

そうすると XML 宣言を記述できなくなるが、
文章を XML として xmllint などで整形チェックをしたいときもある。

HTML5 は XML の書式を許していること、
XML 宣言の無い XML は「UTF-8」で記述されていると解釈されること、
古いブラウザは一部の XML の書式を認識できない可能性があるがこれは回避可能(※空タグ参照)
であることを合わせると、HTML5 は「UTF-8」で記述すると都合が良いことがわかる。

よって、HTML として記述するので XML 宣言は必要ない。

テキストエンコーディング
上記の理由から、HTML5 の文章は「UTF-8」で記述し保存する。
空タグ
XML の空タグは「<tag/>」や「<tag />」などが許されているが、
古いブラウザは「<tag/>」を認識できない可能性があるので「<tag />」を使うようにする。
DOCTYPE

HTML5 では DOCTYPE は次のように書く。

<!DOCTYPE html>

XML ではないので DTD の指定は必要なく、古いブラウザでも問題ない。

html タグ

HTML5 の標準的な html タグは以下のようなものである。

<html lang="ja">

しかし、ここでは xmllint などで整形チェックをするときのことを考えて
XML としても認識できるように記述する必要がある。すると次のようになる。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

charset

HTML5 の標準的な charset の記述は以下のようなものである。

<meta charset="utf-8" />

一部の情報には古いブラウザでもこの記述に対応している旨の記述があるが
Lynx 2.8 など一部のブラウザは対応していないようである。
また、HTML5 では XHTML1.0 などの古い記述も対応しているのでここでは古い形式で記述する。

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

スタイルシート

HTML5 ではスタイルシートは標準で「text/css」と解釈される。
また、外部ファイルのスタイルシートのテキストエンコーディングは、それを読み込んでいる
HTML ファイルのテキストエンコーディングと想定され、charset の使用が許されていない。

インラインで記述したり外部ファイルに記述したりと別けて記述するのは保守性が悪いので
ここでは完全に外部ファイルに記述することにする。すると次のようになる。

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

スクリプト

HTML5 ではスクリプトは標準で「text/javascript」と解釈される。
また、外部ファイルのスクリプトのテキストエンコーディングは、それを読み込んでいる
HTML ファイルのテキストエンコーディングと想定され、charset の使用が許されていない。

インラインで記述したり外部ファイルに記述したりと別けて記述するのは保守性が悪いので
ここでは完全に外部ファイルに記述することにする。すると次のようになる。

<script type="text/javascript" src="./js/default.js"></script>

エンティティ

「&nbsp;」や「&copy;」などのエンティティ参照は、標準的な XML では提供されない。

HTML では提供されるのでブラウザでは問題なく表示されるが、
xmllint などの検証では追加のエンティティを DTD として提供しなくてはいけない。

そこで XML が標準で提供する基本的なエンティティ以外は、
「&#xA0;」や「&#xA9;」などのように数値参照で記述するとよい。

上記のすべてを考慮した最小限のテンプレートは次のようになる。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/default.css" />
        <script type="text/javascript" src="./js/default.js"></script>
        <title>HTML5 Template</title>
    </head>
    <body>
        <p>This page is written in HTML5.</p>
    </body>
</html>

ダウンロード html5_template_minimum.zip

よく使うタグを含めたものは以下の通り。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico" />
        <link rel="shortcut icon"
            type="image/vnd.microsoft.icon" href="./favicon.ico" />
        <link rel="stylesheet" type="text/css" href="./css/default.css" />
        <script type="text/javascript" src="./js/default.js"></script>
        <meta name="author" content="" />
        <meta name="generator" content="" />
        <meta name="robots" content="index, follow" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <title>HTML5 Template</title>
    </head>
    <body>
        <p>This page is written in HTML5.</p>
    </body>
</html>

ダウンロード html5_template.zip

xmllint で整形チェックをするには、ターミナルで

xmllint --noout index.html

などとし、DTD を用いて妥当性チェックをするには

xmllint --noout --dtdvalid xhtml1-strict.dtd index.html

などとする。

HTML5 の DTD は存在しないので、ここでは XHTML1.0 の DTD を使用している。
このとき DTD ファイルはリモート上の物を直接指定するのではなくて
W3C などから関連するものすべてをローカルにダウンロードしておく方がよい。

上記の例では xhtml1-strict.dtd が外部のいくつかのファイルを読み込んでいるが
リモート上の物を直接指定するとエラーとなってしまう。

canvas 要素など HTML5 で追加されたタグを使用する場合には、それらを含んだ DTD が必要となる。

カラープロファイルの埋め込み

Photoshop でのウェブ用画像書き出し時に画像の色が変色することがあるが、
これはモニタのカラープロファイル、画像のカラープロファイル、編集時のカラープロファイルが
一致していないことによる。また保存時のカラープロファイルの埋め込み設定にもよる。

※画像は変色を強調してあります。

ウェブ用画像作成時のカラープロファイルの扱いには次の前提がある。

  • カラープロファイルとは画像の絶対的な色(光の波長と明るさ)を
    それぞれのデバイス間で一致させるためのもの。
  • 高性能モニタのプロファイルは「Adobe RGB」、普通のモニタは「sRGB」、
    MacBook などの液晶は「カラー LCD」などでありモニタの経年劣化や設置場所によって
    プロファイルはキャリブレーションされているかもしれない。

  • 厳密に言えば、世の中のすべてのモニタはすべて違うプロファイルを持っている。
  • sRGB プロファイルのモニタは普及している。
  • MacOS X はカラープロファイルを厳密に扱ってくれるが、Windows はあまり厳密に扱ってくれない。
    Windows は画像に埋め込まれているプロファイルを無視し sRGB プロファイルとして扱い、
    画像を表示するモニタも sRGB プロファイルを前提としていることが多い。
    (Windows Vista 以降は徐々に厳密に扱うようになってきている)
  • MacOS X はカラープロファイルの埋め込まれていない画像は、
    プロファイルの変換をせずにそのままモニタのプロファイルで表示する。

    ※モニタのプロファイルは「カラー LCD」、画像の編集時のプロファイルは「sRGB」
    左は「sRGB」プロファイルを埋め込んだ画像で左の色が編集時の色である。
  • Photoshop での画像書き出しでは、画像のプロファイルを埋め込むことも埋め込まないこともできる。
    画像を保存するには「ファイル > 別名で保存...」と「ファイル > Web およびデバイス用に保存...」がある。
    PNG ファイルで保存する場合、「ファイル > 別名で保存...」を使わないと
    画像のプロファイルが埋め込まれない。JPG ファイルの場合はどちらでも埋め込むことができる。

以上のことから、ウェブ用画像は sRGB プロファイルを前提に作成して
sRGB プロファイルを埋め込んでおくと安全である。
そこで Photoshop CS4 でウェブ用画像を作成するには次のようにするとよい。

  1. まずはモニタのプロファイルを「システム環境設定」で設定する。
    普通はモニタ付属のプロファイルを選ぶ。

  2. Photoshop を起動したら「編集 > カラー設定...」で「Web・インターネット用」を選択する。

  3. Photoshop の色の校正機能は出力デバイス上での色をシミュレートするためのものなので、
    「ビュー > 色の校正」をオフにするか、オンにするのであれば「ビュー > 校正設定」で
    「カスタム...」を選び「sRGB デバイス」に設定する。ここを「モニタ RGB」とするのは間違いである。

  4. 新しい画像を作成するときには「作業用 RGB(sRGB)」で開始する。
    このとき、モニタのプロファイルと画像のプロファイルは厳密には一致することはない。

  5. 画像ができたらこの段階で望みの色にしておく。
  6. まずは、「ファイル > 別名で保存...」から画像のプロファイルを埋め込んで保存する。

  7. 保存した画像をプレビュー.app で表示し「インスペクタ」で確認すると
    sRGB プロファイルが埋め込まれている。

    このとき、プレビュー.app で表示されている画像は編集時の色と同じはずである。
  8. Safari はカラープロファイルを読み込むので Safari 上でも正しい色で表示される。
    しかし、Opera はカラープロファイルを無視するので
    sRGB プロファイルではないモニタ上では変色して見える。

    これは sRGB プロファイル用に作成した画像をモニタのプロファイルで表示しているためであり、
    sRGB プロファイルをもつモニタ上では正しく表示されているので問題は無い。
  9. 次に、「ファイル > Web およびデバイス用に保存...」から画像のプロファイルを埋め込まずに保存する。

    ※「sRGB に変換」オプションはオフにしておく。
    もともと「作業用 RGB(sRGB)」で作られているので変換しても変化は無い。
    ※「プレビュー」は選択したモニタ上での見え方をシミュレートするためのものなので
    ここで何を選んでも保存された画像に変化は無い。(色の校正みたいなもの)
  10. 保存した画像をプレビュー.app で表示し「インスペクタ」で確認すると
    カラープロファイルが空欄になっていて何も埋め込まれていないことがわかる。

    このとき、プレビュー.app で表示されている画像は sRGB プロファイルではないモニタ上では
    編集時の色と違うはずである。
  11. 同様に Safari, Chrome, Firefox, Opera 上でも変色して見える。

    しかし、sRGB プロファイルをもつモニタ上や Windows 上では正しい色で表示される。
  12. よって、1 ~ 8 の手順のように保存時に画像のカラープロファイルを埋め込んでおくと
    MacOS X 上でもWindows 上でも正しい色で表示される可能性が高くなる。
    しかし場合によっては、「ファイル > Web およびデバイス用に保存...」を使う方が
    画像の容量が小さくなることがある。

理想は sRGB プロファイルが埋め込まれていて容量の小さな画像ファイルを作ることである。

j46059:~ administrator$ int main(){printf("hello world"); return 0;}