In 'n' Out | フォームのワイヤーフレームレイアウト

フォームを整える

ここではは、フォームにCSSを適用してレイアウトを整えていきます。
フォームは入力欄やボタンなど複数の要素で構成されており、CSSによる余白や幅の調整によって、見やすさや操作性が大きく変わります。
このセクションでは、基本的な装飾は行わず、要素同士の間隔や配置に注目します。
HTMLで定義された構造を活かしながら、CSSによって情報を整理し、使いやすいフォームレイアウトを作っていきます。
※フォームの組み立ての続きになります。

HTMLの状態を確認する

まず、HTMLのみで組み立てたフォームを確認しましょう。

修正ポイントについて説明します。
HTMLの際にも触れましたが、フォーム要素はほとんどインライン要素かインラインブロック要素ですので、横並びになっています。
このまま横並びでもいいのですが、スマートフォンを使っている場合、縦並びと横並びが混在するため視認性が下がるため統一します。
必須項目がわかりやすいように*を赤くします。
最後に入力欄がどれも同じ幅なので、空きが多くなることや、入力した内容が隠れてしまうことを考えて幅を調整していきます。

フォームのCSSを指定する

まずは項目とフォーム部品をすべて縦に並べます。

CSS追加コード

.formItem{
    margin-bottom: 8px;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], textarea{
    display: block;
}

radioボタンやcheckboxは、入力欄（textやemailなど）とは異なり、もともと横に並ぶ表示が基本となります。
今回はこれらの並びは変更せず、テキスト入力系のフォーム部品のみを対象に、縦に並ぶよう表示を調整します。
そのため、type属性を指定してinput要素をブロック要素に変更しています。
textareaだけはinputではないので、typeの指定は不要です。
さらに間隔が詰まっているため、親要素のdivをmarginで下に8px分余白を空けます。

次に必須項目の*を赤くしますが、*にHTML上でspanタグを追加します。

HTML修正コード

<section>
    <h2>会員登録</h2>
    <p><span>*</span>がついている項目は必須項目となります。</p>
    <form action="" method="post">
        <div class="formItem">
            <label for="name">お名前<span>*</span></label>
            <input id="name" name="name" type="text">
        </div>
                    ～省略～
        <div class="formItem">
            <p>当サイトを知ったきっかけ<span>*</span></p>
            <input id="search" type="checkbox" name="reason[]" value="検索サイト"><label for="search">検索サイト</label>
            <input id="ads"type="checkbox" name="reason[]" value="チラシ"><label for="ads">チラシ</label>
            <input id="invitation" type="checkbox" name="reason[]" value="友人・知人の紹介"><label for="invitation">友人・知人の紹介</label>
            <input id="shop" type="checkbox" name="reason[]" value="実店舗"><label for="shop">実店舗</label>
            <input id="SNS" type="checkbox" name="reason[]" value="SNS"><label for="SNS">SNS</label>
            <input id="other" type="checkbox" name="reason[]" value="その他"><label for="other">その他</label>
            <input id="inputText" type="text">
        </div>
        <div class="formItem">
            <label for="message">メッセージ（1500文字以内でお願いします。）</label>
            <textarea name="message" id="message"></textarea>
        </div>
        <button type="submit">登録</button>
        <button type="button">キャンセル</button>
    </form>
</section>

CSS追加コード

span{
    color: #ff0000;
}

これで*はすべて赤くなりました。
文字の頭に*がついているのであれば、first-letter疑似要素が使えますが、最初のp以外は末尾なので、一括指定するためspanタグを追加しました。

さらに入力部品の幅を調節していきます。
考え方としては入力想定文字数を可視化するために、placeholderを指定していくと幅が指定しやすくなります。

CSS追加コード

#name {
    min-width: 200px;
}

#born, #zip{
    min-width: 70px;
}

#address{
    min-width: 300px;
    width: 50%;
}

#tel{
    min-width: 90px;
}

#email, #confirmEmail {
    min-width: 300px;
    width: 50%;
}

#password{
    min-width: 150px;
}

#message{
    min-width: 300px;
    width: 100%;
    height: 80px;
}

住所・メールアドレスはこれ以上長くなることもあるのですが、スマートフォンでも使うことを考慮してmin-widthとしました。
なお、textareaは幅を最大幅、高さはおおよそ5行と考えて80pxとしましたが、テキストエリアはユーザー側が可変できるのでそこまで厳密にしなくとも問題ありません。

ここまでで、フォームのワイヤーフレームとしてのレイアウト調整は完了です。
あとはヘッダーとフッターをデザインカンプのものに差し替え、main全体を整えれば完成となります。

フォームはまだ使えない

完成したフォームは、HTMLとCSSによる見た目のデザインとスタイル調整までを扱っています。
入力欄やボタンの配置、色や文字サイズなど、フロントエンドとしての体裁は整っていますが、実際に送信したり確認画面を表示する機能はまだ実装されていません。
送信処理や確認画面の表示にはPHPなどのサーバーサイド処理が必要であり、入力値のチェックやバリデーションもJavaScriptなどを使って追加する必要があります。
そのため、現段階ではフォームとして完全に利用できる状態ではなく、あくまでデザインの確認用として完成したものだと理解してください。では、最後にここをクリックして書いた内容を確認してみてください。