使い勝手のよさそうなアイコンをCSSだけで6個作ってみた

近頃アイコンに画像を使わずWebフォントを使うことが多くなりました。とはいうものの、少しのアイコンを使うために、多くのアイコンが入ったファイルを読み込むのもどうかなということもあります。そのアイコンをCSSで表現できるならそれに越したことはないと思います。

css-icon.png

ということで、よく使いそうなアイコンをCSSで作ってみました。

HTMLは全て同じです。

<span class="css-bar"></span>

span要素1つだけで、擬似要素を組み合わせて作っています。では1つずつ解説していきます。

3本線のボタン

ボタン

まずは、最近よく見かける3本線のボタンです。本体のspan要素で真ん中のボーダー、before擬似要素で上のボーダー、after擬似要素で下のボーダーを表しています。

.css-bar{
  display: inline-block;
  position: relative;
  margin: 0 10px 3px 0;
  padding: 0;
  background: #000;
}
.css-bar, .css-bar:before, .css-bar:after{
  width: 18px;
  height: 3px;
}
.css-bar:before, .css-bar:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #000;
}
.css-bar:before{
  margin-top: -8px;
}
.css-bar:after{
  margin-top: 4px;
}

heightやwidthを変えるとボーダーの大きさが変わります。線と線の間隔はmargin-topで変えられます。border-radiusで丸みをつけてもいいかもしれません。

ファイル

ファイル

ファイルのようなアイコンです。beforeで折り目の境目となるボーダーを、afterで折り目の三角をあらわしています。

css-icon-note.png
.css-file{
  display: inline-block;
  position: relative;
  top: 50%;
  width: 16px;
  height: 20px;
  margin: 0 10px 0 0;
  padding: 0;
  background: #000;
}
.css-file:before, .css-file:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
}
.css-file:before{
  width: 7px;
  height: 7px;
  background: #eee;
}
.css-file:after{
  width: 0;
  height: 0;
  border: 3px solid #eee;
  border-bottom-color: #000;
  border-left-color: #000;
}

afterの「#eee」は背景の色に合わせて変えてください。afterの大きさははボーダー各3pxで6pxとなります。折り目の大きさを変える場合は、この辺を押さえながらbeforeの方が大きくなるよう変更するといいと思います。

メール

メール

メールのアイコンです。仕組みは先ほどと似ています。beforeで作った白の三角の上に、afterで作った少し小さな黒の三角を乗せています。

.css-mail{
  display: inline-block;
  position: relative;
  width: 20px;
  height: 16px;
  margin: 0 10px 0 0;
  padding: 0;
  background: #000;
}
.css-mail:before, .css-mail:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.css-mail:before{
  border: 10px solid transparent;
  border-top-color: #fff;
}
.css-mail:after{
  left: 2px;
  border: 8px solid transparent;
  border-top-color: #000;
}

大きさを変更する場合は、本体の四角とbeforeの三角の横幅を同じにするといいです。borderを10pxに指定すると三角の大きさは20pxになる点に気をつけてください。afterの三角形はbeforeのより2px小さくします。

キャンセル

キャンセル

なんて呼べばいいのか分かりませんが、オーバーレイで表示したものを消す場合なんかに使えると思います。transform: rotate(45deg);をなくすとプラスになります。

.css-cancel{
  display: inline-block;
  position: relative;
  margin: 0 20px 0 7px;
  padding: 0;
  width: 4px;
  height: 20px;
  background: #000;
  transform: rotate(45deg);
}
.css-cancel:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: #000;
}

span本体とbefore擬似要素で一本ずつ表しています。本体でサークル、beforeとafterでボーダーを一本ずつにして、ボタンぽっくしてもいいかも。

タグ

タグ

タグです。本体は四角、beforeは真ん中の丸、afterは三角になっています。

.css-tag{
  display: inline-block;
  position: relative;
  margin: 0 15px 0 0;
  padding: 0;
  width: 18px;
  height: 16px;
  background: #000;
}
.css-tag:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
}
.css-tag:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left-color: #000;
}

大きさを変更する場合、三角形になるafterのボーダーの長さを本体のheightの半分にします。真ん中の丸を大きくする場合、margin-topの値にも気をつけましょう。

やじるし

矢印

何かとよく見かけるタイプの矢印です。ややこしいので図にしてみました。矢印が浮かんできますか?

css-icon-arrow.png

afterは背景と同じ色にして、beforeに上に重ねる感じです。「スマホ用サイトに便利! リンクを表す矢印をCSSだけで作る方法|Webpark」で別の方法も解説していますのでぜひご覧ください。

.css-arrow{
  display: inline-block;
  position: relative;
  margin: 0 0 0 8px;
  padding: 0;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #000;
}
.css-arrow:before, .css-arrow:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
.css-arrow:before{
  left: -30px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right-color: #000;
}
.css-arrow:after{
  left: -20px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left-color: #eee;
}

さいごに

ということで、使い勝手のよさそうなアイコンをCSSだけで作ってみました。

作ろうと思えば、CSSでもっと複雑なものでも作れるわけですが、あまりに複雑になるならWebフォントを使った方がいいと思うので、今回は要素1つで作れるシンプルなものにしました。

1つでも気に入ったものがあればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加