はじめに
アイコンがほしい。作りたい。
自力で画像やSVGにてアイコンを作成できればいいのですが、私にIllustratorやInkscapeのスキルはございません…。
そういえば、世間ではCSSでアイコンを作成している方がいらっしゃいます。
当初は仕組みを全然理解していませんでしたが、調べて作成するところまでやってみました。
もし使いたい方がいれば、ご自由にコピペしていってください。
こんな感じです
ソースコード
下記の内容をhtmlファイルとして保存して、ブラウザで開いてみてください。
Google Chrome、Firefox、IE11の最新版で確認は済んでおります。
- "font-size"をいじると大きさが変えられます。
- 色を変えるには「#c0c0c0」を差し替えてください。
<html> <head> <style type="text/css"> <!-- .icon-building { display: inline-block; vertical-align: middle; font-size: 50px; width: 1.0em; height: 1.3em; border: 0.1em solid #c0c0c0; border-radius: 0.1em; margin: 0 0.2em; background: /* 上段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.1em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.1em / 0.2em 0.2em no-repeat, /* 中段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.4em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.4em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.4em / 0.2em 0.2em no-repeat, /* 下段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.7em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.7em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.7em / 0.2em 0.2em no-repeat, /* 入り口 */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.3em 1.0em / 0.4em 0.3em no-repeat; } //--> </style> </head> <body> <span class="icon-building"></span> </body> </html>
ポイント
ここでの肝は"backgroup"と"linear-gradient"でしょう。
linear-gradientを使いつつもグラデーションせず、複数の四角形を位置をずらして作成しております。
"linear-gradient"行を細かく説明すると、こんな感じです。
linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat --------------------------- ----------- ----------- --------- | | | | `- 上から下に向かって、同じ色でグラデーション(塗りつぶしと同義)。 | | | `- 開始位置。"background-position"。 | | `- サイズ。"background-size"。 | `- 繰り返し描画。"background-repeat"。
"to bottom"はデフォルト値なので、なくてもよいですが説明のためにつけています。
他にも…
こんなものも作れます。
<html> <head> <style type="text/css"> <!-- .icon-battery { display: inline-block; vertical-align: middle; font-size: 50px; width: 1.7em; height: 1.2em; margin: 0 0.2em; background: /* 電池本体(上の横線から時計回りに並べました) */ linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 1.4em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.0em / 0.1em 0.2em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.2em / 0.3em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.6em 0.2em / 0.1em 0.5em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.7em / 0.3em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.8em / 0.1em 0.2em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.9em / 1.4em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 0.1em 0.9em no-repeat, /* 電池残量 */ linear-gradient(#c0c0c0, #c0c0c0) 0.2em 0.2em / 0.3em 0.6em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.6em 0.2em / 0.3em 0.6em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.0em 0.2em / 0.3em 0.6em no-repeat; } //--> </style> </head> <body> <span class="icon-battery"></span> </body> </html>
最後に
ご覧の通り、比較的単純なアイコンであれば、わりと簡単に作れます。
※手間はかかりますけど…
より複雑なアイコンを作成しようとすると、疑似要素を使用する必要が出てくると思いますが…
それはまたの機会に。
デザイナーさんでなくとも、こういったアイコンが自力で作成できるのはいいですね!
画像と違って、拡大してもきれいに見えるのもポイントが高いです。
以上でした。