リストのアイコンを大きくする

リストのアイコンは16X16pxに縮小されて表示されるのでアイコンの作りに隙間がある場合にはかなり小さく見えてしまうことが有ります。

通常ダウンロードできるアイコンは16pxの次は32pxとなるため、32pxのアイコンをアップロードしておき、表示する際には24pxになるようにCSSを変更しました。

<link rel="stylesheet" href="/stylesheets/jquery.mobile-1.3.0.css"/>
<style>
      .ui-listview .ui-li-icon { max-height: 24px; max-width: 24px; left: 10px; top: .6em; }
</style>

32pxを表示するようにui-li-icon-32を定義しようとしましたが、jquery mobileがui-li-iconがあるかどうかでテキストの位置を変更したりするので、 あまり変更個所が多くないようにするために上記の楽な方法をとることにしました。

アイコンの大きさはピクセルですが、topはemなので環境によっては位置がずれてきます。中央センタリングを行う必要がありそうです。

ui/ui_set/jquerymobile/big_list_icon.txt · 最終更新: 2013/04/02 18:55 (外部編集)
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0