ウェブデザインをスタイルシートでおこなおう!

ホームページ作成スタイルシート編!スタイルシート倶楽部@ウェブマイスター
ホームページ作成総合支援ウェブマイスター
スタイルシート倶楽部トップ戻る
スタイルシートを使えばウェブデザインは思いのまま!
ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ!
スタイルシートを使いこなして脱入門者になろう!

サイト作りの基礎を学びたい方は >> 本館 ウェブマイスター
さくらインターネット
たった125円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。
3ヶ月無料キャンペーン実施中!! レンタルサーバーのSpeever
一番高いプランも今なら無料だよ

DOCTYPEについて

DOCTYPEとは、ドキュメントのルール(プログラミング言語の種類)を示したものだ。ドキュメントとは、ホームページのソースである。もっと分かり易く言うと、タグなどを色々書いたテキストのことである。
たとえば、もっとも普及している HTML、最近多く見かけるようになった XHTMLやXMLなどである。

初心者の方は、このDOCTYPEを一切気にしないでホームページを作っている人が多いと思うが、できたら、気にして作るよう心がけるといいだろう。
でなければ、ブラウザの種類やバージョンによって、表示がまったく違ったりしてしまうぞ。
気にして書いておけば、新しいバージョンのブラウザが登場しても、基本的に安心となる。

では、DOCTYPEの指定方法と内容について書く。
なぜスタイルシート倶楽部で取り上げたかというと、この指定一つでスタイルシートの動作がかわってしまうからである。

DOCTYPEの指定

ホームページを表示するブラウザは、大きく分けると2つに分類される。
事実上の標準ブラウザである『インターネットエクスプローラー』(以後 IE)と、『その他ブラウザ』である。
かつて人気のあった『ネットスケープ』は今は『その他』となる。

DOCTYPEを省略した場合の動作

IEの場合、独自仕様で動作する。バージョンによっても動作の違う部分が存在する。
同じバージョンでも、OSによって動作が異なるので注意。

その他の場合、大抵は標準規格にそって動作するが、どの標準規格に沿うかはわからない。

通常、ルール違反(間違った記述)を行っても、エラーを出さずに独自解釈をして正常に表示させようとする。
このため、間違った記述のままホームページを作ってしまい、後で思うように表示させることが困難になることがあるので注意。 「表示されれば良い」という考えは捨てるように。
今まで正常に表示されてたのに、「あとからタグを新たに記入したら、レイアウトがめちゃくちゃになった」というのはよくあることだ。

DOCTYPEの種類

DOCTYPEには、「言語」、「言語のバージョン」、「言語のレベル」、「仕様書のURL」の3つを記入する。
最後の「仕様書のURL」は省略できるとなっているが、省略するとIEではDOCTYPEが無視されるので注意。ようするに、省略せずに全てかかなくては意味が無い。

現在もっとも普及している言語は、おなじみの「HTML」であり、バージョンは「4.01」、レベルは「Transitional」または「Frameset」である。
以下は HTML 4.01 での DOCTYPE の書き方と意味である。

  • Strict : 精密に仕様を処理する。旧タグは使用できない。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional : フレーム以外の旧タグを使用可能。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset : フレームを含めた旧タグの全てが使用可能。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                   "http://www.w3.org/TR/html4/frameset.dtd">

IEとその他のブラウザでの表示を少しでも近づけたいのならば、これらいずれかを指定するといいだろう。
ただし、IE5.5以下はDOCTYPEに対応していないので注意。

DOCTYPEを指定しないと、実際スタイルシートの動作がどうかわるか。

  • ボックスの幅の扱い(スペースやマージン、ボーダー)が違う。
  • margin-left:auto; margin-right:auto; (センタリング)が使えない。
| ウェブマイスタートップ | ホームページの作り方 | スタイルシート入門 | PHP Tips | CGI/PHPソフト配布 | 掲示板 | ブログ | ショッピング | リンク集 |
(C) 2005 - 2007 ウェブマイスター