翻訳者の序文: このオリジナルの記事シリーズには、Web 標準の普及から始まり、Dreamweaver 8 を使用して標準に準拠した Web を構築する方法が説明されています。 Dreamweaver 8を使った独自規格準拠のWebサイト」（この記事は有料抜粋です）のため、内容を適宜削除させていただきました。順序は元の記事と一致しますが、長さを調整します。ここでお知らせします。翻訳レベルには限界がありますので、ご了承ください。
この記事を読んでいるということは、おそらくすでに Web 標準に興味があり、DW (Dreamweaver の略) で構築されたサイトでの標準の適用に非常に興味を持っていることでしょう。
もしかしたら、WS (Web Standards の略) についてはすでにある程度理解しているかもしれませんが、DW を使用して互換性のあるコードを作成する方法はわかりません。または、あなたは DW ユーザーであり、WS に準拠し、CSS をより広範囲に使用して、よりユーザーフレンドリーなドキュメントを作成したいと考えています。あなたがどのタイプであっても、この記事はあなたが望む答えを提供します。DW を使用して WS を処理する方法を説明します。
Web 標準の定義
この記事全体を通して私たちが懸念している WS に関して、まず何について話しているのかを明確にしましょう。WS
は Web 開発言語をガイドする仕様であり、W3C によって策定されています。これらの仕様には、HTML、XHTML、CSS などの複数の言語と、数学で方程式を表すために使用される MathML などのその他の関連言語が含まれています。そのような特別なニーズがある場合には、それらを使用できる場合があります。 。 W3C は、Web ページのアクセシビリティを促進する Web コンテンツ アクセシビリティ ガイドライン (WCAG) も発行しています (WAI 経由)。
ヒント: これらのガイドラインは、
W3C の Web サイトで読むことができますが、
少し
難しい場合があります
。読むべきもの
:
HTML
4.01
W3C ドキュメントを読みすぎる必要はありません。WS を必要とするのは誰ですか?
WS は良いことだという漠然とした考えしか持っていないかもしれませんが、多くの有名なサイトを含む多くのサイトは WS に準拠しておらず、適切に管理されているように見えます。では、なぜ WS に準拠するよう努力する必要があるのでしょうか? そうすることで実際のメリットがあるのでしょうか? W3C の仕様と勧告に注意を払う必要があるのは誰ですか
? Web
開発者およびデザイナー
: Web サイト構築の開発者およびデザイナー。 WS を使用した開発方法を学ぶのに時間を費やす価値はありますか?クリーンなマークアップによりバグ修正が迅速化されます。
W3C でページを検証すると、少なくとも、不規則なマークアップがこれまでに経験したエラーの原因ではないことがわかります。ページを検証し、見つかったエラーを修正するプロセスにより、終わりのない要素やタグのスペルミスによって引き起こされる表示の問題が解決される場合があります。
文書を検証しても問題が解決しない場合でも、少なくとも正規文書に問題が存在することがわかります。この問題がバグではないことがわかったので、ブラウザごとの CSS 処理の違いなど、他の問題に焦点を当て始めることができます。
アクセシビリティ要件への準拠は簡単です。
正規の XHTML マークアップを作成すると、ドキュメントが意味的に正しいことを確認でき、ドキュメントのコンテンツをプレゼンテーションから分離できるため、多くの作業を行うことができます。 WCAG1.0 にリストされているアクセシビリティの問題。アクセシビリティは障害のある人だけのものではないことを認識することも重要です。フレンドリーなサイトには、携帯電話や PDA などのさまざまなデバイスからアクセスできますが、これらのデバイスには散在した非標準マークアップを処理する処理能力がありません。
上位互換性
現在のブラウザで新しく開発したページのパフォーマンスのみを考慮する場合、将来、新しいブラウザでそのパフォーマンスを保証するにはどうすればよいでしょうか。 新しいブラウザによってページが変更される可能性があります。表示がひどいため、苦労することになります。迷惑な問題を見つけて解決します。
WS に準拠してもこの問題が完全に根絶されるわけではありませんが、標準の互換性により設計が失敗するリスクが大幅に軽減され、今日のブラウザ ソフトウェア会社も標準をサポートし始めています。仕様の一部を誤って解釈してしまう可能性はありますが、それを完全に否定することはできません。最悪の事態が発生し、新しいブラウザによって標準化されたサイトに奇妙な影響が生じた場合でも、互換性のないサイトよりも修正する方がはるかに簡単です。問題が発生すると、他の標準に準拠したサイトにも影響が及びます。ウェブ コミュニティの集合知がこの点を指摘し、それに対処する記事を書くでしょう。したがって、このバグを互換性のないドキュメントで修正するよりも互換性のあるドキュメントで修正する方が簡単であるということについて全員で話し合いました。
リファクタリングが簡単になる
サイトからテキストを削除してリファクタリングをやり直す必要があったことがありますか?フォント ラベルや小さな表のセルが乱雑に配置されているラベルを見たことはありますか (そのため、最初から開始する必要があります)、長いプロセスと多大な時間と費用がすべて費やされているということだけがわかります。このサイトのリファクタリング。
ドキュメントのコンテンツとプレゼンテーションを分離すると、標準準拠という優れた点が得られます。これは、次回サイトをリファクタリングするときに、Web ドキュメントをコピーする必要がないことを意味します。サイト内のすべてのテキストはセマンティック (X)HTML でマークアップされ、Web マスターが変更したいすべてのプレゼンテーション情報は、簡単に置き換え可能な CSS ファイルに保存されます。
一部のクライアントは、リファクタリングを待たずに変更を加えるよう依頼し始めます。彼らは、マンモス化石ピットを訪問するまで待ってから、「左の列を右に移動してください」と言うように頼みます。標準化された互換サイトの場合、すべてのページは CSS によって制御されます。複雑なテーブル構造を持つ多くのページで、工夫を凝らすことなくページ上のタグを簡単に移動できます。これにより、ページ レイアウトの変更が容易になります。
構造をプレゼンテーションから分離すると、一部の閲覧者にとってより魅力的と思われるサイトのハイコントラストで小さな画像バージョンなど、新しい要素を追加しやすくなります。スタイル シートは簡単に変更できるのに、なぜテキストのみのバージョンのページを個別に作成する必要があるのでしょうか?
ブラウザ ソフトウェア
会社は WS に注目し始めています。以前は、ブラウザ ソフトウェア会社は、基本言語に独自のタグと属性を追加していました。しかし今では、これまでにないほど、すべてのブラウザが標準に準拠し始めており、最新のブラウザの一部はすでに、仕様で定義されている (X)HTML および CSS に従ってブラウザを表示するよう取り組んでいます。
近い将来、ブラウザはほとんどの非標準マークアップとコードを表示できるようになるでしょう。そうしないと、何千もの非標準サイトが適切に表示されなくなります。そのとき、一般の人々がブラウザを非難し始める可能性があります。 Webデザイナーではありません。ただし、他のデバイス (デスクトップのような処理能力を持たないデバイス) は、遭遇するコードの標準化された互換性により大きく依存します。
オーサリング ツール ソフトウェア ベンダー
Dreamweaver を製造する Macromedia などのオーサリング ツール ソフトウェア ベンダーも、Web デザイナーと同様に WS に準拠し始めています。これは、これらのオーサリング ツールが正規のマークアップを出力することを要求する顧客が増えているためです。当初、これらのビジュアル開発環境は、紛らわしい非標準のマークアップを生成するため、良い評判がありませんでしたが、最新の主要なビジュアル開発環境では、互換性とアクセシビリティの標準化された要素が取り入れられており、これが主なセールスポイントにもなっています。ソフトウェア ベンダーは市場のニーズに耳を傾け、それに対応する必要があります。
Web ユーザー
私たちが設計するサイトのユーザーも、たとえ意識していなくても、今日の人気のあるブラウザー専用に開発されたサイトを無意識に使用している可能性があります。これらのユーザーが別のブラウザに切り替えると、独自のタグが新しいブラウザで受け入れられないため、オンライン体験が楽しくなくなる可能性があります。標準化され互換性のあるサイトは、既存のブラウザでも将来のブラウザでも、さまざまなブラウザで適切に動作します。
さらに、アクセシビリティに関する推奨事項に従っている Web サイトは、Web の閲覧に満足できないと感じているユーザーにとってより親しみやすいものになります。ウェブは、視覚障害やその他の障害のある人にとって、より便利なショッピング、読書、検索条件を提供する必要があります。独自のタグやその他の独占的な (ブラウザを指す) テクノロジーが使用されているという理由で、サイトの閲覧を妨げられるべきではありません。
WS を使用する
ときに WS を正しく使用するにはどうすればよいですか
?まず、仕様に準拠する必要があります。これは、仕様で定義されている要素と属性のみを使用し、IE のマーキー タグや Netscape のブリンク タグなどの特定のブラウザ固有の属性の使用を避ける必要があることを意味します。また、以前の仕様 (HTML 3.2 など) に登場した要素や、後の仕様から削除された要素は使用しないでください。
正規の XHTML ドキュメントを作成する
この記事では XHTML を使用するため、W3C の XHTML 1.0 勧告に従います [W3C によると、勧告とは仕様を意味します]。 XHTML は基本的に HTML の最新バージョンであり、Web マークアップ言語である HTML を置き換えるように設計されています。 XHTML は XML の HTML 変形ですが、XHTML とセマンティクスで後ほど説明する微妙な違いはありますが、HTML とほぼ同じです。
XHTML ドキュメントは、Dreamweaver の [新規ドキュメント] ダイアログボックス ([ファイル] > [新規...]) から生成できます。図2.1「Dreamweaverでの新しいXHTMLドキュメントの作成」に示すように、「カテゴリ」リストで「ベース・ページ」が選択されていることを確認し、「ベース・ページ」リストから「HTML」を選択します。ドロップダウン リストから任意のドキュメント タイプを選択できます。
図 2.1: Dreamweaver での新しい XHTML ドキュメントの作成
図 2.2: コード ビューでの新しい XHTML ドキュメントの表示
「作成」をクリックして新しいドキュメントを生成します。ドキュメント ウィンドウの上部にあるコード ボタンをクリックして「コード ビュー」に移動すると、単純な XHTML ドキュメントにどのようなコードが含まれているかが明確にわかります。図 2.2 に示すように、「新しい XHTML ドキュメントをコード ビューで表示する」ドキュメントの最初の行には、
次の内容が表示されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://EN" /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
これは、文書型宣言 (DOCTYPE) と呼ばれます。名前が示すように、DOCTYPE はドキュメントが何であるか、つまりどの (X)HTML 仕様に準拠しているかを宣言します。この例では、DW 8 のデフォルト設定である XHTML 1.0 Transitional に従っています。 「移行」セクションでは、XHTML バージョンに関する追加情報が説明されています。 XHTML1.0 には、Strict、Transitional、Frameset の 3 つの「フレーバー」があります。 DW はデフォルトで Transitional タイプを使用し、ドキュメントにフレームを挿入する場合は Frameset を使用します。
ご想像のとおり、XHTML Strict は最も厳密な XHTML 形式です。 Strict ドキュメント タイプは次のようになります。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Strict
DOCTYPE を使用している場合、ドキュメント内でそれを使用することはできません。 Any 要素非推奨を宣言する(タグ)または属性はフレーム内で使用できません。宣言された非推奨要素は、XHTML の将来のバージョンでは削除される予定です。これらの要素の多くはページの外観を制御するために使用され、CSS で完全に置き換えることができます。 Strict と Transitional の最大の違いは、Strict DOCTYPE を使用すると、パフォーマンスのために使用できると考えられていた属性と要素が大幅に制限されることです。
注: DW での Strict DOCTYPE の使用
DW は、標準への準拠に関してはそれほど厳密ではありません。 Strict DOCTYPE を使用する場合は、文書の検証と不規則な属性の修正に特に注意してください。基本的にCSSに置き換えるのは簡単です。
フレームセット DOCTYPE はフレームの使用をサポートします。ドキュメントにフレームを挿入すると、DW は自動的にこのタイプを使用します。フレーム ページは少なくとも 2 つの他のページに関連している必要があり、関連するページのドキュメント タイプに制限はありません。 Frameset DOCTYPE のコードは次のとおりです。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 では、ドキュメント タイプの 3 つの「フレーバー」、Transitional、Strict、およびフレームセット - 前述の XHTML DOCTYPE とまったく同じように動作します。いずれかのタイプを使用する場合は、HTML (XHTML ではなく) ドキュメントでこれを指定する必要があります。 HTML と XHTML の違いについては、後ほど Web サイトの作成に関するセクションで詳しく説明します。
オリジナル: Dreamweaver 8 Does Standards ! by Rachel Andrew
コンパイル: x5