画像ソフトを使ってデザインしていたWebサイトのパーツも、CSS3なら簡単なコードを書くだけですぐにデザインできる。今回のCSS3道場では、イベントやキャンペーンの告知などで活躍する楕円形の「バッジ」を作ってみよう。これまでに何度も登場しているborder-radius/box-shadowプロパティと、transform プロパティを組み合わせればおどろくほど手軽だ。 CSSを適用するサンプルのHTMLは以下のとおり。今回はHTML5でマークアップしているので、HTML4ではブロック要素扱いだったdiv要素をインライン要素だったa要素で包み、バッジ全体をリンクに設定している。 ■サンプル1~4共通[HTML] <a href="http://swapskills.info/2011/doubbble01.html" title="swapskills のページへ"> <div> <tim