福岡のホームページ制作会社プランニング・リンクちまたでWEB標準だ、やれXHTML+CSSだと騒がれ始めて早数年。
DreamweaverでのテーブルレイアウトによるWEBページ制作にどっぷり漬かってきた小生（福岡にてWEBデザイナーを生業）には、WEB標準への移行など容易にかなわず、見て見ぬふり、聞かぬふりで過ごしてきましたが、いよいよといった感じで一念発起。勉強（？）の記録として自分のためにもこのホームページを作成しました。なので記載されている内容については一切責任を持てませんので悪しからずという感じでお願いします（汗）ちなみに「福岡のホームページ制作会社プランニング・リンク」が小生初のXHTML+CSSで作成したホームページです。

 

XHTML+CSSを実践するにあたって参考になった本

ちなみに、教本として小生はソシム社の「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブックというものを使用しました。
小生はよくあるのでが、教本的なものは買うだけで満足してしまい、一度二度トイレのお供に開くだけで満足（？）してしまうということが多く、上記の書も同様の処遇だったのですが、運よく自分の勉強意欲向上と相まって開いた次第です。読み始めるとXHTML+CSSの入門書としては最適で、小難しい言葉や言い回しを極力排除したとても分かりやすいものでした。所謂リファレンス本ではないので、細かいCSSの記述ルールなどはありませんでしたが、なぜXHTML+CSSが必要かなどを基礎から教えてくれるそんな本でおすすめです。

XHTML+CSSとは

XHTMLの「DOCTYPE宣言」とは

XHTMLはHTML同様にTransitional（トランジショナル）、Strict（ストリクト）が存在します。多分HTMLでもそうだと思うのですが、規則がゆるい「移行型」と呼ばれるのがTransitional（トランジショナル）、規則が厳しい「厳密型」がStrict（ストリクト）だと思います。
小生が作成した「福岡のホームページ制作会社プランニング・リンク」のホームページはXHTMLのStrict（ストリクト）で作成しました。まったく知識がないままXHTML入門として、始めたため教本に載っていた通りに従順にXHTML 1.0 Strictを使いました。知らずのうちに厳密なものを選んだはいましたが、後々のことを考えるとよかったと思っています。というのもこのXHTMLというものも、時代とともにバージョンが上がっていくようで早い段階で厳密なルールに慣れておけば、次バージョンへの移行もすんなりできるのではと、、
話がそれましたがこのXHTML 1.0 Strictというものは「DOCTYPE宣言」と呼ばれるもので、今まで自分は全く意識してなかったのですがDreamweaverなどで新規ファイルを作成すると自動的に上部に挿入される文字で「XHTML 1.0 Strict」の宣言の場合「標準に準拠した厳格なページ作りを行っています」という宣言なんだそうです。選手宣誓みたいなもんです。

    例）DOCTYPEの記述例（XHTML 1.0 Strictの場合）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTMLのマークアップとは

「マークアップ」自分には耳慣れない言葉でした。簡単にいうとhtml文書を自己紹介からしてお分かれまでに並べ替える、つまり文書を「起承転結」させるということです。

    例えば･･･

    タイトル「私の名前は○○です」
    ↓
    サイトの紹介文「ちなみに私はこんな人です」
    ↓
    各コンテンツ（へのメニュー）「私にはあんなことやこんな所もあります」
    ↓
    フッダーのコピーライトや連絡先「よろしければご連絡をください」

とこんな具合でしょうか（笑）
テーブルを使ったレイアウトではブラウザやDreamweaver編集の見栄え上は概ねこのような順序で情報が並んでいると思います。しかし、テーブルレイアウターの苦手なhtmlソースを除いてみると必ずしもこの順序でなかったり、テーブル関連タグの<table><td><th>などが煩雑にならんだメタボリックぎみな大量なソースになっているはずです。これはhtml文書の中でデザインレイアウトを制御しようとするために起こるもので、XHTML+CSSという言い方が表すように、（主に）文章はXHTMLに任せる、デザインレイアウトの制御はCSSに任せるといった分業の考え方だといえます。
XHTML記述上のルールはもちろんあります。文章を<p></p>で囲むことや、<img>タグや<br>タグなどHTMLでは＜/＞で締める必要がないタグもXHTMLでは<img src=～ />や<br />など必ずタグの最後を/で区切ることや要素width=400などの数値を""で囲む必要がある（width="400"となる）などです。しかしながらそれなりにソースになじみがあればXHTML文書の作成はとても簡単です。これらXHTMLの記述ルールにあわせて、起承転結的に文章を並べる作業がXHTMLマークアップ作業であり、XHTMLファイルそのものなのです。
文章のみになったHTMLのソースは非常にシンプルです。テーブルレイアウトに頼ったHTMLソースと比べると、どこになにが書いてあるか一目瞭然（であるべき）です。これは結果的にSEO対策に有利といわれる所以でもあり、検索ロボットが理解しやすい文章になっているということです。ひいては音声ブラウザにも対応した非常にアクセシビリティに富んだファイルです。

    例）meta文やCSSファイルへのリンクも/で終わる必要があります。

    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <meta content="MSHTML 6.00.2900.3086" name="GENERATOR" />
    <title>福岡のホームページ制作会社 プランニングリンク（福岡市全域・近郊に対応いたします。ホームページ制作のリニューアル作成が得意です）</title>
    <meta name="Description" content="福岡のホームページ制作はプランニングリンク（福岡の博多区です）へ！リニューアルホームページ作成が得意です" />
    <meta name="Keywords" content="福岡県　福岡市 ホームページ制作　リニューアル制作　外注" />
    <meta name="Robots" content="INDEX,FOLLOW" />
    <meta name="COPYRIGHT" content="COPYRIGHT(C)2008 PLANNING LINK. ALL RIGHTS RESERVEED." />
    <meta name="Author" content="2008 PLANNING LINK" />
    <meta name="Modified" content="2008/1/29" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rev="made" href="mailto:info@planninglink.jp" />
    <link rel="index" href="index.html" />
    <link rel="stylesheet" href="css/general.css" type="text/css" media="all" />

CSSによるページレイアウトの必要性（デザイナーに為のCSSです！）

小生も少し前まではCSSレイアウト反対派でして、、テーブルレイアウトのどこが悪いんだ！と開き直っていました。（今でも基本はテーブルレイアウトがメインです。作業効率（コストに置き換えられます）を考えるとですね）XHTMLにてマークアップまでを施したページは文字ばかりのあまりにも簡素で見栄えの悪いページです。（当ページのCSSを外したページはこちら）前項で述べたようにXHTML+CSSとは、その言い方が表すように、（主に）文章はXHTMLに任せる、デザインレイアウトの制御はCSSに任せるといった分業の考え方であり、CSSは所謂テーブルレイアウターにとってのテーブルそのものだといえます。乱暴な言い方ですが（汗）ここからがWEBデザイナーの腕の見せ所ですね。
CSSでのレイアウトでは#○○のように要素を宣言し、その中にコンテンツの幅（width）や高さ（height）、内側の余白幅（padding）、外側の余白幅（margin）を指定します。その要素をXHTML文書の中に記述（<div id="○○">）することでまるでテーブルレイアウトのようなレイアウトが組みあがっていきます。多少の慣れは必要ですが、テーブルレイアウトの作業と比べてもはるかに効率がよく便利なレイアウト方法でであることに気づくでしょう。
小生なりの考えですが、このdiv id要素の作り方はXHTMLの文章の流れとあわせて概ね

    よくあるdiv idの例

    #container
    　#header（#containerに入れ子）
    　#menu （#containerに入れ子）
    　#contents（#containerに入れ子）
    　　#main（float="left"で#contentsに入れ子）
    　　#sub（float="right"で#contentsに入れ子）
    　#footer（#containerに入れ子）

のような感じでレイアウトの柱たなるメインのdiv id要素（テーブル的なもの）とそれに付随する詳細な要素を（<div class"">）などのクラス要素で組み立てていくという感じです。
※上記float="left"、float="left"は感単位言うと右寄せ、左寄せです。テーブルレイアウトでも多用（されたと思われる汗）1行・2列のテーブルの左右に入れ子でテーブルを入れ込むといった感じです。※概ね上記のような名前が多く見られました。（#containerや#headerなど）名前の付け方はひとそれぞれです念のため（笑）。その他詳細なCSSのリファレンスなどはネット上にあふれているので割愛します。

CSSを種別に分けてまとめて読み込む

テーブルレイアウトによるデザインが、煩雑なソースになることを考えるとこのCSSも内容が膨大になることが考えられます。しかしXHTML+CSSの考え方のひとつとして、ページデザインの管理がしやすい（全ページのレイアウトデザインが一挙に変更できる等）もあり、CSSそのものを簡潔にわかりやすくする必要があります。キレイなCSS記述が出来れば文句なしなのですが小生はまだ入門生の身、、そこで「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブック」から、こんなやり方を真似てみました。
それはCSSを種類ごとに分けるということです。
共通で使う#containerや#header、#menu、#contents、#footerを「main.css」としてまとめる。#mainや#subを「detail.css」としてまとめる。文字の装飾関係を「font.css」としてまとめる。などです。それをまとめてXHTMLから読み込みます。

<link rel="stylesheet" href="css/general.css" type="text/css" media="all" />

上記「general.css」の中身はというと

    general.cssの中身

    @charset"Shift_JIS";

    @import"main.css";
    @import"detail.css";
    @import"font.css";

といった感じです。
各CSSふぁいるんお先頭行にも「@charset"Shift_JIS";」を書き込みます。これでXHTML上はひとつのCSSファイル読み込みで複数のCSSファイルを読み込むことが可能です。

XML宣言とは？

XHTML文書には強く推奨される「XML宣言」とは

DOCTYPE宣言で、この「XHTML 1.0 Strict」を宣言した場合、もうひとつソースの最上部に「XML宣言」というものが必要なのだそうです。基本てきにXHTMLで書かれた文章にはこの「XML宣言」は必須といわれているようですが、「XHTML 1.0 Transitional」で書かれた公開されているサイトを見ても書かれていないのが結構あるようです。また文字コードがUTF-8、UTF-16で書かれた文書の場合のみXML宣言は省略できるそうです。（UTF-8、UTF-16がXMLのデフォルト値であるため）
XMLの表記の仕方を見てみましょう。
<?xml version="1.0" encoding="shift_jis"?>のような表記でencoding=""の部分には作成したXHTML文書の文字コードを表記するということがルールのようです。<head></head>内の<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />のcharset（キャラクターセット）=の部分と同じにするということですね。ネット上文献を見るとUTF-8がデフォルトだという記事が多く見られましたが、自分はDreamweaverで新規作成した時点でcharset（キャラクターセット）="は「shift_jis」だったので意味も分からず（笑）<?xml version="1.0" encoding="shift_jis"?>にしました。

    例）XML宣言を含めたXHTMLソース先頭部分

    <?xml version="1.0" encoding="shift_jis"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XML宣言とIE（InternetExproler、インターネットエクスプローラー）

とここでXML宣言したところで問題がありました、XML宣言を行ったページにはブラウザIEでは互換モードという機能が働いてIEの古いバージョン（4.5とか？）のような表示をしてしまうようです。古いブラウザはCSSによるレイアウトの制御を認識しない、または近年のブラウザ（Firefoxなど）とは違う解釈でブラウジングするなどやっかいで、調べる内にシェアナンバーワンだと思われるIEはCSS対応がもっとも遅れているブラウザであるらしいということが分かりました。
大きく違うのはmarginやpadding、widthの足し引きの考え方で単純に意図した幅や高さのレイアウトが崩れてにならない（なりづらい）というところでした。それと逆にXML宣言を外すとレイアウト崩れは解消（IE6.0の場合）されるのですが、javascriptが実行できないという問題がありました。ま、これらも解決テクニックは間違いなくあるのでしょうが、今のところこんなです。


InternetExprolerとFirefoxの見え方の違い

福岡のホームページ制作会社プランニング・リンク

InternetExprolerでの見え方（最新情報のタイトル下の点線の位置、情報部の白枠の幅が狭くなる、CONTENTSの背景画像がずれるなどレイアウトが崩れています）

福岡のホームページ制作会社プランニング・リンク

Firefoxでの見え方（Dreamweaver上で意図した通りの見え方です）

    （参考文献）

    IE6.0では文書型宣言（<!DOCTYPE〜>）の前に文字が存在すると、後方互換モードになってしまう
    LackyBagBlog「XML宣言について」

    XML宣言 Gecko系 MacIE5.x WinIE6 Opera7.x
    なし 標準準拠モード 標準準拠モード 標準準拠モード 標準準拠モード
    あり 標準準拠モード 標準準拠モード 後方互換モード 標準準拠モード

    （補足）今思ったのですが、文字コードUTF-8であればXML宣言がいらないとすればXHTML文書のcharset（キャラクターセット）をUTF-8に変えてXML宣言を削除すればIEでもレイアウト崩れはなくなるのではないか？今度試してみます。

XHTML+CSSのまとめ

XHTML+CSSは決してSEO対策のためだけに行われるものではありません。5年後にHTMLはなくなるなんていう刺激的な記述もあるWEBサイトでみました。とまれWEB業界でXHTML+CSSへの移行は必須といえます。自分のために言うことですが、XHTMLはシンプルに分かりやすく文章をまとめるためのファイル。CSSはテーブルレイアウトのようなレイアウトを実現するためのファイルです。なのでXHTMLの中に記述するCSSの要素<div id=やclassが必要以上に存在するソースにしては本末転倒。これからの勉強のしどころです。
最後に長々とした乱暴な文章を最後まで見ていただきありがとうございました。これからWEB標準に移行しようとする方の一助にでもなれば大変嬉しいです。自分も日々精進いたします。（2008/1/30）