ちょっとサイトをステキにするCSSの基礎
 いまさら聞けないCSS／スタイルシート入門（2）

良いデザインを行うためのCSSの下地を作ろう

有限会社タグパンダ
喜安 亮介
2008/10/7
カッコイイWebデザインには、CSSの下地があると便利です。CSSの基礎知識として、HTML/XHTMLの違いから説明します（編集部）

　連載第1回の「ちょっとサイトをステキにするCSSの基本」はいかがでしたでしょうか？ 前回はCSSの基本の基本を解説しましたが、今回はCSSでWebサイトをデザインするうえで必須となるHTML/XHTMLの基礎知識を解説していきます。

HTMLの基礎を知らなきゃ、サイトはステキにできない

- PR -

　「自分でホームページを作りたいっ！」っと思い立った初心者の方が最初に勉強しないといけない言語が、皆さんもご存じのHTML（エイチ・ティー・エム・エル）という言語です。

　「言語」と聞いて何も難しく構える必要はまったくありません。初心者の方でも比較的簡単に習得できる、「マークアップ言語」といわれる種類の言語なのです。ずばりHTMLを含むマークアップ言語といわれる種類の言語の基本は、「タグで文を囲むだけ！」という非常にシンプルな記法なのです。

　それでは簡単にHTMLを使った記述例を見てみましょう。

<p>おいしいケーキ屋さんを知っているよ。</p>

　見てもらえれば分かると思いますが、文章の最初と最後に見慣れない記号が付いています。この記号がタグ（tag）といわれるものの正体なのです。

　HTMLファイルは、「<」と「>」でくくられたタグが埋め込まれたテキストファイルのことなのです。補足として、テキストファイルとは文字データだけが並んでいるファイルのことをいいます。

　勘違いしてはいけないのは、マイクロソフトが販売している文書作成ソフト「Word」で作られた「.doc」という拡張子の付くファイルはテキストファイルではありません。あれはバイナリファイルと呼ばれる種類のファイルです。ちなみに一般的にテキストファイルに付けられるファイル拡張子は「.txt」です。

　それでは、HTMLのタグをもっとじっくり見ていきましょう。基本的にタグは次のような形式になっています。

<タグの名前>ここに文章を記述する。</タグの名前>

　タグには開始タグ（/記号が付いていないもの）と終了タグ（/記号が付いているもの）があります。HTMLでは「タグの名前」で使うことができるアルファベット文字列がW3Cによりあらかじめ定義されています。

　また、タグの名前のことを一般的に「要素」(ようそ）と呼びます。要素の次に半角スペースを空けて記述される文字列部分が、「属性」（ぞくせい）という部分に当たります。HTMLの要素一例を挙げると、p要素、ul要素、h1〜h6要素、div要素などがあります。

　それでは最近「HTML」に取って代わる形で積極的に使われている「XHTML」は何が違うのでしょうか？

HTMLとXHTMLは、“X”で何が違っているの？

　近年、Webサイト制作の現場ではHTMLではなくXHTMLが使われることが当たり前のようになってきました。そういった背景からWebデザイン関連の書籍などでもXHTMLでサイトを作ることが前程となってきています。皆さんは、HTMLとXHTMLの違いを説明できますか？

　それでは知っているようで意外と知られていない、この2つの違いを見ていきましょう。最初に確認してほしいこととして、

HTMLとXHTMLは別ものです。
しかし、
HTMLとXHTMLとの間に文法上の大きな違いはありません。

ということがHTMLとXHTMLの違いを理解するうえでの大きなポイントです。では、どう違うのかといいますと、

HTMLのように構文のあいまいさがなく、
厳格なマークアップを強いる

　また技術的な観点からいえば、HTTPヘッダのMIMEタイプに、「application/xhtml+xml」の使用が推奨されているという点がHTMLとは大きく異なります。XHTMLファイルに推奨されているMIMEタイプは「application/xhtml+xml」ですが、Internet Explorer 6/7などといった最大のシェアを誇るWebブラウザに対してこのMIMEタイプが認識されず、ダウンロードファイルとして扱われてしまうといった悲しい現実があります。

　そのため、「XHTMLファイルでのMIMEタイプは『application/xhtml+xml』を使うことを推奨」とW3Cノート上に記載されていても、現実的には導入の手軽さなどの理由から「text/html」のMIMEタイプが採用されているケースがほとんどなのです（参考：XHTML Media Types）。

　HTML（エイチ・ティー・エム・エル)は、HyperText Markup Languageの略語です。XHTML（エックス・エイチ・ティー・エム・エル）は、eXtensible HyperText Markup Languageの略語です。

　「それでは文法がほとんど同じで、しかも拡張子も同じ（.htmlもしくは.htm）なのに、HTMLのファイルなのか、XHTMLのファイルなのか区別がつかないじゃないか？」とお思いのあなた、心配することは何もありません。コード先頭にある「DOCTYPE宣言」と呼ばれる記述を見ることにより、HTMLファイルかXHTMLファイルかを区別できます。

■ HTMLのDOCTYPE宣言

リスト1　Strict（ストリクト）型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

リスト2　Transitional（トランジショナル）型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

リスト3　Frameset（フレームセット）型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

■ XHTML 1.0のDOCTYPE宣言

リスト4　Strict（ストリクト）型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

リスト5　Transitional（トランジショナル）型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

リスト6　Frameset（フレームセット）型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

■ XHTML 1.1のDOCTYPE宣言

リスト7　XHTML 1.1のDOCTYPE宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

■ HTMLとXHTMLのコードの違い

　それでは実際のHTMLのコードと、XHTMLのコードの違いを例に挙げて見ていきましょう。

リスト8　HTMLコードの例（HTML 4.01）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>文書のタイトル</title>
<body>
  <H1>文書の大見出し</H1>
  <p>文書の内容
</body>
</html>

リスト9　XHTMLコードの例（XHTML 1.0）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>文書のタイトル</title>
<body>
  <h1>文書の大見出し</h1>
  <p>文書の内容</p>
</body>
</html>

　上がHTML 4.01で記述されたコード、下がXHTMLで記述されたコードです（※XHTML 1.1は一般ではあまり使われていないので、ここでのXHTMLという表記はXHTML 1.0を指すこととします）。

　2つを実際に比較してみるとXHTMLの方に見られる特徴として、以下があります。

  1. XML宣言がある
  2. DOCTYPE宣言内に「〜//DTD XHTML 1.0 〜」という「XHTML 1.0」という記述がある
  3. 要素名がすべて小文字で統一されている
  4. タグの終了を示す終了タグの記述がきちんある

　行頭に「<?xml ……」という記述があります。これは「この文章はXML文書ですよ」という意味の記述です。また、HTMLとXHTMLを区別するうえで最も分かりやすい部分はDOCTYPE宣言の記述です。HTMLの方には「HTML 4.01〜」、XHTMLの方には「XHTML 1.0〜」という記述がありますね！

　ここで注意してほしいのですが、必ずしもXHTMLでマークアップしなければならないということはありません。現在のHTMLの最新バージョンである「HTML 4.01」は、現在でも十分使われていて現役バリバリです。

■ XHTMLはXMLの種類の1つ

　W3Cが提唱している「Web標準」という概念に自分のサイトを準拠させるためには、妥当なマークアップ(HTML 4.01でも、XHTML 1.0でもOK）と妥当なCSSによりWebサイト制作を行うことは必要です（参考：W3C Quality Assurance Interest Group）。

図1　HTMLとXMLを組み合わせたものがXHTML（XHTMLは数多くあるXMLの種類の1つである）
図1　HTMLとXMLを組み合わせたものがXHTML（XHTMLは数多くあるXMLの種類の1つである）

　HTMLの最初のバージョンHTML 1.0が誕生したのが1993年で、その5年後に当たる1998年にXML 1.0が誕生しました。後発であるXMLの言語仕様を見習い再定義したのがXHTMLなので、HTMLとはまったく別のものと考えるのが普通です。

　2008年10月現在、HTMLの最新バージョンは「HTML 4.01」で、次バージョンでは「HTML 5」になり、XHTMLは「XHTML 1.0」で、次バージョンでは「XHTML 2.0」になる予定です。また、これら「HTML 5」「XHTML 2.0」の仕様策定は、W3C内で同時に行われています。

　ここで制作者サイドが注意しなければならないことは、なんでもかんでもXHTML 1.0でマークアップするのではなく、サイト運用といった面も考えたうえで、「HTMLにするか？ XHTMLにするか？」「文書型は何にするか？」というのを見極めることです。

  1/3

　INDEX
いまさら聞けないCSS／スタイルシート入門（2）　
良いデザインを行うためのCSSの下地を作ろう
Page1
HTMLの基礎を知らなきゃ、サイトはステキにできない
HTMLとXHTMLは、“X”で何が違っているの？
  Page2
代表的なHTML/XHTMLで使われている要素一覧
要素にIDやCLASS名を追加してみよう
文法にエラーがないかチェックするには？
  Page3
W3Cマークアップバリデーションサービスの使い方
FirefoxアドオンのHTMLバリデータもある
良いデザインを行うための下地作り

いまさら聞けないCSS／スタイルシート入門 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

アイティメディアの提供サービス

ホワイトペーパー（TechTargetジャパン／閲覧には会員登録が必要です）

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
プレゼン力UPからセキュアな情報共有まで
“デキる”企業の『ソフトウェア選択術』

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 New! 「スーパープログラマ」になるための資質
〜エンジニア・キャリア進化論（第13回）〜
◆ 　 New! 「あなたが何を食べているかで、あなたが
何者かが分かる」マーケティングとは？
◆ 　 New! 開発環境にも、「使いやすい」――
さくらの専用サーバプランが新しくなった

◆ 　 New! 「“監視ツール”だけで安心ですか？」
高可用性を追求した“クラスタ構築”とは
◆ 　 New! 24H稼働のオンライントレードを支える
エンジニアフレンドリー仕様のDB複製
◆ 　 New! コストをかけずに迅速復旧！！
事業継続性を高める為の“3つの要素”？

◆ 　 New! ＠IT編集部主催「データベース勉強会」
３人のプロが語ったカイゼン術とは？
◆ 　 New! 世界中で1万件の導入実績！我々の使命は
「日本のSOAをキックオフする」こと！
◆ 　 「仮想化環境」を1カ月単位でレンタル!?
初期コストを大幅に下げるサービスとは？

◆ 　 ビジネスは、小さく生んで大きく育てたい
そんな願いを叶えてくれるサーバって？
◆ 　 「週末だけリソースが増やせればなぁ…」
が実現するクラウドホスティング
◆ 　 プレゼン力UPからセキュアな情報共有まで
“デキる”企業の『ソフトウェア選択術』

◆ 　 SaaS、クラウドコンピューティング時代
必要となるITインフラの要件とは！？
◆ 　 導入事例を通してSDKの実績を検証しよう
これがワザあり開発ツールの“技”だ！！
◆ 　 世界200カ国以上で情報収集　最新インシ
デントを網羅　他に無い「統合ログ管理」

◆ 　 宅急便のように、データも運んで、守る。
クロネコヤマト流「事業継続」を解説する
◆ 　 【劇的】1357台のサーバが231台に！
仮想化＋ストレージの最新技術で効率性UP
◆ 　 従来の職種が、SOAによって大きく変わる！
SOA時代、新たに生まれる“6つの職種”とは？

◆ 　 いよいよ“普及期”へ
「Hyper-V」が仮想化の3つの課題を解決！

→＠IT Special ヘ

ソリューションFLASHPR