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

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

スライド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