みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

マークアップをはじめよう。 爻ノ篇

漸ノ篇 のあらすじ。

四郎くんは「こんなもの本当の寿司じゃない」と言いました。

という文章を、

<!DOCTYPE html>
<html>
<head></head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

とマークアップしましたが、

f:id:kimizuka:20131207225751p:plain

ブラウザには謎の文字列(?)が表示されました。
今回はこれを読めるようにすることを目標にマークアップしていきます。

んが。つづきをマークアップする前に、

  • タグの属性
  • 終了タグのないタグ

について説明しようと思います。


属性

タグには属性というものがあります。
また架空のタグの話になりますが魚を表す魚タグがあったとして、

<sakana>まぐろ</sakana>
<sakana>かれい</sakana>
<sakana>あゆ</sakana>
<sakana>めだか</sakana>

魚タグに川魚、海魚を表すtype属性たるものがあったとすると、

<sakana type="sea">まぐろ</sakana>
<sakana type="sea">かれい</sakana>
<sakana type="river">あゆ</sakana>
<sakana type="river">めだか</sakana>

こんな感じで表すことになるでしょうか。
まあ、こんな感じでタグに対しての情報をもっているのが属性というやつなのです。

※ HTMLにsakanaタグはありません。念のため。

終了タグのないタグ

世の中には未完のまま終わる物語があるように、タグにも終了タグの無いタグが存在するのです。
例えば先ほどの魚タグが終了タグの無いタグだったとしたら、

<sakana fishtype="sea">

となります。
しかしこれだと何の魚かわからなくなってしまうので名前属性を足しておきましょう。

<sakana type="sea" name="maguro">

という感じでしょうか。

また、

<sakana type="sea" name="maguro" />

と最後にスペースとスラッシュをつけて書くひともいます。

こうするだけで、魚タグの開始タグと終了タグが一体になった感がアップするような気がします。
この書き方は、

  • HTML4では非推奨。
  • XHTMLという仕様では必須。
  • HTML5ではどっちでも良い。

とされていて、普段の僕はスラッシュ無し派です。
しかし今回は「終了タグを忘れているわけではなくて終了タグがないタグだよ感」を醸し出すために、後者の書き方でいきたいと思います。


では、コーディングに戻りましょう。

metaタグ

metaタグはhtmlのメタデータを表すためにつかう終了タグの無いタグです。
metaタグはhtmlの情報を表すので基本的にheadタグの中に入れ、メタデータは属性をつかって表します。

メタなんたらという言葉は聞いたことがあるかもしれませんが、
基本的になんたらの為のなんたらという意味で、メタデータだと「データのためのデータ」「データを表すデータ」という意味になります。劇の中の劇である劇中劇的なイメージです。

そんなこんなで、とりあえず空のmetaタグをheadタグの中に入れてみましょう。

<!DOCTYPE html>
<html>
<head><meta /></head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

見にくいので改行します。

<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

これは僕の好みですが、htmlタグの中のタグで入れ子になっているタグはインデントをつけます。

<!DOCTYPE html>
<html>
<head>
    <meta />
</head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

こうすることによってmetaタグがheadタグの中に入っている感がでます。
改行と同じで、これは人のための情報でブラウザは基本的にタグとタグの間のスペースを認識しません。

charset属性

metaタグは書いただけではなんの効力も発揮できませんが、属性を指定することによってhtmlの情報をブラウザにつたえることができるようになります。

例えばcharse属性を使えば文字コードをブラウザに伝えることができるので、先ほどのmetaタグのcharset属性にUTF-8を指定してみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

ブラウザでみてみると...

f:id:kimizuka:20131208005715p:plain


てってれー。(ファンファーレ)


ついに、ブラウザに僕たちの読める文字が現れました。

実は先ほどの状態でもブラウザの設定でエンコードをUTF-8に変更すれば同じように表示することはできたんですが、metaタグのcharset属性にUTF-8を指定すると、ブラウザに「この文章はUTF-8で書いてあるよー。」と伝えることができ、いちいち設定を変更する必要が無くなるわけです。

文字コード

文字コードの詳しい説明は省略しますが、文字コードを指定することは非常に重要です。

例えば、

「ゴミ投げといてー。」

と言う台詞があったときに、
北海道弁だと「ゴミを捨てといてー。」という意味になりますが、
関東だと本当にゴミを投げかねません。(多分本当に投げる人はいないと思いますが)

こんなとき、

<!DOCTYPE html>
<html>
<head>
    <meta charset="北海道弁" />
</head>
<body>「ゴミ投げといてー。」</body>
</html>

はじめに方言を指定すれば解決するかもしれないです。

※ charset属性に「北海道弁」という値ははいりません。念のため。

文字コードとはそんな感じです。(結構ちがいますが)
はじめのうちはとりあえずUTF-8を指定しておけば良いということでOKということにしておきましょう。

あと、文字コードは文章全体に関わってくるのでできるだけ早めにブラウザに伝えてあげましょう。
なので、基本的にheadタグの先頭に書いておいてあげると良いと思います。

titleタグ

文章の中でページのタイトルをブラウザに伝える為のタグです。
今回の文章にはタイトル的なものがなかったので、マークアップする文章を、

ゆう子の日記
四郎くんは「こんなもの本当の寿司じゃない」と言いました。

に変更し、ゆう子の日記をページタイトルということにしてみましょう。
titleタグはhtmlの説明なのでheadタグの中に書きます。

そいや!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ゆう子の日記</title>
</head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

f:id:kimizuka:20131208010723p:plain

無事にブラウザのタブに表示されていたタイトルが変更されました。
ここまでわかれば、あとはひたすらタグを覚えていけば、ばりばりとマークアップできるようになると思います。


今回は以上です。
次回 はブラウザについて説明したいと思っています。