ホームページ ウェブフロントエンド htmlチュートリアル DIV+CSSの開発方法については、他の人の声も聞く必要があります(再掲)_html/css_WEB-ITnose。

DIV+CSSの開発方法については、他の人の声も聞く必要があります(再掲)_html/css_WEB-ITnose。

Jun 24, 2016 pm 12:28 PM

私も著者と同じ意見です。標準は良いですが、実用的ではないかもしれません。
以下は ZT の記事です。
長年にわたり、多くの優れた記事が CSS ベースのデザインの優位性を称賛し、その衰退を嘆いています。テーブルベースのデザイン。しかし、CSS ベースのデザインを別の角度から考える人はほとんどいません。おそらく、CSS ベースのデザインを批判する前に、CSS ベースのデザインを理解して使用する必要があり、一度理解すると、元の昔ながらのデザイン方法には戻りたくないからでしょう。

この不均衡を補うために、そしてこのゲームで悪役を演じるのはクールなので、場合によっては従来のテーブル設計方法が CSS ほど優れていない理由について説明する記事を書くことにしました。 ??言い換えれば、標準ベースの設計手法は、標準ベースの設計手法よりも優れており、劣っているわけではありません。

1. 悪魔化されたテーブル

テーブルが登場するまで、Web はかなり退屈な場所でしたが、ビジュアル ページ デザインに新しい状況を切り開いたのはテーブル レイアウトの使用でした。テーブルが Web と Web デザインの普及にどれだけ貢献したかについては議論の余地があるかもしれませんが、テーブルから離れると、私たち Web デザイナーが仕事を失うことは間違いありません。

テーブルベースのデザインは近年、本当に悪者扱いされています。Web 純粋主義者は、テーブルはタイポグラフィには意味がないので、決して使用すべきではないと言います。しかし、多くのテクノロジーはもともと特定の目的を達成するために設計されましたが、他の分野でより大きな用途が見つかり、その才能を発揮したことは歴史が証明しています。 Web 自体と同じように、当初は研究データを共有するためだけでなく、現在では情報や教育だけでなく、エンターテインメントやビジネスにも応用されています。


2. 快適さのために

Web デザイナーは長年にわたってテーブルを使用してページをレイアウトしており、これはほとんどのデザイナーが習得している機能です。この方法でテーブルを使用すると、確実に望ましい効果が得られます。GIF の間隔を空けるなどの簡単なハックをいくつか使用すると、Netscape 4 の最低バージョンからSafari などの最新のブラウザ。

先駆者たちは長い間 Web 標準を推進してきましたが、ほとんどの Web サイトは依然としてテーブルと標準と互換性のないコードを使用して開発されているため、ユーザーエージェントは長い間テーブルベースのレイアウトをサポートする必要がありました。これは、Web 標準のセールスポイントにとって致命的な打撃です。つまり、標準にはそれにふさわしい地位がありません。大手ブラウザ メーカー (Microsoft としましょう) が、ほとんどの Web サイトを表示しないブラウザを突然リリースする可能性は低いです。

そのため、Web デザイナーは、CSS レイアウトとサポート標準に基づいたコードを使い始めることに対する危機感や必要性を決して感じません。


3. Web の敷居を下げる

敷居が低いからこそ成功しているのです。HTML はシンプルで習得しやすい言語であり、ブラウザは紛らわしいマークアップを含む多くのドキュメントを許容できます。これにより、Web 上でのコンテンツの公開が驚くほど簡単になります。 12 歳の甥でも、Microsoft Office に付属の Frontpage を使用して簡単な Web サイトを作成できます。

もちろん、CSS の構文は非常に単純であることに、普通の人は同意するでしょう。CSS を学ぶのにロケット科学者である必要はありません。それでも、一部の概念は微妙すぎて理解できません。たとえば、ボックス モデルは表面的には非常にシンプルですが、フロートとクリアの概念も理解するのが難しく、使用するのが難しいです。私の経験では、CSS の基本概念を理解し、CSS を使用して Web サイトを自由に開発できるようになるまで、学習曲線を経るまでに約 6 ~ 12 か月かかります。

次に、ブラウザがそれをサポートしているかどうかの問題があります。正式に作業を開始すると、どのブラウザが何をサポートしているか、何がサポートしていないのか、およびいくつかの一般的なブラウザのバグが徐々に理解できるようになります。残念なことに、バグが多すぎて、「専門家」ですらバグの修正に費やす時間を見積もることが困難です。初心者にとっては、それが CSS を誤解しているためなのか、それともブラウザの不明瞭なバグによるものなのかがわからないため、さらにイライラします。おそらくこれが、CSS-Discuss などのメーリング リストに同じ質問が繰り返し表示される理由です。

ブラウザ メーカーが最終的に協力すれば、CSS を使用したサイトの開発がはるかに簡単になるでしょう。しかし、テーブルベースの開発と比較すると、CSS 開発の敷居がまだ高すぎるということには、ほとんどの人が同意すると思います。言い換えれば、これが CSS ベースのデザインが Web 専門家の間で非常に人気がある理由を説明していると思います。これにより、彼らはアマチュアの「トップページのカウボーイ」と自分たちを区別することができ、ウェブが自分たちの小さなグループにのみ属していた頃の感覚を取り戻すことができます。おそらくこれが、これほど多くの人が Web 標準を触ることのできない「象牙の塔」とみなしている理由なのかもしれませんが、Web 標準の支持者の多くが Web デザインを狂信と優越感の目で見ているのです。


4. テーブルを使用すると簡単に実行できることもあります

テーブルを使用すると簡単な機能を実現するために、非常に複雑な CSS を作成したことに誰もが気づいたと思います。例えば帳票の外観を扱う場合、複雑で奇妙な形状の帳票でもテーブルを使えば簡単に扱うことができます。 CSS フローティング要素を使用しても同様の結果を達成できますが、はるかに面倒です。 CSS の達人であれば、このような悩みも楽しいものです。しかし、もしあなたが普通の人で、あなたの喉をつかんで、小さなフォームを作るのになぜそんなに時間がかかったのかと尋ねる上司がいたら、物事はそれほど楽しくないことは間違いありません。

十分な知識と忍耐力があれば、テーブルを使って行うことに慣れていることのほとんどは CSS を使用して実現できます。時間はかかるかもしれませんが、それでも限界はあります(あるいは、とても落胆して挑戦を諦めてしまうかもしれません)。重要なのは、どれだけ努力しても達成できないことがいくつかあり、その 1 つがページ フッターであるということです。ウィンドウが画面全体に広がっていなくても機能するように、ウィンドウの下部に貼り付けるフッター バーを作成しようとしてイライラしている CSS 作成者の投稿をよく見かけます。テーブルを使用する場合、この効果を作成するのは非常に簡単ですが、CSS のみを使用する場合は別の問題になります。 Web 開発者が依然として CSS の使用に消極的であるのはなぜですか?フォームを使わなくなると、単純なことが複雑になってしまうからです。


5. 利点を誇張する

テーブルを放棄して CSS ベースのレイアウトに適応する理由はたくさんありますが、Web 標準の推進の激流の中で、多くの人が利点を誇張しています。実際、大規模なサイトでは CSS レイアウトに切り替えることで帯域幅を大幅に節約できます。しかし、他のほとんどのサイトでは、メリットが非常に小さいため無視できます。

誰もがページの読み込みを速くしたいと考えており、標準化推進者は CSS がそれを助けることができると言っています。ほとんどのサイトの「デザイン」はサイト全体に均等に配置されますが、CSS ベースの「デザイン」は 1 つ以上のファイルに配置されます。これらのファイルは、たとえ小規模なサイトであっても、すぐに複雑で大きくなる可能性があります。私が最近デザインしたサイトでは 4 つのスタイルシートを使用しており、合計サイズは 12k (空白とコメントを含む) でした。 CSS を使用すると、読み込まれるデータがサイト全体に均等に分散されるのではなく、実際には最初に CSS が読み込まれてから閲覧されます。つまり、ホームページのダウンロードには、テーブル レイアウトを使用する場合よりも時間がかかります。ただし、スタイル シートが既にダウンロードされている場合はキャッシュされるため、再度ダウンロードする必要はありません。しかし結局のところ、サイトのトップページは、それほどゆっくりと読み込みたくないページです。


6. 顧客の募集

Web デザイナーは、顧客に Web 標準を販売する必要があると感じることがありますが、残念なことに、ほとんどの顧客はサイトのコードの品質を気にしていません。私たちは通常、アメとムチのアプローチを使用します。アメは検索エンジンへの親しみやすさ、ムチは Web ページのアクセシビリティです。

検索エンジンがセマンティック マークアップを含むページを好むのは事実であり、CSS と Web 標準を使用してサイトを構築すると、検索エンジンに適したサイトの開発が大幅に強化されると誰もが信じています。ただし、特効薬はありません。多くのテーブルベースのサイトは依然として検索エンジンで高いランキングを獲得しています。 CSS を使用して開発されたサイトは依然として低いランキングを獲得する可能性があります。上位ランキングの鍵となるのは、レイアウト用のテーブルや CSS ではなく、コンテンツと他の場所からのリンクです。

さらに、顧客が「アフィニティ」という言葉を Web 標準、特に CSS 設計に結びつけるために使用していることに関しては、実際、テーブルが線形化されている限り、テーブルベースの設計には固有のアフィニティの欠陥はありません。感覚と内容には親和性があります。現在のスクリーン リーダー テクノロジは非常に優れており、ほとんどのスクリーン リーダーはテーブルベースのサイトを適切にサポートできます。もちろん、サイトの文法が AA アフィニティ レベルで認定されることが最善です。より厳格な AAA レベルであっても、テーブル デザインを使用しないことは単なる提案であり、必須ではありません。

もう 1 つのよく言われる利点は、クライアントをデザイン プロバイダーから独立させることができることです。誰もが標準に従って開発する世界では、顧客が開発パートナーを切り替えるのは簡単で、新しい開発者は前の開発者のマークアップの泥沼をかき分けなくても、サイトの構成をすぐに理解できます。ただし、これには、多くのデザイン プロバイダーが Web 標準に精通している必要があります。残念ながら、現在はそうではありません。経験豊富な CSS 開発者の数は増えていますが、これはまだ比較的専門的な分野であるため、大企業がこの開発方法に固執することは依然として危険であり、熟練した開発者が不足しています。私の個人的な経験では、組織が CSS を使用して Web サイトを開発したい場合は、少なくとも 1 人の経験豊富なデザイナーを長期間維持する必要があります。したがって、Web 標準への移行は、顧客の開発者への依存度を減らすどころか、むしろ増大させています。


7. まとめ

Web 標準と CSS ベースのデザインが未来の方法であることは疑いの余地がありません。しかし、それらに向かって走り、新しいテクノロジーを主張する過程で、私たちは自分たちが主張していることが大げさすぎるのではないかと疑問にも思います。現実的に何かを作ると、期待を下回ることがよくあります。そして、これらを独断的に追求することは、最も獲得に値するパートナーを遠ざける可能性があります。

テーブルベースのデザインは長く存続します。開発者を引き付けるために、例を使用して人々に開始方法を教え、敷居を下げることができます。新しいしきい値を作成することは言うまでもありません。利益とコストを正直に検討する必要があります。 CSS サイトの開発は難しく、時間がかかる場合があります。場合によっては、CSS よりもレイアウトにテーブルを使用する方がはるかに合理的です。

文: Andy Budd / 翻訳: Jjgod Jiang

テーブルベースのデザインと CSS ベースのデザインの客観的な見方から翻訳

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles