このページの本文へ

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

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

文●菊池 崇

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

手軽に作れるドッグイヤーのバリエーション

 ドッグイヤーデザインの基本は以上のとおりだが、応用編として2つ目のボックスを少しアレンジしてみよう。要素の角を丸くするborder-radius プロパティを使ってボックスの角と耳を丸くし、背景色を別の色に変更する。

ドッグイヤーのアレンジ例。下のボックスではボックスと耳の角をわずかに丸くしていている

 下のボックスと耳にはわずかに角丸が適用されている。CSSの/* ROUND */ 以降が角丸にしたドッグイヤーのスタイルだ。border-radiusの使い方は本連載の第2回で詳しく解説しているので参考にしてほしい。

サンプル3の完成図

サンプル3[HTML]

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

サンプル3[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); }
.fold.red { background : #999868; }
.fold.red:before { border-color : #fff #fff #676637 #676637; background : #676637; }
/* ROUND */ 
.fold.rounded {
-webkit-border-radius : 4px;
-moz-border-radius : 4px;
border-radius : 4px; }
.fold.rounded:before {
border-width : 8px; 
border-color : #fff #fff transparent transparent;
-webkit-border-bottom-left-radius : 5px;
-moz-border-radius : 0 0 0 5px;
border-radius : 0 0 0 5px; }
.fold p { margin : 0; }
.fold p + p { margin : 24px 0 0; }

 今回作成したドッグイヤーデザインは、余計なマークアップを増やさずにさまざまな場面ですぐに使えるテクニックだ。便利な:before/:after 擬似要素をぜひマスターして、Webデザインの表現の幅を広げてほしい。

今回のお手本

css3サンプル
今回のお手本。画像を一切使用せずにCSS3だけでデザインできる(Mac OS X 10.6/Safari 5.0で表示)

-->

サンプルのダウンロード

-->

著者:菊池 崇(きくち・たかし)

著者近影

Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。


前へ 1 2 3 次へ

ソーシャルリアクション

この連載の記事

一覧へ

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

すぐに役立つ!プロの解説記事
一覧へ
Web Professionalの本
一覧へ