試してみよう Dreamweaver CS5.5：
CSS スタイルパネルを使って角丸影付きリンクボタンを制作しよう

今回は、CSS スタイルパネルを使って、リンクボタンの角を丸くしたり、影を付ける方法をご紹介します。CSS スタイルパネルを使えば、ライブビューの機能を使って Dreamwever 内に実機と同様の表示をした状態のまま、CSS プロパティを使って見た目を変更できます。
それでは実際にリンクボタンのスタイルを変更します。サンプルコードをダウンロードして、その中に含まれる index.html ファイルを Dreamweaver CS 5.5 で開いてみましょう。
→サンプルコードのダウンロード

リンクボタンの CSS プロパティを確認します

サンプルコードの header タグ内には、ナビゲーション用のリンク要素のリストが含まれています。ライブビューボタンを押して （または Alt/Option+F11 キー） ライブビュー表示に切り替えると、横に並ぶリンクボタンが確認できます。
リンクボタンに設定されている CSS プロパティを確認するには、CSS スタイルパネルの「ルール」と書かれたリストから "nav ul a" を選択します。すると、「プロパティ」と書かれたラベルの下に、当該のリンク要素に設定されている CSS プロパティの一覧が表示されます。

リンクボタンの角を丸くしよう

リンクボタンに角丸を指定する CSS プロパティを追加します。新しい属性を追加するには、プロパティのリストの最後にある「プロパティの追加」をクリックします。プルダウンを表示すると属性がアルファベット順に表示されるので、"border-radius" を選択します。これで、プロパティリストに "border-radius" が追加されます。
次に、"border-radius" の行の右カラムのアイコンをクリックします。下図のダイアログが表示されたら、角丸の半径を入力すると、数値に合わせてライブビューのページが変化します。下の例では、全ての角が 8 ピクセルの角丸になるよう指定しています。

ブラウザ固有の CSS プロパティを表示する

CSS スタイルパネルの下部にあるカテゴリビューのアイコンをクリックすると、ブラウザ固有の CSS プロパティを選べます。ブラウザ固有の属性は、ブラウザの種類ごとにまとめられています。
旧バージョンのブラウザで角丸表示を有効にするための "-moz-border-radius" や "-webkit-border-radius" はカテゴリービューから選択できます。 この機会にこれらの CSS 属性も追加してみましょう。

リンクボタンに影をつけよう

領域に影をつける CSS プロパティは、"box-shadow" です。しかし、Dreamweaver CS5.5 のライブビューが使用するWebkit では、このプロパティがサポートされず、パネルで設定しても表示確認できません。そこで、まず Webkit 固有のプロパティである "-webkit-box-shadow" を使用し、box-shadow" は値が決まった後に指定することとします。（前述のように、ブラウザ固有のプロパティはカテゴリビューから選択できます）
"-webkit-box-shadow" の行の右のカラムのアイコンをクリックすると、下のようなダイアログが表示されます。影の属性として X, Y 方向のオフセットとぼかしの半径、そして影の色等が指定できます（下の例では、"1, 1, 3, #000" を指定）。 オフセットの値を大きくすると、影が確認しやすくなります。

影を透過表示に変更しよう

簡単に影をつけることができました。しかし、この影は下を塗りつぶしています。通常の影と同様に影の下も透けて見えるように変更しましょう。
Dreamweaver CS5.5 は CSS3 対応しているため、色に透明度を指定できます。影の色に透明度を指定するため、 影の CSS プロパティを指定するダイアログを再び開きます。カラーボックスをクリックして、スウォッチパネルを表示し、スウォッチパネル右上の矢印から「カラーフォーマット」を選択すると、色指定フォーマットが複数表示されます。その中から rgba() を選んで下さい。rgba() フォーマットは、RGB + 透明度を指定できる CSS3 の機能です。

rgba() フォーマットを指定すると、色の値のフィールド内が rgba(0,0,0,1) という記述に変わります。4 つめの数値である 1 が透明度を表します。透明度を rgba(0,0,0,0.3) のように小さい値に変更すると、影の色が薄くなり、自然な影が表示されます。

実は、このボタンリンク自体も、ボタンらしく見えるよう透明度を利用して背景の色を変えています。CSS ファイル内に下の記述があり、通常は背景より少し明るく、マウスがボタン上に移動すると更に明るくなるよう指定されています。

nav ul a:link, nav ul a:visited {
	background: rgba(255,255,255,0.2);
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
	background: rgba(255,255,255,0.4);
}