【CSS3】コピペで使えるCSS3のボタンやグラデーションのサンプルを配布

2011/09/13
CSS3のボタンやグラデーションのサンプル

単刀直入に言ってしまうと、CSS3は記述するのが面倒です!時間短縮のためにも、できるだけコピペで使いまわしましょう!

HTML5とCSS3は、開発者の間では話題になりつつも、ブラウザの実装状況の様子を見ながら探り探り実装している状態です。このような環境は、言語のバージョンが上がるごとに恒例となっています。どんなに凄い仕様が公開されても、「実装」されなければ意味がない訳でして…

今のところCSS3の実務レベルで活躍しているのは“角丸”とグラデーションくらいでしょうか。どうしても凝ったことをしようとするとデバイス限定になってしまうので、開発者は各自担っている仕事に直接関係のあるものから覚えていくしかないのです。

今回は、CSS3でよく使うボタンやグラデーションのサンプルを共有します。ダウンロードは以下。

CSS3は手打ちに向かない

CSS3は、記述が複雑であったり、ブラウザによって記述が違うものがあります。そのため、コーディング中に検索で調べることが多く非常に手間が掛かります。特に実務レベルで同じようなパーツを何度も使う場合には、サンプルをコピペして改造するのが一番です。

HTML5とCSS3で記述したドキュメントは、ローカル環境でもブラウザで直接開いて見れるので手軽に作ることができます。Web上に公開されているサンプルの中から良く使うパーツを集めて、自分だけのライブラリを作ってみるのも良いでしょう。

このドキュメントはHTMLとCSSのみで記述した1ページのサンプルです。どなたでもダウンロードして使うことができます。

CSS3サンプルを見る