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

CSSでアイコン付きフォームを作成する方法を初心者向けに解説

Webサイトの会員登録フォームやログインフォームでは、入力欄の横にアイコンを表示すると、ユーザーが「何を入力すればよいのか」を直感的に把握でき、デザインの完成度も大きく向上します。

本記事では、アイコンフォントライブラリ「Font Awesome」と、CSSのFlexbox（フレックスボックス）を組み合わせて、アイコン付きの入力フォームを作成する方法を、実際に動作するサンプルコード付きで解説します。

実装のポイント

  • Font AwesomeのCSSファイルをCDN経由で読み込む
  • アイコンと入力欄を
    タグでまとめ、display: flex;で横並びに配置する
  • アイコン部分と入力欄のパディング・フォントサイズを揃え、違和感のないデザインに仕上げる

サンプルコード

以下は、ユーザー名・メールアドレス・パスワード・生年月日の4つの入力欄にそれぞれアイコンを付けた登録フォームの完全なコード例です。

<!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>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
    box-sizing: border-box;
}
h1 {
    text-align: center;
}
form {
    max-width: 500px;
    margin: auto;
}
.fieldContainer {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}
.icon {
    font-size: 30px;
    padding: 10px;
    background: rgb(11, 9, 116);
    color: white;
    min-width: 50px;
    text-align: center;
}
.field {
    font-size: 20px;
    width: 100%;
    padding: 10px;
    outline: none;
}
.field:focus {
    border: 2px solid dodgerblue;
}
.btn {
    font-size: 24px;
    background-color: rgb(20, 60, 170);
    color: white;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    border-radius: 8px;
}
.btn:hover {
    opacity: 1;
}
</style>
</head>
<body>
<h1>Register Form Example</h1>
<form action="/action_page.php">
<div class="fieldContainer">
<i class="fa fa-user icon"></i>
<input class="field" type="text" placeholder="Username" name="usrnm" />
</div>
<div class="fieldContainer">
<i class="fa fa-envelope icon"></i>
<input class="field" type="text" placeholder="Email" name="email" />
</div>
<div class="fieldContainer">
<i class="fa fa-key icon"></i>
<input class="field" type="password" placeholder="Password" name="pass"/>
</div>
<div class="fieldContainer">
<i class="fa fa-birthday-cake icon" aria-hidden="true"></i>
<input class="field" type="text" placeholder="Date of Birth" name="dob"/>
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>

コードの解説

1. Font Awesomeの読み込み

<link>タグを使って、CDNで公開されているFont Awesome 4.7.0のCSSを読み込んでいます。これにより、<i class="fa fa-user">のようにクラス名を指定するだけで、さまざまなアイコンを手軽に表示できます。

2. Flexboxによる横並びレイアウト

各入力欄は.fieldContainerというコンテナで囲み、display: flex;を指定することで、アイコン（.icon）と入力欄（.field)が横一列にきれいに並びます。また、* { box-sizing: border-box; }を設定しているため、パディングを含めてもレイアウトが崩れません。

3. フォーカス時の視覚的フィードバック

.field:focusに対して水色（dodgerblue）のボーダーを設定することで、ユーザーがどの入力欄を選択しているかひと目でわかるようになり、操作性が向上します。

4. 送信ボタンのホバー効果

送信ボタンにはopacityを使ったホバー効果を追加しています。マウスカーソルを重ねると透明度が変化し、クリック可能であることが直感的に伝わります。

出力結果

上記のコードをブラウザで開くと、各入力欄の左側に紺色のアイコンが配置された、次のような登録フォームが表示されます。

CSSでアイコン付きフォームを作成する方法を初心者向けに解説
  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