序文
初めてインターネットをサーフィンしたとき、ダム端末を使用しました。やがて、ミネソタ州のモノクロモニターでサーバーを介して映画「モンティ・パイソン・アンド・ホーリー・グレイル」を再生できるようになりました。 24 ビット カラーはおろか、マウスも優れたユーザー インターフェイスもありませんでした。使用できるツールは Gopher のみです。検索に使用できるのはアーチーとベロニカのみです。 W3 (World Wide Web) については誰も聞いたことがなく、当時は Web で十分だと思われていました。
翻訳者注:
1. ダム端末。 PC によく似ていますが、独自の CPU、メモリ、ハードドライブはありません。トランザクションは共通のホストを通じて処理されます。
2.ゴーファー。 FTP転送、リモートログイン、Archie検索などを行うことでエンドユーザーにあらゆる情報をメニュー形式で表示し、ユーザーが多数の情報を閲覧できるクライアント/サーバーアプリケーションです。このようにして、ユーザーはインターネット リソースにアクセスするときに自分のアドレスを知る (または入力する) 必要がありません。
3.Archie は、インターネット上の匿名 FTP Web サイト ファイルのインデックスを自動的に作成する最初のプログラムですが、まだ真の検索エンジンではありません。
4.Veronica は、Gopher スペース内の指定された特殊な単語を含むすべてのメニュー項目を取得するために使用できる Gopher タイプのリソースです。
しばらくすると、検索結果に奇妙なコードが大量に表示されるようになり、必要なものはまだ読むことができましたが、煩わしかったです。同僚が、それはインターネット用のグラフィック言語である HTML だと教えてくれました。私は HTML をフィルタリングする方法をいくつか学びました。その後、256 色のモニターと Mosaic ブラウザの最初のバージョンが登場し、すべてが変わり始めました。
それから長い時間が経ち、テクノロジーは信じられないほど進歩し、Web インターフェイスは何度も徹底的に見直され、再考され、再発明されてきました。 Web デザイナーとして働き始めて以来、私はテーブルベースのデザインのさまざまな段階、JavaScript の困難、CSS の苦労、そしてより重要なことに、広く受け入れられている Web 標準を直接経験してきました。
当初、インターネットはギーク (テクノロジー愛好家) の考えに従って作成されただけで、背景の色や美しい画像などは考慮されていませんでした。しかし実際のところ、人々はサーフィン中により豊かな表現を見たがります。テーブル設計手法の登場により、テーブルを通じてレイアウトを制御できるようになります。私たちは皆、システムを「騙し」始めました。1 ピクセルの細い線を作成できないでしょうか。表の行に透明な GIF ドットを挿入し、背景色を設定するだけで完了です。フォントを制御できないのですか？その場合は、別のタグ <font> を使用してください。
CSS や Web 標準に出会う前、私は長年テーブルを使用してデザインしていました。 Web標準の設計手法はこれまでとは全く異なり、効率的かつ魅力的です。私は新しいデザイン手法に深く、情熱的に恋に落ちました。意味のあるコードを使用してコンテンツをレイアウトから分離できますが、空白と美しいデザインは維持され、私はすぐに「新しいものを好み、古いものを嫌い」になり、古いデザイン方法を使用しなくなりました。
今日まで。
Web 標準と CSS については多くの議論が行われてきましたが、他の優れたキーワードと同様、Web テクノロジー開発の歴史において次の「ビッグネーム」となるでしょう。それは、Dougl as Bowman が Wired.com を再設計することから始まり、進化し続けてきました。 2003 年にゼルドマン著『Designing with Web Standards』が出版され、世界中のデザイナーがこの新しいデザイン手法を受け入れ、支持するようになりました。構造化されており、セマンティックであり、高速かつ軽量です。
しかし、依然として従来のテーブル設計方法を使用し、<font> タグを使用している人もいます。彼らは、従来の方法の方がメンテナンスが簡単で、開発が迅速に行えると主張しています。誰が正しいですか？
私は、状況がどのように変化したのか、どの方法を選択した方が優れているのかを確認するために、自分で実験を行うことにしました。
チャレンジ
グラフィックソフトを使って架空のウェブサイトをデザインしました。次に、比較として CSS を使用しないテーブルを使用して、最初に HTML4.01 を使用して作成します。次に、XHTML1.0 Transitional を使用して作成します。コードはユーザビリティとアクセシビリティの仕様に準拠し、CSS を使用してテーブルを可能な限り回避します。 (テーブルが表形式のデータを表すために使用されている場合を除きます。)
制作工程を3段階に分けて詳細に記録し、メリットとデメリットを比較してみてはいかがでしょうか？何が失われてしまったのでしょうか？私たちはどちら側につくべきですか。
フェーズ 1: サイトを設計する
架空のサイトのデザインを始めました。 「Butterfly Watchers Association」という団体のウェブサイトを作成しているとします。あはは、これはおそらくデザインプロセスに関与しない私の最高のクライアントです。従来のレイアウトと権威あるフォントを使用して、Web サイトのターゲット ユーザーを想像し、可能な限り現実的なものにするよう努めました。
サイトをコンパクト、効果的、簡潔なものにしたいと考えています。また、ページには蝶があるはずだと思い、適切な蝶の画像を探し回ったところ、すぐにstock.xchngで蝶の画像を見つけました。緑の葉の中にとまる青い蝶がサイトのイメージにぴったりです。処理と変更を加えた後、この画像がページのヘッダーになります。
デザインプロセス中、私はいくつかのユーザビリティ原則を遵守しました。たとえば、画像ファイルのサイズをできるだけ小さくするようにしてください。当初、ナビゲーションには Garamond フォントを使用する予定でしたが、ユーザーのマシンにこのフォントがない可能性を考慮して、Georgia フォントを使用することにしました (このフォントは Times New Roman に似ており、最悪の場合、 Times New Roman フォントに置き換えることができます)。でもヘッダー画像はイメージなのでやはりジョージアを使いました。
テキストの背景は灰色で、Trebuchet MS フォントが使用されています。ニュースでは Verdana フォントが使用されており、縮小しても見栄えが良くなります。デザインには 4 つのフォントを使用するという暗黙の経験則がありますが、私はそれにあまり同意しません。
第 2 段階: 「前の方法を使用し、透明な GIF 画像を使用して間隔を制御します。」
すでに複数のプロジェクトに参加している Web デザイナーであれば、次の構造によく馴染みます。
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <tdcolspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">コンテンツがここに表示されます。</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <tdcolspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
私たちは、テーブルが最も基本的な「構成要素」であるため、テーブルを使用して話すことに慣れています。たとえば、透明な GIF 画像を使用して間隔を制御し、テーブルのさまざまな属性を使用して位置を制御します。誰かがこのように説明しました: テーブルは信頼性があり、テーブルでレイアウトされたページは上位互換性があります。テーブルと競合する CSS はありません。テーブルはすべてのブラウザに適合します。
まずは、設計プロセス全体を段階的に再現してみましょう。
1時間目
おお。 CSS を使用せずに背景色を定義するにはどうすればよいでしょうか? そうです、bgcolor です。ヒントをありがとう。さて、フォームの作成を開始して効果をプレビューしましょう。すべてのブラウザで中央に配置されるように「align=center」を定義しました。とても簡単です。フォームも悪くなく、旧友に再会したような気分です。透明なGIF画像を巧みに使って間隔をコントロールしたので、作業はすぐに終わりました。親切？ヘッダーとメニューの間に空白があるのはなぜですか?ああ、画像コードの後に余分なスペースがあることがわかり、IE ブラウザはそれを表示します。これはスペースを削除するだけで簡単に変更できます。
2時間目
JavaScript を使用して、ナビゲーション メニューの反転効果を作成します。
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript は次のように記述されます。
関数 chBg(obj) { obj.bgColor = "#E1E5DB" } 関数 chBg2(obj) { obj.bgColor = "#CBD1C3" }
古い設計手法について少し忘れてしまったという事実を除けば、全体の進歩は非常に速かったです。テーブルのネストをできるだけ減らすようにしましたが、コードがまだ少し複雑に見えたので、変更する必要がある場所を見つけやすくするためにいくつかのコメントを追加しました。
小さな問題が発生しました。CSS を使用しないとリンクの下線を削除できません。もしかしたら解決策があるかもしれないので、Googleで検索してみましょう。
3時間目
Googleで検索しても、下線なしでリンクを作成するにはどうすればよいですか?解決策があるはずです！
4時間目
IE6 以外のブラウザーでの最初の 4 時間の結果を見てみましょう。おお！ Firefox では非常に醜いですが、Opera や Netscape では問題なく表示されます。
5時間目
さあ、コードを書いて、デバッグして、修正してください。
仕事中に、フォント サイズを制御するための <font> タグの限界に気づきました。複数のサイズを定義できませんでした。くそ！
また、ニュース セクションのテキスト レイアウトでも問題が発生しました。インデントするには、テーブルのネストをさらに使用する必要がありました。本文中の蝶の絵を本文の右側に配置するには、表も追加して問題を解く必要がありました。この種の「ズルい」組版には無力感を感じます。
6時間目
デザインは完成し、元のデザインとほぼ同じに見えます。ここをクリックしてご覧ください。
ここをクリックして、含まれるテーブルの数を確認してください。
フェーズ 3: フォームは必要ありません。
以下では、Web標準に基づいてCSSでレイアウトされたデザインとはどのようなものかを見ていきます。まずは内容の確認から始めます。ロゴを意味のあるものにし、冗長なタグを避けるように努めます。
ヘッダーは画像ですがタイトルでもあるので、次のようにコードを書きます。
<h1>蝶観察協会、私たちは蝶の羽ばたきを観察しています。</h1>
このタイトルを正しく表示する方法については、後ほど考えます (理想的には、コンテンツにはできるだけ気を配り、レイアウトにはできるだけ気にしないようにします)。他の見出し (ニュース、目撃情報、メンバーシップ) は <h2> として識別されます。
メニューは基本的に順序のないリスト（リスト）なので、リストとして識別されます。段落を分類する必要はありません (継承セレクターを使用して段落を包含レイヤーに「ハング」します)。これを元のコンテンツ テキストと比較して、レイアウトを実現するために追加のタグをいくつ追加する必要があるかを確認します (タグの追加はできるだけ避けるようにします)。
これは元のコンテンツのテキストです。元のコードを見てください。これは xhtml1.0 の暫定仕様に準拠しています。すべての要素が、定義された名前を持つ <div> 内にすでに含まれていることに注意してください。ニュースの日付にも日付クラスが追加されました。コードが非常に単純であることがわかります。
1時間目
「コンテナ」レイヤーの境界線を 1px に定義します。本文スタイルに「text-align: center」を定義して、コンテンツを中央に配置します。すべてのブラウザで中央に表示されるように、「container」で margin: 0 auto; (top=0、right=auto、bottom=0、left=auto の意味) も定義されます。テーブルと同様にセンタリングも簡単に行えます。
「body」のパディング「top」と「bottom」の値を20pxになるように定義します（「container」でパディングを直接定義しないのは、すべてのブラウザに適合するためです）。
メニューが 1 行で表示されるように、順序なしリスト (li) を「display:inline」として定義する必要があります。メニュー間にナビゲーション アイコンを追加しました。これらのナビゲーション アイコンは、次のように (x, y) 位置を正確に定義できる、非繰り返しバックグラウンド メソッドを使用して定義されます。
背景: url(menuBullet2.gif) no-repeat 4px 9px; メニューのクリック色の変更効果には、リンクのホバー スタイルが採用され、JavaScript は必要なくなりました。
使いやすさを気にせず、画像が表示できない端末（画面など）でもタイトルが正常に読めるように、ページ先頭の蝶の画像を<h1>の背景に設定しました。リーダーと検索ロボット）。
2時間目
メニューの最初の項目 (HOME) では別のアイコンが使用されているため、元の背景を非表示にして、HOME メニューに追加の ID (frst) を追加する必要がありました。
#hMenu ul li #first
別の (連絡先) アイコン:
背景: 透明な url(menuBullet3.gif) no-repeat 615px 9px; CSS を使用して 2 つの列を同じ高さに制御することはできません。幸いなことに、背景画像を使用して回避できます。背景を縦に繰り返す「コンテナ」を定義しました。
背景: #fff url(bgMain.gif)repeat-y;
3時間目
CSS 定義ボックスはテーブルよりもはるかに便利で、特に境界線の多くのプロパティが非常に便利です。
ここで、<h2> ヘッダーの定義を開始します。アイコンの定義は上記と同じです。
「ニュース」レイヤーを「目撃情報」と「メンバーシップ」の右側にフロートさせます。 「copyright」レイヤーを「clear:both;」でフローティングレイヤーに続くように定義します。蝶の絵をテキスト内で右側にフローティングすると、テキストが自動的に絵の周りを回り込むことができます。画像の 1 ピクセルの境界線を定義し、パディング距離を設定すると、元の 2 つのテーブルのネスト効果を実現できます。
いくつかの問題が発見されました。著作権レイヤーとコンテンツレイヤーが部分的に重なっています。
4時間目
表示されるエラーは、float:right の「目撃情報」と「メンバーシップ」の定義に関連しています。奇妙に思えるこの問題は、それらを左にフローティングすると解決されます。最初のテストでは Firefox を使用しましたが、メニュー アイコンが数ピクセルずれていることを除けば、見た目は悪くありません。
ブラウザごとに異なるプロパティ値を与えるなど、IE 以外のブラウザでの表示効果を修正できる CSS テクニックがいくつかあります。
同じ要素の定義で ! important 値を使用しました。この値は、IE ブラウザーではサポートされていません。
背景: url(menuBullet2.gif) 繰り返しなし 4px 6px !重要;
背景: url(menuBullet2.gif) リピートなし 4px 9px;
CSSでは、同じ要素に対して複数の定義がある場合、最後のものが有効となります。ただし、IE は ! important をサポートしていないため、IE は 2 番目に定義された値を使用し、他のブラウザは最初に定義された値を使用します。
すべて完了しました。結果はこちらでご覧ください。
結論は
テーブルベースのデザイン
Linux、Windows、Macintosh プラットフォーム用など、見つけられるすべてのブラウザを使用してページをテストしました。テーブル レイアウト ページは、異なるブラウザーでも同じように見えます。 「岩のようにしっかりしている」、これがテーブルレイアウトに対する最初のコメントです。
しかし、ページ内容の一部を変更する必要がある場合、表のレイアウトを変更するのは非常に手間がかかります。これが問題になります。CMS（コンテンツ管理システム）を使用すると、コンテンツのフォーマットが面倒になります。
以前の方法を忘れてしまったので、全体の設計時間が少し長くなりました。もう一度実行すれば、1 ～ 2 時間短縮できると思います。
私はテーブルベースのデザインを多くの「単調な作業」だと表現しますが、その高度なデザイン技術には驚かされることがよくあります。純粋な CSS に基づいたデザインでは、私は通常、デザインを分解してバグを段階的に分析することに慣れています。ただし、テーブル デザインを使用する場合は、この作業は必要ありません。テーブルをデザインに投入し続けるだけです。もう一度 CSS プロセスを見てみましょう。
CSSベースのデザイン
CSS を使ってデザインするほうがずっと快適です。コードの変更は直接的かつ透過的で、プロセス全体を明確に制御できます。対照的に、テーブルのデザインはレンガを積むようなものです。ページ内の変更が大きくなるほど、CSS デザインはより便利で効率的になります。
CSS 設計は、すべてのスタイルを個別のファイルに抽出し、サイト全体に 1 つまたは複数のスタイル シート ファイルを使用することで、サイト全体を小さくすることにも非常に役立ちます。
コンテンツからレイアウト情報を分離することにも多くの利点があります。将来的には、CSS Zen Garden のように、サイト全体を何も変更せずにいつでもリニューアルできます。また、使いやすさも向上し、検索ロボットがページを見つけやすくなります (Google が最も重要な訪問者であることを忘れないでください)。
CSS ベースのデザインに慣れていると作業効率は非常に高くなりますが、ルール、ボックス モデルの違い、ブラウザ処理テクニック、および多くの理論を学ぶのに多くの時間を費やす必要があり、習得するには継続的な練習が必要です。 。つまり、CSS はテーブルよりも単純ですが、純粋な CSS を使用してデザインしたい場合は、CSS の学習に多くの時間を費やす覚悟が必要です。経験豊富な開発者であっても、さまざまなバグに対処する準備ができている必要があります。バグに対処するのに数時間かかる場合もあります。
勝者
CSS と Web 標準ベースのデザインが成功します。両方のメソッドのコードを見るだけで、選択するのに十分です。 CSS には、さらに多くの利点があります (主に使いやすさの点で)。実は根本的な原因は私の怠惰にあります。私がテーブルのデザインを使用し、1 年後にクライアントから連絡があり、修正が必要だと言われたら、私は軍隊に入隊し、外国にいると伝えるかもしれません。 CSS を使用している場合は、車輪を再発明する必要がないため、何も考えずにクライアント用に CSS を変更します。