用意された絵を飾りに使う

01 / 05

飾りの絵は自分で描かなくていい

小さなしるし（アイコン）は、たいてい用意された素材を取り込んで使う。自分で描かなくていいんだ。

この教材で手元にある絵は3つ。ネットのどこかから持ってくるのはしないよ。

/samples/neko.svg
/samples/onigiri.svg
/samples/hana.svg

02 / 05

大きさをそろえる

素材は元の大きさがばらばらなことが多い。width と height を両方決めて、そろえてから使おう。

アイコンなら 20px〜32px くらいが目安だよ。

.icon {  width: 24px;  height: 24px;}

03 / 05

文字と高さをそろえる

img を文字の横に置くと、下がそろって上がずれることがある。

vertical-align: middle;（たての位置）を指定すると、絵の中心と文字の中心が合うよ。

.icon {  vertical-align: middle;}

04 / 05

箱の背景に貼る

img を書かずに、箱の背景としてアイコンを置く手もある。文章の左に小さな絵を出したいときに便利。

padding-left で文字を右にどかして、空いた場所に絵を出すのがコツだよ。

.item {  padding-left: 44px;  background-image:    url(/samples/hana.svg);  background-repeat: no-repeat;  background-position: 12px center;  background-size: 24px 24px;}

05 / 05

どちらを選ぶか

内容として意味のある絵は img、ただの飾りは背景。使い分けの目安はこれだよ。

背景の絵は「読み上げ」の対象にならないので、意味を持つ絵を背景にすると情報が消えてしまうんだ。ここから書いてみよう。