DOCTYPE | CSS電光石火

更新情報
  • 08/10/15 ｢デザイン-ヘッダ｣追加
  • 08/09/29 ｢フッタの作成｣追加
  • 08/09/29 ｢メイン-右カラム｣追加
  • 08/09/29 ｢メイン-サイドバー｣追加
  • 08/09/29 ｢ヘッダの作成｣追加
  • 08/09/28 ｢要素の中央寄せ｣追加
  • 08/09/26 ｢スタイルの読み込み｣追加
  • 08/09/26 ｢float｣追加
  • 08/09/26 ｢ブロックとインライン｣追加
  • 08/09/23 ｢widthとheight｣追加
  • 08/09/23 ｢marginとpadding｣追加
  • 08/09/23 ブラウザ対応アイコン追加
  • 08/09/23 ｢スタイルの読み込み｣追加
  • 08/09/19 ｢DOCTYPE｣追加
  • 08/09/19 ｢開始前に｣追加
  • 08/09/18 ｢始めに｣修正
  • 08/09/18 ｢始めに｣追加
  • 08/09/18 サイトオープン

始めに

  • DOCTYPE宣言

  •  

DOCTYPE宣言と呼ばれるものがhtmlには存在します。これは、その文書がどのようなDTDであるかを表したもので、CSS適用の際にもこの内容に影響を受けます。
どのサイトでも良いので、ブラウザの[ファイル]から保存し、閲覧してみると、冒頭に以下のような一文が書かれているのが確認できるでしょう。
一般にDTDは以下のものが数多く採用される傾向にあるようです。

  •  
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
  •  

上記はHTML4.01という規格で、旧時代のDTDです。アプリケーションでも、古いアプリケーションでは機能が不足していたり、色々と不便なものですが、これはhtml4.01においても同様の事が言えます。
しかし、この規格は未だに隆盛を誇っています。
理由としては、現行では廃止されつつある、「タグへの属性にて見栄えを指定する」、という手法をこの古いDTDでは使う事が出来るからです。
筆者はテーブルレイアウトを無碍に否定する事はしませんし、むしろハイブリッドであれば歓迎する姿勢ですが、この、タグへと直接見栄え指定、という旧来の考え方だけは全く支持いたしません。CSSで一括指定できるところを、いくつものファイルに手を入れて修正しなくてはならなくなるからです。
具体例を挙げないと分かりにくいと思いますので、一つ具体例を挙げておきます。

  •  
  • <font color="red">hoge</font>
  •  

これが従来の書き方です。
前後しますが、新しいDTDでは以下のような書き方となります。

  •  
  • <p class="text">hoge</p>
  •  

他のページにて後述しますが、古いDTDでは数多くあるタグを一挙に指定して管理するという、現在のCSSの利点を十分に生かす事が出来ませんし、当時策定されていたCSSしか利用できないという弊害も生じてしまいます。
例えばfont color="red"という指定ではその要素にしかフォント指定が適用できないのに対し、スタイル独特の属性であるclassであれば、複数の要素に対して指定が出来る、といったものです。
従って、当サイトではDTDに以下のDTDを採用します。

  •  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  •  

  • 実践

  •  

それではDTDから挿入してゆきましょう。
ez-htmlを開いてください。最初はHTML 4.01 Transitionalが設定されていると思いますので、まず、下記画面のように『カスタム→HTMLの仕様と文法』をクリックし、XHTML 1.0 Transitionalを選択してください。
HTMLの仕様と文法 次に、左上の新規作成をクリックしてください（赤丸部分）。 新規作成 すると、下記のように<?xml version="1.0" encoding="Shift_JIS"?>という表記がDOCTYPE宣言と共に現れますので、それを消してください。
xml version これで、準備は完了です。

<?xml version="1.0" encoding="Shift_JIS"?>の指定は元来SGMLの派生であるXML文書にHTMLを組み込もうとした流れから来るもので、本来XHTMLでは必須とされています（※ただし、厳密に言うと、文書コードがUTF-8の場合は違反になりません）。もちろんHTMLもSGMLの流れを汲むマークアップ文書ですから、この流れ自体に不自然なところはありません。 ただし、この指定が存在するだけで、IntarnetExplorer6（以下、IE6）の下位互換スイッチが働き、IE5として解釈してしまいます。
これはバグですが、Microsoftはこのバグ修正に前向きな姿勢を見せませんでした。
今まで圧倒的なシェアを誇っていたIEで正確な表示を実装してしまうと、今までのIEで閲覧できたサイトがことごとく崩れてしまう懸念があったからです。
マーケティング的にはこの考え方で正しいとは感じますが、そのお陰でIEはデザイナーとコーダーの両者から煙たがられる存在となってしまいました。
無論、IE6が忌み嫌われる理由ははDOCTYPEスイッチによる後方互換性だけではなく、その他方面のCSSバグも大量に残存するからです。Microsoftは近年こうした混乱をもたらす営業姿勢を続けてきましたが、最近になってようやくCSSバグの少ない、『IE8 beta2』を発表するに至り、WEB業界の不満を払拭しようと努めています。しかし、このIE8はベータとはいえ、やはり他のブラウザに比べると表示に関するバグは数多く残されています。
それでもIE6、IE7に比べるとずいぶんと進化した、と感じるのが筆者の正直な意見です。

多くの方はclassやidはhtml4.01でも使用可能だと仰るでしょう。事実その通りです。
しかしながら、古い規格を使う方は独自実装のタグを豊富に使用して色替えを行ったりすることが多く、十分にスタイルシートを使っているとは到底思えない現状があります。
これに関しては「現場が新しいものを許容しないから」という理屈は通らないと思っています。
非推奨要素を使わなくともCSSだけで済ませることは十分に可能ですし、alignなども一切使わずにレイアウトすることも決して不可能ではありません。非推奨要素を簡単だから、と言って使うのは、文書構造をないがしろにすることであり、結果的にWEB標準の進歩を遅らせることにつながります。
それでも使いたい方は、せめて「html 4.01 Strict」が妥当であると思います。

※詳しい方からすると、今から教える立場の人間がStrictで教えないのはおかしい、という話になると思います、これは私も半分同意しますが、手放しでは同意いたしません。現時点でStrictを採用すると、target属性の代替がなく、Firefox3等でしかtarget擬似クラスを指定できない弊害が生じてしまいます。
また、Strictが禁止するbrタグに対する考え方も同意できません。本来改行すべきところを、代替として使用した大量のpタグが占める、といった構造は、自己満足でしかないと思っています。面倒なハックを大量にCSS側で施すことにもなります。
なお、XHTML2.0の草案に目を通しましたが 、XHTML2.0になってようやく整備がきっちりと整った、という状態です。それ故に段階的な1.0、1.1不便さが目立ってしまったのでしょう。ただし、XHTML2.0規格自体が宙に浮いたまま進行していない状態であり、未だに規格の混乱は何一つ解決していない、という感触です。

htmlエディタ