Home | 第41号 | 第42号 | 第43号 | 目次

初心者のためのホームページ作り　第42号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週＜第42号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　   毎週金曜日配信　What's New 2003/3/7
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　今週の課題 ■ XHTML講座　第７回 XHTML1.1実践

◆ XHTML1.1の作成

今回より、実際の XHTMLを作成します。いずれ、要素タイプや属性の詳しい説明を織り込みながら講座を進めていく予定です。

XHTMLは決して難しいものではありません。HTMLを勉強し、ある程度の要素の働きがわかっていれば、XHTMLを作成する上での最低限のルールさえ守れば誰にでも作成することができます。

◆ XHTML1.1作成のルール

今回作成するページの中では、HTMLとは違う点があります。それが、XHTMLのルールに基づいて記述されるものです。要点は以下のとおりです。 これは、今回作成する XHTML文書として適合させるための、最低限のルールです。
XML宣言
XHTMLが XMLに適合した文書であること、正確に言えば XHTMLは XMLのサブセットであるわけで、そのためにも XML宣言は不可欠です。

なお、記述する文字コードが UTF-8、UTF-16の場合には、宣言を省略することが可能です。

構文：　<?xml version="1.0" encoding="ISO-2022-JP"?>

XHTML1.1文書型定義
HTML同様、XHTMLでも文書型定義の宣言を行わなければなりません。文書がどのバージョンのタグセットを用いるのか、文書に記述されるタグセットとの整合性を図ります。

構文：　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">　←改行せずに記述します。

名前空間
HTMLにはない機能で、タグセットの意味を示した文書の位置を URIによって示します。URIは絶対パスを用いることで、ユニーク（一意の、唯一の）としなければなりません。

なお、名前空間の詳しい解説は、第38号をお読みください。

構文：　<xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

スタイルシートの扱い
現状の各種のブラウザの仕様を考えたとき、スタイルシートは外部に置くリンキング方式が最も推奨される方法です。

スタイルシートは #PCDATAで記述されることにより、その開始区切子が実体参照のため文書内に配置することができません。また直接、各要素にスタイルシートを記述するインライン方式は、XHTML1.1では、style属性そのものが廃棄されているため利用することができません。したがって、外部スタイルシートとすることが最も妥当な方法といえるでしょう。

空要素の扱い
空要素とは、それ自体で完了する終了タグを持たない要素で、XHTMLでは、行末にスラッシュを用いなければなりません。

XHTMLは、XMLの文法を踏襲するので、要素の開始と終了は必ず対でなければならないのです。そのために、空要素という特殊な要素に対してのルールとして、スラッシュ「 / 」を用います。なお、古いブラウザにも対応するために、半角のスペース後に記述することで互換性を保つよう配慮します。

構文：　<br />、<img src="hana.png" width="200" height="150" alt="花の絵" />

XHTMLサンプル その１  詳しい XHTML構文は、今週のメールマガジン「第41号」を参照してください。

◆ スタイルシートの応用

XHTML1.1は「厳格仕様」となっているため、HTML Transitionalで利用できた見栄えを構成する要素や属性を使うことができません。

（ただし、XHTML1.0 Transitional では可能となっています。）

例：
<body bgcolor="#ffcccc" text="#000000" alink="#cc3399" vlink="#800080">
<p><font size="5">春うらら</font></p>
そのため、見栄えを設定するためにはスタイルシートがキーワードとなります。スタイルシートでは、背景色や文字色、配置、枠線や余白などを簡単に設定することができます。

また、スタイルシートに対応していないブラウザでは、スタイルシートそのものを無視し、文書の構造だけを表示するので、安心して利用することができます。これは、第39号で解説したように、文書をユニバーサル化するための手法ともいえることになります。

XHTMLサンプル その２  詳しい CSS構文は、今週のメールマガジンを参照してください。

スタイルシートは、XHTML文書を改変しなくても見栄えだけを変更することができます。また、外部スタイルシートとすることで、他の文書にも利用できる汎用性を持っているため、サイト全体のアイデンティティを確立することも容易に行えます。

XHTMLサンプル その３  スタイルシートだけを変更したものです。

PageTop / Home / 目次
Valid XHTML 1.1! Copyright（C） 2002-2003 ばんばん banban@scollabo.com