このページの本文へ

DESIGN 菊池 崇の実践!CSS3道場 ― 第4回

10分でできる、海外Webデザイン風テクニック

2011年03月01日 14時30分更新

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷
css3

 海外のWebサイトでよく見かけるのが、紙の端を折り込んだようなドッグイヤー(dogeared)デザインだ。たとえばモバイル開発で有名な「yiibu」では、右カラムにあるボックス部分で使われている。

yiibuの右カラムではドッグイヤーデザインが使われている

 ドッグイヤーデザインは、CSSの擬似要素を利用すると手軽に作れる。もちろん、画像の用意は不要で、HTMLの追加も必要ない。今回のCSS3道場では、シンプルだがWebサイトの見栄えをぐっとアップさせるドッグイヤーデザインのテクニックをマスターしよう。

borderプロパティで三角形を作る

 ドッグイヤーデザインの1番のポイントは、折りたたまれた「三角形」の部分の作り方。当然ながらCSSには三角形のような多角形を描くためのプロパティは用意されていない。

 ヒントはおなじみのborderプロパティだ。borderプロパティは、4辺が以下の図のbのように構成されている(bの図は分かりやすいように4辺の線の色を変えている)。この状態で要素の幅と高さを0pxに設定するとcのように4つの三角形に分解され、borderの4辺のうち2辺を透明するとeのような三角形を描けるわけだ。

サンプル1[HTML]

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング