Fireworks CS6でCSS3グラデーションボタンを作成する

Fireworks CS6では、作成したボタンのCSS3コードを自動で出力することができます。この機能により、グラデーションボタンも画像を使わず、CSSとテキストだけで簡単に表示することができます。

例えば下図は、Fireworkが標準で持っているスタイルでボタンを作成したものですが、このようなボタンをCSSでWebページに表示できるようになります。

CSSボタンの例

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Adobe Fireworks CS6

ボタンの作成

まずはFireworksの長方形ツールで、ボタンの原型となる長方形を作成します。

Fireworksで作成した長方形

プロパティパネルで、幅と高さ、角丸の半径を設定しておきます。

プロパティパネル

ボタンデザインは、自分で細かくグラデーションなどを設定することもできますが、Fireworksに標準で登録されているスタイルを適用すると簡単ですので、その方法で作成してみます。

メニューの[ウィンドウ]-[スタイル]を選択し、スタイルパネルを表示させます。

スタイルパネルのドロップダウンリストから、[Web ボタンのスタイル]を選択します。
その他のボタンスタイルとしては、[パステル][プラスチック]などを選択することもできます。

スタイルパネル

ボタンにする長方形を選択して、スタイルパネルから気にいったデザインのスタイルをクリックします。

スタイルパネルからスタイルを選択

長方形にスタイルが適用されました。

スタイルが適用された長方形

CSSコードの出力

メニューの[ウィンドウ]-[CSSプロパティ]を選択し、CSSプロパティパネルを表示させます。
パネルには現在選択しているシェイプの情報が表示されます。

CSSプロパティパネル

コードに含めるベンダープレフィックスにチェックを入れ、[すべて]をクリックします。
これで、クリップボードにCSSコードがコピーされました。

CSSプロパティパネル

CSSファイルにコードを追加

CSSファイルに、作成したボタンに適用するクラスを設定し、そこに先ほどコピーしたコードを貼り付けます。
上記の例では、以下のコードになります。

またボタンに表示するテキストに対してCSSを設定します。
今回はテキストがボタンの中央に表示されるよう以下のようにしました。

HTMLファイルの記述

ボタンを表示したい場所に以下のように記述します。

下のボタンは実際に、このページのCSSで表示させています。

CSSボタン

スポンサーリンク

ページの先頭へ