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

スマートフォン端末からのアクセスが多い今の時代！（スマートフォンはCSS3対応）

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

今ではそんな悲しい話も遠い昔となったようだ。さあ、制作現場の主役になろうでは無いか！

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

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

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


第二弾！CSS3アイコン「css3 icons」

www.uiplayground.in/css3-icons/

必要なアイコン毎にCSSを取得する アイコン数：200個～

設置方法として、css3 iconsは、必要なアイコンの数だけ、アイコンのcss/classを自分の使用しているCSSファイルへ追加して利用するタイプになる。

ただし、適切「span」「demoSpan1」「demoSpan2」などは変更する必要がでてくるだろう。

実際にアイコンを表示する箇所で、先ほど追加したclass名を指定してやればアイコンが表示される。

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

サイズも色も自由自在！もう無敵に近づいた。

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


css3 iconsのいいところは、必要なアイコンだけを指定できるので、無駄を無くしたいエンジニア（潔癖症、完璧主義者）にはベストな仕様と言える。