div+cssとウェブ標準ページの利点

CSS は英語で Cascading Style Sheets の略称です。HTML や XML などのファイルのスタイルを表現するために使用されるコンピューター言語です。

[1] Web標準の利点

実際、さまざまな Web デザインおよび制作ツールを使用して Web ページを設計および制作する際に、Web 標準が使用されてきました。 Dreamweaver やその他の Web ページ エディターで Web ページを設計する場合、Web ページ エディターは実際にはさまざまなコード スニペットを Web 標準で自動的に記述します。しかし、これまでエディタやその他の手段を使用して Web 標準を記述してきましたが、作成された Web ページが設計標準を満たしているわけではありません。真に標準に準拠した Web デザインとは、Web 標準を柔軟に使用して、Web コンテンツの構造、表示、動作を分離できるデザイン、つまり、表示とコンテンツを分離するデザインです。

プレゼンテーションとコンテンツの分離は、現在の Web 標準の中心的な目的です。
「コンテンツ」とは、特定の情報を指し、情報本体のみを指します。本体は、XHTML構造化言語によって、左列、右列、情報リスト（記事リスト）などの独立した部分にマークされます。
プレゼンテーションとは、フォント サイズ、書体、レイアウト デザインなど、情報が表示される形式を指します。 ” [2]

1. 効率的な設計、計画、簡単なメンテナンス

ウェブサイトの設計プロセスにおいて、デザイナーやプランナーが最も期待するのは、効率的な設計と計画、そしてシンプルなメンテナンスであり、これがウェブサイトの設計、計画、運用コストの鍵となります。表現とコンテンツの分離によってもたらされる効率的な設計と計画とは、コンテンツと表現の分離を通じて、特定のコンテンツとスタイルの設計を分類し、同じデザインを再利用できることを意味します。インターフェイス上の要素のデザインスタイルを定義した後、デザインとコンテンツの分離を通じて、デザインスタイルのコードを別の情報コンテンツで再利用できます。コードは直接適用したり、拡張のために継承したりして再利用の目的を達成できるため、重複コードが削減され、設計と計画の効率が向上します。この再利用方法は、メンテナンスの労力を半分にして、2 倍の効果を達成することもできます。同じコード セグメントを変更すると、このコードを再利用するすべての領域のスタイル デザインを同時に変更できるため、メンテナンスが簡単かつ効率的になります。さらに注目すべきは、コンテンツとプレゼンテーションが分離されているため、スタイル デザイナーはスタイル コンテンツを繰り返し定義することなく、スタイルのプレゼンテーションに集中できるため、読みやすさとメンテナンス性が大幅に向上することです。

2 プラットフォーム間での情報の可用性

コンテンツとデザインを分離することで、プラットフォーム間で情報にアクセスできるようになります。コンテンツとデザインが分離されているため、他のデバイスのデザイン スタイルを置き換えることができます。たとえば、ハンドヘルド コンピューターやゲーム コンソールの場合、別のデバイスの画面に適応するために別のデバイスで異なるスタイルを使用するには、1 つのスタイル デザイン ファイルを置き換えるだけで済み、コンテンツ自体を変更する必要はありません。

3. サーバーコストを削減

スタイルを再利用することで、Web サイト全体のファイル サイズを大幅に削減でき、サーバー帯域幅のコストを削減できます。特に大規模なポータルでは、Web ページの数が増えるほど、再利用されるコードが多くなり、同時にサーバーにアクセスするデータ量が減り、帯域幅の使用量も減ります。
（海外の多くのウェブサイトは、すでにWeb標準に準拠したデザインの恩恵を味わっています。mp3.comを含む多くの有名なウェブサイトは、Web標準のウェブサイトデザインを使用することでサーバーコストを大幅に節約し、他のサービスに投資しています。大規模なウェブサイトの場合、ウェブページコードの量を半分に減らすと、必要なサーバーネットワーク帯域幅を半分に減らすことができます。毎日数千万の訪問者がいるウェブサイトの場合、このコストを過小評価することはできません。多くの国内ポータルは、数億人のネットユーザーのニーズを満たすために、ファイルミラーリングやさまざまなサービスのために数百台のサーバーを備えていることがよくあります。ただし、帯域幅を半分または3分の1に削減できれば、ネットユーザーのニーズを満たすためにサーバーの数をほぼ半分に減らすことができます。経済的な観点からは無視できず、大規模なウェブサイトのトラフィックコストを数百万元節約できます。現在、NetEase 163.com、 Yahoo China 、cn.yahoo.comなどの大規模な国内ポータルは、トラフィックコストを数百万元節約します。 ウェブデザインにはウェブ標準が採用されている）

4. 変更が簡単

頻繁に改訂される Web サイトの場合、コンテンツとデザインを分離すると改訂コストを大幅に削減できます。改訂のたびに、情報コンテンツを変更することなく、スタイル ファイルを変更するだけで済みます。これにより、改訂の技術的な難易度と実装サイクルが短縮されます。

5. Webページの解析を高速化する

いくつかのテストでは、コンテンツとデザインを分離する現在の Web デザイン構造により、ブラウザーによる Web ページの解析速度が大幅に向上していることが示されています。旧式のコンテンツとデザインが混在するコーディングと比較すると、ブラウザーは解析中に構造要素とデザイン要素をより適切に分析できます。優れた Web ブラウジング速度により、ユーザーのブラウジング エクスペリエンスが向上します。

6. 将来性

コンテンツとデザインが分離されているため、将来の技術変化を心配する必要はありません。構造とデザインはいつでも置き換えや変更が可能で、情報とデザインが混在するコードに修正を加える必要もありません。

7. ユーザーエクスペリエンスの向上

プレゼンテーションとコンテンツの分類の設計では、Web サイトの情報の具体的な構成と、再利用に適したスタイルを設計する方法を十分に理解する必要があります。これにより、Web サイトの設計と作成時に、Web サイトのコンテンツ、デザインの一貫性、および使いやすさを十分に考慮して設計できるため、Web サイトの使いやすさが向上し、ユーザー エクスペリエンスが向上します。

結論

Web 標準に準拠した Web サイト設計には、さらに多くの利点があります。設計と計画に Web 標準を使用する過程で、多くの Web デザイナーが設計と計画に Web 標準を選択しているという事実が、その価値をさらに証明していることを徐々に感じるでしょう。

現在、Web 標準が普及のトレンドになり始めています。Web 標準に準拠した Web サイトのデザインは、成長するインターネット上でのブラウジング体験や自己表現の方法を微妙に変えています。

参考文献:
[1] div+cssとは[DB/OL]
http://www.emct.cn/Knowledge/webmarket/2006-08-16/73.html
[2] 李超. CSSウェブサイトレイアウト記録[M]. 北京：科学出版社北京希望電子出版社、2006-9：76-216。

著者: Luo Jing 出典: Paris Ivy (転載は歓迎しますが、出典を明記しリンクしてください。そうしないと、著者は責任を追及する権利を留保します。)