みかづきブログ その3

3ヶ月つづけてみました。

ブラウザに表示するのではなくブラウザに表示していただくという概念をもって生きていこうではないか。

ブラウザのしごと

前回 マークアップした、

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

というhtmlファイルをもとに解説します。
上記ファイルをブラウザで開くと、

f:id:kimizuka:20131208010723p:plain

こんな感じになります。

それはブラウザにこんな感じで、文章の意味を伝えることができたからです。

<!DOCTYPE html><!--「今からHTML5を書かせて頂きます。」-->
<html><!--この文章はhtml要素です。-->
<head><!--この文章はhead要素です。-->
    <meta charset="UTF-8" /><!--文字コードはUTF-8です。-->
    <title>ゆう子の日記</title><!--この文章はtitle要素です。-->
</head>
<body><!--この文章はbody要素です。-->
    四郎くんは「こんなもの本当の寿司じゃない」と言いました。
</body>
</html>

ブラウザはこの指示に従ってレンダリングしてくれたのです。
そう。htmlファイルはブラウザに対する指示書のようなものなのです。

ブラウザの個性

Google ChromeFirefoxSafari、InternetExplorer、Operaなどなど、世の中にWEBブラウザはたくさんあります。

同じhtmlファイルを渡しても、ブラウザによって若干解釈が違うこともありますが、それは個性です。
おんなじ古典落語でも、噺家が違えば印象はがらりと変わる。
多分きっとそんな感じです。

すべてのブラウザで表示を合わせたい場合は、
それぞれのブラウザの解釈に合わせたマークアップが必要になるときもあります。
それは非常に骨が折れる(こともある)ので、本ブログでは基本的にはGoogle Chromeをつかって表示を確認していこうと思います。

コメント

先ほどの解説内にしれっと登場しましたがhtml内で、

<!--

から、

-->

の間に書かれた文章は、基本的にはブラウザの表示結果に関係しません。
そう。基本的にオフレコです。
なのでブラウザに表示したくない文章、例えば、

  • ブラウザに向けてではなくソースコードを読む人に向けた文章
  • ほかのひとに読まれるとトラブルになりそうな文章

などは、

<!--フォアグラよりもあん肝のほうが美味しい-->

というような感じでコメントアウトしておきましょう。ブラウザには表示されません。

※ htmlファイルのソースコードを見られるとがっつりバレるので、"ほかのひとに読まれるとトラブルになりそうな文章"を書くのはやめておきましょう。

今回は以上です。
次回 はタグをいくつか紹介します。