コーポレートサイトをはじめとして、様々なWebサイトに、フォームはなくてはならないものです。しかし、デザイナーにとって、フォームのレイアウトはどちらかといえば「手間」に感じるのではないでしょうか。

フォームデザインは、未だにTABLEレイアウトを使ったり、場合によってはFloat、もう少し先駆的なデザイナーならFlexboxを使っているケースが多いようです。しかしながら、CSSグリッドによるデザイン手法はWebデザインの定着となりつつあるので、フォームのレイアウトもCSSグリッドを使う手法が主流になるでしょう。

そこで今回は、CSSグリッドを使ってフォームデザインを簡単にする方法をご紹介します。

厄介なセルの入れ替えも、CSSグリッドを使えば比較的簡単に行うことができます。ぜひ、その考え方や方法について確認してみましょう。
　　

フォームのレイアウトで生じる問題点

アンケートや問い合わせなど、フォームの設置はWeb開発にとって避けてとおれない道ですが、大抵の場合、その実装は楽で楽しいものというよりは、面倒で辛いと感じることのほうが多いのではないでしょうか。しかし、CSSグリッドを使えば、これまで困難だったことも解決できることがあります。

例えば、次のようなフォームを実装する方法を考えてみましょう。
スライド1.png

もし、CSSグリッドを使うかどうかに関係なく、一般的なフォームのコーディングを行うとしたら、どのようにマークアップしますか。

この場合、以下のようにマークアップすることができます。

<div>
　　<label for="name">お名前</label>
　　<input id="name" name="name" type="text" />
</div>

<div>
　　<label for="experience">経験年数</label>
　　<select id="experience" name="experience"><!-- options --></select>
</div>

<div>
　　<input id="html" name="html" type="checkbox" />
　　<label for="html">HTML</label>
</div>

<div>
　　<input id="css" name="css" type="checkbox" />
　　<label for="css">CSS</label>
</div>

<div>
　　<input id="javascript" name="javascript" type="checkbox" />
　　<label for="javascript">JavaScript</label>
</div>

このフィールドにCSSを適用したい場合に、様々な課題が見えてきます。

まず、ラベルとフィールドのソースコードの記述順がばらばらで、タイプによって変わっています。一般的に、ラベルはフィールドよりも前に来ますが、チェックボックスやラジオボタンでは後ろのほうがわかりやすくなります。タイプを変える場合には、マークアップ順を並べ替える必要があります。

また、inputやtextarea、selectなどの各要素でalignやsizeを統一するのは難しいものです。デフォルトでのスタイルを適用する場合には、ブラウザによって表示が変わってしまうことも考慮しなければなりません。

しかし、こうした課題はCSSグリッドを使えば解決することができます。秩序立ったHTMLを使ってフィールドの後にラベルを配置したり、自由自在に並べ替えたりすることができます。