CSSチュートリアル (5) DW4を使ったCSSの作成方法
1. CSS スタイルパネル
前の章を学習したので、皆さんは CSS についてある程度理解していると思います。この章では、Dreamweaver4 を使用して CSS を作成する方法を説明します。まず Dreamweaver4 を実行します。起動後、メニューで [Windows] -> [CSS スタイル] を選択します (または Shitf+F11 を押します)。以下に示すように、CSS スタイル管理パネルが表示されます。 CSS スタイル (つまり、上記のドットで始まるクラス セレクター。Dreamweaver4 では、ドットで始まるクラス セレクターをカスタム スタイルとして使用します)、[適用] ボタンを使用して、これらの CSS スタイルをページ内のテキストまたはテキストに適用できます。ドキュメントエリア。
注: [適用] ボタンの前にチェックボックスがあり、これを選択するとボタンが灰色になり、マウスをクリックしている限り、カスタマイズされた CSS スタイルが現在の要素に自動的に適用されることを示します。ページ。チェックボックスが使用できない場合、選択すると [適用] ボタンが使用可能になり、適用時に [適用] ボタンをクリックする必要があります。カスタム スタイルをオブジェクトに適用すると、現在の HTML タグの後に class="..." を追加するのと同じになります。さらに、スタイルの前に「S」字型のシンボルがあります。これは内部定義されたスタイルを示し、シンボルの場合は、このスタイルが外部スタイル シート ファイルにリンクされていることを示します。
注: CSS スタイル パネルにはカスタム (クラス) CSS スタイルのみが表示されます。再定義された HTML タグやその他の CSS セレクター スタイルは、HTML タグ領域で制御されるスタイルに自動的に適用されるため、CSS スタイル パネルには表示されません。 (HTML タグの再定義とは、セレクターが 1 つの HTML タグである CSS スタイルを指します。元の HTML タグのスタイルを再定義して変更するため、再定義と呼ばれます。)
右下隅に 4 つの小さなボタンがあります。最も一般的に使用されるコマンドはいくつかあります:
スタイル シートの添付: (スタイル シートへのリンク) クリックすると、スタイル シートの選択ダイアログ ボックスが表示されます。以前に作成した外部スタイル シートを選択し、[OK] をクリックして外部スタイル シートにリンクします。 。外部スタイル シートを追加するときは、可能な限り相対パスを使用してください。新しいスタイル: (新しいスタイル) 通常、このボタンは CSS スタイル シートを作成するために使用します。
スタイル シートの編集: (スタイル シートの編集) クリックすると、スタイル シートの編集ダイアログ ボックスが表示され、このダイアログ ボックスで既存の内部スタイル シートと外部スタイル シートをすべて表示します。
削除: (スタイルの削除) まず、削除するカスタム CSS スタイルを選択し、このボタンをクリックすると、スタイルが削除されます。
上の小さな三角形をクリックするか、マウスの右ボタンをクリックしてメニューをポップアップします。
編集: (編集) 現在選択しているカスタム CSS スタイルを編集します。 CSS クラス スタイルの定義ダイアログ ボックス。
Duplicate: (コピー) 現在選択されているカスタム CSS スタイル クラスを複製します。
削除: (削除) 現在選択されているカスタム CSS スタイルを削除します。これはボタンと同じ効果があります。
適用: (適用) は、選択した CSS クラスをページ内の現在の要素に適用することを指します。 「適用」ボタンと同じです。
新しいスタイル: (新しいスタイル) はボタンと同等です。
スタイルシートの編集: (スタイルシートの編集) ボタンに相当します。
スタイルシートを添付: (外部スタイルシートへのリンク) ボタンに相当します。
スタイルシートのエクスポート: (スタイルシートのエクスポート) このページの内部スタイルシートを外部スタイルシートファイルにエクスポートします。注: この方法を使用して Dreamweaver4 でスタイル シートをエクスポートするほかに、メイン メニューで [ファイル] -> [エクスポート] -> [CSS スタイルのエクスポート] を使用することもできます。
2. スタイルシートの作成の種類 まず、Dreamweaver4 の 3 つのスタイルシートの種類を紹介します。CSS スタイルパネル (または CSS スタイルパネルメニューの新規スタイル) をクリックして、次のような新しいスタイル ダイアログ ボックス 画像:
[定義] で、外部スタイル シートか内部スタイル シートかを選択できます:
l [新しいスタイル シート ファイル] (新しいスタイル シート ファイル) を選択すると、システムは最初にスタイル シート ファイルを保存してから、スタイル シート ドキュメントを定義します。ページ全体のスタイルは、作成したスタイル シート ファイルに従います。この外部スタイル シート ファイルを他のページにリンクすると、1 つのスタイル シート ファイルで複数のページを制御できます。
l [このドキュメントのみ] (このドキュメントのみが存在します) を選択すると、内部スタイル シートが作成され、Dreamweaver4 は作成したスタイル シートの内容を
スタイルが定義されました。必要に応じてこのカスタム スタイルを適用し、Web ページ内のテキストを選択して、スタイル パネルの強調スタイルをクリックします。希望通りの効果かどうかを確認してください。
注: 選択したコンテンツが表または段落の場合、表または段落全体内のテキストは、元のコードから、
