DreamWeaver で CSS スタイル シートを適用するための 2 つのヒント
著者：Eve Cole
更新時間：2009-05-31 21:17:47
1. ハイパーリンクの下線を削除し、マウスをハイパーリンクの上に置いたときに色を変更します。
デフォルトでは、DreamWeaver でデザインされた Web ページのハイパーリンクには下線が引かれており、見た目はあまり美しくありません。この迷惑な下線を削除するには、HTML ソース コードにコードを手動で追加するという方法が多くの新聞や雑誌で紹介されています。実際、DreamWeave ではリンクの下線を簡単に削除できます。まず、DreamWeaver のドキュメント ウィンドウにランダムなリンクを作成します。このリンクには下線が付いていることがわかります。この下線を消すにはどうすればいいでしょうか？
1. メニュー バーの [テキスト] | [CSS スタイル] | [スタイル シートの編集...] をクリックして (またはショートカット キー Ctrl+shift+E を直接押して)、[スタイル シートの編集] ダイアログ ウィンドウを表示します。
2. [新規] をクリックし、[新しいスタイル] ダイアログ ボックスで [CSS セレクターを使用] ボタンをクリックします。
3. [セレクター] フィールドに「a」と入力し、[OK] をクリックします。
4. [CSS スタイル定義] ダイアログ ボックスが表示されるので、Type クラスの装飾で [なし] をオンにし、[OK] をクリックし、[完了] をクリックします。ドキュメント ウィンドウでリンクの下線が消えていることがすぐにわかります。では、リンク上にマウスを置いたときにリンクの色を変更するにはどうすればよいでしょうか?上記の手順 1 と 2 を繰り返します。次に、「セレクター」の横にあるドロップダウン矢印をクリックし、「a:hover」を選択して、「OK」をクリックします。表示される [a: hover のスタイル定義] ダイアログ ボックスで、Type クラスの色から任意の色を選択し (たとえば、赤を選択)、[OK] をクリックし、[完了] をクリックして完了します。 F12 を押してプレビューし、リンク上にマウスを置きます。リンクが赤くなりますか?先ほどの [ホバーのスタイル定義] ダイアログ ボックスの Backgroud クラスで、背景色を緑色に選択した場合、ハイパーリンク上にマウスを置くと、リンクが赤色に変わるだけでなく、背景も緑色になります。実際、先ほど説明した CSS スタイル定義ダイアログ ボックスを使用して、さらに特殊な効果を実現することもできます。興味のある方は検討してみてください。
2. 再利用可能な外部 CSS スタイル シートを作成します。DreamWeaver を使用して特定の Web ページに CSS スタイルを作成した後、そのスタイルを別の Web ページに適用する場合、CSS スタイルを再作成する必要はありません。外部 CSS スタイル シート ファイル (外部 CSS スタイル シート) を作成すると、今後、このスタイル シート ファイル内のスタイルを自由に呼び出すことができます。管理を容易にするために、まず、サイトが存在するフォルダー内に CSS という名前の新しいフォルダーを作成します。このフォルダーは、外部スタイル シート ファイル (拡張子は css) を配置するために特別に使用されます。
1. ドキュメント ウィンドウで Ctrl+shift+E を押して、[スタイル シートの編集] ダイアログ ウィンドウを表示します。 2. [リンク] をクリックします。
3. ポップアップの [外部スタイル シートのリンク] ダイアログ ボックスで、[参照] をクリックし、作成した CSS フォルダーを見つけます。
4. [スタイルシート ファイルの選択] ウィンドウの [ファイル名] 列に、「*.css」と入力します (* は任意の名前を指定できます)。この時点では、実際には CSS フォルダーにスタイル シート ファイルが存在しないことに注意してください。 「ファイル名」フィールドに入力した内容が、新しい外部スタイルシートファイルの名前になります。たとえば、「title.css」と入力し、[選択] | [OK] をクリックします。
5. [スタイルシートの編集]ダイアログウィンドウに、title.css（リンク）が追加されるので、ダブルクリックします。
6. ポップアップ「title.css」ウィンドウで、「新規」をクリックします。
7. [新しいスタイル] ダイアログ ボックスで、[カスタム スタイル (クラス) の作成] ボタンをクリックします。 8. [名前] 列に名前 (myheadline など) を入力し、[OK] をクリックします。
9. 以下の「title.css の .myheadline のスタイル定義」ダイアログボックスで、フォントや色などの各種設定を行い、完了したら「OK」をクリックします。新しいスタイルを作成する場合は、もう一度 [新規] をクリックし、手順 6、7、8、9 を繰り返し、最後に [保存]、[完了] をクリックすると、外部スタイル シート ファイル title.css が作成されます。 title.css 内のすべてのスタイルは、メニュー バーの [TEXT] | [CSS Styles] サブメニューにリストされます。他の Web ページでこの title.css を呼び出す場合は、上記の手順 1 ～ 3 を繰り返し、[スタイルシート ファイルの選択] ウィンドウの [ファイル名] 列に title.css を入力します。 「選択」 | 「ok」 | 「完了」をクリックすると、title.css のすべてのスタイルが Web ページのメニューバーの「テキスト」 | 「CSS スタイル」サブメニューに表示され、適用できるようになります。この Web ページにこれらのスタイルを追加します。
