11月のある夜遅く、私は故郷のアリゾナ州ツーソン上空を飛行し、この都市の格子状の配置に衝撃を受けました。この都市は、上空から見ると計画によって構築されています。ロンドンから戻ってきたばかりのロンドンの都市レイアウト（図 2）は、まるで来たときのように見えます。自然の外で。
図 1: アリゾナ州ツーソン
図 2: ロンドン
私はこの 2 つの都市の航空写真を見て、Web デザインを思い出します。今日のテクノロジーでは、グリッドベースのデザインを自由に実装することも、グリッドから完全に飛び出すこともできます。 Web デザイナーへの影響 プッシュに疑いの余地はありませんが、本当の課題は、どのようにしてその閉塞的な考えを手放し、枠の外で考えることができるかということです。
都会の雰囲気
都市計画と Web デザインを比較すると、この 2 つの類似点は興味深いものになります。グリッド レイアウトは、予測可能でナビゲートしやすい Web サイトを作成するのに最適です。グリッドは、デザイナーが Web サイトを計画し、ユーザーがアクセスしやすいようにするのに役立ちます (図 3)。
図 3: ライアン ブリル
良い面としては、ツーソンは確かに訪問しやすい街です。少しの方向感覚や道路地図があれば十分です。住人は他の人に道順を教えてくれます。私はキャンベル アベニューの交差点の南西角にいます。プリンスロードどこでも。公共交通機関は南北または東西にあるので、道が分かりやすいです。
一方、ツーソンの設計者らは当初、限定的な拡張を計画しており、都市が計画の限界を超えて成長すると問題が発生した。ツーソンのグリッドの制限により、ツーソンにはさまざまなスタイルのコミュニティや近隣地域が出現できず、その結果、ツーソンには活気のあるダウンタウンや数多くの特徴的な地域が存在しないと感じています。わざわざ探す必要はありません。
ロンドンは違う、それは謎だ。ロンドン市民自身が街のガイドを頼りに移動していることは私も知っています。市内の交通システムは課題が多く、タクシー運転手は働く前に特別な試験に合格する必要がある。この都市は自然成長しているため、簡単に旅行できる場所ではありません。
しかし、ロンドンには、文化の中心地や風変わりな地区だけでなく、エキサイティングな地区やユニークな地区もたくさんあります。旅行するのはより困難ですが、好みが多様であるため、人々はその中に加わることをより喜んでいます。
この比喩は、自然になりがちな Web デザインにも適しています。どうすれば、曲がりくねった路地を簡単に移動できるでしょうか。一方で、美しいデザインは、私たちがこれまで枠の中に閉じ込められていた枠を打ち破ることによって実現できます。図 4 では、グリッド デザインのルールを打ち破ることにより、外観が異なるままデザインを使用可能な状態に維持できることがわかります。
図 4: AIGA ロサンゼルス
グリッドコードの神話
デザインよりもコードに注意を払う人間として、私たちのデザインがどのようにコードに固執しているかを理解するのは混乱していますが、それは長期的なテーブルレイアウトによって私たちが強固な基盤を築くことができると考えています（図5）。最新の CSS レイアウトを使用すると、その理由が簡単にわかります。
図 5: k10k
テーブル レイアウトはグリッド デザインとうまく連携します。テーブルのコード自体はグリッドを再現しており、セルに画像、テキスト、インターフェイス要素を入力するだけでデザインが完成します (図 6)。複雑で構造化されていないデザインを実装したい場合、ドキュメント内で多数の画像を使用する必要があるため、ドキュメント全体が肥大化します。
図 6: 体重移動
表形式のレイアウトにはいくつかの利点がありますが、都市計画と同様に、利点が欠点に変わる場合があります。テーブルベースのグリッドでは、すべてのセルが同じ幅になるようにします。シンプルすぎる、それがテーブルの性質です。セル間のギャップを一定に保ちますか?それも簡単です。ただし、このきちんとした構造を望まない場合はどうすればよいでしょうか?残念ながら、それはできません。
CSS はすべてを変えてしまうので、私たちはまだ Web 向けのデザインを学んでいないのだと思います。私たち、特に長年のテーブル レイアウトから CSS に来た人は、CSS のビジュアル モデルがグリッド デザインのマンネリから抜け出すのにどれほど役立つかを理解し始めたばかりです。 CSSのレイアウトは完璧ですか？いいえ、CSS がもたらす利点に加えて、何かを失います。列の拡張は、セルのギャップと同様、CSS デザインにとって大きな問題です。
CSS は、グリッドにも見られるエッジとボックスにすぎません。ただし、この 2 つの本質的な違いは、CSS を使用するとボックスを周囲の環境から分離し、自由に処分できることです (図 7)。
図7
位置決めにはposition 属性または float 属性を使用でき、軽量の画像を背景として使用できるため、Box を使用すると、グリッド レイアウトと非グリッド レイアウトの両方をより効果的に実装できます。この例は、Dave Shea の Blood を参照してください。 Lust では、彼が CSS Zen Garden で使用した多くのデザインの 1 つです (図 8)。
図 8: CSS Zen Garden: Blood Lust
図 9 は、Blood Lust で使用される BOX ベースの非構造化デザインを示し、CSS と BOX を使用して独立した非構造化グリッドを実装する方法も示しています。
図9
BOX の機能を理解すれば、グリッドの制約を簡単に突破できます。高度に構造化されていない、さらに自由な設計を図 10 に示します。
図 10: カッツタウン大学: コミュニケーション デザイン学部
これらのボックスは CSS を使用して配置されます。
図11
コードがすっきりしているだけでなく、CSS レイアウトに慣れているデザイナーにとっては、より直観的かつシンプルになっています。デザインも直感的で使いやすく、型にはまらないものになっています。
見通し
最新のレイアウト テクノロジーの利点は、より多くのオプションから選択できることです。 CSS を使用すると、管理しやすく軽量で視覚的に豊かなデザインを作成でき、必要に応じてグリッドベースにすることができ、グリッドを簡単に破ったり壊したりすることもできます。
これにより、現代の Web デザインにより多くの機会が開かれます。グリッド デザインに慣れているからといって、同じ間違いを犯すべきではありません。
テーブルレイアウトに長い間こだわってきた人にとって、その難しさは特に大きいです。長年 Web デザイナーをしてきた人にとって、これは今まで使ってきたものから脱却することを意味します。難しいと思わない人もいるかもしれませんが、ほとんどの人はそれが恐ろしいと感じるでしょう。私たちは CSS モデルがどのように機能するかを学び、古いルールに別れを告げる勇気を持つ必要があります。
私たちがこれまでのやり方が奇妙で硬直的だったデザインの固定観念に対するさらなるブレークスルーが見られることを期待しているのは、こうした新参者たちです。
ウェブは成熟し、デザインの方法も変化しており、私たちの目の前にはさらなる革新と創造性があります。私たちは計画された都市に固執せず、ユニークなデザインを実現することができます。私たち古いデザイナーと今日の新人デザイナーが組み合わさって、Web を日々変化させていきます。
この記事の著者:
Molly E. Holzschlag は、有名な Web 標準の提唱者および伝道者です。彼女の 30 冊以上の本のベストセラーは、Dave Shea との共著『The Zen of CSS Design (Zen Web Design)』です。 Molly は、W3C ワーキング グループの招待専門家であり、Web Standards Project Group (WaSP) の元ディレクターです。モリーは、デザイナー、開発者、実務者、意思決定者と協力して、便利で美しく、意味のある Web を推進しています。
追記
これは 2005 年に A LIST APART に掲載された記事です。2005 年当時、CSS レイアウトは現在ほど一般的ではなく、Web 分野の上級専門家として、著者の Molly E. Holzschlag She は多くの人々を圧倒していました。彼女はテーブル レイアウトの長期ユーザーでもあり、CSS が成熟に近づき、CSS ベースのレイアウトが新鮮になってきたとき、記事からわかるように、テーブル ベースのグリッド デザインについて複雑な感情を抱いています。
しかし、CSS が普及し、CSS レイアウトが身近になった 2009 年、グリッドは死んだのか、それともテーブルが悪なのか、改めてグリッド デザインについて考える必要があります。答えはそれほど単純ではありません。今日の Web には、Web アプリケーションに加えて、情報を表現し、伝達するという永遠の目的があります。あなたが文人なら、きっと夢中になるでしょう。しかし、あなたが郵便配達員だったら、ツーソンを選ぶでしょう。したがって、グリッドデザインとナチュラルデザインのどちらに絶対的な利点や欠点はありません。グリッドデザインはより明確ですっきりしており、ナチュラルデザインはよりエレガントで洗練されています。
そして、テーブルは多くの人が言うほど邪悪なものではありません。今日のテーブルは、CSS と組み合わせることができ、完全に CSS を使用してテーブルを使用することもできます。有機的な組み合わせと相互作用のセット。ボックス内のセルの正確な位置を必要としない場合、テーブルはすべてのブラウザーとの互換性が最も高く、崩れることがないため、ボックスよりも完璧なコンテナーです。長さは変わりませんし、その動作は期待に応えやすくなります。そして最も重要なことは、それが人々にとって物事を整理するための最も直接的な方法であるということです。
原作者モリー・E・ホルツシュラーク
中国語翻訳出典：COMSHARP CMS公式サイト、翻訳者35キロメートル。