HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

CSSでアイコンを作成してみた(その1)

はじめに

アイコンがほしい。作りたい。
自力で画像やSVGにてアイコンを作成できればいいのですが、私にIllustratorInkscapeのスキルはございません…。

そういえば、世間ではCSSでアイコンを作成している方がいらっしゃいます。

当初は仕組みを全然理解していませんでしたが、調べて作成するところまでやってみました。
もし使いたい方がいれば、ご自由にコピペしていってください。

こんな感じです

f:id:hrroct:20161111162954p:plain

ソースコード

下記の内容をhtmlファイルとして保存して、ブラウザで開いてみてください。
Google ChromeFirefox、IE11の最新版で確認は済んでおります。

  1. "font-size"をいじると大きさが変えられます。
  2. 色を変えるには「#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"はデフォルト値なので、なくてもよいですが説明のためにつけています。

他にも…

こんなものも作れます。

f:id:hrroct:20161115165626p:plain

<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>

最後に

ご覧の通り、比較的単純なアイコンであれば、わりと簡単に作れます。
※手間はかかりますけど…

より複雑なアイコンを作成しようとすると、疑似要素を使用する必要が出てくると思いますが…
それはまたの機会に。

デザイナーさんでなくとも、こういったアイコンが自力で作成できるのはいいですね!
画像と違って、拡大してもきれいに見えるのもポイントが高いです。

以上でした。