この章では、CSSを使用してナビゲーションバーアイコンを作成する方法を学びます。
アイコンリソースはFont Awesome 4.7バージョンのアイコンを使用しています。
Font Awesomeアイコンのチュートリアルは以下を参照してください：Font Awesomeアイコン
サードパーティのCDNライブラリを直接導入できます：
<link rel="stylesheet" href="../cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
基本HTMLコード
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
水平方向ナビゲーションバー
例
.icon-bar {
width: 100%; /*全幅*/
background-color: #555; /*背景を設定*/
overflow: auto; /*オーバーフローはフロートに応じて調整します*/
}
.icon-bar a {
float: left; /*水平方向に要素を横並びで表示します*/
text-align: center; /*テキストを中央揃え*/
width: 20%; /*等幅表示（5つのボタン、各20%表示、20% * 5 = 100%）*/
padding: 12px 0; /*上下のパディングを設定*/
transition: all 0.3s ease; /*ホバー効果にトランジション効果を追加*/
color: white; /*テキストを白で表示*/
font-size: 36px; /*フォントサイズを増加*/
}
.icon-bar a:hover {
background-color: #000; /*マウスが要素上に移動したときの背景色を追加*/
}
.active {
background-color: #0457AA; /*選択された要素の背景色を追加*/
}
試してみる »
垂直方向ナビゲーションバー
例
.icon-bar {
width: 90px; /*幅を指定*/
background-color: #555; /*背景を設定*/
}
.icon-bar a {
display: block; /*リンクを横並びではなく上下に表示します*/
text-align: center; /*テキストを中央揃え*/
padding: 16px; /*パディングを設定*/
transition: all 0.3s ease; /*ホバー効果にトランジション効果を追加*/
color: white; /*テキストを白で表示*/
font-size: 36px; /*フォントサイズを増加*/
}
.icon-bar a:hover {
background-color: #000; /*マウスが要素上に移動したときの背景色を追加*/
}
.active {
background-color: #0457AA; /*選択された要素の背景色を追加*/
}
試してみる »