システム開発者の為のWEBデザイン CSS3アイコン「ICONO」

システム開発者だから、デザインセンスが無い試作ページを作ってしまい、機能要件を満たしていても企画がボツになったと言う話も無いことは無いのだ。

今ではそんな悲しい話も遠い昔となりました。

Bootstrapに代表するHTML5・CSSフレームワークを利用すれば、完成度の高いデザインをデザインを意識すること無く利用することが可能になりました。

ちょっと上達したところで、似たり寄ったりのデザインになってしまうオチを、複数のCSS3ファイルを利用することで解消できるます。

ここでは、標準化、有名、勢いがあるCSS3ライブラリについて検証しています。


第一弾！CSS3アイコン「ICONO」

saeedalipoor.github.io/icono/

icono.min.css (55.9KB) アイコン数：130個

ダウンロードしたCSS3ファイルを設置し、利用したいページのヘッダーに下記コードを設置する。

<link rel="stylesheet" href="/css/icono.min.css">

実際にアイコンを表示する箇所で、class指定してやればアイコンが表示されます。

目的のアイコンのclassを調べるには、公開サイト上のアイコンをクリックすれば直ぐに分かります。

<span class="icono-home"></span>

CSS3に対応したブラウザー（パソコン版、スマートフォン版など）なら、classを追加するだけでアイコンを表示させることができます。

サイズも色も自由自在です。

png画像のサイズや透過を気にすることは必要なくなり、システム開発者はコードの制作に集中することができそうです。


ICONOのいいところは、アイコンが1つのCSSファイルに纏められて最適化されているところでしょうか。