jQuery UIに付属しているアイコンを単独で利用する

jQuery UIでは、アイコン付きのボタンやメニューを作成することができます。jQuery UIをインクルードしていれば、付属しているアイコンはHTML要素にクラス指定することで、単独でも使用できます。

アイコン付きボタンなどの作成方法は他の記事にゆずることとして、ここではアイコンだけを取り出して利用する方法を解説します。

【コンテンツ】

  1. 利用できるアイコンの一覧
  2. jQuery UIをダウンロードする
  3. jsファイルとcssファイルをインクルードする
  4. アイコンを表示するためのコード
  5. アイコンの色を指定して表示する

【記事執筆時の環境】
jQuery UI 1.11.1
jQuery本体 1.10.2

利用できるアイコンの一覧

jQuery UIに付属し利用できるアイコンは以下になります。
アイコンのサイズは16x16ピクセルで、1枚の画像にまとめられているためCSSスプライトで利用します。

jQuery UIのアイコン一覧

アイコンはバージョンアップによって時々追加されるみたいですから、最新は下記ページで確認してください。
http://api.jqueryui.com/theming/icons/

なお、アイコン色は全部で以下の5種類の色が使えます。
ブラック(#222222)
ブルー(#228ef1)
オレンジ(#ef8c08)
イエロー(#ffd27a)
ホワイト(#ffffff)

jQuery UIをダウンロードする

この記事では、既にjQuery UIを利用していることを想定していますが、ダウンロードする際は下記ページから行います。
http://jqueryui.com/download/

jQuery UI ダウンロードページ

なお、jQuery UIは必要なコンポーネントだけをダウンロードすることもできます。
必要なコンポーネントだけをダウンロードするには、Componentsの"Toggle All"のチェックを外してから、必要なコンポーネントにチェックを入れます。

アイコン画像はどのようなコンポーネントをダウンロードしても含まれています。

jsファイルとcssファイルをインクルードする

HTML文書内で、jsファイルとcssファイルをインクルードします。
アイコン画像が入っているディレクトリ"images"は、cssディレクトリの下におきます。
下記はその記述例です。

アイコンを表示するためのコード

アイコンを表示するには、HTML要素に、"ui-icon"とアイコン種類の2つのクラスを指定します。
以下はその記述例です。

アイコン種類のクラスは、下記ページで確認してください。
http://api.jqueryui.com/theming/icons/

下記はアイコンを横に並べて表示した例です。

アイコンを横に並べて表示した図

このHTMLコードは以下になります。

CSSは以下のようにしています。

アイコンの後にテキストを挿入することもできます。

アイコンの後にテキストを挿入した図

この場合のHTMLコードは以下になります。

アイコンの色を指定して表示する

アイコン色は5種類用意されていますが、デフォルトではブラックが選択されます。

jQuery UIのCSSファイルをみると、色を指定するには親要素に状態を示すクラスを指定する必要があります。
以下はその記述部分です。

このCSSに設定しているクラスをそのまま利用しても構いませんが、親要素に関係なく色が指定できるように、私は以下の設定をユーザーCSSファイルに記述しました。
background-imageを上書きしますので、ユーザーCSSファイルはjQuery UIのCSSファイルよりも後でインクルードするようにします。

この色指定用クラスを使って記述したHTMLコード例が以下になります。
色を指定しないときはブラックです。

ブラウザでの表示は下記です。

色指定したアイコンの図

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ