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

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

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

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

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

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

アンケートや問い合わせなど、フォームの設置は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を使ってフィールドの後にラベルを配置したり、自由自在に並べ替えたりすることができます。
　　

CSSグリッドとは何か？

スライド2.png

CSSグリッド（CSS Grid Layout Module）は、CSSを使ってHTML要素を簡単に2次元レイアウトで操作できる、CSSの新しい機能です。格子状のマス目の形状をしたグリッドに、好きな順番に配置したり結合したりすることができます。

フォームのパーツは複雑ですが、CSSグリッドを使えば比較的思いどおりにレイアウトを行うことができます。レイアウトは全てCSS側で行うので、HTML側ではセマンティックに配置することができるのもメリットです。

言い換えれば、CSSグリッドを使うことで、HTMLの配置を変えずにCSS側だけでレイアウト操作をすることが可能になります。そのため、メンテナンスを行ってレイアウトを変更したくなった場合にも、HTMLとCSSの両方に手を加えるのではなく、CSS側だけを修正すればいいので、メンテナンスコストも大きく減るのです。
　　

CSSグリッドをフォームに実装する

最も基本的なレイアウトについて、具体例を使って確認をしてみましょう。

例えば、以下のように左に項目、右にアイテムを配置するようなフォームを作りたいと考えます。

スライド3.png

まず、formタグ全体にグリッドを適用します。

form {
　　display: grid;
　　grid-template-columns: 200px 1fr;
}

ここでgrid-template-columnsはカラム数と幅を決めますが、最初の200pxは左カラムの幅を200pxと指定して、1frは残り全ての幅を右に当てるという意味で使っています。

続いて、grid-columnを使って縦のラインの配置を作っていきますが、原則としてラベルは左、テキストボックスとボタンは右に配置したいので、grid-columnの指定は以下のようになります。

label {
　　grid-column: 1 / 2;
}

input, button {
　　grid-column: 2 / 3;
}

これは、下記の図に照らし合わせながら確認するとよいでしょう。

スライド4.png

ラベルは「1番目の線」と「2番目の線」の間に配置し、テキストボックスとボタンは「2番目の線」と「3番目の線」の間に配置する、という命令を、上のCSSで行っているということです。

列に関しては、何も指定しなければ上の要素から順に適用されていくので、ここでは特に指定しなくてもよいでしょう。順番を変える場合のみ、grid-rowプロパティを指定します。

最後に、項目と部品の間を空けるためにformタグにgrid-gapを指定すれば完成です。もちろん、Media Queryを使用すれば、スマートフォンなど特定のブレイクポイントを超えて幅が狭まった場合には1カラム表示をすることもできます。
　　

チェックボックスやラジオボタンのラベルの処理

ところが、残念なことに、これだけではチェックボックスやラジオボタンのラベルの位置が不自然に感じるかもしれません。こうした部品は、チェックボックスやラジオボタンの「前」ではなく「後ろ」にラベルを置くのが一般的だからです。

スライド5.png

この場所では、インラインで配列するのが一番てっとり早いはずです。次のコードでフィールドを元の位置に戻し、横幅を自動化して、設定したラベル幅に合うようにマージンを指定します。

input[type="checkbox"], input[type="radio"] {
　　width: auto;
　　margin-left: 10em;
}

兄弟セレクタを使うことで、チェックボックスやラジオボタンの後に来るラベルだけを拾ってスタイリングすることができます。

input[type="checkbox"] ~ label, input[type="radio"] ~ label {
　　width: auto;
　　padding-left: 0.4em;

}

あとは少しスタイリングを行えば、見栄えのいい美しいフォームの完成です。
　　

まとめ

Can I useによれば、Android系の一部ブラウザ以外では、ほとんどのブラウザがCSSグリッドをカバーしています。
※IE 11については、「-ms-」プレフィックスをつけることで作動します

CSSグリッドは、まるでエクセルのセルのように結合したり並び替えを行なったりできるので、フォームのデザインにも向いています。

Quackitでは、CSSグリッドを使ったフォームのデザインサンプルが公開されています。こちらも合わせてご覧いただくと、CSSグリッドを使ったフォームデザインのコツが掴めるでしょう。

参考：
CSS Grid Form Examples