その「視覚化」と操作の容易さから、多くの友人が Dreamweaver で CSS を書いています。今日は、皆さんのお役に立てればと思い、Dreamweaver で 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の作成プロセスが始まります。このオプションでは、実際の作成プロセスの前に、スタイル シートに名前を付け、その保存場所を選択する必要があります。他のオプションである [このドキュメントのみ] では、関連するコードがページに直接書き込まれます。
既存のスタイル シートを選択して編集したり、[新しいスタイル] ダイアログ ボックスで新しい定義を追加したりすることもできます。
外部 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 サポートが不十分な場合に対処するもう 1 つの方法です。ただし、DW の以前のバージョンでは、この方法では設計段階で CSS の実際の効果を確認できませんでした。デザインタイム スタイルシートを使用すると、スタイルシートの効果をリアルタイムで表示できるため、DW MX で視覚的に作業できます。もう 1 つの利点は、サイト ファイルをアップロードするときに、サイト全体を調べて冗長なスタイルシートを探す必要がなくなることです。
検証
独自のスタイル シートを作成する場合でも、既存のスタイル シートを編集する場合でも、検証により、非標準のタグや不正なコードが誤用されていないことが保証されます。 DW MX 自体には CSS バリデーターは含まれていません。W3C サイトが提供する検証サービスを使用できます。 DW MX 内では、HTML または DHTML タグを検証できます ([ファイル] > [ページのチェック] > [マークアップの検証 (HTML の場合)] または [ファイル] > [ページのチェック] > [XHTML の XML として検証])。 DW MX は、CSS ベースのサイトを開発する際に多くの補助ツールを提供します。 MW MX の助けと CSS の十分な理解により、時の試練に耐えるサイトを開発できます。