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

CotEditor マック用テキストエディター

222

MacOS X用のテキストエディターです。これはコード(HTML、PHP、JavaScript等)を書くのにとても使いやすいエディターです。
OS-X10.3から対応されています。見た目の色合いがとてもシンプルで見やすいです。
コードを書いたり調査する場合は見やすいというポイントはとても重要です。エラー入力を無くすのに貢献してくれます。

https://coteditor.com/

上のメニューでアーカイブから、通常(AppStoreを使用しない)のダウンロードが可能です。

22
2

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

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

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

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

Flat UI Colors
http://flatuicolors.com/
flatui

Font Awesome アイコン

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

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

fontawesome fontawesome1

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

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

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

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

Internet Explorerでは下のInformationがマウスオーバーさせる。
overflow3
特にセリフのある書体などでおこりやすい現象。

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