私たちはかつてこのセクションのタイトルを「XHTML : シンプルなルール、簡単なガイドライン」と書きました。その理由の 1 つは、このセクションで説明するルールとガイドラインがシンプルで簡単だからです。 2 番目の理由は、新しいスーパーマーケットの景品のような、シンプルで簡単な Web デザインの本は一般的であると同時に、注目を集めるのに効果的であり、人々の興味を刺激し、試してみることを促すものであるためです。
このセクションがあなたの興味をそそり、試してみることを願っています。 なぜそんなことを言うのですか？ この章に含まれるシンプルで簡単なアイデアをマスターすれば、Web ページの動作方法を再考し、Web ページの構築方法を変更し始めることができるからです。 ただし、コードをもう一度最初から書き直すことは望ましくありません。 実際に別の方法で考えて取り組むことができることを願っています。
一方、リファクタリングは XHTML の本質です。
この章では、構造化マークアップのメカニズムと意味について学びます。 開発プロジェクトに Web 標準を組み込んでいる場合は、この章の内容に多少馴染みがあるかもしれません。 しかし、退役軍人でもこの章からは予想外のメリットが得られるでしょう。
いくつかの単純なルールと簡単なガイドラインに従えば、従来の HTML から XHTML 1.0 への変換は、簡単かつ簡単に行うことができます。 HTML を使用したかどうかに関係なく、XHTML の使用が妨げられるわけではありません。
XML、XHTML、および HTML 4.0 ドキュメントのデフォルトの文字セットは、Unicode コンソーシアムによって定義された標準である Unicode です。 Unicode は、プラットフォーム、プログラム、言語に関係なく、各文字に特定の一意の番号を与える包括的な文字セットです。 Unicode は、アルファベットではなく数字のマッピング スキームではありますが、ユニバーサル アルファベットに最も近いものでもあります。
Unicode は Web ドキュメントのデフォルトの文字セットですが、開発者はより適切な他の文字セットを自由に選択できます。 たとえば、米国と西ヨーロッパのサイトでは ISO-8859-1 (Latin-1) エンコーディングが使用されることがよくありますが、中華人民共和国の国家標準は gb2312 です。
覚えておいてください: レイアウトには CSS を最大限に使用してください。 Web 標準の世界では、XHTML マークアップはプレゼンテーションに関するものではなく、ドキュメントの構造に関するものです。
適切に構造化されたドキュメントは、ハンドヘルド コンピュータ上であっても、洗練されたデスクトップ グラフィカル ブラウザ上であっても、ブラウザにできる限り多くのセマンティクスを伝えます。 適切に構造化されたドキュメントは、古いブラウザーや、ユーザーによって CSS がオフにされている最新のブラウザーであっても、視覚的なセマンティクスをユーザーに伝えます。
すべてのサイトが HTML テーブル レイアウトをすぐに廃止できるわけではありません。 CSS の発明者である W3C は、2002 年 11 月まで公式 Web サイトを CSS レイアウトに変換しませんでした。 ただし、熱心な標準主義者であっても、少なくとも XHTML 1 では、プレゼンテーションを構造から完全に切り離して常に扱うわけではありません。 しかし今では、プレゼンテーションを構造から（またはデータをデザインから）分離することで、この理想に向けて大きな一歩を踏み出すことができ、ハイブリッドな従来のレイアウトでも恩恵を受けることができます。
より構造化された方法で考えるのに役立つヒントをいくつか紹介します。
グラマースクールでは、私たちのほとんどは標準的なアウトライン形式を使用してエッセイを書くことを強制されました。 私たちは今、デザイナーとして、輪郭の枠から抜け出し、ユニークで個人的な表現の自由な領域に大胆に挑戦できるほど自由になっているのです (おそらく、私たちのパンフレットや商用サイトはそれほどユニークで個人的なものではないでしょう)。 しかし、少なくとも輪郭に悩まされることはなくなります。
実際、HTML によれば、コンテンツを組織的な階層に構造化する必要があります。 ブラウザーが CSS をサポートしていない時代には、販売可能なレイアウトを提供しながらこれを行うことはできません。 しかし現在では、妥協することなく設計を実現しながら、本質的に適切に構造化されたドキュメントを提供する能力を備えています。
Web 用にテキストをマークアップするとき、または既存のテキスト ドキュメントを Web ページに変換するときは、従来のアウトラインからこれらの項目を考慮してください。
<h1>私のトピック</h1> <p>紹介文</p> <h2>補足</h2> <p>関連テキスト</p>
同時に、実際には存在しない論理構造をシミュレートするために、<font> などの非推奨の HTML 要素や、<br /> などの非セマンティック要素を使用することは避けてください。
たとえば、次のようなことは行わないでください。
<font size="7">マイテーマ</font><br /> 紹介文 <font size="6">補足ビュー</font><br /> 関連テキスト<br />
私たちの中には、大きなテキストが必要なときに h1 を使用したり、テキストの前にドットが必要なときに li を使用したりする悪い習慣が身に付いている人がいます。 前の章で説明したように、ブラウザには常に HTML 要素にデザイン属性を課す習慣がありました。 私たちは皆、h1 は大きな文字を意味し、li はドットを意味し、blockquote はテキストのインデントを意味すると思い込んでいます。 私たちのほとんどは、プレゼンテーションを模倣した構造要素を含む HTML をまだ走り書きしています。
同様に、デザイナーがすべての見出しで同じフォント サイズを使用したい場合は、そのための構造的なセマンティクスがないにもかかわらず、すべての見出しを h1 に設定します。
<h1>これはメインの見出しで、テキストをアウトライン形式で整理しました。 </h1> <h1> メインの見出しではないのですが、上の見出しと同じフォントにしたいのですがCSSの使い方がわかりません。 </h1> <h1>これは見出しではありません。 しかし、私が望んでいることを達成するには、ページ上のテキストに同じフォントを使用したいのですが、 CSS を知っていれば、文書の構造を壊さずにこのデザインを実現できます。 </h1>
ちょっとしたトリックを脇に置いて、要素の見た目ではなく、セマンティクスに従って要素を使用し始める必要があります。 実際、h1 には任意の値を指定できます。 CSS を使用すると、h1 は太字ではない小さなローマ字フォント、p テキストは太字の大きなフォントにすることができ、li はドットなしにすることもできます (子猫や会社のロゴの PNG、GIF を使用することもできます)代わりに JPEG 画像など）
今日から、CSS を使用して要素の外観を決定します。 ページまたはサイト上の要素の位置に基づいて要素の外観を変更することもできます。 CSS は構造からプレゼンテーションを完全に抽象化し、任意の要素を自由にフォーマットできるようにします。
h1, h2, h3, h4, h5, h6 {
font-family: georgia, palatino, "New Century Schoolbook",
times, serif;
font-weight: normal;
font-size: 2em;
margin-top: 1em;
margin-bottom: 0;
}
なぜこれを行うのですか? そのアイデアは、テキスト ブラウザ、ワイヤレス デバイス、および HTML 形式の電子メールでドキュメントの構造を維持しながら、グラフィカル ブラウザでブランドの外観と操作性を実現することです。
XHTML に関する章では、これ以上の CSS テクニックについては説明しません。 私たちは、文書構造と視覚的表現が 2 つの完全に異なるものであること、および構造要素は表示効果を課すものではなく、テキストを変換するために使用されるべきであることを示したいだけです。
HTML と XHTML の目的が構造的な意味を伝えることであることを忘れているか、単に知らないため、多くの HTML 討論者はタグを使用して次のようなリストを挿入します。
プロジェクト 1 プロジェクト 2<br /> アイテム 3<br />
代わりに、順序付きリストまたは順序なしリストの使用を検討してください。
<ul> <li>プロジェクト 1</li> <li>プロジェクト 2</li> <li>プロジェクト 3</li> </ul>
" でも li は私にドットをくれました、そして私にはドットは必要ありません! "そう言うかも知れませんね。 上のセクションによると、CSS は要素の望ましい外観について何の仮定も行いません。 要素をどのように見せたいかを指定するのを待ちます。 ドットを閉じることは CSS の最も基本的な機能です。 完全な反転効果により、リストを通常のテキストのように見せたり、リストをグラフィカル ナビゲーションバーのように見せたりする機能があります。
したがって、リスト要素を使用してリストをマークアップします。 同様に、b の代わりに Strong、i の代わりに em などを使用します。 ほとんどのデスクトップ ブラウザのデフォルトでは、strong は b と同じように表示され、em は i と同じように表示されます。これにより、ドキュメントの構造を壊すことなく、期待どおりの視覚効果が得られます。
CSS は要素がどのように表示されるかを想定しませんが、ブラウザーは多くの想定を行い、太字以外の表示を強力に行うブラウザーに出会ったことはありません (作成された CSS に合わせて設計されている場合を除く)。それ以外の場合を示します)。 慣れていないブラウザでは太字で表示されないのではないかと心配な場合は、次のような CSS ルールを作成できます。
strong {
font-weight: bold;
font-style: normal;
}
Web 標準は、使用するテクノロジーだけでなく、その使用方法も決定します。 レイアウトの一部またはすべてに CSS を使用しながら XHTML でマークアップを記述しても、必ずしもサイトが使いやすくなったり、軽くなったり、帯域幅が大幅に節約されたりするわけではありません。 私たちが初期に使用していたテクノロジーと同様に、XHTML と CSS は誤用および悪用される可能性があります。 冗長な XHTML は、冗長 HTML と同様にユーザーの帯域幅と時間を無駄にします。 冗長で過剰な CSS は、表現力豊かな HTML コードを完全に置き換えるものではありません。それは、1 つの悪い点を別の悪い点に置き換えただけです。