制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った女子大生キャラクタ
主な堀北真希うさぎ収録作品

人気女優をモデルにしたオリジナルキャラクタのイラスト例とアニメーション動画

マークアップされた文書をHTML文書にするには。

実際のマークアップで解説した通り、マークアップの際に最低限覚えておきたい要素はそれ程多くはありませんが、実際に公開するには文書の型を完成させる必要があります。

ここでは、マークアップされたテキストを完全なHTML文書にするための方法を解説します。

マークアップされた文書をHTML文書にするには・目次。

<head>要素…HTML文書のヘッダ。

先ず、マークアップされたテキストには、文書本体とそれ以外の部分に分かれております。

文書本体以外の部分は現時点では題名のみですが、これはHTML文書本体より前のヘッダと呼ばれる位置に記述されております。

ヘッダに加えるべき情報。

現時点ではヘッダに含まれている要素は題名のみですが、他にも加えておくのが望ましい情報があります。

それは、文字コードのエンコーディングに関する指定です。

文字コードのエンコーディングの指定。

日本語文書の場合、何種類ものエンコーディング法がありますので、そのうちのどれで記述されたのかを指定する必要があります。(※1)

文書に関する情報はメタ情報と呼ばれ、これはヘッダ内に<meta>要素としてマークアップされます。

文書の型及び利用した文字コードをメタ情報として記述するには、以下のような<meta>要素を記述します。

<meta http-equiv="content-type" content="text/html; charset=文字コード名" />
主な文字コードのエンコーディング名。

日本語文書の場合、文字コードのエンコーディング名として主に以下のものがあります。

shift_jis

シフトJISコード

euc-jp
日本語EUC
utf-8
UTF-8コード

ここで注意しなければならないのは、この指定はアスキィ文字以外の文字が出る前に行なわなければならないと言う事です。

アスキィ文字以外の文字が現れるまでにこの指定がないと、アスキィ文字以外はどの文字コードで書かれたのかを認識する事が出来なくなってしまうからです。

つまり、題名(<title>要素)に日本語文字が含まれている場合には、その前に<meta>要素で文字コードを指定する必要があります。

従って、この<meta>要素は<title>要素より前に書かなければならないと言う事になります。

実際のマークアップ。

以上の事から、文字コードのエンコーディングの指定は以下のようにマークアップされる事となります。

<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<title>HTMLとは何か</title>

<h1>HTMLについて。</h1>
(以下略)

ヘッダのマークアップ。

文書のエンコーディング名を指定したら、取敢えずヘッダとなる部分を<head>要素としてマークアップします。

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>HTMLとは何か</title>
    </head>

<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
    (中略)

<body>要素…文書本体。

続いて、マークアップされたテキスト内の文書本体を<body>要素としてマークアップします。

文書本体とはマークアップされる前のテキスト全部ですので、これを一括して<body>要素としてマークアップします。

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <title>HTMLとは何か</title>
    </head>

<body>
    <h1>HTMLについて。</h1>
    <h2>HTMLとは。</h2>
    <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
    (中略)
    <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
    </body>

<html>要素…HTML文書全体。

マークアップされたテキストはヘッダと本体の二つの要素からなりますので、後はこれをまとめたHTML文書全体を<html>要素と言う一つの要素としてマークアップします。

<html>要素はHTML文書で最上位にある要素(ルート要素)となります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title>HTMLとは何か</title>
        </head>

    <body>
        <h1>HTMLについて。</h1>
        (中略)
        <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
        </body>
    </html>

XHTML 1.0では<html>要素には三つの属性が与えられます。

xmlns属性

XHTML 1.xでは、必ずHTML要素にxmlns="http://www.w3.org/1999/xhtml"属性を与えなければなりません。

これがないと、ウェブブラウザに依ってはHTML文書として取扱ってくれない場合があります。

xml:lang属性/lang属性

文書が何語で書かれているのかを示します。

現在ではウェブブラウザが適切なフォント等を選択するために利用する程度ですが、自動翻訳の技術が進歩すればこれを元にネイティヴの言語に翻訳する事も可能になるでしょう。

同じ目的の属性が二つあるのは歴史的な事情に依ります。

日本語文書であればいずれも"ja"とします。

文書型宣言…HTML文書である事の宣言。

以上でマークアップは完成しましたが、最後にこのマークアップされたテキストがXHTML 1.0に則ったHTML文書である事を宣言します。

XHTML 1.0 トランジッショナルの場合、文書の冒頭に、以下の宣言を付けます。

<?xml version="1.0" encoding="文字コード名"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

以下、この二行について説明します。

一行目・xml宣言

一行目はxml宣言と呼ばれるもので、処理命令の一種です。

XHTMLでは一行目にこのxml宣言を記述する事が求められております。(※2)

xml宣言では文字コードのエンコーディングも指定しますが、XHTMLを在来のHTMLの代わりに用いる場合、このxml宣言でのエンコーディング指定が認識されない事があります。

このため、メタ情報でのエンコーディング指定も併用しなければならないのです。

二行目・文書型宣言

二行目が文書型宣言と呼ばれる宣言です。

HTMLには在来のHTMLやXHTMLなど、様々な文書型が定義されておりますが、そのうちのどれに従っているかを宣言するものです。

例えば、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

と言う文書型宣言の場合、

と言う意味になります。

実際に文書型を宣言すると。

実際に文書型を宣言すると以下のようになります。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <h1>HTMLについて。</h1>
        (中略)
        <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
        </body>
    </html>

完成したHTML文書のマークアップとまとめ。

以上でHTML文書として完成しましたが、そのマークアップは以下のようになっているでしょう。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <h1>HTMLについて。</h1>
        <h2>HTMLとは。</h2>
        <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
        <p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

        <h2>HTMLの特徴。</h2>
        <p>HTMLの特徴は画像を埋め込めるとか、文字の色など表示方法を指定出来るとかではありません。</p>
        <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
        <p>HTMLの最大の特徴は「ハイパーリンクが使える」「どんな環境でも読めるようになっている」この二点に尽きます。</p>
        </body>
    </html>

総括しますと、HTML文書の最終的な形は以下のようになります。

  1. xml宣言(XHTML文書の場合)
  2. 文書型宣言

  3. <html>要素…HTML文書全体

    1. <head>要素…HTML文書のヘッダ

    2. <body>要素…文書本体

HTMLの知識がある方へのより詳しい解説。

以下、HTMLの知識がある方への補足です。

※1 HTML文書内での文字コードのエンコーディングの指定について

本来、文書に用いられた文字コードのエンコーディングはウェブサーヴァが文書を配信する際に配信コンテンツに関する情報の一つとして与えるべきものとされております。

その観点からは文字コードをHTML文書内で指定する必要は無いといえるのですが、制作者は以下の理由からHTML文書にはエンコーディングの指定を行う事を奨めております。

サーヴァに依っては文字コードのエンコーディングを正しく指定してくれない場合がある
サーヴァの設定を直接サイト管理者が行えるのであればこの問題は容易に解決しますが、このような設定が出来ないホスティングサーヴィスも少なくありません。
ローカルで利用するHTML文書ではサーヴァに依る配信は行なわれない
ウェブから取得したHTML文書をローカルで保存する事も有り得るのですが、それを開く際にはサーヴァに依る文字コードのエンコーディングの指定が受けられません。
※2 XHTML文書でxml宣言を記述する事について

XHTMLに限らず、XML及びその応用言語では冒頭にxml宣言を付ける事が求められておりますが、文書の文字コードがUTF-8またはUTF-16の場合には省略する事も出来ます。

従って、文字コードのエンコーディングがUTF-8かUTF-16のいずれでもない場合には、xml宣言が必要となります。

但し、サーヴァがエンコーディングを指定して配信した文書なら、文字コードのエンコーディングがUTF-8かUTF-16のいずれでもない場合でもxml宣言の省略が可能ですが、ローカルで保存した場合にはその文書はUTF-8またはUTF-16でない限り不正な文書になってしまいます。

結局、文字コードのエンコーディングがUTF-8かUTF-16のいずれでもない場合には、xml宣言は事実上省略出来ないと言う事になります。

前後のページ。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com