折れリボン風見出し
サンプル9のような折れリボン風の見出しは、左下の三角形を:before擬似要素で、右下の三角形を:after擬似要素で作って実装しています。左下の三角形は:before擬似要素で作った空の要素に5px幅のボーダーを指定し、border-topとborder-rightのみ色をつけて直角三角形を作っています。
![図14:border-topとborder-rightのみ色を付けて左下の直角三角形を描く](http://cz-cdn.shoeisha.jp/static/images/article/7681/7681_14_s.gif)
同様に右下の三角形は、:after擬似要素で空の要素を作り、border-topとborder-leftのみ色をつけて直角三角形を作っています。後は、これまで同様positionレイアウトで微調整をするだけです。
#sample09 { margin: 0 -10px 30px -10px; padding: 10px 20px; font-size: 130%; color: #333333; background-color: #FFCCCC; position: relative; } #sample09:before{ content: ""; position: absolute; left: 0; bottom: -10px; border-width: 5px; border-style: solid; border-color: transparent; border-top-color: #FF9999; border-right-color: #FF9999; } #sample09:after{ content: ""; position: absolute; right: 0; bottom: -10px; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent; border-top-color: #FF9999; border-left-color: #FF9999; }
カットリボン
サンプル10では、:after擬似要素で作った空の要素に、20px幅のボーダーを指定し、右ボーダーのみtransparent(透明)を指定して、リボンをカットしたような表現をしています。
![図16:border-rightのみ透明にしてカットリボンを描く](http://cz-cdn.shoeisha.jp/static/images/article/7681/7681_16_s.gif)
/* サンプル10:カットリボン風デザインの見出し */ #sample10 { margin: 0 0 30px -10px; padding: 10px 20px; color: #333333; background-color: #FFCCCC; position: relative; font-size: 20px; /* 文字サイズを20px */ line-height: 1; /* 行間を1 */ } ~中略~ #sample10:after { content: ""; position: absolute; top: 0; right: -40px; height: 0; width: 0; border: 20px solid #FFCCCC; border-right-color: transparent; }
以上、borderで三角形を描く仕組みが分かってしまえば、アイデア次第で立体的で面白い表現が可能になります。いろいろと試してみてください。
まとめ
本記事では、border関連プロパティやbackground関連プロパティ、擬似要素を使った、見出しのスタイリング方法を紹介しました。見出しだけではなく、いろいろなボックスに応用できるので、ぜひチャレンジしてみてください。
次回は、リストでマークアップしたナビゲーションを、ボタン風にスタイリングしたり、横並びにスタイリングしたりする方法を紹介します。