フォーム部品のスタイリングは難しい？基本的な方法やポイントについて解説！

INDEX

はじめに
1. この記事の対象者
2. この記事で学べること
お問い合わせページのデザイン
お問い合わせページのスタイリング
次のステップ

はじめに

この記事は「お問い合わせフォームを作ってみよう」チュートリアルの一部であり、このチュートリアルの【CSSスタイリング編】として書かれています。

この記事では、「お問い合わせフォームを作ってみよう【HTMLマークアップ編】」で作成したお問い合わせページをCSSでスタイリングし、フォーム部品をスタイリングするための基本的な方法やポイントについて学びます。

フォーム部品はCSSによるスタイルの変更ができないものもいくつかあり、ブラウザやユーザーの環境によっても表示が変わることが多いです。それらの基本的な対策も含めて解説いたします。

この記事の対象者

ウェブ制作初心者の方
お問い合わせページを作りたい方

この記事で学べること

フォーム部品の基本的なスタイリング方法
フォーム部品をスタイリングする際の注意点

お問い合わせページのデザイン

ここでは以下のデザインになるようにスタイリングを行います。ダサいと思ったら適宜修正を加えてみても良いと思います。

お問い合わせページのスタイリング

ここでは以下の手順でスタイリングを行っていきます。

ページ全体の基本設定とスタイリング
フォーム部品のリセット
フォーム部品の基本設定
各フォーム部品のスタイリング

それでは始めましょう。

ページ全体の基本設定とスタイリング

まずはページ全体の基本設定とスタイリングを行います。前回作成したHTMLファイルと同じディレクトリに style.css というCSSファイルを作成し、以下を記述します。

@charset "UTF-8";

/* ================
基本設定
================ */
body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  background-color: #fefeef;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* ================
ページ全体のスタイル
================ */
header {
  padding: .5em 1em;
  background-color: #fff;
  box-shadow: -5px 1px 5px rgba(0, 0, 0, 0.1);
}

main {
  width: calc(100% - 2em);
  max-width: 768px;
  margin: 0 auto 6em;
}

footer {
  text-align: center;
  padding: 1em 0;
  background-color: #fff;
  box-shadow: -5px -1px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  padding: 2em 0;
}

form {
  background-color: white;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2em 1em;
}

.form-ttl {
  font-weight: bold;
  display: block;
  width: fit-content;
  margin-bottom: 0.5em;
}

.form-item {
  padding: 1em 0.5em 2em;
}

.form-item {
  border-bottom: 1px solid #bba;
}

fieldset label {
  font-weight: 500;
}

.required {
  font-size: 0.75em;
  font-weight: bold;
  color: #f03030;
  margin-left: 1em;
}

.example-txt {
  color: #888;
  font-size: 0.875em;
  margin-bottom: .5em;
}

.policy-check-wrap {
  text-align: center;
  margin: 2em 0 3em;
  font-size: 0.875em;
}

.btn-wrap {
  text-align: center;
}

@media screen and (min-width: 768px) {
  main {
    width: calc(100% - 4em);
  }

  form {
    padding: 3em;
  }
  
  .form-ttl {
    font-size: 1.25em;
  }
  
  .form-item {
    padding: 1em 1em 2em;
  }
  
  .policy-check-wrap {
    font-size: 1em;
  }
}

ページの見た目を整えるためにレスポンシブ対応や簡単なスタイリングを行っていますが、本筋と離れた内容になるのでこの記事での解説は割愛します。

ポイントについてのみ解説します。この例では、アクセシビリティへの配慮として font-size や margin 、 padding などの値を em 値で行っています。

ウェブページを閲覧する際、ユーザーによっては文字が読みにくい、タップ・クリックがしづらいなどの理由から文字サイズの設定を変更していることも考えられます。

px 値で指定するとユーザー側での文字サイズの設定が反映されないため、ユーザーに対して不便を掛ける可能性があります。

ウェブフォームはユーザーとのコミュニケーションとしての役割を持っているので、配慮に欠ける実装はユーザーから好ましく思われないでしょう。

文字サイズや余白を em や rem などの相対値で指定することにより、ユーザー側の文字サイズの設定に応じたスタイルを実装することができます。

お問い合わせページは相対値で指定することが一般的というわけでもないですが、アクセシビリティの観点からウェブサイト全体の構成として文字サイズや余白、要素のサイズ指定に px 値を使用しないというケースは考えられるので、このような構築方法があることを覚えておくと良いと思います。

ブラウザで確認すると以下のように表示されます。

ページ全体の基本設定とスタイリングができました。続いて、フォーム部品のリセットを行います。

フォーム部品のリセット

フォーム部品はウェブブラウザやデバイスによってデザインが異なります。また、要素によってはスタイルを変更することができないものもあるので、各デバイスで完全に同じデザインになるようにスタイリングすることはできません。

しかし、ブラウザにデフォルトで定義されているユーザーエージェントスタイルシートをリセットし、新たにスタイリングを行うことで、ブラウザ間でのスタイルをある程度統一することはできます。

ここでは、以下のようにフォーム部品のリセットを行います。

/* ================
フォーム部品
================ */
/* フォーム部品のリセット */
fieldset,
legend,
button,
select,
input[type="text"],
input[type="email"],
input[type="checkbox"],
input[type="radio"],
textarea {
  border: none;
  outline: none;
  background: none;
  appearance: none;
}

button:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
textarea:focus {
  outline: none;
}

今回使用しているフォーム部品に対して、 border 、 outline 、 background 、 appearance を none にしています。

appearance はデバイスのOS（Windows、MacOS、Android等）側でスタイルが定義されています。ここではチェックボックスやラジオボタン、ドロップダウンメニューの矢印が該当します。「 appearance: none; 」とすることで、これらのスタイルをリセットして再定義できるようになります。

また、 button 、 select 、 input 、 textarea にフォーカスが当たると outline が表示される場合があるので、「 :focus 」疑似クラスを使用してこれらもリセットしています。

ブラウザで確認すると以下のように表示されます。フォーム部品が非表示になったように見えますが要素そのものはちゃんと配置されています。

続いて、フォーム部品の基本設定を行います。

フォーム部品の基本設定

ページ全体の基本設定とスタイリングでレイアウトはほとんど完成していますが、フォーム部品に関してはほとんど設定していません。

ここでは以下のように設定を行います。

/* フォーム部品の基本設定 */
select,
option,
input,
textarea {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1em;
  font-weight: 500;
}

textarea {
  overflow: auto;
  resize: none;
}

label,
input[type="checkbox"],
input[type="radio"],
button {
  cursor: pointer;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}

上から順番に解説します。以下は主要なフォーム部品の文字設定を行っています。

select,
option,
input,
textarea {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1em;
  font-weight: 500;
}

ページ全体の基本設定で body 要素に対して font-family を定義しましたが、入力フィールド等では適用されない場合があるので明示的に定義しています。

また、デバイスによっては文字が小さくなったり線が細く見えたりする場合があるので、こちらも調整しています。

以下は textarea の基本設定です。

textarea {
  overflow: auto;
  resize: none;
}

textarea の入力フィールドは、デフォルトではユーザー側でサイズを変更できる場合があります。場合によってはフォームのレイアウトを崩すことになるので、「 resize: none; 」とすることでサイズ変更ができないようにしています。

また、 overflow のデフォルト値もブラウザによって違う場合があるので、明示的に auto としています。

続いて、 label やチェックボックス、ラジオボタン、ボタン要素に以下の設定をしています。

label,
input[type="checkbox"],
input[type="radio"],
button {
  cursor: pointer;
}

これらはクリックできる要素ですが、デフォルトでは hover してもカーソルが変わりません。

「 cursor: pointer; 」とすることでユーザーがクリック可能であることを理解しやすくなります。

fieldset には以下の設定をしています。

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

フォーム部品の基本設定とは異なりますが、ラジオボタンやチェックボックスの項目が多い場合でも簡単にレイアウトを整えられるテクニックなのでこちらに記述しました。

本筋とは異なるので解説は割愛しますが、フレックスボックスの基本が分かれば使いどころも理解できると思います。

フレックスボックスについては以下の記事で解説しています。

テキストフィールドには以下の設定をしています。

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}

入力フィールドは親要素に合わせて幅を設定するようにしています。

各部品を px 値で指定すると、画面幅によっては横スクロールが発生する可能性があり、使いにくいお問い合わせフォームという印象を与えてしまいます。

フォーム部品の基本設定は以上です。続いて、各フォーム部品のスタイリングを行います。

各フォーム部品のスタイリング

各フォーム部品のスタイリングは以下の順番で行います。

ドロップダウンメニュー
テキストフィールド
ラジオボタン・チェックボックス共通
ラジオボタン
チェックボックス
送信ボタン

ここではクラス名を付けずに select 、 input 、 textarea などのタイプセレクタを使用します。

理由として、フォーム部品のリセットをハードに掛けているため、スタイルが適用されていない場合にブラウザ上で input 要素などが視認できなくなっています。

配置したはずのフォーム部品が表示されていなければコーダーは原因を特定するために消耗することになるため、表示の確認ができないほどハードなリセットを掛けている場合はフォーム部品をリセットしたセレクタと同じセレクタを使用してスタイリングする方が良いと思います。

それではドロップダウンメニューのスタイリングから行っていきます。

ドロップダウンメニューのスタイリング

select 要素、 option 要素を使用したドロップダウンメニューは、デバイスによってスタイルが決定されている部分が多く、基本的にはメニューが閉じている状態にしかスタイリングができません。

具体的には、 option 要素に対して background や color 、 font-size などのプロパティはWindows環境でモダンなブラウザを使用していれば適用されますが、ブラウザやOSによっては制御できない可能性があります。また、 padding や border 、 position などは恐らくほとんどの環境で適用されません。

どうしてもドロップダウンメニューの中身を細かくスタイリングする必要がある場合は、「select要素とoption要素を使用しない」という手段もあります。

この手法はJavaScriptや少し特殊なHTMLマークアップが必要になります。興味のある方は調べてみると良いでしょう。

ここでは、ドロップダウンメニューが閉じた状態にのみスタイリングを行います。以下のように記述します。

/* ドロップダウンメニューのスタイル */
select {
  border: 1px solid #bba;
  border-radius: 0.25em;
  padding: 1em 2em 1em 1em;
}

select:focus {
  outline: 1px solid #bba;
}

select 要素に対して border 、 border-radius 、 padding を設定しています。また、フォーカスされている状態では border と同じ色の outline を追加し、枠線が太くなるように指定しています。

現状では以下のように表示されます。

このままでは、ユーザーにとってこれがドロップダウンメニューであることが分かりません。これは、リセットで「 appearance: none; 」を設定したため、デフォルトの矢印アイコンが非表示になることが原因です。

「 appearance: auto; 」を指定することでマークを再表示させることもできますが、ユーザーの環境によってはデザインが異なる場合があります。

一般的な解決法として、疑似要素を使用して矢印アイコンを表現します。 select 要素は疑似要素が使用できないので、 select 要素を div 要素で囲うことで疑似要素が使用できるようになります。 index.html を修正しましょう。

<label for="type" class="form-ttl">お問い合わせの種類</label>
<div class="select-wrap">
  <select id="type" name="type">
    <option value="learn">ウェブ制作の学び方について</option>
      <option value="article">記事の内容について</option>
      <option value="site">このサイトの使い方について</option>
      <option value="admin">このサイトの管理者について</option>
  </select>
</div>

ここでは、 select 要素を select-wrap というクラス名を付けたdiv要素で囲いました。 select-wrap に対して以下のようにスタイリングを行います。

.select-wrap {
  position: relative;
  width: fit-content;
}

.select-wrap::before {
  content: "▼";
  position: absolute;
  color: #bba;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}

ここでは矢印アイコンを「▼」で表現しています。また、 select-wrap に対して「 width: fit-content; 」を指定しているため、 select-wrap の幅は select と同じになります。

疑似要素に関しては以下の記事で解説しています。疑似要素がよく分からないという方は参考にしてください。

ドロップダウンメニューのスタイリングが完成しました。以下のように表示されます。

続いて、テキストフィールドのスタイリングを行います。

テキストフィールドのスタイリング

テキストフィールドのスタイリングはドロップダウンメニューに比べて自由度が高いので、それほど実装に苦労することはないでしょう。

このお問い合わせフォームには以下のテキストフィールドがあります。

お名前入力欄
メールアドレス入力欄
お問い合わせ内容入力欄

デザインの一貫性や保守性の観点から、これらのテキストフィールドには同じスタイリングを行います。以下のように記述します。

input[type="text"],
input[type="email"],
textarea {
  border: 1px solid #bba;
  border-radius: 4px;
  padding: 0.5em;
  background: #fefeef;
  box-shadow: inset 1px 1px 3px #c8c4aa;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: 1px solid #c8c4aa;
  background: #fffff2;
}

CSSセレクタは「 [属性名=”値”] 」とすることで、特定の属性値を持った要素に限定してスタイルを適用することができます。

お名前入力欄に使用している input 要素には「 type=”text” 」を指定しており、メールアドレス入力欄には「 type=”email” 」を指定しています。また、お問い合わせ内容入力欄は textarea 要素を使用しているので、これらの要素にのみスタイルを適用しています。

テキストフィールドのスタイリングはフォーカス状態でのスタイルを定義することも重要です。これにより、ユーザーは自然と入力ができる状態であることを認識できます。

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: 1px solid #c8c4aa;
  background: #fffff2;
}

フォーカス時のスタイルを過剰に変更するとユーザーに違和感を与える可能性があるので注意しましょう。

テキストフィールドのスタイリングができました。以下のように表示されます。画像では少し分かりにくいですが、お名前入力欄にフォーカスが当たっています。

テキストフィールドのスタイリングは以上です。

現状ではリセットによってラジオボタンとチェックボックスは表示されていません。次にラジオボタン・チェックボックス共通のスタイリングを行います。

ラジオボタン・チェックボックス共通のスタイリング

ラジオボタンとチェックボックスは形状は異なりますが、大きさや枠線の色、ラベルとの余白などは共通化した方が管理がしやすく、デザインに一貫性が生まれます。

どこまで共通化するかはデザインにもよりますが、今回のデザインでは形状とチェック時のスタイル以外は共通化していきます。

以下のように記述します。

/* ラジオボタン・チェックボックス
   共通ののスタイル 　　　　      */
input[type="radio"],
input[type="checkbox"] {
  border: 1px solid #bba;
  width: 1.25em;
  height: 1.25em;
  position: relative;
  top: 0.25em;
  margin-right: 0.5em;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 1px solid #bba;
}

枠線とボタンの大きさ、位置と余白の設定を行っています。

位置の指定について、「 position: relative; 」を指定することで top プロパティを扱うことができます。本来の描画位置を基準にして調整でき、他の要素にも影響を与えないので便利です。

ラジオボタン・チェックボックス共通のスタイリングができました。以下のように表示されます。

現状ではボタンをクリックしてもチェックされたことが分からず、ラジオボタンとチェックボックスの見た目も同じになっています。

まずはラジオボタンのスタイリングから行います。

ラジオボタンのスタイリング

ラジオボタンの形状は一般的に正円です。この形状を独自のものに変更することは、ラジオボタンであることをユーザーに正しく認識してもらえない可能性があるため勇気のいる判断です。

ここでは、一般的な正円のラジオボタンを実装します。以下のように記述します。

/* ラジオボタンのスタイル */
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  border-width: 0.375em;
}

セレクタを「 input[type=”radio”] 」と指定することで、ラジオボタンにのみスタイルを適用させることができます。また、「 border-radius: 50%; 」によりラジオボタンが正円になります。

「 input[type=”radio”]:checked 」と指定することで、ラジオボタンがチェックされた時のスタイルを定義することができます。ここでは、 border-width を指定して枠線を太くしています。

ラジオボタンのスタイリングができました。以下のように表示されます。「男性」にチェックを入れています。

続いて、チェックボックスのスタイリングを行います。

チェックボックスのスタイリング

チェックボックスのスタイリングも基本的にはラジオボタンと同じ方法で行います。ここでの違いは、チェック時のチェックマークは疑似要素を使用します。

以下のように記述します。

/* チェックボックスのスタイル */
input[type="checkbox"] {
  border-radius: 0.25em;
}

input[type="checkbox"]::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.125em;
  left: 0.375em;
  width: 0.5em;
  height: 1em;
  border-bottom: 0.25em solid #bba;
  border-right: 0.125em solid #bba;
  border-radius: 0.25em;
  transform: rotate(45deg);
  visibility: hidden;
}

input[type="checkbox"]:checked::before {
  visibility: visible;
}

「 input[type=”checkbox”] 」にはラジオボタンと共通のスタイリングの時に「 position: relative; 」を指定しているので、疑似要素の位置は「 position: absolute; 」と top 、 left で指定しています。関連する値を em で指定しているので文字サイズに応じてチェックボックスの大きさも変わりますが、スタイルを崩すことはありません。

チェックマークの形状は border-bottom と border-right 、 width 、 height 、 border-radius で表現しています。

input[type="checkbox"]::before {
  …
  /* チェックマークの形状 */
  width: 0.5em;
  height: 1em;
  border-bottom: 0.25em solid #bba;
  border-right: 0.125em solid #bba;
  border-radius: 0.25em;
  transform: rotate(45deg);
  …
}

また、「 visibility: hidden; 」とすることでチェックマークを非表示にし、「input[type=”checkbox”]:checked::before」に対して「 visibility: visible; 」を指定してチェックボックスがチェックされた時にチェックマークを表示されるようにしています。

nput[type="checkbox"]::before {
  …
  visibility: hidden;
}

input[type="checkbox"]:checked::before {
  visibility: visible;
}

チェックボックスのスタイリングができました。以下のように表示されます。

続いて、送信ボタンのスタイリングを行います。

送信ボタンのスタイリング

今回は button タイプセレクタを使用して送信ボタンを実装しています。

button 要素は一般的な要素と同じようにスタイリングすることができるので、あまりスタイリングに苦労することはないと思います。

ここでは以下のようにスタイリングを行います。

/* 送信ボタンのスタイル */
button {
  padding: 1em 2em;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 0.5em;
  background-color: #446;
  box-shadow: 1px 1px 3px #446;
  color: #fff;
  transition:
    color .3s ease,
    background-color .3s ease,
    outline-color .3s ease;
}

button:hover {
  color: #446;
  background-color: #fff;
  outline: 2px solid #446;
}

ユーザーがクリック出来る状態であることを認識しやすいように hover 時のスタイルを定義しています。また、簡易的ですが transition プロパティでアニメーションを実装しています。

送信ボタンのスタイリングができました。以下のように表示されます。

ここではあまり複雑なスタイリングはしていませんが、送信ボタンに button 要素を使用することでアイコンや画像、他のHTML要素などを含めることができます。

「 input type=”submit” 」と比べて機能的な違いはなく、柔軟なスタイリングを行うことができるので、送信ボタンを実装する際は button 要素を使用することがオススメです。

これでお問い合わせページのスタイリングが完了しました。

全体のコードは以下です。

サンプルコードの全体

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>LOGO</h1>
  </header>

  <main>
    <h2>お問い合わせ</h2>
    <form id="form" action="" method="GET">

      <div class="form-item">
        <label for="type" class="form-ttl">お問い合わせの種類</label>
        <div class="select-wrap">
          <select id="type" name="type">
            <option value="learn" selected>ウェブ制作の学び方について</option>
            <option value="article">記事の内容について</option>
            <option value="site">このサイトの使い方について</option>
            <option value="admin">このサイトの管理者について</option>
          </select>
        </div>
      </div>

      <div class="form-item">
        <label for="name" class="form-ttl">お名前<span class="required">必須</span></label>
        <p class="example-txt">例：山田　太郎</p>
        <input type="text" id="name" name="name" required>
      </div>

      <div class="form-item">
        <fieldset>
          <legend class="form-ttl">性別</legend>
          <label for="male"><input type="radio" id="male" name="gender" value="male">男性</label>
          <label for="female"><input type="radio" id="female" name="gender" value="female">女性</label>
        </fieldset>
      </div>

      <div class="form-item">
        <label for="email" class="form-ttl">メールアドレス<span class="required">必須</span></label>
        <p class="example-txt">例：hogehoge@example.com</p>
        <input type="mail" id="email" name="email" required>
      </div>

      <div class="form-item">
        <fieldset>
          <legend class="form-ttl">学習中の言語</legend>
          <label for="html"><input type="checkbox" id="html" name="learning" value="html" checked>HTML</label>
          <label for="css"><input type="checkbox" id="css" name="learning" value="css">CSS</label>
          <label for="javascript"><input type="checkbox" id="javascript" name="learning" value="javascript">JavaScript</label>
          <label for="php"><input type="checkbox" id="php" name="learning" value="php">PHP</label>
        </fieldset>
      </div>

      <div class="form-item">
        <label for="content" class="form-ttl">お問い合わせ内容<span class="required">必須</span></label>
        <textarea id="content" name="content" rows="20" required></textarea>
      </div>

      <div class="policy-check-wrap">
        <label for="policy-check">
          <input
            type="checkbox"
            id="policy-check"
            name="policy-check"
            required>個人情報保護方針に同意します。
        </label>
      </div>

      <div class="btn-wrap">
        <button type="submit" id="submit">お問い合わせ内容を送信</button>
      </div>

    </form>
  </main>

  <footer>&copy;copyright.</footer>
</body>
</html>

style.css

@charset "UTF-8";

/* ================
基本設定
================ */
body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  background-color: #fefeef;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* ================
ページ全体のスタイル
================ */
header {
  padding: .5em 1em;
  background-color: #fff;
  box-shadow: -5px 1px 5px rgba(0, 0, 0, 0.1);
}

main {
  width: calc(100% - 2em);
  max-width: 768px;
  margin: 0 auto 6em;
}

footer {
  text-align: center;
  padding: 1em 0;
  background-color: #fff;
  box-shadow: -5px -1px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  padding: 2em 0;
}

form {
  background-color: white;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2em 1em;
}

.form-ttl {
  font-weight: bold;
  display: block;
  width: fit-content;
  margin-bottom: 0.5em;
}

.form-item {
  padding: 1em 0.5em 2em;
}

.form-item {
  border-bottom: 1px solid #bba;
}

fieldset label {
  font-weight: 500;
}

.required {
  font-size: 0.75em;
  font-weight: bold;
  color: #f03030;
  margin-left: 1em;
}

.example-txt {
  color: #888;
  font-size: 0.875em;
  margin-bottom: .5em;
}

.policy-check-wrap {
  text-align: center;
  margin: 2em 0 3em;
  font-size: 0.875em;
}

.btn-wrap {
  text-align: center;
}

@media screen and (min-width: 768px) {
  main {
    width: calc(100% - 4em);
  }

  form {
    padding: 3em;
  }
  
  .form-ttl {
    font-size: 1.25em;
  }
  
  .form-item {
    padding: 1em 1em 2em;
  }
  
  .policy-check-wrap {
    font-size: 1em;
  }
}

/* ================
フォーム部品
================ */
/* フォーム部品のリセット */
fieldset,
legend,
button,
select,
input[type="text"],
input[type="email"],
input[type="checkbox"],
input[type="radio"],
textarea {
  border: none;
  outline: none;
  background: none;
  appearance: none;
}

button:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
textarea:focus {
  outline: none;
}

/* フォーム部品の基本設定 */
select,
option,
input,
textarea {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1em;
  font-weight: 500;
}

textarea {
  overflow: auto;
  resize: none;
}

label,
input[type="checkbox"],
input[type="radio"],
button {
  cursor: pointer;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}

/* ドロップダウンメニューのスタイル */
select {
  border: 1px solid #bba;
  border-radius: 0.25em;
  padding: 1em 2em 1em 1em;
}

select:focus {
  outline: 1px solid #bba;
}

.select-wrap {
  position: relative;
  width: fit-content;
}

.select-wrap::before {
  content: "▼";
  position: absolute;
  color: #bba;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}

/* テキストフィールドのスタイル */
input[type="text"],
input[type="email"],
textarea {
  border: 1px solid #bba;
  border-radius: 0.25em;
  padding: 0.5em;
  background: #fefeef;
  box-shadow: inset 1px 1px 3px #c8c4aa;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: 1px solid #c8c4aa;
  background: #fffff2;
}

/* ラジオボタン・チェックボックス
   共通ののスタイル       　　　　*/
input[type="radio"],
input[type="checkbox"] {
  border: 1px solid #bba;
  width: 1.25em;
  height: 1.25em;
  position: relative;
  top: 0.25em;
  margin-right: 0.5em;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 1px solid #bba;
}

/* ラジオボタンのスタイル */
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  border-width: 0.375em;
}

/* チェックボックスのスタイル */
input[type="checkbox"] {
  border-radius: 0.25em;
}

input[type="checkbox"]::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.125em;
  left: 0.375em;
  width: 0.5em;
  height: 1em;
  border-bottom: 0.25em solid #bba;
  border-right: 0.125em solid #bba;
  border-radius: 0.25em;
  transform: rotate(45deg);
  visibility: hidden;
}

input[type="checkbox"]:checked::before {
  visibility: visible;
}

/* 送信ボタンのスタイル */
button {
  padding: 1em 2em;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: .5em;
  background-color: #446;
  box-shadow: 1px 1px 3px #446;
  color: #fff;
  transition:
    color .3s ease,
    background-color .3s ease,
    outline-color .3s ease;
}

button:hover {
  color: #446;
  background-color: #fff;
  outline: 2px solid #446;
}

次のステップ

「お問い合わせフォームを作ってみよう【HTMLマークアップ編】」で作成したHTMLをCSSでスタイリングし、フォーム部品をスタイリングする基本的な方法やポイントについて学びました。

ドロップダウンメニューのスタイリングは出来ることと出来ないことがあるため、それを知らずにスタイリングを行うと多くの時間と労力を消耗します。

また、少し変わったフォーム部品を扱う場合もスタイリングできない可能性があるため注意が必要です。

次のステップの「お問い合わせフォームを作ってみよう【バリデーションチェック編（HTML）】」では、これまで作ってきたお問い合わせフォームにバリデーションチェックを実装していきます。バリデーションチェックの概要を学び、HTML要素に属性を追加してバリデーションチェックの実装を行います。

バリデーションチェックを適切に行うことで、ユーザビリティやセキュリティの向上、サーバーの負荷軽減などが期待できます。HTMLでのバリデーションチェックの実装は比較的簡単なので参考にしてください。