広告

posted by fanblog
 普段、何気なく管理ツールより書いている記事。
 実はこれ、書いた内容がそのままブラウザで
 表示されている訳ではありません。

 ユーザーが見えないところで、いろいろ追加されているのです。
 今回は、その辺りを解説してきます。







1.HTMLとテキストの関係


 通常、記事に書いているのは「テキスト」です。
 試しに、適当に文章を書いたファイルをブラウザで読み込んでみましょう。



  



 こんな感じでプレーン(素の)テキストが表示されます。
 まぁ、これはこれで良いのですが、やっぱりタイトルロゴや、画像やらを入れたいですよね。

 その為には、HTML(HyperText Markup Language)という、特殊な言語を使う
 必要があります。

 この言語を使うことにより、以下のような表現ができるのです。

  • 文章の中で表題や段落の区切りを指定する
  • 箇条書きの項目を列挙する
  • 文書の一部として画像や音声、動画を埋め込む
  • 他の文書へのハイパーリンクを設定したりする

 もちろん、ファンブログもこの言語を使ってブラウザに表示させています。

 では、ファンブログではどのようにしてテキストで書いた記事を、このHTMLに
 変えているのでしょうか。



2.記事がブラウザに表示されるまでの流れ


 繰り返しになりますが、ファンブログの管理画面で書いた記事内容だけでは、
 ブラウザは正しく(ブログの体裁という意味で)表示してくれません。
 何故かというと、私たちが書いた言語をブラウザが理解できないからです。



  



 では、実際どうやってブラウザが理解しているかというと、間に翻訳機を介して
 ブラウザが理解出来る言語(HTML)に翻訳しているのです。



  



 この翻訳機の役割をしているのが、ファンブログの管理画面「スタイルの編集」にある
 各テンプレートです。



      



3.どんなふうに翻訳してるの?


 次に、各テンプレートがどのようにブラウザが理解できる言語(HTML)に翻訳しているのかを
 見ていきましょう。

 ここでは、メインのテンプレートを例に挙げています。
 イメージとしては、テンプレート上にファンブログの管理画面で設定した内容を
 埋め込んでいく感じです。

 ※解りやすくするために、部分的に抽出しています



 



 そして、この翻訳された言語(HTML)をブラウザが読み込み、画面上に
 表示しているのです。

 もちろん、翻訳されたものを記事として書くことも可能です。
 例えば、画像を表示したいのなら、

  ‹img src = "画像ファイルのURL”›

 と記事に書くことで実現できます。
 簡単に例を挙げると、こんな感じで使用します。







 このHTMLの記述の仕方やタグに関する情報は、各専門サイトで詳しく解説されています。

 とほほのWWW入門
  各種情報がまとまっていて、解りやすいサイトです。
  よく利用させていただいてます。




4.翻訳されたコードを見てみよう


 では、実際に翻訳されたコードをブラウザ上で見てみましょう。
 代表的な3つのブラウザでの表示方法を紹介します。

 コードを表示させたいページに移動し、以下のメニューを選択してください。


   1)Internet Explore

    ツールバーの「表示」ー「ソース」を選択します。

      



   2)Firefox

    ツールバーの「表示」ー「ページのソース」を選択します。

     



   3)Chrome

    右端の「設定」のアイコンから、「ツール」ー「ソースの表示」を選択します。

     



 ブラウザ上で意図しない内容が表示されたり、おかしな動作をした場合、
 上記の方法で直接コードを確認してみてください。

 このコードは、表示されている内容そのものです。
 うまくいかない原因は全てここにあります。


 以上、記事とHTMLの関係の解説でした。






【スポンサード リンク】






この記事へのコメント

   
×

この広告は30日以上新しい記事の更新がないブログに表示されております。