jQuery Mobile 提供されているアイコン

jQuery Mobile では数多くのアイコンを提供しており、簡単な指定で使えるようになっています。画像形式もSVGとPNGの2種類を使い分ける仕様になっており使い勝手が向上しています。この記事では全アイコンリストと指定方法の概要を示します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. アイコンファイル
  2. アイコンの指定方法
  3. アイコンリスト

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

アイコンファイル

jQuery Mobile バージョン1.4では、モバイルページに有用なアイコンを50種類提供しています。

提供している画像ファイルは、SVGファイルおよびPNGファイルです。
白地のアイコンと黒地のアイコンの2種類があり、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 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ