単刀直入に言ってしまうと、CSS3は記述するのが面倒です。時間短縮のためにも、できるだけコピペで使いまわせるテンプレートを用意しておきましょう。
HTML5とCSS3は、開発者の間では話題になりつつも、ブラウザの実装状況の様子を見ながら少しずつ導入している段階です。このような環境は、言語のバージョンが上がるごとに恒例となっています。どんなに凄い仕様が公開されても、「実装」されなければ意味がない訳でして……。
今のところ実務レベルで活躍しているCSS3は、〝角丸〟と〝グラデーション〟くらいでしょうか。どうしても凝ったことをしようとすると環境が限定されてしまうので、開発者は自分が関わっている仕事に直接関係のあるものから覚えていくしかありません。
今回は、CSS3でよく使うボタンやグラデーションのサンプルを共有します。ダウンロードは以下。
CSS3は手打ちに向かない
CSS3は、記述が複雑であったり、ブラウザによって記述が違うものがあります。そのため、コーディング中に検索して調べることが多く、非常に手間が掛かります。特に実務レベルで同じようなパーツを何度も使う場合には、サンプルをコピペして改造するのが一番です。
HTML5とCSS3で記述したドキュメントは、ローカル環境でもブラウザで直接開いて確認することが出来ます。Web上に公開されているサンプルの中から、良く使うパーツを集めて自分だけのライブラリを作ってみるのも良いでしょう。
サンプルの確認とダウンロード
CSSで装飾したボタンやグラデーションのサンプルです。動作確認やソースコードの確認をこちらのページで行えます。以下のリンクから同じ内容をダウンロードして、コピペや改造して使うことも可能です。