[Web]小さなアイコンを文字として扱う

2015年6月1日(月曜日)

６月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。

春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。

さて、本日はとってもナイスなWebサービスをご紹介です。

——

例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか？

グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。

ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場合もまた作り直しってことになります。

そんな小さなアイコンをフォントとして表示できるWebフォントがあるんです。

Font AwesomeというWebフォントサービスです。
http://fortawesome.github.io/Font-Awesome/

使い方はとっても簡単。ユーザー登録なんかもいりません。

なかなか使い方は奥深いんですが、今回はカンタンに使えるさわりの部分だけご紹介してみます。

利用の手順

利用はカンタン、以下の２ステップです

Font Awesomeを利用するためのタグを１行書く
アイコンを利用したい場所に適当なインライン要素タグを書いてクラスを指定する

以上です。

では、１工程ずつやってみましょう。

ステップ１

最初のステップでは、Font Awesomeを利用するための準備をします。

Font Awesomeを利用するには、関連ファイルを一式ダウンロードして、自分のサイトに組み込んでしまう方法と、Font Awesomeのサーバーから呼び出して利用する方法の２つがあります。

後者の方がカンタンに利用できるので、そちらでやってみましょう。

HTMLファイルの<head>から</head>の間に以下のタグを貼り付けます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

上記のタグはXHTMLを基準にしてありますので、HTMLのページで作っている場合は、最後の「 /」を外してください。

準備はこれだけです。さぁ使ってみましょう！

ステップ２

例えば、以下のようなソースがあったとして…

<p>ダウンロード</p>

この「ダウンロード」の文字の先頭にアイコンを入れたい場合、以下のように「ダウンロード」の文字の前に適当なインライン要素のタグを書きます。
ここでは<span>タグを使ってみます。

<p><span></span>ダウンロード</p>

さらに追加した<span>要素に以下のクラスを指定します。

<p><span class="fa fa-download"></span>ダウンロード</p>

以上です。ブラウザで確認してみましょう。

カンタンでしたねー。

アイコンの種類

上記のように、クラス名に「fa fa-（アイコン名）」と指定することで、任意のアイコンを指定することができます。

他にも以下のようなアイコンが呼び出せます。

アイコン	クラスの指定
	fa fa-shopping-cart
	fa fa-sitemap
	fa fa-tag
	fa fa-search-plus
	fa fa-thumbs-o-up
	fa fa-trash
	fa fa-truck
	fa fa-user
	fa fa-car
	fa fa-bus
	fa fa-subway
	fa fa-file-o
	fa fa-gear

上記は一例で、まだまだ種類はたくさんあります。

↓のページを参考にしてみてください。
http://fortawesome.github.io/Font-Awesome/icons/

装飾

ここで表示しているアイコンは、文字の扱いですから、CSSで文字として装飾を行うことができます。

ボタン作ってみましょう。

HTMLソースを用意します。

<ul id="fnav">
<li><a href="#"><span class="fa fa-sitemap"></span> サイトマップ</a></li>
<li><a href="#"><span class="fa fa-car"></span> 交通アクセス</a></li>
</ul>

では、CSSで装飾をしてみましょう。

#fnav {
	padding: 0px;/*リストのパディングをクリア*/
	margin: 0px;/*リストのマージンをクリア*/
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,  sans-serif;/*フォントの指定*/
}
#fnav li {
	list-style: none;/*リストマーカーをなしに*/
	width: 10em;/*横幅の指定*/
	float: left;/*リストを横並びに*/
	text-align: center;/*文字を中央揃えに*/
	margin-right: 10px;/*ボタン間の隙間を指定*/
}
#fnav li a {
	display: block;/*幅を有効にするためブロックレベル要素に*/
	padding: 5px 10px 3px;/*ボタン内側の余白*/
	text-decoration: none;/*リンクの下線を消去*/
	color: #FFFFFF;/*文字の色を白に*/
	font-weight: bold;/*文字を太く*/
	border: 2px solid green;/*まわりの枠線を表示*/
	border-radius: 10px;/*角丸の指定*/
	background-image: -webkit-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -moz-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -o-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: linear-gradient(180deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-color: #008700;/*グラデーション未対応ブラウザのための背景色*/
	-webkit-box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	text-shadow: -1px -1px #025104;/*文字を立体的に見せる影の指定*/
}

ブラウザで確認すると、以下のようになります。

DEMOページ

どうでしょう？画像ファイルは一切使っていませんが、ここまでの表現が可能になります。

画像を使用していない分だけ、修正や変更も容易ですし、データの軽量化が見込めます。

かなり便利に使えるサービスです。ぜひチャンスがあったら利用してみてください！

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

この記事を書いた人
最新の記事

スタッフ「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ