CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説

CSSを使えば、Webサイトのナビゲーションに便利な「アイコンバー」を簡単に作成できます。この記事では、Font Awesomeのアイコンを使用した横型・縦型のアイコンバーの作り方を、実際のコード例とともにわかりやすく解説します。

準備：Font Awesomeの読み込み

アイコンを表示するために、ここではFont Awesome（4.7.0）を使用します。HTML内で以下のCDNリンクを読み込んでおきましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

横型アイコンバーの作成例

まずは、画面幅いっぱいに広がる横型のアイコンバーを作成してみましょう。実装のポイントは以下の通りです。

  • .icon-bar：背景色を黒に設定し、overflow: autoでfloatによる回り込みを解除します。
  • .icon-bar a：float: leftでリンクを横並びにし、text-align: centerでアイコンを中央揃えにします。
  • .active：現在選択中のアイコンに青色の背景を適用し、アクティブ状態を示します。
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
    width: 100%;
    background-color: black;
    overflow: auto;
}
.icon-bar a {
    float: left;
    width: 30%;
    text-align: center;
    color: white;
    font-size: 30px;
}
.active {
    background-color: blue;
}
</style>
<body>
    <div class="icon-bar">
        <a href="#"><i class="fa fa-home"></i></a>
        <a href="#"><i class="fa fa-search"></i></a>
        <a class="active" href="#"><i class="fa fa-bars"></i></a>
    </div>
</body>
</html>

表示結果

上記のコードを実行すると、黒い背景の横型アイコンバーが表示され、中央のメニューアイコンがアクティブ状態（青色）になります。

CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説

縦型アイコンバーの作成例

次に、サイドバーナビゲーションなどに活用できる縦型のアイコンバーを作成します。横型との主な違いは以下の2点です。

  • バーの幅をwidth: 50pxで固定し、細長い形状にします。
  • リンクにdisplay: blockを指定することで、各アイコンが縦に積み重ねられます。
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
    width: 50px;
    background-color: black;
}
.icon-bar a {
    display: block;
    text-align: center;
    color: white;
    font-size: 30px;
}
.active {
    background-color: blue;
}
</style>
<body>
    <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-bars"></i></a>
    </div>
</body>
</html>

表示結果

このコードを実行すると、画面左側に縦長のアイコンバーが表示され、先頭のホームアイコンがアクティブ状態（青色）になります。

CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説

まとめ

アイコンバーは、floatとdisplay: blockの使い分けだけで、横型・縦型どちらのレイアウトも簡単に実装できます。.activeクラスの背景色やアイコンの種類を変更すれば、サイトのデザインに合わせたカスタマイズも自由自在です。ぜひご自身のプロジェクトでも試してみてください。

  1. CSSだけで作る！レスポンシブ対応のセクションカウンターの実装方法

    CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。 実装コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <l

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {