CSS_CSS/HTML の包括的な理解

Dreamweaver MX 2004 のリリース以来、私は Dreamweaver の新規および既存のユーザーにその新機能を何度もデモンストレーションしてきました。製品デモを行うたびに、私は CSS (またはカスケード スタイル シート) をデザインおよびレンダリングするための Dreamweaver MX 2004 の新機能をすぐに絶賛します。この記事では、CSS について詳細かつ包括的に理解します。

しかし、最近新しいユーザーから質問がありました。正直、この質問には言葉を失いました。このユーザーは単に「なぜ CSS を使用する必要があるのですか?」と尋ねました。その時点で、HTML と CSS を毎日使用している私たちは CSS の利点を十分に認識していますが、まだ多くの人々がそれを理解していないことに気づきました。あるいは、CSS が提供するすべての利点を十分に認識していない可能性があります。この記事は、上記の新規ユーザーに対する私の回答です。

CSS の起源
CSS の利点を確認する前に、CSS の歴史を紹介したいと思います。 Web 管理団体 W3C は、1996 年 11 月に CSS の使用を推奨し、CSS レベル 1 仕様を承認しました。 CSS レベル 1 仕様では、HTML ページで使用されるプロパティについて説明します。これらのプロパティは、従来のフォント タグや、色やマージンなどの他の「スタイル」タグを置き換えます。 1998 年 5 月に、W3C は CSS レベル 2 仕様を承認し、レベル 1 仕様にいくつかの追加機能を追加し、位置決め属性を導入しました。これらのプロパティは、ページ要素のプレゼンテーションを設計するためのテーブル タグの一般的な (ただし正しくない) 使用法を置き換えます。 CSS 仕様の最新バージョンは CSS 2.1 です。CSS 2.1 では、特定のプロパティが改善され、現在のブラウザではまったくまたはほとんど影響を及ぼさないプロパティが削除されています。

残念ながら、多くの新しいテクノロジーと同様に、CSS が広く採用されるまでには長い時間がかかりました。その大きな理由はブラウザと、そのブラウザ用のサイトを構築する Web デザイナーにあります。 CSS 批准期間中は、Netscape Navigator (NN) が依然として主流のブラウザであり、CSS はそのブラウザではほとんどサポートされていませんでした。 Microsoft は、ブラウザのバージョン 3 で CSS のサポートを非常に限定的に追加しましたが、当時のほとんどの Web デザイナー (私自身を含む) は依然として、推奨プラットフォームとして NN でページをコーディングしていました。

長年にわたり、ブラウザー メーカーは新しいバージョンごとに CSS のサポートを拡張してきました。現在、Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera、Safari はすべて CSS を完全にサポートしています。しかし、だからといって、Web デザイナーや開発者としての私たちのキャリアに問題がないわけではありません。上記のブラウザはすべて CSS レベル 2 をサポートしていますが、互換性のレベルは異なります。また、場合によっては、特定のプロパティが依然として大きな問題を引き起こす可能性があります。そうは言っても、「テストとテスト」という古い信条に従う必要はあります。但如果您堅持使用 CSS 規範的核心屬性，您將能夠正確地呈現頁面。

但是為什麼 W3C 認為需要建立 CSS 規範呢？當我創建基於 HTML 的 Web 網站和應用程式時，這一切對我又意味著什麼呢？我認為，我們需要使用CSS 的理由以及它帶來的優勢可以分為以下三個主要方面：靈活性、呈現性和可訪問性

靈活性
我確定幾乎每個Web 設計者和開發者都經歷過這樣的痛苦時刻：當您小心地佈置好頁面，完成所有嵌套的表格後，客戶要求進行一點「小小的」更改。這小小的更改可能只是“能不能把那個圖形稍微往左移動一點？”，也可能非常富有戲劇性：“我不喜歡這些標題，能把它們的字體弄大一點嗎？改字體的時候，順便把顏色也改了，怎麼樣？但如果涉及到較大的網站（而這已經很常見），一個簡單的更改無論如何 也簡單不了。

這樣的情形為什麼會這麼痛苦呢？因為定義頁面外觀的標記本身就是頁面的一部分。要看到實例，您只需到任何網站的任何頁面上去 數一下 font 和 table 標籤的數量。只要您能夠從實際頁面的流程（或程式碼）中刪除這些標記，或採用更好的方法，即將其外置，您就可以進行集中變更。而這就是 CSS 所能做的。

如果使用一個或多個外部樣式表，透過修改樣式表然後將修改後的版本上載，您就可以將變更套用到網站。

想像一 下，在傳統的基於表格的佈局中，將網站瀏覽從頁面左側移到頁面右側將有多麼困難。這需要幾個小時重複而乏味的工作。但是，如果您選擇使用 CSS 的定位屬性（通常稱為 CSS-P）來設計頁面，只需變更外部樣式表中的「浮動」或「位置」屬性，即可更新頁面。而且還有以下附加優點：您更新了網站中使用該樣式的所有頁面。

呈現性
由 於寬頻的廣泛使用，許多開發者已經不再考慮在瀏覽器中呈現頁面所花費的時間。但是，你們應該記住，很多目標用戶仍然在使用撥接連線。傳統的基於表格的佈局 是頁面下載速度慢的主要原因。因為瀏覽器從伺服器接收頁面時，必須先檢查並「理解」一系列複雜的鑲嵌式表格。它必須先找到鑲嵌在最裡面的內容，然後小心 地逐步處理程式碼，直到到達最外層的容器，即 body 標籤。完成以上所有過程後，瀏覽器才能開始在螢幕上呈現內容。

如果使用 CSS，瀏覽器從伺服器接收內容後，立刻就可以開始呈現流程，因為頁面中沒有或只有很少的顯示標記。

使用外部樣式表還有一個潛在的呈現方面的好處。在傳統的以表格為基礎的方法中，瀏覽器必須檢索、分析並單獨呈現每個頁面。也就是說，瀏覽器在您的網站上顯示第 30 頁時耗費的工作和顯示第 1 頁時一樣多。

但是，如果使用外部樣式表進行顯示，網站的第一頁將提示瀏覽器將頁面使用的已連結樣式表檔案快取起來。這表示網站中所有使用上述樣式表的後繼頁面下載速度會更快，因為瀏覽器已經快取了樣式表。

最 後者與呈現有關的優點讓我想起電影《莫札特》。電影中，莫札特問國王對自己的歌劇有什麼看法。國王說很好，但是很沉悶。莫札特一再追問，國王解釋說，問 題就在於「音符太多」。Web デザインでも同じ問題が発生する可能性がありますが、もちろんここでの注意事項は実際の HTML コードについて言及しています。コードが多いほど、ブラウザがページを理解するのに時間がかかります。

公式アプリについての噂を聞いたことがあるかもしれません。公式アプリはコーディングが不十分で、複雑な情報が満載ですが、ドキュメント ページは表示されません。 Dreamweaver ユーザーの場合、この問題は発生しませんが、コードを書きすぎると問題が生じます。古典的なテーブルベースのデザインが良い例です。

デザインで CSS を使用すると、顧客がダウンロードする必要があるコードの量が減ります。特定のページのフォント タグを減らすだけで、コードの量を大幅に減らすことができます。多くの場合、完全に CSS-P を使用して設計すると、コードの量を最大 50% 以上削減できます。コードが少ないほど、ページのダウンロードが速くなります。

アクセシビリティ
最近、アクセシビリティについてよく耳にします。ほとんどの開発者は、よりアクセシビリティの高いサイトを構築することを考える必要があることを知っていますが、実際にそれを実行する必要があるのは、政府や教育機関向けのサイトを構築する開発者だけです。アクセシビリティの問題について考えるとき、ほとんどの開発者は、単に alt 属性をグラフィックスに追加する必要があることを意味すると考えています。しかし実際には、アクセシビリティを向上させるためにできることはたくさんあり、CSS を使用するとアクセシビリティの高いサイトを簡単に構築できます。

アクセシビリティに関する主な問題 (CSS を使用して解決できる問題) は、支援技術 (スクリーン リーダーなど) がページをどのように「読み取る」かです。従来のテーブルベースの環境では、スクリーン リーダーはページの読み方を決定するという大きな課題に直面しています。考えてみてください。スクリーン リーダーが深くテッセレーションされた表に遭遇したとき、コンテンツを読むべきなのか、それともスキップすべきなのか、どれほど混乱するでしょうか。コンテンツをスキップした後、後でコンテンツに戻るにはどうすればよいですか?

ページをクリックすると、ページ上部のナビゲーションやその他のコンテンツを無視して、興味のあるページ上のコンテンツがすぐに表示されます。視力が悪い人はこれを行うことができません。彼は、スクリーン リーダーがページの上部と興味のあるコンテンツの間のすべての複雑な情報を解析するまで待たなければなりません。

もちろん、スクリーン リーダーでナビゲーションをスキップできる技術はありますが、これにはナビゲーション バーやその他のコンテンツの画像にリンクを追加する必要があります。これらのテクノロジーの動作は混乱を招き、サイトを訪問する他の人に見える可能性があります。 CSS を使用すると、ページ内の非表示要素 (他のサイト訪問者やマウスには表示されない) を完全に定義できます。スクリーン リーダーはこれらの要素を使用して、すばやく移動し、ドキュメントを効率的に操作できます。

CSS はマークアップを表示しないため、スクリーン リーダーで発生する唯一の問題は実際のコンテンツに関するものです。さらに、CSS-P を使用してデザインするときは、コンテンツの実際の「フロー」に焦点を当てます。ページ上の論理的な順序について考え始めます。

この文書を読むと、情報の「流れ」がわかります。ただし、モザイク テーブルの例では、複数列レイアウトを使用する場合、この段落はページの右上隅に配置される可能性が高くなります。そうすれば、スクリーン リーダーは、記事の最後にあるこの段落を読むことになっているのかを知る方法がありません。

CSS-P を使用した後も、ブラウザーはこの段落をブラウザー ウィンドウの右上隅に表示することがありますが、ドキュメントのソース コードを表示すると、ドキュメントの HTML 内の段落は表示されたままになります。今見ているものをその場所へ。これにより、ページへのアクセスが容易になります。

概要と計画
以上が私の答えです。 Web デザインに CSS を使用することの独特の利点について説明できたと思います。明らかに、学ぶべきことがたくさんあります。したがって、CSS* に関する他の Macromedia Developer Center の記事を読むことをお勧めします。これらの記事は、CSS の利点をより深く理解し、デザインで CSS を使用するプロセス全体を学ぶのに役立ちます。今後数週間から数か月以内に、さらに多くの CSS チュートリアルを提供する予定です。ここでの執筆はこれで終わりです。私たちのスタイルを楽しんで使っていただければ幸いです。


著者について
Greg Rewis は、Macromedia の Web テクノロジの主要なエバンジェリストです。グレッグは、Macromedia ソフトウェア スイートおよび Web 上に配布される Web アプリケーション開発サーバーの Macromedia 広報担当者であり、製品開発組織を持つ同社の数千の顧客の利益を代表しています。グレッグは、年間 200 日「出張」し、顧客と話し、展示会、セミナー、カンファレンスで製品のデモンストレーションを行い、マクロメディア製品ライン専用の高度なトレーニング セッションを企画しているため、マクロメディアの顧客が何を考えているかを正確に知っています。グレッグはいつも世界中を飛び回っていますが、仕事以外の時はアリゾナの砂漠でゴルフをしたり、2人の息子に「プールでくつろぐ」コツを教えたりして生活を楽しんでいます。