外部 CSS スタイルシートへのリンク

Dreamweaver Web ページを一般的な外部 CSS スタイルシートにリンクすることで、編集の時間と労力を削減する方法について説明します。

外部 CSS スタイルシートを編集すると、その CSS スタイルシートにリンクされたすべてのドキュメントに編集内容が反映されます。ドキュメントの CSS スタイルを書き出して新しい CSS スタイルシートを作成し、外部スタイルシートに添付またはリンクすると、ドキュメント内の CSS スタイルを適用できます。

サイト内に存在するスタイルシートであれば、どれでもページに添付できます。また Dreamweaver には、自動的にサイトに移動してページに添付できる既にできあがったスタイルシートが付属しています。

  1. 次のいずれかの操作をおこなって、CSS デザイナーを開きます。

    • ウィンドウ/CSS デザイナーを選択します。
    • Shift+F11 キーを押します。
  2. CSS デザイナーで、ソースの横の + アイコンをクリックし、「既存の CSS ファイルを添付」をクリックします。

    既存の CSS ファイルを添付
    既存の CSS ファイルを添付

  3. 次のいずれかの操作を実行します。
    • 「参照」をクリックして、外部 CSS スタイルシートを参照します。

    • 「ファイル/URL」ボックスにスタイルシートのパスを入力します。

  4. 「次の形式で追加」で、以下のオプションのいずれかを選択します。
    • 「リンクさせる」を選択すると、現在のドキュメントと外部スタイルシートとのリンクを作成できます。これにより、HTML コードに link href タグが作成され、パブリッシュされたスタイルシートの場所を示す URL が参照されます。この方法は、Microsoft Internet Explorer と Netscape Navigator の両方で使用できます。

    • link タグを使用して外部スタイルシートから別の外部スタイルシートへの参照を追加することはできません。スタイルシートをネストするには、読み込みディレクティブを使用する必要があります。多くのブラウザーでは、ページ内(スタイルシート内ではなく)の読み込みディレクティブが認識されます。ルールが重複する外部スタイルシートが読み込まれているのかリンクされているのかによって、競合するプロパティの解決方法は少々異なります。外部スタイルシートをリンクするのではなく読み込む場合は、「ファイルを読み込む」を選択します。

  5. メディアポップアップメニューで、スタイルシートのターゲットメディアを指定します。

    メディア依存のスタイルシートについて詳しくは、World Wide Web Consortium の Web サイト(www.w3.org/TR/CSS21/media.html)を参照してください。

  6. 「プレビュー」ボタンをクリックすると、スタイルシートによって目的のスタイルが現在のページに適用された状態を確認できます。

    スタイルを適用した結果が予想と異なる場合は「キャンセル」をクリックしてスタイルシートを削除します。ページの外観が、適用する前の状態に戻ります。

  7. 「OK」をクリックします。
アドビのロゴ

アカウントにログイン