このページの本文へ

jQuery Mobileのマークアップの基本とCSSの変更 (2/6)

2011年06月06日 10時00分更新

文●西畑一馬/to-R

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

見出しサイズと色の調整

 続いて、見出し(h2要素)のスタイルを調整しましょう。data-role="content"内のh1〜h6要素の文字サイズはデフォルトでは大きすぎるので、少し小さめに変更します。

サンプル3[HTML]


<h2 class="h1">to-Rについて</h2>


サンプル3[CSS]


.ui-content .h1{
    color:#5E87B0;
    font-size:17px;
    text-shadow:1px 0 0 #FFF;
}


 デザインを変更したいh2要素にclass属性「h1」を追加し、CSSでフォントサイズ、色、テキストシャドウを設定しています。.ui-contentは、カスタムデータ属性「data-role="content"」が付いた要素に対してjQuery Mobileが自動的に付加するclass属性です。

 サンプル3を実行すると以下のように表示されます。

03.jpg

文字のカラーリングと色を調整した状態

【ワンポイント・メモ】
h2要素にclass名「h1」を付ける理由

 サンプル3では、h2要素に対して「h1」という名前のclass属性を付けています。要素名と同じclass名を付けることに対して、「気持ちが悪い」と感じた方もいるでしょう。

 一般的に見出し要素は、h1〜h5の見出しレベルに沿ってスタイルを定義します。h1要素が一番大きく、h5要素が一番小さくなる、といった具合です。ところが、jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合があります。

 そこで、サンプル3では、見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用しています。

 この方法は、米ヤフーのNicole Sullivan(@stubbornella)が提唱する「OOCSS(オブジェクト指向CSS)」で採用されているCSS設計の考え方に沿ったものです。

この連載の記事

一覧へ

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