カテゴリー別アーカイブ: CSS

フラットデザインに最適なカラーをアドバイス

最近多くなってきているフラットデザインで、ちょうどいい雰囲気のカラーを見つけるのに苦労していました。
普段は沢山の参考サイトをみて、気になった色をスポットカラーのようなもので色情報を調べ、制作しているサイトに入れてみて….と時間を掛けて調整しています。

今回紹介するのは、サクッとフラットデザインに最適なカラーをアドバイスしてくれるサイトです。あと、このサイトのファビコンがgifアニメーションになっていて「おぉ！色がランダムに動いている」こんなところにデザイナーの心意気を感じます。

使い方は簡単で気になった色を1クリックすると色情報をコピーしています。
それをHTML/CSSの色指定部分にペーストするだけです。

Flat UI Colors
http://flatuicolors.com/

Font Awesome アイコン

Version4.1になり新たに71アイコンが追加し合計439になりました。
HTMLの設定で簡単に設置できインターフェースユーザビリティにも、デザイン的にも最適です。
1番のメリットはレスポンシブwebデザインの制作方法になりサイズのことなるアイコン画像が必要ないということです。1つの設定でサイズ、色をCSSで調整可能です。

http://fortawesome.github.io/Font-Awesome/icons/

IEでリンク場所がはみ出している時の対処

テキストにリンク指定をしてマウスオーバーさせた時に、Internet Explorerだけが違った場所（要素がはみ出している）に反応してしまう解決方法。

例えばメニュー部分で「Profile」にマウスを持っていった場合。

Safari、Firefox、Chromeではきちんとマウスオーバーができる。

Internet Explorerでは下のInformationがマウスオーバーさせる。

特にセリフのある書体などでおこりやすい現象。

cssの指定で「overflow」を追加
overflow:hidden;
はみ出した部分を表示させない指示。

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のアイコンが簡単な指定で表示できます。
黒のアイコンなら　 
白のアイコンなら　 
の赤字のそれぞれ入れれば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]–>
赤字は置いてある場所を確認して変更する。

後は使用したいアイコンをそれぞれ指定をする。
 icon-camera-retro
 icon-circle-down
 icon-circle-right
 icon-circle-left
<a href=”#t”> icon-circle-arrow-up</a>
 Spinner icon