DreamweaverでCSSの使い方をお探しですね。

広告

DreamweaverでCSSファイルを作成してHTMLにリンクする方法

DreamweaverでWebページの見た目を整えるには、HTMLファイルとは別にCSSファイルを作って、それをHTMLに読み込ませる必要があります。

CSSを外部ファイルとして管理すると、複数ページのデザインをまとめて変更できるし、HTMLもスッキリして読みやすくなります。

この記事では、DreamweaverでCSSファイルを新しく作る方法から、HTMLにリンクして実際にスタイルを適用するまでの流れ、うまく反映されないときのチェックポイントまで、初心者にも分かりやすく説明していきますね。

DreamweaverでCSSファイルを使う基本と準備

DreamweaverでCSSを扱う前に、まず「HTML」と「CSS」の役割を整理しておきましょう。

HTMLは見出しや本文、画像、リンクなど、ページの骨組みを作るためのファイルです。

一方、CSSは文字の色や背景色、余白、横幅、レイアウトなど、見た目を指定するためのファイルです。

HTML内に直接CSSを書くこともできますが、実際の制作現場では外部CSSファイルを作って、HTMLから読み込む方法がよく使われています。

外部CSSファイルを使う一番のメリットは、管理がとてもラクになることです。

たとえば「style.css」というCSSファイルを1つ作って、複数のHTMLファイルから読み込むようにしておけば、サイト全体の文字色や余白を一気に変更できます。

1ページずつ同じCSSを書き直す必要がないので、ページ数が増えても修正作業がグッと楽になるんです。

それに、HTMLには文章の構造、CSSにはデザインの指定というふうに役割を分けられるので、コードも見やすくなります。

Dreamweaverで作業するときは、最初にサイト定義をしておくとスムーズです。

サイト定義というのは、作業するWebサイトのフォルダをDreamweaverに登録する設定のこと。

メニューの「サイト」から「新規サイト」または「サイトの管理」を開いて、ローカルサイトフォルダーに作業用フォルダを指定します。

これをやっておくと、Dreamweaverの「ファイル」パネルでHTMLやCSSの位置関係を確認しながら作業できるので、リンクパスを間違えにくくなります。

CSSファイルの置き場所は自由ですが、一般的にはサイト内に「css」というフォルダを作って、その中に「style.css」や「common.css」といった名前で保存します。

たとえば「index.html」と同じ階層に「css」フォルダを作って、その中に「style.css」を保存する感じです。

この場合、HTMLからCSSを読み込むパスは「css/style.css」になります。

Dreamweaverでは画面上の操作でリンクできるので初心者でも扱いやすいんですが、最終的にHTML内にどんなコードが入るのかを理解しておくことが大事です。

DreamweaverでCSSファイルを新規作成する方法

DreamweaverでCSSファイルを作る方法はいくつかあります。

一番分かりやすいのは、メニューから新規ファイルを作成してCSS形式で保存する方法です。

Dreamweaverを起動して、対象のサイトを開いたら、「ファイル」メニューから「新規」を選んで、ドキュメントタイプとしてCSSを選びます。

新しいCSSファイルが開いたら、必要な内容を入力して、「style.css」などの名前を付けてサイト内の「css」フォルダに保存しましょう。

CSSファイルを作った直後は、まだHTMLには適用されていません。

CSSは単独で存在しているだけではページに反映されないので、HTML側から読み込ませる必要があります。

まずはCSSファイルに簡単なスタイルを書いておくと、リンクがうまくいったかどうかを確認しやすくなります。

たとえば以下のようなCSSを書いて保存しておくと、ページ全体の文字色や背景色が変わるので、反映確認にピッタリです。

“`css

body {
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

h1 {
  color: #0066cc;
}

“`

Dreamweaverのバージョンによっては、「CSSデザイナー」パネルからCSSソースを作成する方法も使えます。

CSSデザイナーは、CSSファイルやセレクター、プロパティを視覚的に管理できるパネルです。

画面右側に表示されていない場合は、「ウィンドウ」メニューから「CSSデザイナー」を表示しましょう。

CSSデザイナーの「ソース」欄で新しいCSSファイルを作ったり、既存のCSSファイルを関連付けたりできます。

CSSファイルの名前は、後から見ても役割が分かる名前にしておくと管理しやすくなります。

小規模なサイトなら「style.css」だけでも問題ありませんが、ページ数が多い場合は「base.css」「layout.css」「top.css」みたいに役割別に分けることもあります。

ただ、初心者のうちはファイルを分けすぎると、どこに何を書いたか分からなくなりがちです。

まずは「css」フォルダ内に「style.css」を作って、HTMLにリンクして基本の流れを覚えるのがおすすめです。

作成したCSSファイルをHTMLにリンクして適用する手順

CSSファイルをHTMLに適用するには、HTMLの「head」要素内に「link」タグを追加します。

Dreamweaverでは画面操作でCSSを添付する方法と、コードビューで直接linkタグを書く方法があります。

初心者には画面操作が分かりやすいですが、トラブルが起きたときに原因を見つけやすくするために、最終的にはコードの形も理解しておくと安心です。

HTMLファイルを開いて、CSSファイルとの位置関係を確認したうえでリンク設定を行いましょう。

DreamweaverのCSSデザイナーを使う場合は、HTMLファイルを開いた状態でCSSデザイナーパネルを表示して、「ソース」欄からCSSファイルを関連付けます。

既存のCSSファイルを使う場合は「既存のCSSファイルを添付」またはそれに近い項目を選んで、作成済みの「style.css」を指定します。

バージョンによって表示される言葉は少し違いますが、基本的には「CSSソースを追加する」「CSSファイルを添付する」という流れです。

Dreamweaverが自動でHTMLのhead内にlinkタグを入れてくれます。

コードビューで直接書く場合は、HTMLファイルのheadタグ内に次のような記述を追加します。

たとえば「index.html」と同じ階層に「css」フォルダがあって、その中に「style.css」がある場合は、href属性に「css/style.css」と指定します。

hrefは読み込むファイルの場所を示す属性で、ここが間違っているとCSSは反映されません。

“`html

<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="css/style.css">
</head>

“`

linkタグでは、rel属性に「stylesheet」を指定します。

これは「このファイルはスタイルシートですよ」とブラウザに伝えるための指定です。

href属性にはCSSファイルまでのパスを書きます。

HTMLファイルとCSSファイルが同じフォルダにあるなら「href=”style.css”」、HTMLの下にあるcssフォルダ内なら「href=”css/style.css”」、1つ上の階層に戻る場合は「../」を使います。

Dreamweaverで自動挿入した場合も、コードビューでパスが正しいか確認しておくと失敗を防げます。

CSSをリンクしたら、HTMLとCSSの両方を保存してから表示を確認しましょう。

Dreamweaverのライブビューやプレビュー機能で確認できるほか、ブラウザで直接HTMLファイルを開いて確認する方法もあります。

CSSに書いた背景色や見出しの色が変わっていれば、リンクは成功しています。

反映されない場合でも、CSSの書き方が間違っているのか、HTMLからCSSを読み込めていないのかを切り分けることが重要です。

CSSが反映されないときの確認ポイントと実践的な使い方

DreamweaverでCSSを作ってHTMLにリンクしたのに、画面に反映されないことはよくあります。

多くの場合、原因は複雑なものではなくて、保存忘れ、パスの指定ミス、セレクターの書き間違い、ブラウザのキャッシュなどです。

まずはHTMLファイルとCSSファイルの両方がちゃんと保存されているか確認しましょう。

Dreamweaver上で表示が変わらない場合でも、ブラウザで再読み込みすると反映されることがあります。

特に注意したいのは、CSSファイルへのパスです。

HTMLファイルから見てCSSファイルがどこにあるかを基準にして、hrefを指定する必要があります。

たとえば「about/index.html」からサイト直下の「css/style.css」を読み込む場合、hrefは「../css/style.css」になります。

DreamweaverのファイルパネルでHTMLとCSSの階層を見比べると、パスの考え方がつかみやすくなります。

パスが1文字でも違うとCSSは読み込まれないので、フォルダ名やファイル名の大文字・小文字にも注意が必要です。

CSSの書き方そのものに問題がある場合もあります。

たとえばHTMLでは「class=”main-title”」と書いているのに、CSSでは「.maintitle」と書いていると一致しないので反映されません。

また、idを指定する場合は「#」、classを指定する場合は「.」を使います。

CSSは後から書いたルールが優先されたり、より具体的なセレクターが優先されたりするので、同じ要素に複数の指定があると意図しない表示になることもあります。

確認するときは、次の順番で見ると原因を見つけやすくなります。

– HTMLとCSSの両方を保存しているか
– linkタグがhead内にあって、hrefのパスが正しいか
– CSSのセレクター名とHTMLのclass名・id名が一致しているか
– ブラウザやDreamweaverのプレビューを再読み込みしているか
– 別のCSS指定に上書きされていないか

実際の作業では、まずbodyやh1など分かりやすい要素に色を指定して、CSSが読み込まれていることを確認してから細かいデザインを進めると効率的です。

いきなり複雑なレイアウトを組むと、CSSが読み込めていないのか、指定方法が間違っているのか判断しにくくなります。

最初に単純な変更で接続確認を行って、その後に余白や横幅、フォント、背景、レスポンシブ対応へ進む流れがおすすめです。

Dreamweaverのライブビューとコードビューを併用すれば、見た目とコードの関係を確認しながら学べます。

DreamweaverでCSSファイルを作って、HTMLにリンクする基本は「CSSファイルを作る」「HTMLのhead内で読み込む」「保存して表示確認する」の3ステップです。

操作自体は難しくありませんが、ファイルの階層やパスの考え方を理解しておくことで、反映されないトラブルを大きく減らせます。

外部CSSを使いこなせるようになると、サイト全体のデザイン管理がしやすくなって、HTMLも整理された状態で保てます。

まずは小さなサンプルページでCSSの作成とリンクを試してみて、慣れてきたら複数ページに同じCSSを適用して、Dreamweaverでの制作効率を高めていきましょう。

広告