jQuery Mobile 提供されているアイコン
公開日：2014年10月10日
最終更新日：2014年11月8日
jQuery Mobile では数多くのアイコンを提供しており、簡単な指定で使えるようになっています。画像形式もSVGとPNGの２種類を使い分ける仕様になっており使い勝手が向上しています。この記事では全アイコンリストと指定方法の概要を示します。
«次の特集記事» jQuery Mobile ボタンを設置する
«前の特集記事» jQuery Mobile テーマの基本的な仕組み
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
アイコンファイル
jQuery Mobile バージョン1.4では、モバイルページに有用なアイコンを50種類提供しています。
提供している画像ファイルは、SVGファイルおよびPNGファイルです。
白地のアイコンと黒地のアイコンの２種類があり、SVGファイル/PNGファイルそれぞれ100ファイルが含まれています。
CSSでは after疑似要素に data URI を使った SVG画像の埋め込みがされており、SVGを扱えるブラウザでは CSSさえ読み込めば画像ファイルは必要ありません。またアイコンの周囲に黒い円が半透明で描かれるように backgroundプロパティの設定がされています。
SVGが扱えないブラウザのために、CSSではPNGファイルを背景画像として指定する記述もされています。
その際はCSSをおいたディレクトリの下が「images/icons-png/アイコン名.png」というパスになります。
アイコンの指定方法
アイコンはさまざまなウィジェットにつけることができますが、クラスあるいはdata-icon属性で指定します。
a要素およびbutton要素
「ui-icon-」の後ろにアイコン名を付加したクラスで指定します。
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">ホーム</a>
<button class="ui-btn ui-icon-check ui-btn-icon-left">保存</button>
type="button"を指定したinput要素
data-icon属性でアイコン名を指定します。
<input type="button" value="save" data-icon="check">
ナビゲーションバーのa要素
data-icon属性でアイコン名を指定します。
<a href="#" data-icon="info">インフォメーション</a>
リスト
data-icon属性でアイコン名を指定します。
<li data-icon="user"><a href="#">プロフィール</a></li>
アイコンリスト
記事執筆時点で利用可能なアイコンの全リストです。
| クラス | 説明 | アイコン |
|---|---|---|
| ui-icon-action | アクション | |
| ui-icon-alert | 注意、警告 | |
| ui-icon-arrow-d | 下向き矢印 | |
| ui-icon-arrow-d-l | 左下向き矢印 | |
| ui-icon-arrow-d-r | 右下向き矢印 | |
| ui-icon-arrow-l | 左向き矢印 | |
| ui-icon-arrow-r | 右向き矢印 | |
| ui-icon-arrow-u | 上向き矢印 | |
| ui-icon-arrow-u-l | 左上向き矢印 | |
| ui-icon-arrow-u-r | 右上向き矢印 | |
| ui-icon-audio | オーディオ、サウンド、スピーカー | |
| ui-icon-back | バック | |
| ui-icon-bars | 3本の水平線 | |
| ui-icon-bullets | 3本のブレット付き水平線 | |
| ui-icon-calendar | カレンダー | |
| ui-icon-camera | カメラ、撮影 | |
| ui-icon-carat-d | 下向き山括弧 | |
| ui-icon-carat-l | 左向き山括弧 | |
| ui-icon-carat-r | 右向き山括弧 | |
| ui-icon-carat-u | 上向き山括弧 | |
| ui-icon-check | チェック | |
| ui-icon-clock | クロック | |
| ui-icon-cloud | クラウド | |
| ui-icon-comment | コメント | |
| ui-icon-delete | 削除 | |
| ui-icon-edit | 編集 | |
| ui-icon-eye | eyeマーク | |
| ui-icon-forbidden | 禁止 | |
| ui-icon-forward | フォワード | |
| ui-icon-gear | ギア、設定 | |
| ui-icon-grid | グリッド | |
| ui-icon-heart | ハート | |
| ui-icon-home | ホーム | |
| ui-icon-info | インフォメーション | |
| ui-icon-location | ロケーション | |
| ui-icon-lock | ロック | |
| ui-icon-mail | メール | |
| ui-icon-minus | マイナス、閉じるボタン | |
| ui-icon-navigation | ナビゲーション | |
| ui-icon-phone | 電話 | |
| ui-icon-plus | プラス、開くボタン | |
| ui-icon-power | 電源 | |
| ui-icon-recycle | リサイクル | |
| ui-icon-refresh | リフレッシュ | |
| ui-icon-search | 検索 | |
| ui-icon-shop | 店、ショッピング | |
| ui-icon-star | 星、お気に入り | |
| ui-icon-tag | タグ | |
| ui-icon-user | ユーザー、プロフィール | |
| ui-icon-video | ビデオ |
SVG形式で作成された画像は拡大してもボケませんので、Retinaディスプレイを使用している端末でもきれいに描画することが可能です。古いブラウザではPNG形式を使わなければならないこともありますが、jQuery Mobile のアイコンは両方に対応していますので安心です。
«次の特集記事» jQuery Mobile ボタンを設置する
«前の特集記事» jQuery Mobile テーマの基本的な仕組み
スポンサーリンク
