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ボタン

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ