スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 「Font Awesome」を使ったメニューの作り方

「Font Awesome」を使ったメニューの作り方

投稿日:2014年10月31日

このチュートリアルでは「Font Awesome」アイコンを使って、味気ない縦並びメニューの見た目を改善する方法を紹介します。


Step1:はじめに

あなたが普段見ているサイトで、「Font Awesome」が使われているのを見かけることがあると思います。
このウェブフォントは大きさを変えることのできるベクターアイコンです。
ウェブデザイナーのあいだで瞬く間に広まり、今ではもっとも使われるツールのひとつになりました。
このチュートリアルでは、「Font Awesome」アイコンを使って、味気ない縦並びメニューの見た目を改善する方法を紹介します。



Step2:「Font Awesome」のどこがすごいのか

ただ、その前に、まずは「Font Awesome」のどこがすごいのかを、簡単におさえておきましょう。

可変性
 大きさを自由に変えられるので、このアイコンを選べば、どんな解像度の画面でもレスポンシブデザインを実現できます。
CSS
 アイコンに対して、CSSを適用することができます。
併用可能
 「Font Awesome」はTwitter Bootstrapとの相性も良く、他のフレームワークとも併用することができます。
ライセンス
 「Font Awesome」はオープンソースで、GPLです。そのため、制限なく使用することができます。






Step3:「Font Awesome」の設定

「Font Awesome」をウェブサイトに取り込む方法はとても簡単です。
BootstrapCDNを使うか、CSSファイルをウェブディレクトリにアップするだけです。
このチュートリアルでは、BootstrapCDNを使う方法を採用しますが、CSSファイルをアップロードする方法が知りたい場合は、「こちらをご覧ください」。

ダウンロードやインストールをせずに「Font Awesome」を使いたい場合は、次のコードをHTMLのheadタグ内に追加するだけでできます。

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

もしローカル環境でテストしたければ、上のコードにhttpを追加して、次のようにしましょう。

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


Step4:メニューのスタイル

アイコンが使えるようになったので、次のCSSを使って、縦並びメニューを作っていきましょう。

.list-group {
margin-bottom: 20px;
padding-left: 0px;
}
* {
box-sizing: border-box;
width:65%
}
.list-group-item:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
a.list-group-item {
color: #555;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #c3c3c3;
border: 1px solid #000000;
}
a {
color: #21B384;
text-decoration: none;
background: none repeat scroll 0% 0% transparent;
}

番号なしリストを使わず、「list-group」クラスを使って縦並びメニューを作っています。
上のCSSにより、暗い色のテキストがグレーの背景上に表示されます。
もちろん、背景色やテキストの色を変えたり、マウスオーバーした時のスタイルを追加することが可能です。

このままではメニューが空っぽなので、次のようなナビゲーション用の要素を準備します。
まだアイコンが追加されていませんので、ウェブページに追加するのはもう少し待ってください。

<div class="list-group">
<a class="list-group-item" href="#">Home</a>
<a class="list-group-item" href="#">About Us</a>
<a class="list-group-item" href="#">Search</a>
<a class="list-group-item" href="#">Contact Us</a>
</div>


Step5:アイコンの追加

「Font Awesome」アイコンは、iタグを使ってウェブページの好きなところに追加することができます。
例えば、鉛筆のアイコンを追加したいと思ったら、次のコードを追加すればOKです。

<i class="fa fa-pencil"></i>

このコードにより、アイコンをfa、つまり「Font Awesome」から取り出すこと、表示するアイコンがfa-pencil、つまり鉛筆であることがブラウザに伝わります。
上で作成していたメニューには、各メニュー項目の前に、iタグとスペースを追加します。
メニューらしくするために、「fa-fw」を追加します。これにより、アイコンは固定幅になります。

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Home</a>
<a class="list-group-item" href="#"><i class="fa fa-users fa-fw"></i>  About Us</a>
<a class="list-group-item" href="#"><i class="fa fa-search fa-fw"></i>  Search</a>
<a class="list-group-item" href="#"><i class="fa fa-phone fa-fw"></i>  Contact Us</a>
</div>

完成形は次のようになります。

Font Awesome



Step6:さらに進むには

iタグを直接編集して「Font Awesome」アイコンでできることは、もっとたくさんあります。
アイコンを大きくしたり、境界線を加えたり、画像を回転したり、くるくる回すことだってできます。
「Font Awesome」の例のページでは、どうすれば上で書いたことができるかが解説されています。
現在の479個のアイコンすべてを名前付きで見たい場合は、チートシートを手元資料として使いましょう。
新しいアイコンはライブラリにどんどん追加されていますので、もっとも新しいドキュメントを使えば、このツールのことをよく知ることができるでしょう。



引用:Web Design Library  著者:JeffOrloff  翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング