まずは、焦らずに始めましょう！何かを始める前に、次の 2 つの心の準備をしてください。これは学習プロセスにおいて最も重要なことです。
学習には時間がかかり、段階的に行う必要があります。
途中で挫折もあるでしょう。
しかし、あなただけではありません。私たちの多くは Web 標準の学習と使用に投資しています。より簡単に学習できるように支援するコミュニティが拡大し続けており、テクニックやテクニックを学ぶのに多くの困難を抱えてきたベテランや、汗と涙から恩恵を受ける幸運な後発者 (私も含む) がいます。
ようやく Web 標準ベースのデザイン手法の使用に習熟したとき (従来のテーブルベースの手法が影を潜めているように見えます)、振り返ってみると、CSS を使用してページをレイアウトするのがそれほど難しくないことに驚くでしょう。ああ、もちろん、主流のブラウザが CSS2 仕様の一部の操作をより適切にサポートしていれば、実際には使いやすくなるかもしれません。
そうですね、少し話が逸れたような気がします。
それでは、実際に役立つ情報を早速始めましょう。まずは『Designing With Web Standards』(注1) を買って、あまり考えずにすぐに実行してみてください。すでにお持ちですか?ほこりをかぶらないように、今すぐ読んでください。私が言いたいことはすべてこの本の中で詳しく説明されています。この本は、マニフェスト (なぜ行うべきか) とチュートリアル (どのように行うか) の 2 つの等しい部分に分かれています。これは役に立つかもしれません。
さて、最初に行うことは、XHTML のイデオロギー システムの概念を確立することです。HTML4.01 を選択するか、気が遠くなるような雑用を選択するかにかかわらず、すべてのドキュメントは DOCTYPE を選択することから始まります。ドキュメントで使用されているマークアップ言語をブラウザーに伝えることで、不必要なパフォーマンス エラーを防ぐことができます。そうしないと、ページの表示結果が悪くなり、気が狂ってしまう可能性があります。例: シカゴに飛行機で行きたい場合は、旅行代理店に行き先を伝えなければなりません。そうしないと、目的もなくウィーンに飛んでしまう可能性があります。 HTML または XHTML を表示するには、まず DOCTYPE を設定することで確実に「目的地」に到達できることをブラウザーに伝える必要があります。
次の目標は、厳密にフォーマットされたロゴです。これはとても簡単にマスターできます。すべての属性を引用符で囲みます (例: <a href="link">)。開いているタグをすべて閉じます (例: <input type="text" />)。すべてのロゴや要素は閉じる必要があります。
簡単なメモ: タグがいつ要素になったのかはわかりませんが、意味は同じですが、言い方が異なります。何と呼んでも、今では「エレメント」が正しい名前のようですが、もしかしたら最初はそうだったのかもしれません、分かりませんし、誰も教えてくれませんでした。
とにかく、すべての要素を正しく閉じる必要があります。 HTML4.01 を使用する場合は、<br>、<hr>、<input> などの個々の要素を無視できます。XHTML を使用する場合は、最後にスラッシュを追加して、個々の要素も閉じる必要があります。たとえば、<br> > になって<br /> しまいます。
次に、XHTML 属性に関してやや混乱を招く規則があります。すべての属性には値が必要であり、値がない場合は値そのものが使用されます。たとえば、<input type="radio" selected="checked" /> です。 HTML4.01 ではチェックされた値は必須ではありませんが、XHTML では必須です。
最後に、XHTML ではすべてのコードを小文字で記述する必要があります。HTML では大文字と小文字が区別されませんが、XHTML では大文字と小文字が区別され、XML 構文の規則に従います。
ロゴ変更については以上です！あなたはすでにすべてを知っています！深呼吸して、ビールを飲んで、リラックスしてください。それはほんの最初のステップだからです。
セクション 2
ここで、正しい HTML/XHTMLL を記述し、W3 組織のバリデータ (バリデータ) で検証する方法を学び始めます。正しく記述した場合は、青色の背景に黄色のテキストで成功メッセージが表示されます。この色とフォントの組み合わせを気に入ってみてください。きっとあなたの親友になるでしょう。
なぜ検証がそれほど重要なのでしょうか?関係ありますか？不適切に書かれた（ランダムで不正確な）ロゴは、完全に予測不能になるからです。ページの「生死」はブラウザのエラー処理方法に完全に依存しますが、ほとんどのブラウザは下手なロゴもサポートできますが、これは間違った習慣です。こんにちは、なぜ私たちは非標準に慣れてしまうのでしょうか？最初の理由は、1995 年にブラウザ戦争であり、IE が Netscape とまったく同じように Web ページのエラーを処理したため、Microsoft は Netscape と競争して市場シェアを獲得することができました。
別の観点: 検証は、間違ったコードを見つけて、ページの動作がより一貫していることを確認するのに役立ちます。私がレイアウトをデバッグするときに最初に行うのはコードの検証です。あなたもそうであると思います。
OK、最初のサイトを初めて検証するときは、おそらく 70 ～ 80 個もの信じられないようなエラー メッセージがフィードバックされるのに耐えなければならないでしょう。残念ながら、チェックサムは役に立ちますが、完璧ではなく、少数のボランティアによってのみ保守されています。幸いなことに、これらのエラーは関連しています。</p> タグが欠落していることに気付いて修正すれば、次の 24 個のエラーはなくなる可能性があります。つまり、検証結果が悪いように見えるかもしれませんが、多くの場合はそうではありません。
これで検証に合格し、コードが準拠しました。この時点では、厳格なガイドラインに従っていますが、そもそもなぜそうするのかについては完全に理解していません。
セクション 3 次のステップは、整形式のマークアップを使用して作成したドキュメントをリファクタリングし、最近の DOCTYPE で「非推奨」としてリストされることが増えているプレゼンテーション層属性を取り除き、別のファイルに配置することです。これは物議を醸している「パフォーマンスと構造の分離」であり、これが CSS が非常に重要である理由です。
これはアナロジーです。テキストはコンテンツです。コンテンツは完成していますが、コンテンツ構造 (スペース、セクション、タイトル、リストなど) に関するヒントはなく、単なる乱雑なテキストであり、まったく使いにくいです。構造レイヤーは、追加の構造情報を伝えるために文書に追加され、乱雑なテキストを分割し、より論理的で整理されたものになります。ただし、これらの要素はテキストのデフォルトの外観を制御しません。たとえば、最初のページのタイトルがテキストのフォントよりも大きいことがよくありますが、これは構造によるものではありません。
「プレゼンテーション層」の登場です。この表現は書式設定のヒントであり、最初のページのタイトルを赤、斜体にし、フォント サイズを本文フォントの 150% にするように指示します。プレゼンテーション層は、文書構造層の上にある追加の層です。 CSS はプレゼンテーション層に属し、ドキュメント上の単純なタグを通じてドキュメントを素晴らしいフォームに変換できます。例については CSS Zen Garden にアクセスしてください。
では、パフォーマンスを構造から分離する最善の方法は何でしょうか?従来のコードを例に挙げて説明します。このコードには、プレゼンテーションを提供するために使用される HTML 要素または属性が含まれています。ここで、bgcolors と <center> タグを削除します。カジュアルなテストを行ってみましょう。
次のデモ コードでは、どのプレゼンテーション属性とタグを削除する必要がありますか?
<center><h1><font face="Verdana">これは私の最初の Web サイトです。</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>彼らは私を連れて行きます...</p></td>
答えの準備はできていますか? OK、正しい結果は以下にリストされています。これは、パフォーマンスの痕跡のないクリーンな構造化コードです。
<h1>これは私の最初の Web サイトです。</h1> <table> <body> <td><p>彼らは私を連れ去ろうとしています...</p></td>
それだけです？それでおしまい。
このコードは明示的にいずれかの仕様に準拠しているわけではありませんが、この分離のより重要な意味は、正しい要素が使用されることです。テーブル レイアウトの使用は二次的な問題です。長期的かつ賢明な観点から見ると、テーブルの使用方法は間違っています。<table> 要素と <td> 要素は削除する必要があります。テーブルの使用は非推奨になりましたが、テーブルは依然として非常に便利であり、必要に応じて、表形式に配置されたデータに対して使用できます。
さて、ページから書式設定を取り除きました。万歳！今は他に何をしているのですか？これでは、Times-New-Roman フォントの見苦しい要素、テキスト、行が残るだけです。全然面白くないよ、約束されていた明るくて美しいページはどこにあるんだ？
Zen Garden の例を振り返ってみると、デザインがかわいいことに気づきましたか?見た目はどれくらい違うのでしょうか？重要なのは、その美しいデザインの下には、作成したばかりの書式設定されていないドキュメントと同じくらい退屈な XHTML があるということです。そうじゃないですか？
実際、退屈で醜いということには十分な根拠があります。このフォーマットされていない HTML が 1994 年の Web と同じくらいひどいものであることに気づいたかもしれません。いくつかの例外を除いて、これらの要素は Web 自体と同じくらい古く、<h2> は Mosaic ブラウザーの時代から存在しています。
利点はそれだけではありません。使いやすさ (特別なニーズ向け)、組み込みの SEO、帯域幅コストの削減などです。 Jeffrey Veen はすでに昨年「The Business Value of Web Standards」を執筆しており、Roger Johansson も最近の「Developing with Web Standards」で標準ベースの設計のテクニックと利点を説明しています。
CSS は現在、すべての主要なブラウザで十分にサポートされており、CSS 構文、CSS ベースのレイアウト、および高度なテクニックの学習に役立つリソースが無数にあります。良いものをいくつかお勧めします。westCiv では、すぐに始めてマスターできるよう、継続的な無料の CSS コースを提供しています。 Andrew Fernandez は、CSS を初めて使用するかどうかに関係なく役立つ CSS リソースの膨大なリストを作成しました。 Eric Meyer は、机の上に置いていつでも参照できる書籍の束を書きました。これらの書籍には、ケースベースの Eric Meyer on CSS と More Eric Meyer on CSS が含まれています。 CSS の参考書：オライリー出版社発行の「The Definitive Guide to CSS」の第 2 版が発売されましたので、机の上に置いておくとよいでしょう。 Molly Holzschlag 著の「The Designer's Edge」および Chris Schmitt 著の「Designing CSS Web Pages」も入手可能です。
CSS の適用とレイアウトの構築を詳しく説明すると、時間がかかりすぎます。これ以上は言いません。上記は、Web 標準に注目し始めているデザイナーに私ができるアドバイスです。読んで意見を共有し、コミュニティとして成長しましょう。私たちの多くは Web 標準を積極的に推進しています。それを活用してください。
注 1. 『Designing With Web Standards』は、Web 標準を促進するために Zeldman によって書かれた書籍で、中国語版は 2004 年 5 月に発売されました。この本のタイトルは「Web サイトの再構築 - Web 標準による設計」です。