コンテンツ領域のCSS設定
続いて、コンテンツ領域のCSSを設定しましょう。ヘッダーと同じように、まずはjQuery MobileによってHTMLがどのように変わっているか確認しましょう。アコーディオンパネルの部分は複雑ですので後ほど解説しますが、それ以外の部分はそれほど変更されていません。
<div data-role="content" class="ui-content" role="main">
<h2>RECOMMEND</h2>
<div class="ui-grid-b recommend">
<div class="ui-block-a">
<a href="#detail" class="new ui-link">
<img src="./images/thumbnail01.jpg" width="82" height="70" alt="">
</a>
</div>
<div class="ui-block-b">
<a href="#detail" class="ui-link">
<img src="./images/thumbnail02.jpg" width="82" height="70" alt="">
</a>
</div>
<div class="ui-block-c">
<a href="#detail" class="ui-link">
<img src="./images/thumbnail03.jpg" width="82" height="70" alt="">
</a>
</div>
</div>
(中略：アコーディオンパネル部分)
</div>
CSSは次のようになります。
■サンプル2[CSS]
/*
.ui-content
-------------------*/
.ui-body-z .ui-content h2{
font-size:14px;
font-weight:bold;
color:#5b9a12;
}
.ui-body-z .ui-content p{
font-size:12px;
color:#665400;
}
.ui-body-z .ui-content p img{
border:solid 3px #ae9f59;
margin:5px;
}
/*
.ui-content .recommend
-------------------*/
.ui-body-z .ui-content .recommend{
text-align:center;
}
.ui-body-z .ui-content .recommend img{
border:solid 3px #ae9f59;
}
.ui-body-z .ui-content .recommend a{
position:relative;
display:inline-block;
padding-top:5px;
text-decoration:none;
}
.ui-body-z .ui-content .recommend a.new::before{ ……【6】
content:"new";
display:block;
font-size:11px;
color:white;
background:#a06d24;
padding:2px 5px;
position:absolute;
top:-3px;
left:10px;
}
.ui-body-z .ui-content .recommend a.new::after{ ……【6】
content:"";
display:block;
width:0;
border-bottom:3px solid #7e4d06;
border-left:3px solid #7e4d06;
border-top:3px solid transparent;
border-right:3px solid transparent;
position:absolute;
top:-1px;
left:39px;
}
CSSもそれほど複雑ではありません。ここでは【6】でa要素にclass属性「new」が付いている場合に、「new」というアイコンを表示しているのがポイントです。
class属性「new」が付いている場合にのみnewが表示される
このアイコンはbefore擬似要素とafter擬似要素を利用して表現しています。before擬似要素でアイコンの土台となる矩形のプレートを作成し、after擬似要素で右側の三角形を表現します。擬似要素を利用して空の要素を追加し、そのborderプロパティで三角形を描いており、画像は使用していません。borderを利用した三角形の描画は複雑ですが、便利なテクニックですのでぜひ試してみてください。
スマートフォンサイトではbefore擬似要素やafter擬似要素を賢く利用することで、HTMLをシンプルに保ったまま、さまざまな表現ができます。
◆
次回は、アコーディオンパネルとフッターのCSSを作成します。
著者：西畑一馬（にしはた かずま）
to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。
鍋坂 理恵 (なべさか りえ）
Photo and Design sonsun代表。香川県生まれのWebデザイナー。Web制作会社にてWebデザイン、各種制作を経て独立。Webサイトの企画・デザイン・制作を行っている。Web Desgining 2011年4月号、2011年2月号、4月号にてCSS3の記事執筆。Webridge Kagawa／CSS Nite in TAKAMATSU副代表。Web制作者・担当者向けセミナー開催に携わっている。
