目次:
Dreamweaverで新しいスタイルを作成するときは、そのスタイルを内部スタイルシートまたは外部スタイルシートに保存するかどうかを決定する必要があります。 内部スタイルシート では、スタイルルールは、スタイルを適用するHTMLドキュメントの最上部に保存されます。 外部スタイルシート では、新しいスタイルがWebサイト内の任意のファイルに添付できる別のドキュメントに保存されます。
外部スタイルシートは、サイト内の各ページのスタイルを作成するよりも、複数のページにわたって1つのスタイルセットを使用するほうが効率的です。つまり、あるページの要素にのみ適用されるスタイルを作成する場合など、内部スタイルシートが適していることがあります。
<! - 1 - >Dreamweaverで内部スタイルシートを作成する方法
内部スタイルシートは、適用されるHTMLファイルと同じHTMLファイルに保存されます。したがって、外部シートを作成するときに行うように、内部スタイルシートを作成するときにはファイルを作成しません。
代わりに、内部スタイルシートを作成するときは、Dreamweaverで開いたHTMLファイルの上部にあるタグ内にタグを追加するだけです。次に、スタイルを作成するときに、ファイル内のタグ内に新しいスタイルのルール定義を保存します。
<! - 2 - >Dreamweaverで新しい内部スタイルを作成するには、2つの手順が必要です。まず、CSSデザイナパネルの上部にある[ソース]パネルのプラス(+)アイコンをクリックします。次に、ドロップダウンリストから[ページで定義]を選択します。あなたは終わった。 Dreamweaverはタグをファイル内のコードに挿入し、内部スタイルシートを[ソース]パネルにタグとともにリストします。
Dreamweaverで外部スタイルシートを作成する方法
CSSデザイナパネルの一番上に、[ソース]パネルがあります。このパネルには、開いているページで使用可能なスタイルシートの名前が表示されます。この同じパネルは、スタイルの作成または適用時にスタイルシートを作成またはリンクするために使用されます。
外部スタイルシートを作成するには、まずDreamweaverで新しいHTMLファイルを作成して保存するか、既存のファイルを開き、次の手順に従います。
-
上部の[ソース]パネルのプラス(+)アイコンをクリックします。 CSSデザイナーパネル
新しいCSSファイルを作成する、既存のCSSファイルを添付する、ページに定義するという3つのオプションを含むドロップダウンリストが開きます。
-
ドロップダウンリストから[新しいCSSファイルを作成]オプションを選択します。
新しいCSSファイルを作成ダイアログボックスが開きます。
-
新しいスタイルシートファイルの名前を入力します。
ハイフン( - )やアンダースコア(_)以外のスペースや特殊文字を含めない限り、好きなものにスタイルシートを付けることができます。
-
「リンク」オプションを選択します。
ほとんどの場合、リンクはベストプラクティスとみなされ、Dreamweaverではデフォルトで選択されています。
ほとんどの場合、インポートオプションは、複数の外部スタイルシートをページに適用したいが、1つのスタイルシートにのみリンクしたい場合にのみ使用されます。その場合、インポートオプションを使用して、複数のスタイルシートを1つに関連付けることができます。
-
追加の設定を表示するには、条件付き使用の横にある矢印をクリックします。
条件付き使用設定は、スタイルシートのメディアクエリを設定するために使用されます。
-
OKをクリックします。
スタイルシートは保存され、Dreamweaverで開いたHTMLページにリンクされます。 注: 新しいHTMLページで作業している場合は、ページを保存したことを確認してください。そうしないと、新しいCSSファイルを作成してリンクすることができなくなります。
外部スタイルシートを作成したら、直後の練習の手順に従って、同じスタイルシートを好きなだけ多くのページにリンクできます。また、任意のスタイル・ルールを任意の外部スタイル・シートに追加することができます。スタイル・ルールは、クラス、タグ、およびその他のタイプのスタイルの作成に関するさまざまな演習でカバーされています。
