グリッチ

適切に設計されたフォームはユーザーに役立ち、コンバージョン率の向上につながります。小さな修正でも大きな違いを生むことができます。

これらのベスト プラクティスをチュートリアルで学習したい場合は、お支払いフォームのベスト プラクティスに関する Codelab と住所フォームのベスト プラクティスに関する Codelab をご覧ください。

以下に、すべてのベスト プラクティスを適用した支払いフォームの例を示します。

以下に、すべてのベスト プラクティスを適用したシンプルな住所フォームの例を示します。

たとえば、次の HTML は、1900 ～ 2020 年までの生年月日の入力を指定します。type="number" を使用すると、入力値は min と max で指定された範囲内の数値のみに制限されます。範囲外の数字を入力しようとすると、入力は無効な状態に設定されます。

次の例では、pattern="[\d ]{10,30}" を使用して有効な支払いカード番号を指定しながら、スペースを許可しています。

最新のブラウザでは、タイプが email または url の入力に対して基本的な検証も行われます。

CSS グリッド レイアウト

CSS グリッド レイアウトを使用すると、柔軟なグリッドを簡単に作成できます。前述のフローティングの例では、パーセンテージで列を作成する代わりに、グリッド レイアウトと fr 単位を使用できます。これは、コンテナ内の使用可能なスペースの一部を表します。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

グリッドを使用して、収まるだけ多くのアイテムを配置した通常のグリッド レイアウトを作成することもできます。画面サイズが小さくなると、使用可能なトラック数が減ります。このデモでは、各行に収まるカードをすべて配置し、最小サイズを 200px に設定しています。

CSS グリッド レイアウトの詳細

複数列レイアウト

一部のレイアウトでは、複数列レイアウト（マルチコラム）を使用できます。このレイアウトでは、column-width プロパティを使用して、レスポンシブな数の列を作成できます。このデモでは、別の 200px 列を追加できるスペースがある場合に列が追加されます。