知って便利に！CSSグリッドを使ってフォームデザインを簡単にする方法

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

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

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

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

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

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

例えば、次のような フォーム を実装する方法を考えてみましょう。

もし、 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 グリッドとは何か？

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

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

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

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

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

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

まず、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;
}

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

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

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

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

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

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

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

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