#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