jQuery Mobile4(CSSの技てきなさむしんぐ1)

#ref error :ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (リスト ul.jpg)




●グラデーション

  • iPhoneやAndroidのデフォルトブラウザーに対しては-webkit-gradientを利用
  • Firefoxに対しては-moz-linear-gradientを利用
  • IE8以上のIEに対しては-ms-filterを利用

.ui-body-b {   
background: #cccccc;   【グラデーションに対応していないブラウザー】   
background-image: -moz-linear-gradient(top, #e6e6e6, #cccccc);   【Firefox】   
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #cccccc));   【iPhoneやAndroid】 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')";   【IE8以上】 
} 

※jQuery Mobileでは、「グレースフル・デグラデーション(graceful degradation)」という考え方を採用しています。
グレースフル・デグラデーションとは、ある水準を満たすブラウザーに対しては表現したい機能やデザインを提供し、水準未満のブラウザーに対してはそつのないデザインを提供する考え方です。

●見出しの調整(文字のサイズ変更)
data-role="content"内のh1~h6要素の文字サイズはデフォルトでは大きすぎるので、少し小さめに変更
※基本見出しは<h2>要素を使うものとする。

>html

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

>css

.ui-content .h1{     
 color:#5E87B0;     
 font-size:17px;     
 text-shadow:1px 0 0 #FFF; 
} 
※ui-contentは、カスタムデータ属性「data-role="content"」が付いた要素に対してjQuery Mobileが自動的に付加するclass属性

<classのつけ方について>

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


●テキスト省略機能の無効化

リストなどの文字は一定以上だと「...」と省略される。
これは、jQuery Mobileの仕様で、CSS3の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまう。

▼折り返して表示するように変更

1.wordbreak」というクラスを作成し、text-overflowを初期化するスタイルを定義
例:
.wordbreak{
 overflow: visible;
 white-space: normal;
}
※「oveflow: visible」で文字列を省略をしないように、「white-space: normal」で改行するように設定

2.CSSで定義したclass属性「wordbreak」をテキストが省略されている要素に対して追加


●iframeは使わずに、Google Maps APIを使って地図を読み込む

※Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されないため。

Google Maps API:
https://developers.google.com/maps/documentation/javascript/?hl=ja

1.Google Maps APIのスクリプトをhead要素内で読み込みます

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2.コンテンツ要素内にid属性「map」、class属性「ui-shadow」を付けたdiv要素を配置

※class属性「ui-shadow」は、要素に対してドロップシャドウを付けるスタイルで、jQuery Mobileであらかじめ定義されています。
例:
<div data-role="content">
  <h2 class="h1">アクセス</h2>
  <div id="map" class="ui-shadow"></div>
</div>

3.CSSでdiv#mapに対して、width、height、borderを設定します。コンテンツ幅が100%を超えて描画されないように、CSS3のbox-sizing:border-boxを利用し、borderをwidthに含めるようにも設定

例:
div#map{
  width:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
}

4.JavaScriptの設定、Google Maps APIで公開されているサンプルコードをもとに、地図を表示する簡単なスクリプトを書く

例:
<script>
$(function(){
  var myLatlng = new google.maps.LatLng(緯度,経度);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, 
  });
});
</script>
※経度と緯度のところには、目的地の緯度・経度を記述してください。緯度・経度は「経度緯度検索」(http://www.webcreativepark.net/labs/longitude_iatitude/)などのサービスで調べられます

5.スクリプトの不具合の修正

※jQuery MobileではJavaScriptを使ってページを擬似的に生成しているので、先ほどのスクリプトが実行された時点では、地図を表示する要素がまだ表示されていません。表示されていない要素に地図を表示しようとすると、座標が狂ったり、灰色の地図が描画されたりしてしまう不具合があるので、次のようなスクリプトで調整します。
例:
<script>
$(function(){
  
  ....中略...
  
  $('div#access').live('pageshow',function(){
    google.maps.event.trigger(map, 'resize');   【1】
    map.setCenter(myLatlng);   【2】
  });
});
</script>

 ⇒$(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行されます。サンプル17では、【1】で地図の再描画を、【2】で地図の中央位置を再設定するGoogle Maps APIの命令を実行し、アクセスページに遷移したタイミングで地図を調整しています。
最終更新:2012年04月25日 17:40
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。