2013/10/17
画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法
アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。
画像を利用するのに比べて、メンテナンス、明瞭度、軽いなどの点で優れており、今後いっそう増えていきそうです。
今回はそんなアイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が「Create No Image Icons in CSS3 Tutorial – Bloom Web Design」で紹介されていたのでご紹介します。
画像を使わずにCSSだけでアイコンをつくる方法

今回はEntypo fontというWEBフォントを利用します。
サンプルデータとフォントは、Create No Image Icons in CSS3 Tutorial – Bloom Web Designのサイトからダウンロードできます。
TwitterもしくはFacebookアカウントを利用して入手してください。
それでは早速はじめてみましょう。
HTMLを記述する
まずはHTMLです。
以下のように準備します。
見ておわかりと思いますが、指定したclass名に対して、cssで定義してWEBフォントを表示するというやり方になります。
|
1 |
<a href="#" class="one" title="Icon 1"></a> |
@font-faceを定義する
webフォントを利用するために、@font-faceを以下のように定義します。
以下の書き方で、主要ブラウザからie8以下まで表示させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@font-face { font-family: 'entyporegular'; src: url('Entypo-webfont.eot'); /*ieだけがサポートしている形式*/ src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'), url('Entypo-webfont.woff') format('woff'), url('Entypo-webfont.ttf') format('truetype'), url('Entypo-webfont.svg#entyporegular') format('svg'); font-weight: normal; font-style: normal; } |
cssを定義する
htmlで指定したclass名に対してcssを定義していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.one { /*General*/ display: block; text-decoration: none; /*Font*/ font-family: 'entyporegular'; text-align: center; font-size:50px; line-height:1.4; font-weight:regular; color: white; /*Background*/ background-color: #4ed18f; width:70px; height:70px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:5px; } |
contentプロパティでアイコンを読み込む
準備が整いましたが、このままでは肝心のアイコンが表示されません。
htmlのa要素になにも記述されていないためです。
そこでcontentプロパティを利用して、表示させたいアイコンを記述します。
ここでは、木の葉マークを入れます。
木の葉マークはEntypo fontではアルファベットGにあたります。
ですから以下のように記述します。
|
1 2 3 4 5 |
.one:after { content: "G"; } |
以上で完成です。
こちらの記事で作成したサプンルです。
ご参考にどうぞ。
sample
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ
-
-
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC
-
-
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ
-
-
CCSだけで見出しに自動で連番を記入する方法
当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?
各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に
-
-
これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」
こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利
-
-
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に
-
-
WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」
流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
