【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
ちょっとサイトをステキにする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 新着記事

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

＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ