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

10分でできる、海外Webデザイン風テクニック (2/3)

三角形を配置する

　三角形の描き方が分かったら、次は配置方法を考えよう。:before 擬似要素を使うと、HTMLに不要なdiv要素などを追加することなくスマートに配置できる。

　最初に、通常のテキストボックスを作成する。今回のサンプルでは基本のドッグイヤーデザインと、アレンジしたデザインの2種類を作成する。以下のようにp要素で2つのテキストボックスを用意しよう。

[HTML]

<p class="fold">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p>
<p class="fold">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p>

[CSS]

.fold {
position : relative;
width : 480px;
padding : 16px 24px;
margin : 32px auto;
color : #fff;
background : #97C02F;
overflow : hidden; }

用意した2つのテキストボックス

　次に、先ほど作成した三角形のデザインパーツを配置しよう。HTMLに手を加えずにCSSだけで三角形を表示するには、:before 擬似要素を利用する。

.fold:before {
content : "";
border-width : 0 16px 16px 0;
border-style : solid;
border-color : #fff #fff #658E15 #658E15;
background : #658E15;
-webkit-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); }

CSSだけで三角形を表示した状態

　 :before／:after 擬似要素は CSS2で用意された擬似要素で、contentプロパティと組み合わせると、指定した場所に任意のスタイルでコンテントを生成できる。:beforeの場合は:で指定した要素の「前」に、:after の場合は指定した要素の「後」にコンテントを生成できる。 :before／:after 擬似要素は、 Internet Explorer 8以降、Safari、Opera、Chrome、Firefoxでサポートされている。

http://www.w3.org/TR/CSS2/generate.html#before-after-content

　サンプル2では、content:"";で空のコンテントを生成し、生成したコンテントに対してCSSのborderプロパティを適用して三角形を描いている。三角形には少し立体感を持たせるため、box-shadowプロパティも適用した。

　あとは、position : absolute;を追加し、位置をtop : 0;、right : 0;に指定すると三角形をボックスの右上に配置できる。これでドッグイヤーデザインの完成だ。

サンプル2の完成図

■サンプル2[CSS]

.fold:before {
content : "";
position : absolute;
top : 0;
right : 0;
border-width : 0 16px 16px 0;
border-style : solid;
border-color : #fff #fff #658E15 #658E15;
background : #658E15;
-webkit-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); }