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

CSSでアイコンボタンを作成する方法を徹底解説！サンプルコード付き

CSSを使えば、Font Awesomeなどのアイコンフォントと組み合わせて、見た目が美しく使いやすいアイコンボタンを簡単に作成できます。この記事では、実際のコード例をもとに、アイコンボタンの基本的な作り方と、ホバー（マウスオーバー）時に色が変化する演出の実装方法をわかりやすく解説します。

アイコンボタンのサンプルコード

以下は、CSSとFont Awesomeを使用してアイコンボタンを作成する完全なHTMLコードです。そのままコピー＆ペーストしてブラウザで開けば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<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>
button {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
   "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background-color: rgb(30, 173, 255);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 32px;
    cursor: pointer;
}
i {
    padding: 15px;
    color: rgb(33, 0, 109);
}
button:hover {
    background-color: rgb(81, 44, 148);
}
button:hover i {
    color: white;
}
</style>
</head>
<body>
<h1 style="font-size: 60px; font-family: Arial, Helvetica, sans-serif;">
Icon Buttons Example
</h1>
<button><i class="fa fa-home"></i>Home</button>
<button>
<i class="fa fa-phone-square" aria-hidden="true"></i>Call Us
</button>
<button><i class="fa fa-map-marker" aria-hidden="true"></i>Visit Us</button>
<button><i class="fa fa-cog" aria-hidden="true"></i>Settings</button>
<button><i class="fa fa-user-o" aria-hidden="true"></i>Login</button>
</body>
</html>

コードのポイント解説

  • Font Awesomeの読み込み：head内でCDN経由によりスタイルシートを読み込むことで、「fa fa-home」や「fa fa-cog」といったアイコンクラスが利用可能になります。
  • button要素のスタイリング：背景色・文字色・パディング・フォントサイズを指定してボタンのデザインを整え、「cursor: pointer」を設定することでクリック可能であることをユーザーに示しています。
  • ホバー効果の実装：「:hover」疑似クラスを使うことで、マウスカーソルを乗せた瞬間に背景色が濃い紫へと変化し、同時にアイコンの色も白色に切り替わる仕組みです。
  • aria-hidden属性：装飾目的のアイコンには「aria-hidden="true"」を付与することで、スクリーンリーダーなどの支援技術に不要な情報として認識させ、アクセシビリティを向上させています。

表示結果

上記のコードをブラウザで実行すると、Home・Call Us・Visit Us・Settings・Loginの5つのアイコンボタンが水色の背景で表示されます。

CSSでアイコンボタンを作成する方法を徹底解説！サンプルコード付き

ボタンにマウスカーソルを合わせると、背景色が濃い紫色に変化し、アイコンも白色に切り替わります。このようなホバーエフェクトを加えることで、ボタンがインタラクティブであることが直感的に伝わり、ユーザー体験の向上につながります。

CSSでアイコンボタンを作成する方法を徹底解説！サンプルコード付き

応用のヒント

さらにカスタマイズしたい場合は、「border-radius」を追加して角丸のボタンにしたり、「transition」プロパティを使って色の変化を滑らかにしたりすると、より洗練されたデザインになります。また、Font Awesomeのバージョン5以降ではクラス名の書き方が異なるため、使用するバージョンの公式ドキュメントを確認しておくと安心です。

  1. CSSでチャットメッセージを作成する方法をわかりやすく解説

    CSSを使えば、LINEやMessengerのようなチャットメッセージ画面を簡単に作成できます。この記事では、プロフィール画像・吹き出し・タイムスタンプ付きのチャットUIを実装する方法を、実際のコード例とともに解説します。 コード例 以下は、CSSでチャットメッセージを作成するための完全なコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <s

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

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