CSSだけで作成したアイコンを利用する

最近では画像を使わずにCSS3でボタンを表現することが一般的になってきました。アイコンもCSSだけで作られたものがたくさん公開されています。それらを利用し、HTML/CSSだけでWebページにアイコンを表示する方法を解説します。

画像を使わないアイコンとしては、アイコンをWebフォントとして利用する方法があります。
こちらも便利なのですが、フォントファイルは容量が大きくなりがちですので、アイコンの数が少ない場合はCSSアイコンを使うと軽量化につながります。

自分でアイコンをCSSで作るのは面倒ですが、フリーライセンスで提供しているサイトもたくさんありますので、それらを積極的に活用してみましょう。

【コンテンツ】

  1. CSSアイコンの作成例
  2. おすすめサイト

CSSアイコンの作成例

ほとんどが、before/after疑似要素を使って表現しています。
CSS3で追加されたプロパティを使って、複雑な形をうまく表現したものもあります。

以下は実際にこのページでCSSアイコンを表示した例です。

CSSは以下のようになっています。

HTMLの記述方法はCSSの作りに依存します。
コードを提供しているサイトで、HTMLの記述方法が示されていますのでそれを参考にします。

上の例では、divタグに「class="css-icon-hand"」を追加すればいいだけです。

おすすめサイト

おすすめサイトとして2つほどあげます。

UIPLAYGROUND

http://www.uiplayground.in/css3-icons/

アイコンの数は200種類以上と非常に多いです。
アイコン画像をクリックすると、HTMLコードが記述されたポップアップウィンドウが表示され、そのコードをそのまま貼り付ければいいだけになっています。

スタイルは、HTML文書内にstyle要素を使って記述する様式になっており、しかもすべてのアイコンのクラス名が共通なので、この部分が少し使いづらいところです。
同じページで複数のアイコンを使用する場合はクラス名を変える必要があります。

UIPLAYGROUNDのサイト

以下は、このサイトからいくつかコードをコピーして表示した例です。

  • play
  • pause
  • next
  • prev
  • signal
  • home
  • vol-up
  • mark3

Pure CSS GUI icons

http://nicolasgallagher.com/pure-css-gui-icons/

アイコンの数はそれほど多くありませんが、a要素のbefore/after疑似要素にスタイルを設定しているのが特徴です。
そのため、アンカーリンク付きのアイコンを表示することができます。

Pure CSS GUI icons のサイト

以下は、このサイトからいくつかコードをコピーして表示した例です。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ