西畑一馬のjQuery Mobileデザイン入門 ― 第8回

実例で学ぶjQuery MobileのCSSカスタマイズ

2011年09月30日 15時30分更新

西畑一馬／to-R、鍋坂理恵／sonsun

ツイートする

コンテンツ領域の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制作者・担当者向けセミナー開催に携わっている。

前へ 1 2 3 次へ

カテゴリートップへ