Version4.1になり新たに71アイコンが追加し合計439になりました。
HTMLの設定で簡単に設置できインターフェースユーザビリティにも、デザイン的にも最適です。
1番のメリットはレスポンシブwebデザインの制作方法になりサイズのことなるアイコン画像が必要ないということです。1つの設定でサイズ、色をCSSで調整可能です。
カテゴリー別アーカイブ: CSS
IEでリンク場所がはみ出している時の対処
Bootstrapでスライドボタン
見た目も使い勝手もよいBootstrap対応のスライドボタン。
クリックするとオンオフが簡単にできます。
提供しているのは「Bootstrap switch」
http://www.bootstrap-switch.org/
ダウンロード先
https://github.com/nostalgiaz/bootstrap-switch
ブラウザチェック用 App
HP制作では、色々な環境で動作チェックをする必要があります。
PC以外(スマホ、タブレット等)の画面サイズチェックは、以前 miyakawa が紹介していましたが、今回はOS毎の各ブラウザチェックに便利なアプリをご紹介します。
Sauce
Mac App Store で紹介されている無料アプリです。(全機能を使う場合は有料)
https://itunes.apple.com/jp/app/sauce/id564308477?mt=12

閲覧したいURL、OS、ブラウザ、画面サイズを選択してNavigateをクリック!(画面はお試し使用時)
使い心地は…というと、上記URLのレビューにもある通り「重い」。
でも、画面チェックとしてはかなり使えると思います。
ちなみに、全機能を使うならユーザー登録(無料 or 有料)が必要みたいですが、IE6〜10なら登録をしない「お試し」でもチェック出来ました。
ちなみにNavigateボタンをクリックした後、「Connecting…」画面の画像が動かないため、一瞬「フリーズか!?」と焦りました(笑)
販売元: SAUCE LABS INC
Bootstrap アイコン
Bootstrapは標準で140のアイコンが簡単な指定で表示できます。
黒のアイコンなら <i class=”icon-arrow-up“></i>
白のアイコンなら <i class=”icon-arrow-up icon-white“></i>
の赤字のそれぞれ入れればOKで簡単です。
さらに多くのアイコンを使用したい場合に2つのサイトを紹介します。
■Elusive Icons
271のアイコンがあります。
http://aristath.github.com/elusive-iconfont/
■Font Awesome
249のアイコンがあります。
設置方法:ダウンロードした中のCSS「font-awesome.min.css」と「font-awesome-ie7.min.css」をCSSフォルダーに入れる。
「font」フォルダーをそのまま、index.htmlと同じ階層にそのまま入れる。
index.htmlに下記の記述を追加する。
<link href=”css/font-awesome.min.css” rel=”stylesheet”>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css“>
<![endif]–>
赤字は置いてある場所を確認して変更する。
後は使用したいアイコンをそれぞれ指定をする。
<p><i class=”icon-camera-retro“></i> icon-camera-retro</p>
<p><i class=”icon-circle-arrow-down icon-large“></i> icon-circle-down</p>
<p><i class=”icon-circle-arrow-right icon-2x“></i> icon-circle-right</p>
<p><i class=”icon-circle-arrow-left icon-3x“></i> icon-circle-left</p>
<p><a href=”#t”><i class=”icon-circle-arrow-up icon-4x“></i> icon-circle-arrow-up</a></p>
<p><i class=”icon-spinner icon-large icon-spin“></i> Spinner icon</p>
サイズを変更なら「icon-large、icon-2x、icon-3x、icon-4x」
回転させるなら「icon-spin」
をスペースの後に追加する。
Bootstrap用のシンプルなjQueryカラーピッカー
Bootstrapで使用可能なシンプルなGoogleカレンダーのようなjQueryカラーピッカー。
とても短いコードで実現できます。
jquery-simplecolorpicker
https://github.com/tkrotoff/jquery-simplecolorpicker
Bootstrap用のカラーピッカーとカレンダー
Bootstrapでよく使用されているカラーピッカーとカレンダー機能です。
Colorpicker and Datepicker for Twitter Bootstrap
http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm
Bootstrapでボタンをカスタムカラーで作れる
Bootstrapのボタンをオリジナルカラーで作る場合に便利なサイト。
カラーをスライドバーで設定しながら実際にそのカラーで見れる。
Beautiful Buttons for Twitter Bootstrappers
http://charliepark.org/bootstrap_buttons/