はじめに
アイコンがほしい。作りたい。
自力で画像や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を使いつつもグラデーションせず、複数の四角形を位置をずらして作成しております。
background - CSS | MDN
linear-gradient - CSS | MDN
"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>
最後に
ご覧の通り、比較的単純なアイコンであれば、わりと簡単に作れます。
※手間はかかりますけど…
より複雑なアイコンを作成しようとすると、疑似要素を使用する必要が出てくると思いますが…
それはまたの機会に。
デザイナーさんでなくとも、こういったアイコンが自力で作成できるのはいいですね!
画像と違って、拡大してもきれいに見えるのもポイントが高いです。
以上でした。