Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。4折れリボン風見出しカットリボンまとめ折れリボン風見出しサンプル9のような折れリボン風の見出しは、左下の三角形を:before擬似要素で、右下の三角形を:after擬似要素で作って実装しています。左下の三角形は:before擬似要素で作った空の要素に5px幅のボーダーを指定し、border-topとborder-rightのみ色をつけて直角三角形を作っています。図14:border-topとborder-rightのみ色を付けて左下の直角三角形を描く同様に右下の三角形は、:after擬似要素で空の要素を作り、border-topとborder-leftのみ色をつけて直角三角形を作っています。後は、これまで同様positionレイアウトで微調整をするだけです。#FF9999;}図15:サンプル9(sample02.html)カットリボンサンプル10では、:after擬似要素で作った空の要素に、20px幅のボーダーを指定し、右ボーダーのみtransparent(透明)を指定して、リボンをカットしたような表現をしています。transparent;}図17:サンプル10(sample02.html)以上、borderで三角形を描く仕組みが分かってしまえば、アイデア次第で立体的で面白い表現が可能になります。まとめ本記事では、border関連プロパティやbackground関連プロパティ、擬似要素を使った、見出しのスタイリング方法を紹介しました。見出しだけではなく、いろいろなボックスに応用できるので、ぜひチャレンジしてみてください。次回は、リストでマークアップしたナビゲーションを、ボタン風にスタイリングしたり、横並びにスタイリングしたりする方法を紹介します。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。