iPad2012.03.02ちょっと意味不明なタイトルですが。Mobileでリストを書くときのTipsです。昨日ちょっと個人的に話題に上がったのでメモ的に記事にします。最近はすっかりJQMの話題が減っていたので丁度いいですね。いうわけで備忘録的な記事。Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。Mobileのリストこれが普通のリストです。このマークアップは以下のような感じ。href="example02.html">bar</a></li></ul>​listviewというルール名をdata属性に与えればリスト化します。src="bar.gif">bar</a></li></ul>ですが、画像を含めると自動でサイズが80x80pxになり、リストの高さも高くなるのがJQMの仕様です。見かける方法この画像サイズを小さくする方法としてよく見かけるのが画像そのものにスタイルを書く、というもの。class="ui-li-icon">bar</a></li></ul>こうです。画像にスタイルを書いてclass=”ui-li-icon”を直書きします。このままだとli内はセンターに寄せられるので16px以上を使えません。これを、高さ一杯に含めよう、というのが本題。positionが使われているので.ui-li-iconのデフォルトのスタイルは以下のようになっています。absolute;が付いており、場所も決められています。topとleftをstyle属性で加えればCSSファイルを触らずに場所を指定できますね。画像とかのサイズは勘で書いたので微調整はご自身でお願いします。40px前後じゃないですかね。高さ一杯にするなら両方0にします。class="ui-li-icon">bar</a></li></ul>テキストも含める場合はアンカーにもpadingを入れて調整しないとです。感あるし、面倒ですね・・文句言うなら使うなって話ですがw因みに画像はアンカーに含めなくても一応大丈夫ですが、位置の調整が変わるかもなので注意してください。style="padding-left:50px;">bar</a></li></ul>もっと楽な方法無いかな、って思いましたけどCDN使うなら、っていうケースなのであんまりこの方法が使われる機会も無いかもしれないですね。一応手段の一つという事で書きましたが、「それはバッドノウハウだぜ」って思われた方はぜひグッドノウハウをご教授下さい。コピーかちびと.net関連記事cssやプログラミングスライドや動画など、HTML5のサンプルいくつかHTML5個人的なメモです。備忘録的にメモします。Popup使いやすい感じでしたので備忘録。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。