DW_Experience 交換で CSS をコーディングする際に注意し、習得する必要があるいくつかのスキル

その「見える化」と操作の簡単さから、DWでCSSを書いている友人も多いと思いますが、今日はDWでCSSを書くための「ベスト習慣」を皆さんの参考になればと思い紹介します。
CSS は Web サイトのデザインプロセスを変えています。 CSS に興味を持つデザイナーの数の増加に応えるために、Macromedia DW MX には、CSS 関連の新機能と改良された機能が多数導入されています。これらの新機能を使用すると、将来の更新を計画し、W3C 標準への準拠性を高めたサイトを開発できます。この記事では、DW MX で CSS を使用するためのいくつかの提案と、特定の CSS 機能について説明します。
一般に、スタイル シートは、Web コンテンツの外観を制御する書式設定ルールの集合です。 CSS は、次の 3 つの異なる方法でページ内で使用できます。

コードをコピー コードは次のとおりです:

インライン: コードに書き込まれる 1 回限りのスタイル。
埋め込み: ページ内のすべての要素を制御できるスタイル シート
外部: 多くのページの要素を制御できるスタイル シート
実際、多くのサイトはこれら 3 つのメソッドを使用する必要があります。組み合わせ。

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