ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング