見出しサイズと色の調整
続いて、見出し(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を実行すると以下のように表示されます。
【ワンポイント・メモ】
h2要素にclass名「h1」を付ける理由
サンプル3では、h2要素に対して「h1」という名前のclass属性を付けています。要素名と同じclass名を付けることに対して、「気持ちが悪い」と感じた方もいるでしょう。
一般的に見出し要素は、h1〜h5の見出しレベルに沿ってスタイルを定義します。h1要素が一番大きく、h5要素が一番小さくなる、といった具合です。ところが、jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合があります。
そこで、サンプル3では、見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用しています。
この方法は、米ヤフーのNicole Sullivan(@stubbornella)が提唱する「OOCSS(オブジェクト指向CSS)」で採用されているCSS設計の考え方に沿ったものです。