jQuery UI の icon を利用すると、アイコンを表示することができます。
今回は、icon の使用方法について、解説いたします。
jQuery UI を利用して アイコンを表示する場合は、次のような形で記述します。
<span class="ui-icon 表示したいアイコンのクラス"></span>
ui-icon クラスと 表示したいアイコンのクラスを、スペース区切りで共に指定します。
ハサミのアイコン（）は「 ui-icon-scissors 」クラスですので、 ハサミのアイコンを表示するためのコードは次のようになります。（他のアイコンのクラス名は、次章をご覧下さい。）
<span class="ui-icon ui-icon-scissors"></span>
アイコンの表示位置が他のテキスト等からずれる場合には、次のように CSS で float を設定してみて下さい。
<style>
span.ui-icon {
float: center;
}
</style>
jQuery UI で用意されているアイコン及びそのクラス名は 次の通りです。
| ui-icon-carat-1-n | ui-icon-carat-1-ne | ||
| ui-icon-carat-1-e | ui-icon-carat-1-se | ||
| ui-icon-carat-1-s | ui-icon-carat-1-sw | ||
| ui-icon-carat-1-w | ui-icon-carat-1-nw | ||
| ui-icon-carat-2-n-s | ui-icon-carat-2-e-w | ||
| ui-icon-triangle-1-n | ui-icon-triangle-1-ne | ||
| ui-icon-triangle-1-e | ui-icon-triangle-1-se | ||
| ui-icon-triangle-1-s | ui-icon-triangle-1-sw | ||
| ui-icon-triangle-1-w | ui-icon-triangle-1-nw | ||
| ui-icon-triangle-2-n-s | ui-icon-triangle-2-e-w | ||
| ui-icon-arrow-1-n | ui-icon-arrow-1-ne | ||
| ui-icon-arrow-1-e | ui-icon-arrow-1-se | ||
| ui-icon-arrow-1-s | ui-icon-arrow-1-sw | ||
| ui-icon-arrow-1-w | ui-icon-arrow-1-nw | ||
| ui-icon-arrow-2-n-s | ui-icon-arrow-2-ne-sw | ||
| ui-icon-arrow-2-e-w | ui-icon-arrow-2-se-nw | ||
| ui-icon-arrowstop-1-n | ui-icon-arrowstop-1-e | ||
| ui-icon-arrowstop-1-s | ui-icon-arrowstop-1-w | ||
| ui-icon-arrowthick-1-n | ui-icon-arrowthick-1-ne | ||
| ui-icon-arrowthick-1-e | ui-icon-arrowthick-1-se | ||
| ui-icon-arrowthick-1-s | ui-icon-arrowthick-1-sw | ||
| ui-icon-arrowthick-1-w | ui-icon-arrowthick-1-nw | ||
| ui-icon-arrowthick-2-n-s | ui-icon-arrowthick-2-ne-sw | ||
| ui-icon-arrowthick-2-e-w | ui-icon-arrowthick-2-se-nw | ||
| ui-icon-arrowthickstop-1-n | ui-icon-arrowthickstop-1-e | ||
| ui-icon-arrowthickstop-1-s | ui-icon-arrowthickstop-1-w | ||
| ui-icon-arrowreturnthick-1-w | ui-icon-arrowreturnthick-1-n | ||
| ui-icon-arrowreturnthick-1-e | ui-icon-arrowreturnthick-1-s | ||
| ui-icon-arrowreturn-1-w | ui-icon-arrowreturn-1-n | ||
| ui-icon-arrowreturn-1-e | ui-icon-arrowreturn-1-s | ||
| ui-icon-arrowrefresh-1-w | ui-icon-arrowrefresh-1-n | ||
| ui-icon-arrowrefresh-1-e | ui-icon-arrowrefresh-1-s | ||
| ui-icon-arrow-4 | ui-icon-arrow-4-diag | ||
| ui-icon-extlink | ui-icon-newwin | ||
| ui-icon-refresh | ui-icon-shuffle | ||
| ui-icon-transfer-e-w | ui-icon-transferthick-e-w | ||
| ui-icon-folder-collapsed | ui-icon-folder-open | ||
| ui-icon-document | ui-icon-document-b | ||
| ui-icon-note | ui-icon-mail-closed | ||
| ui-icon-mail-open | ui-icon-suitcase | ||
| ui-icon-comment | ui-icon-person | ||
| ui-icon-print | ui-icon-trash | ||
| ui-icon-locked | ui-icon-unlocked | ||
| ui-icon-bookmark | ui-icon-tag | ||
| ui-icon-home | ui-icon-flag | ||
| ui-icon-calculator | ui-icon-cart | ||
| ui-icon-pencil | ui-icon-clock | ||
| ui-icon-disk | ui-icon-calendar | ||
| ui-icon-zoomin | ui-icon-zoomout | ||
| ui-icon-search | ui-icon-wrench | ||
| ui-icon-gear | ui-icon-heart | ||
| ui-icon-star | ui-icon-link | ||
| ui-icon-cancel | ui-icon-plus | ||
| ui-icon-plusthick | ui-icon-minus | ||
| ui-icon-minusthick | ui-icon-close | ||
| ui-icon-closethick | ui-icon-key | ||
| ui-icon-lightbulb | ui-icon-scissors | ||
| ui-icon-clipboard | ui-icon-copy | ||
| ui-icon-contact | ui-icon-image | ||
| ui-icon-video | ui-icon-script | ||
| ui-icon-alert | ui-icon-info | ||
| ui-icon-notice | ui-icon-help | ||
| ui-icon-check | ui-icon-bullet | ||
| ui-icon-radio-off | ui-icon-radio-on | ||
| ui-icon-pin-w | ui-icon-pin-s | ||
| ui-icon-play | ui-icon-pause | ||
| ui-icon-seek-next | ui-icon-seek-prev | ||
| ui-icon-seek-end | ui-icon-seek-first | ||
| ui-icon-stop | ui-icon-eject | ||
| ui-icon-volume-off | ui-icon-volume-on | ||
| ui-icon-power | ui-icon-signal-diag | ||
| ui-icon-signal | ui-icon-battery-0 | ||
| ui-icon-battery-1 | ui-icon-battery-2 | ||
| ui-icon-battery-3 | ui-icon-circle-plus | ||
| ui-icon-circle-minus | ui-icon-circle-close | ||
| ui-icon-circle-triangle-e | ui-icon-circle-triangle-s | ||
| ui-icon-circle-triangle-w | ui-icon-circle-triangle-n | ||
| ui-icon-circle-arrow-e | ui-icon-circle-arrow-s | ||
| ui-icon-circle-arrow-w | ui-icon-circle-arrow-n | ||
| ui-icon-circle-zoomin | ui-icon-circle-zoomout | ||
| ui-icon-circle-check | ui-icon-circlesmall-plus | ||
| ui-icon-circlesmall-minus | ui-icon-circlesmall-close | ||
| ui-icon-squaresmall-plus | ui-icon-squaresmall-minus | ||
| ui-icon-squaresmall-close | ui-icon-grip-dotted-vertical | ||
| ui-icon-grip-solid-vertical | ui-icon-grip-solid-horizontal | ||
| ui-icon-gripsmall-diagonal-se | ui-icon-grip-diagonal-se |
jQuery UI の icon について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.