一般に、スタイル シートは、Web コンテンツの外観を制御する書式設定ルールの集合です。 CSS は、次の 3 つの異なる方法でページ内で使用できます。
インライン: コードに書き込まれる 1 回限りのスタイル。
埋め込み: ページ上のすべての要素を制御するスタイル シート
外部: 多くのページ上の要素を制御するスタイル シート
実際、多くのサイトでは、必要に応じてこれら 3 つの方法を組み合わせて使用しています。
CSS を使用するときに考慮すべき重要な点は、ブラウザーや同じブラウザーのバージョンが異なると CSS の解析方法が異なるという事実です。 Web ブラウザの違いに加えて、聴覚ブラウザ、TV ベースのブラウザ、Palm Pilot や TTY (テレタイプライター、リモート タイプライター) などのハンドヘルド デバイスなど、他にも多くのブラウザがあることを認識する必要があります。
ベストプラクティスとは何ですか?
ほとんどのテクノロジーには、独自の合意された標準があります。 CSSも例外ではありません。 Web 上に存在するすべての CSS が標準化されているわけではありませんが、既存の標準に従って CSS を使用すると便利です。一般に、開発者はコンテンツをレポートから可能な限り分離する必要があります。これを行うことの利点は次のとおりです。
1. サイトの寿命を延ばす
非標準のスタイル シートはその時点では便利かもしれませんが、ブラウザの新しいバージョンが登場すると、互換性の問題が発生する可能性があります。そのとき、サイトをページごとに修正するのは非常に時間のかかる作業になりますし、CSSを使用する意味もなくなってしまいます。
2. すべてのユーザーとブラウザがサイトにアクセスできるようにします。
一部の地方自治体では、ウェブサイトは障害のある人もアクセスできるものでなければならないと法律で定めています。聴覚ブラウザなど、障害を認識するために設計された閲覧デバイスには、非常に厳しい CSS 規範要件があります。
3. サイトの更新とメンテナンスを簡単にします。
CSS を正しく使用すると、1 つのページで行った調整をすべてのページにすぐに適用できます。
最初に選択しなければならないのは、どのスタイル シートを使用するかです。ベスト プラクティスに関しては、さまざまなスタイル シートの分析を次に示します。
インライン CSS は、簡単に言うと、使用しないようにする必要があります。いくつかの欠点の中でも特に、インライン CSS を使用すると、CSS の本当の利点、つまりコンテンツを書式設定から分離しないことを意味します。 DW は、主にページ要素 (DW のユーザー インターフェイスでは「レイヤー」と呼ばれます) を配置するため、またはオブジェクトのプロパティを変更するためにインライン スタイル JavaScript を使用する必要がある特定の DHTML 効果を使用するために、インライン CSS を使用します。
埋め込み CSS: 現在のページにのみ影響するため、これも理想的とは言えません。更新プロセス中にページが失われると、サイトのスタイルが一貫しなくなります。また、ユーザーがサイトを閲覧するときに、ページごとにスタイル シート情報をダウンロードする必要があります。
外部 CSS: これが最初の選択肢です。外部 CSS を使用すると、接続されているすべてのページが一貫した外観とスタイルを維持でき、アウトラインを一度変更すれば、関連するすべてのページを簡単に更新でき、ページが小さくなり、閲覧が高速になります。特定の CSS 機能を分析する際の他のベスト プラクティスについては、以下で説明します。
DW で CSS スタイルシートを作成する
DW で CSS スタイル シートを作成する場合 (テキスト 》CSS スタイル 》新しいスタイル シート)、ポップアップ ダイアログ ボックスには、[新しいスタイル シート ファイル] と [現在のページのみ (このドキュメントのみ)] の 2 つのオプションがあります。 「新しいスタイルシートファイル」を選択すると、外部CSSの作成プロセスが始まります。このオプションでは、実際の作成プロセスの前に、スタイル シートに名前を付け、その保存場所を選択する必要があります。他のオプションである [このドキュメントのみ] では、関連するコードがページに直接書き込まれます。
既存のスタイル シートを選択して編集したり、[新しいスタイル] ダイアログ ボックスで新しい定義を追加したりすることもできます。
外部 CSS に接続する必要がありますか、それともインポートする必要がありますか?
外部スタイルシートを作成したら、それを各ページ（またはテンプレート）に添付する必要があります。これを行うには、CSS パネルの [スタイル シートのアタッチ] ボタンをクリックすると、[外部スタイル シートのリンク] ダイアログ ボックスが表示され、名前を見つけた後、リンクするかインポートするかを選択できます。この外部スタイルシート。
接続は最も一般的に使用される方法です。スタイル シートをページに接続するには、「リンク」を選択します。次のマークアップがページに追加されます。
接続オプションは、CSS をサポートするすべてのブラウザーでサポートされています。一部の古いブラウザ (Netscape 4.x など) でこのスタイル シートを「表示」したい場合は、次の方法を使用する必要があります。
「インポート」オプションを選択した場合、使用されるタグは次のとおりです。
NetSscape4 はインポートされた CSS を完全に無視し、接続された CSS に従ってページを解釈します。このようにして、ブラウザーの互換性の問題を気にせずに CSS の新機能を使用できます。
CSS プロパティ インスペクター
DW のプロパティ インスペクターで CSS モードに簡単に切り替えることができます。デフォルトでは、プロパティ・インスペクターはフォント・タグを生の HTML モードで表示します。 [フォント] ドロップダウン メニューの横にある小さな「A」をクリックすると、フォント タグのリストではなく、現在利用可能な CSS スタイルシートが表示されます。同時に、HTML モードに簡単に切り替えることができます。
既成のCSSスタイルシート
DW の魅力的な CSS 機能の 1 つは、既製の CSS スタイル シートが含まれていることです。 CSS の新規ユーザーは、まず CSS を試してみることができます。 [ファイル] > [新規] を選択し、ポップアップの新しいドキュメント ダイアログ ボックスで CSS スタイル シートを選択すると、使用可能なすべての CSS のリストが右側のボックスに表示されます。いわゆるベスト プラクティスを実践するには、「アクセシブル」とマークされたものを選択してください。
ドキュメントをサイト フォルダーに保存し、上記の方法を使用して CSS をドキュメントに追加します。
設計時スタイルシート
DW のこの機能を使用すると、デザイン ビューで作業するときにスタイル シートをページに適用できるため、サイトの外観をより直感的に理解できるようになります。デザインタイム スタイルシートはサイト内に表示されません。この機能は、ベスト プラクティスの観点から非常に便利です。インポート方法と結合方法の両方を使用する場合 (前述)、デザイン時スタイルシートをアタッチすると、どちらかを使用してサイトを開発できるようになります。別のスタイル シートでページがどのように表示されるかを確認したい場合は、別のスタイル シートに簡単に変更できます。
デザイン時スタイルシートは、CSS をサーバー側 (ASP、PHP、ColdFusion など) または Javascript を介してクライアント側に適用する開発者にも役立ちます。サーバー側のスタイル シートは、クライアント ブラウザーでの CSS サポートが不十分な場合に対処するもう 1 つの方法です。ただし、DW の以前のバージョンでは、この方法では設計段階で CSS の実際の効果を確認できませんでした。デザインタイム スタイルシートを使用すると、スタイルシートの効果をリアルタイムで表示できるため、DW でビジュアル インターフェイスを操作できます。もう 1 つの利点は、サイト ファイルをアップロードするときに、サイト全体を調べて冗長なスタイルシートを探す必要がなくなることです。
確認する
独自のスタイル シートを作成する場合でも、既存のスタイル シートを編集する場合でも、検証により、非標準のタグや不正なコードが誤用されないことが保証されます。 DW 自体には CSS バリデーターは含まれていません。W3C サイトが提供する検証サービスを使用できます。
DW 内で、HTML または DHTML タグを検証できます ([ファイル] > [ページのチェック] > [マークアップの検証 (HTML の場合)] または [ファイル] > [ページのチェック] > [XHTML の XML として検証])。 DW は、CSS ベースのサイトを開発する際に多くの補助ツールを提供します。 MW MX の助けと CSS の十分な理解により、時の試練に耐えるサイトを開発できます。