第二十三回目 CSSだけで角丸ボタンを作ってみる

第二十三回目はCSSだけで角丸ボタンを作ってみるについて

今回は、割と便利な「CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』」を紹介するよ。

角丸ボタンのオーソドックスな作り方は、画像を9分割してテーブルやスタイルシートを使って作るものだけれど、このセクシーボタンズは予めボタンのパーツが用意されているので、それを呼び出すためのフォーマットをいじるだけでスタイルシートが分からなくても、簡単に角丸ボタンを作ることができるというもの。

ではまずSexy Buttonsをダウンロードしよう。

▼Sexy Buttonsをダウンロード

解凍するとファイルが出てくるけれど必要なのは [ sexybuttons.css ] というファイルと [ images ] のフォルダの中の画像ファイルだけ。

スタイルシートの定義は [ sexybuttons.css ] の中に書かれているので自分でいじる必要はなし。
使え前の設定だけれど、推奨は解凍後に出現する [ SexyButtons ] というフォルダを自分が作りたいHTMLと同じ場所にコピーするだけでOK。

通常はトップフォルダ(ルートフォルダ)にコピーしておけばいい。

この [ sexybuttons.css ] ファイルを呼び出すにはHTMLファイルの<head> </head> タグの間に

<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />

と記述すればOK。
単純に書けばこうなる。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>
</body>
</html>

これでCSSファイルを呼び出す準備は整った。

次にサンプルを作ってみるんだけれど、とりあえずサンプルのファイル名は

[ sample.html ] としておこう。

[ sample.html ] の最初の中身はこのようにしておく。
分かりやすくするために余計なタグは一切いれていない。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>

</body>
</html>

セクシーボタンズで作られる角丸ボタンの種類は通常のシルバーボタンとオレンジ、イエローボタンがある。
その他、グラデーションのないシンプルボタンがあって、これは自由に色を変えることができる。

角丸ボタンのサンプル

付録としてフォトショップの元データもあるので、フォトショップがあれば、グラデーションのあるセクシーなボタンを自分で自由に作ることができる。

さらにボタンにはアイコンをつけることができて、そのアイコンは付録で何種類も付いているから痒いところに手が届く優れもの!

サンプルはこんな感じ。

付録として上記のアイコンが含まれている。

とりあえず、通常のシルバーボタンを作ってみよう。
サンプル1はクリックするとヤフーに飛ぶボタンだよ。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>
サンプル1
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル1</span></span></a>
</body>
</html>

次はボタンにアイコンを付けてみよう。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>
サンプル1
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル1</span></span></a>
<br>
サンプル2
<a href=”http://www.yahoo.co.jp/”><span><span><img src=”./SexyButtons/images/icons/silk/magnifier.png” border=”0″ alt=”” />サンプル2</span></span></a>
</body>
</html>

アイコンを付けるにはアイコンフォルダからアイコンを<img>タグで呼び出すだけで

OK。

次に文字の大きさを変えてみよう。
文字の大きさは通常はやや大きいと大きいが選べるよ。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>
サンプル1
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル1</span></span></a>
<br>
サンプル2
<a href=”http://www.yahoo.co.jp/”><span><span><img src=”./SexyButtons/images/icons/silk/magnifier.png” border=”0″ alt=”” />サンプル2</span></span></a>
<br>
サンプル3
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル3</span></span></a>
<br>
サンプル4
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル4</span></span></a>

</body>
</html>

「やや大きい」と「大きい」は「sexymedium」と「sexylarge」の属性指定で変えることができる。

次にスキン(見映え)を変えてみよう。
オレンジとイエローが選べるよ。

<html>
<head>
<link rel=”stylesheet” href=”./SexyButtons/sexybuttons.css” type=”text/css” />
</head>
<body>
サンプル1
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル1</span></span></a>
<br>
サンプル2
<a href=”http://www.yahoo.co.jp/”><span><span><img src=”./SexyButtons/images/icons/silk/magnifier.png” border=”0″ alt=”” />サンプル2</span></span></a>
<br>
サンプル3
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル3</span></span></a>
<br>
サンプル4
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル4</span></span></a>
<br>
サンプル5
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル5</span></span></a>
<br>
サンプル6
<a href=”http://www.yahoo.co.jp/”><span><span>サンプル6</span></span></a>
</body>
</html>

という感じでとりあえず角丸ボタンが欲しい時には重宝するので、機会があれば使ってみて下さい。

完成したサンプル

▼セクシーボタンズのもっと詳しい説明はここにもあります
http://sexybuttons.googlecode.com/svn/tags/1.0/index.html

関連記事