六花工房
六花工房
  
  TOP Material Web FAQ BBS Link  
 
Web
サイト制作（個人編）
サイト制作（企業編）
  　 はじめに
  　 Webの基礎知識編
  　

ＨＴＭＬの構造編
    ・基本的なタグの知識
　その１　その２
・リンクについて
　その１　その２
・テーブルの使い方
・フレームページ
・スタイルシート
・チェック観点
     
Web制作のお仕事とは？

Ｗｅｂサイト制作（企業編）｜HTML構造編

さて、今回からは、いよいよＨＴＭＬについての基本的な知識を紹介していきます。
まずは、構造を見る前段階から学んでいきます。

ブラウザとは？

では、はじめは「ブラウザ」についてです。
「ブラウザ」とは、Ｗｅｂページを見るためのアプリケーションソフトのことです。
多くはマイクロソフトのInternet Explorer(IEと略されます）を使っていることでしょう。
ちなみに、ブラウザはIEのほかに、Netscape Navigator（ネスケまたはNNと略されます）やOperaなど多数存在していますが、現在のシェアナンバー１はIEです。そのため、多くの企業はIEを標準としてWebサイトを構築しています。
これらのブラウザには「バージョン」というものが存在しており、現在の最新バージョンはIEなら7.0、NNは7.1となっています（2006/9/27時点）。
このバージョンは結構大切なもので、IE7.0では表示できるのに、IE5.0では表示できない、といったものも存在しています。また、IEならＯＫなのに、NNではＮＧといったものもあります。

前職で一番このあたりをきちんとみていた企業では、結構古いバージョンのものから最新のものまで、しかもIEとNN両方できちんと表示できて初めて本番サーバーにＵＰしていました。
が、これがまた結構な労力がかかります。
なぜならば、WindowsとIEのセットならばさほど問題はないのですが、MacでIEだとお手上げ（この二つは非常に相性が悪かったのです。今はどうかわかりませんが）ということも多く、すべてのパターンチェックとなると、大変です。
その当時は確かＯＳはWinとMac。ブラウザはIE5.0〜6.0、NN4.7〜6.0までの数種類がありました。これを全部チェックとなると…パターン数は恐ろしいことに。
１ページくらいならまだしも、10ページなどとなったときには…。さらにプログラムなんて使っていたら…！

というわけで、特に大きな問題がないのであれば、初めからサイトに
「IE6.0で動作確認済み。これ以外のものでは動作保証できません」
といったような類のことを入れておけばいいかもしれません。しかし、企業サイトとなると、本当にそれでＯＫなのかは…これは企業方針となりますので、勝手に決めず、まずは他のWeb担当者に相談するのがよいでしょう。

ちなみに、私が管理しているサイトの１つのアクセスログから分析すると、訪れるユーザーはこんな感じになっています。

OS
▲OSの内訳

ブラウザ
▲ブラウザの内訳

WindowsXP＋IE6.0が現時点では主流のようですね。なので、ここは絶対に外さないようにしましょう。
あとは、Macユーザーのことを考慮すればよいのかな、と思います。

▲このページのＴＯＰへ戻る

 

ソースを見てみよう

では、今回の本題。
ブラウザをたちあげて、ソースを見てみましょう。
まずは、こちらのページを見てみてください。そして、ソースを開いてみてください。
ソースは下記のようにすると、見ることができます。

ソースの見かた

見ていただいているページは、実際にはありえないほどシンプルなものにしています。
まずはこれをみて、ＨＴＭＬの基本構造を把握しましょう。
と、その前にタグの説明ですね。
タグとは、<html>とか</body>とか書かれているものがそうです。
HTML内に記述するもので、「ああしなさい」「こうしなさい」という命令が書かれているマーク、といえばよいでしょうか。
タグは<html></html>というような開始タグと終了タグ形でセットになっているものと、<img src="01.jpg">のように単独で使われるものとがあります。
これを頭に入れた上で、ソースの中身を見ていきましょう。

１）<html>〜</html>  
<html>〜</html> ドキュメントがHTMLであることを述べているものとなります。
HTMLを作成するときは、始まりに<html>、最後に</html>を必ずいれるようにします。
つまり、HTMLの内容は、この２つのタグの間に書いていくことになります。
   
２）<head>〜</head>  
<head>〜</head> タイトルやサイトの情報などを記述する場所です。
基本的には、見た目にはHTMLに反映されているようには見えません。タイトルは出ますけどね。
   
３）<title>〜</title>  
<title>〜</title> HTMLのタイトルとなり、ブラウザのタイトルバーに表示されます。
このタグは<head> </head>内に書かれることになります。
検索エンジンではここを表示するので、必ず入れるようにしましょう。
HP制作ソフトを使って、この<title>を記述しないでおくと、デフォルトで入っている「無題ドキュメント」というのが、タイトルとして表示されてしまい、とても…みっともないですから（笑）。
なお、入れ方もSEO対策が絡んでくると、いろいろコツがあったりもするのですが、それはまた別の機会に。
   
４）<body>〜</body>  
<body>〜</body> HTMLの本文はこのタグの間に書くことになります。
   
５）<br>  
<br> 改行を示します。
HTMLはこういったタグによって、構成されているのです。
そのほかのタグについては、このページでは、長くなってしまったので、次のページで説明します。