フォームのデザイン、コーディング作業で悩んでないですか？
この記事では、HTMLとCSSを学び始めたばかりで、メモ帳でコードを書いているような方にもわかりやすいように、CSSを使ってフォームを美しくカスタマイズする方法を解説します。
特に、フォームのテキスト入力項目、ラジオボタン、送信ボタンにフォーカスし、実際のコード例を交えながらデザインのカスタマイズ方法を紹介します。
シンプルかつ効果的なデザインを目指し、直感的に使いやすいフォームを作成するための簡単ガイドです。初心者でも取り入れやすいコツを学んで、あなたのウェブサイトのコーディングやデザインを一歩先へ進めましょう。
面倒くさいコーディング作業も、この記事を見れば少しは簡単になるかも。

フォームデザインの基本構造

フォームのデザインを考える前に、まず基本的なHTMLの構造を理解する必要があります。
フォームの要素として、テキスト入力項目、ラジオボタン、送信ボタンはよく使われる要素です。以下がその基本的なHTMLの例です。

<form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    
    <label for="gender">性別:</label>
    <input type="radio" id="male" name="gender" value="male"> 男性
    <input type="radio" id="female" name="gender" value="female"> 女性

    <button type="submit">送信</button>
</form>
テキスト入力項目、ラジオボタン、送信ボタン

このような基本のフォームにCSSを適用し、見た目を洗練させるためのステップを見ていきます。

テキスト入力項目のカスタマイズ

基本的なスタイルを適用する

テキスト入力フィールドは、ユーザーがデータを入力する最も重要な要素の一つです。
まずは基本的なスタイルを適用して、視覚的に見やすいデザインを作りましょう。

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
  • width: 100% はテキストフィールドを親要素の幅に合わせます。
  • padding: 10px でフィールド内のテキストに余白を持たせます。
  • border-radius: 5px によって角を丸くし、柔らかい印象を与えます。

これで、標準的なブラウザのデフォルトスタイルよりも洗練された見た目のテキストフィールドができあがります。

フォーカス時のスタイル

テキストフィールドにフォーカスが当たった時に視覚的に変化するデザインを追加します。
これにより、ユーザーがどのフィールドに入力しているかがわかりやすくなります。

input[type="text"]:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}
  • border-color でフォーカス時のボーダー色を変更。
  • box-shadow を追加し、フィールドがフォーカスされた際に少し浮き上がって見えるようにします。

このスタイルで、インタラクティブで使いやすい入力フィールドが実現します。

ラジオボタンのカスタマイズ

デフォルトスタイルからのカスタマイズ

ラジオボタンのデフォルトスタイルは非常にシンプルですが、CSSを使ってもっと魅力的にデザインできます。標準的なラジオボタンをよりスタイリッシュにするための基本的なカスタマイズ例です。

input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #007BFF;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    margin-right: 10px;
}

input[type="radio"]:checked {
    background-color: #007BFF;
    border-color: #007BFF;
}
  • appearance: none でデフォルトのブラウザスタイルを取り除きます。
  • border-radius: 50% を指定することで、ラジオボタンを円形にします。
  • checked ステートに色を付けることで、選択時に視覚的な変化を加えます。

カスタマイズしたラジオボタンにラベルを組み合わせる

ラジオボタンを使用する際、ユーザーが選択肢をわかりやすく理解できるように、ボタンにラベルを付けます。ラベルも含めてデザインをカスタマイズすることで、フォーム全体の見た目をさらに美しく整えることができます。

label {
    font-size: 16px;
    margin-right: 20px;
}

ラジオボタンとラベルを適切に間隔を空け、読みやすくするためにマージンを設定します。これにより、ラジオボタンの選択肢が一目でわかりやすくなり、全体として見た目もスマートになります。

送信ボタンのカスタマイズ

送信ボタンは、フォームの中で最もアクションを引き起こす要素です。
デフォルトのボタンはシンプルですが、CSSでカスタマイズすることで、より目を引くデザインにすることができます。

基本的なボタンスタイル

まず、ボタンに基本的なスタイルを追加していきます。

button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 300px;
    display: block;
    margin: 0 auto;
}
  • background-color でボタンの背景色を指定し、目立たせます。
  • border-radius で角を少し丸くし、柔らかい印象を与えます。
  • cursor: pointer で、ユーザーがボタンにカーソルを乗せた時にクリック可能であることを示します。

ホバーステートの追加

ボタンにマウスを乗せたときに少し変化を加えることで、ユーザーのインタラクションを促します。

button:hover {
    background-color: #218838;
}

ホバーステートでは、ボタンの背景色を少し濃くすることで、ユーザーがマウスを乗せたことを視覚的に確認できるようにします。

アクティブステートの追加

ボタンが押された時のアクティブ状態をデザインします。これにより、押された瞬間の反応が明確になります。

button:active {
    background-color: #1e7e34;
    transform: scale(0.98);
}

ボタンが押されたときに少し縮小される効果を加えることで、クリックした感覚が伝わりやすくなります。

フォーム全体の最適化

フォーム全体のレイアウト

フォーム全体を美しくまとめるために、以下のようにレイアウトを整えるCSSを適用します。

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
  • max-width: フォーム全体の幅を制限し、画面の中央に適切なサイズで配置します。
  • margin: 0 auto: 自動的にフォームを中央に配置します。
  • padding: フォーム内の要素に適切な余白を与え、見やすくします。
  • background-color: 背景に淡い色を追加し、コンテンツを強調します。
  • box-shadow: フォームの外側に影をつけて、立体感を持たせます。
フォーム

これで、テキスト入力フィールド、ラジオボタン、送信ボタンを含むフォームが美しく整ったデザインになります。CSSを使って細かい部分を調整することで、ユーザーにとって使いやすく、かつ魅力的なフォームを作成することができました。

▼カスタムチェックボックスを作ろう！CSSでのスタイリング方法完全ガイド
https://blog.form-mailer.jp/useful/custom_checkbox/

フォーム作成ツールだと難しい知識なしで簡単作成

フォーム作成ツールを利用すれば、HTMLやCSSの知識不要、コードを書く必要もありません。
特に「フォームメーラー」を利用すれば、ドラッグ＆ドロップの簡単操作でフォームをすぐに作成できるのでおすすめです。

ビジネスで成果を出すために必要な機能が満載で、入力内容が正しいかをリアルタイムでチェックする機能や、離脱を防止する機能、回答者にお礼メールなどを自動で返信する機能なども無料から利用可能。
選択肢による条件分岐を設定したフォームも5分で公開できるので、コードを自分で書く前にまずは試しにフォームメラーを利用してみてください。

フォームメーラー

▼フォームメーラー
https://www.form-mailer.jp/

フォームメーラー