jQuery UI の icon を利用すると、アイコンを表示することができます。
今回は、icon の使用方法について、解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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.
