もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法 : アシアルブログ

201207/10

もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法

カテゴリ :: フロントエンド（HTML5）
タグ :: Tech; HTML5; CSS3; iOS; Android

こんにちは、鴨田です。

最近、アイコンがセットされたWebフォントを使うことで、
画像を使わずにアイコンを表示するという手法が流行っていますね。

すごく興味はあったのですが、なかなか使う機会もなく、
便利そうだなと思っていただけで、今まで使ったことがありませんでした。

しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。
(プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・)

１．アイコンWebフォントをダウンロードする

最近話題になっていたこちらのサイトがとても便利です。

Fontello - http://fontello.com/

使いたいフォントを選択します。
ここでは、「Entypo」フォントから5つ選択します。

選択が終わったら、上部のタブから「Edit codes」をクリックします。

アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。
英語で頭文字を取るとか、abc～とかにするとかですかね。

文字列の指定が終わったら、フォントファイルのダウンロードを行います。
サイト右上にある「Download webfont(n)」をクリックしましょう。
「fontello-xxxxxxxx.zip」がダウンロードされます。

解凍して中身を見てみましょう。

fontello
－cssフォルダ
　－icons.css
　－icons-codes.css
　－icons-ie7.css
　－icons-ie7-codes.css
-fontフォルダ
　－icons.eot
　－icons.svg
　－icons.ttf
　－icons.woff
－config.json
－demo.html
－LISENSE.txt
－README.txt

が入っています。

どんな作りになっているのかは割愛します。
重要な箇所に関しては、後で説明しています。
とりあえず中身を知りたい人は、ライセンスとリードミーを読んだ後、
(特にフォントのライセンスについては特に確認した方がいいと思います)
demo.htmlとicons.cssを見てみてください。

それでは、iOS風タブバーを作っていきましょう。

２．HTMLとCSSでRetina対応のiOS風タブバーを作成する

html
－cssフォルダ
　－reset.css
　－style.css
－fontフォルダ
　－icons.eot
　－icons.svg
　－icons.ttf
　－icons.woff
－index.html

reset.cssは、HTML5用の既知のreset.cssであれば何でも構いません。
以前に記事にした「HTML5+CSS3の導入時に役立つ7つの設定」も参考にしてください。

「font」フォルダは、先ほどダウンロードしてきたフォルダをそのままコピーします。

まずは、tab.htmlを書きましょう。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>iOS風タブバー</title>
<link rel="stylesheet" media="screen" href="css/reset.css" />
<link rel="stylesheet" media="screen" href="css/style.css" />
</head>
<body>
<header id="header">
<h1>タイトル</h1>
</header>
<nav id="tab">
<ul>
<li><a href="" class="on"><span><i class="icon-home"></i>HOME</span></a></li>
<li><a href=""><span><i class="icon-camera"></i>カメラ</span></a></li>
<li><a href=""><span><i class="icon-picture"></i>アルバム</span></a></li>
<li><a href=""><span><i class="icon-bookmark-1"></i>お気に入り</span></a></li>
<li><a href=""><span><i class="icon-info-circle"></i>お知らせ</span></a></li>
</ul>
</nav>
</body>
</html>

特に何の変哲もないHTMLのソースコードです。
これに関しては、何も言うことがありません。

続いて、style.cssを書きます。

style.css

/* font */
@font-face {
font-family: 'icons';
src: url("../font/icons.eot");
src: url("../font/icons.eot?#iefix") format('embedded-opentype'), url("../font/icons.woff") format('woff'), url("../font/icons.ttf") format('truetype'), url("../font/icons.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}
.icon-home:before { content: '\68'; } /* 'h' */
.icon-info-circle:before { content: '\69'; } /* 'i' */
.icon-picture:before { content: '\70'; } /* 'p' */
.icon-camera:before { content: '\63'; } /* 'c' */
.icon-bookmark-1:before { content: '\66'; } /* 'f' */
/* common */
#header {
position: fixed;
z-index: 2;
width: 100%;
height: 44px;
top: 0;
left: 0;
background: #eee;
background: -o-linear-gradient(top, #fff, #fff 50%, #ddd 50%, #ddd);
background: -moz-linear-gradient(top, #fff, #fff 50%, #ddd 50%, #ddd);
background: -webkit-gradient(linear,left top,left bottom, color-stop(0.5, #fff),color-stop(0.5, #ddd));
border-top: 1px solid #666;
border-bottom: 1px solid #444;
text-align: center;
overflow: hidden;
}
#tab {
position: fixed;
z-index: 2;
width: 100%;
height: 49px;
bottom: 0;
left: 0;
border-top: 1px solid #444;
background: #ccc;
background: -o-linear-gradient(top, #fff, #ccc);
background: -moz-linear-gradient(top, #fff, #ccc);
background: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff),color-stop(1, #ccc));
float: left;
overflow: hidden;
}
/* header */
#header h1 {
line-height: 44px;
display: block;
font-size: 20px;
}
/* footer */
#tab ul {
width: 100%;
height: 49px;
float: left;
}
#tab li {
width: 20%;
height: 100%;
text-align: center;
display: block;
float: left;
}
#tab li a {
width: 100%;
height: 100%;
display: block;
color: #777;
text-decoration: none;
font-size: 8px;
}
#tab li a.on, #tab li a:hover {
color: #09c;
}
#tab li a span {
margin: 3px 6px;
padding: 0 0 2px;
display: block;
}
#tab li a.on span {
margin: 2px 5px;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
}
#tab li a i {
font-family: 'icons';
font-size: 30px;
font-style: normal;
display: block;
padding: 0 0 2px 0;
}
#tab li a.on i, #tab li a:hover i {
text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.6);
}

注目するところは、以下ですね。

@font-face {
font-family: 'icons';
src: url("../font/icons.eot");
src: url("../font/icons.eot?#iefix") format('embedded-opentype'), url("../font/icons.woff") format('woff'), url("../font/icons.ttf") format('truetype'), url("../font/icons.svg#icons")
format('svg');
font-weight: normal;
font-style: normal;
}

まずは、Webフォントの読み込みを行います。

.icon-home:before { content: '\68'; } /* 'h' */
.icon-info-circle:before { content: '\69'; } /* 'i' */
.icon-picture:before { content: '\70'; } /* 'p' */
.icon-camera:before { content: '\63'; } /* 'c' */
.icon-bookmark-1:before { content: '\66'; } /* 'f' */

:beforeセレクタとcontentプロパティを使うことで、
HTML自体に余計な文字列が紛れ込むのを防いでいます。
SEOやユニバーサルデザイン的にもあまりよろしくないですからね。

そして、最終的に重要なところはここです。

#tab li a i {
font-family: 'icons';
font-size: 30px;
font-style: normal;
display: block;
padding: 0 0 2px 0;
}

アイコンを表示させるべき箇所で、font-familyプロパティに、さきほどセットした"icons"を使用します。
displayプロパティはblockにしてください、地味に重要です。
後は、アイコンの大きさとちょっとしたパディング設定とイタリック体の解除を行っています。

これだけです。これだけでこうなります。
デモなので、ロールオーバーとかします。

なんて便利！
もういちいち画像を使って、タブバーを作るのが面倒くさくなってしまいます。

動作確認は、iOS5.0ではSafari、Chrome、Android4.0および2.3では標準ブラウザで行っています。
PCブラウザであれば、各最新版のSafari、Chrome、Firefox、Operaで問題ありません。
IEは9以降で、グラデーション等が使えないですが、Webフォント自体は使えるようですね。

一応、横幅はどんなサイズであろうとも、対応しています。
ただし、もろもろの事情により、先日書いた「CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方」とは違い、古風な手段で対応しています。

※Opera対応しようと思っただけなのですが、Operaはbox-flex使えないので・・・
　多分、スマホサイトでしか使わないと思うので、
　OperaとIEを気にしないのであれば、上記記事と組み合わせて、モダンなCSSでいけるはずです。

是非、一度試してもらえたらと思います。

GitHubにソースコード一式を公開したので、煮るなり焼くなり、
自由にダウンロードやフォークしてみてください。

jsdo.itにも公開しておきます。ただし、SVGファイルしか置けなかったので、
ChromeかSafariでしか、ちゃんと表示されません。