CSS3による画像を使わないリンクボタン作成チュートリアル・サンプル・ジェネレーターまとめ

最近のモダンブラウザではHTML5とCSS3の対応も全部じゃないですけどだいぶ普及が進んでいるような気がする今日この頃。

先日の当ブログのデザイン変更でも一部使いましたが、リンクボタンの表現も画像を使わずにCSSのみで結構いろんなことが出来るんですよね。

写真のような表現は画像に頼らざるをえないですが、CSSだけでも結構色々なことができますのでボタン作るには十分なんじゃないでしょうか。その辺のチュートリアル記事なんかを自分の備忘録兼ねてまとめておきます。

チュートリアル&サンプルリンク集

ではさっそく。

世の中にはコピペで使えるサンプルコード集やボタンジェネレータがたくさんありますが、基本を学ぶにはまずこちらから。

上記3件は「おれCSSなんてまったくわからねぃよ！」って人でも、プロパティ一つ一つ取り上げて、どれを指定するとどんな効果になるのか丁寧に解説してありますので、おすすめの記事です。

とにかくすぐ使えるサンプルコード集が欲しいという方はこちら。

毎度おなじみコリスさんのまとめ記事です。リンク先は海外サイトですがサンプルCSSファイルすぐダウンロードして使えるのが17件ほど紹介されています。HTMLの適用したい要素にclass付してやればほぼそのまま使えるものがほとんどだと思います。

先のチュートリアルである程度プロパティの意味がわかれば、サンプルコードの改造も簡単にできると思います。

コピペサンプルそのままはアレなのである程度アレンジできたらいいのに…という方はこちら。

いずれもウェブブラウザ上でGUI操作するだけでお好みのボタンを作れるジェネレータです。

とりあえず自分でコーディングする手間なくアレンジの効いたボタンが作れます。体裁が決まったらコードが発行されるので、それをコピペすればOKですね。実作業で生産性を上げたいときにお世話になるかも。

初学の場合は、できれば実際にサンプルソース（ボタンの表示だけの簡単なのでいいです）書いて、解説見ながらいろいろプロパティを自分でいじってみたほうが理解できると思います。こういったことは読むだけでは理解した「つもり」にしかならないので、とにかく手を動かして実践してみるのが近道だと思います。

ちなみにボタン表現でよく使われるCSS3プロパティは以下のようなものです。

他にも色々使えるプロパティはありますが、まずはこの辺を覚えたらいいんじゃないでしょうか。各プロパティのさらに詳細な情報についてはHTMLクイックリファレンスさんにそれぞれリンク張ってますのでそちらを参照してください。