最近のWebデザイントレンドのひとつに「巻き付きリボン」の表現がある。立体的なリボンを一切画像を使わずにCSS 3だけで表現する方法が「pv.mgarage」の「How To Create Depth And Nice 3D Ribbons OnlyUsing CSS3」(pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/)で紹介されているので、試してみよう。 まずは出来上がりのスクリーンショットを見てもらいたい。角丸の領域の中に本文が入っており、見出しの部分が「巻き付きリボン」の表現になっている【1】。 【1】CSSの指定だけで、このような見栄えを実現している まず、XHTMLで必要な要素をマークアップする。角丸にする「bubble」、リボンの四角形の部分「rectangle」