フォームを使ったページのレイアウト・デザインのコツを学習します。
モバイルファーストで作成する流れも含めて、モバイルフレンドリーなフォームのデザインを理解することが目的です。
一度、完成例を参考に、CSSでレイアウト・デザインしてみましょう。
不明な点や作成ポイントやコツの確認に、下記の作成手順を参考にするといいでしょう。
CSSファイルを新規作成
form.html専用のCSSファイルを新規作成します。
nyanroom
index.html
form.html
css
form.css（新規作成するファイル）
layout.css.css
destyle.css.css
form.htmlへ<link>するのも忘れずにしておきましょう。
<title>アンケートフォーム</title>
<link href="css/destyle.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link href="css/drawer.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
<link href="css/pagetop-link.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>レイアウト・デザイン作成ポイント・コツ
スマートフォン用のレイアウトとデザインを作成します。
一般的にはレイアウトのサイズから設定し、骨格となるレイアウトの作成、そこから各コンテンツの細かいレイアウト調整や文字装飾のデザインの順で作業しますが、フォームのページでは大きなレイアウトを組み立てることが少ないことと、ページ全体のレイアウト（ヘッダーやナビゲーションなど）はlayout.cssで設定済みなので、<main>部分から順に作成していくといいでしょう。
<header>の背面に隠れた<h1>の表示
まずは、<header>にpositionプロパティを使った影響で、<h1>と<p>の文章が<header>の背面に潜り込んでいます。
パディングを使って<header>の下部へ移動させておきます。
main{
width: 100%;
padding: 120px 1%;
}
<main>内で、左右の余白1%を開けています。
これで<main>内の文章が、画面の左右にくっつくのを防いでいます。
余白は大切でしたよね。
<h1>と<h2>の文字サイズ
モバイルデバイスのような、機種によって画面幅が違う場合、文字サイズを固定するよりも可変する方が、いい場合もあります。
「%」や「em」「rem」を使うこともありますが、見出しなどの大きい文字サイズであれば、「vmin」や「vmax」という単位を使うと、画面の大きさに合わせて文字サイズが変わるので便利です。
1vminや1vmaxは、画面の幅または高さが、一番小さい部分を100%とした「vmin」、一番大きい部分を100%とした「vmax」の、1%分の大きさになります。
h1{
font-size: 5vmin;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
h2{
font-size: 4.2vmin;
}見出しの文字が、1文字だけ改行されてカッコ悪いときは、コレで決まりです！
チェックボックスやラジオボタンの押しやすさ
チェックボックスやラジオボタンの間隔が狭いと、スマートフォンでボタンを選択するときに押し間違えてしまうことがあります。
操作のしやすさ・使いやすさ（ユーザビリティ）、嫌な思い（UX）をさせないためにも、しっかりと間隔を開けて選択しやすいレイアウトをする必要があります。
選択する項目が4項目あるので、2行2列、または4行1列でレイアウトするといいでしょう。
ここではFlexを使わずに、2行2列でレイアウトする方法を紹介しています。
#q1 label,
#q2 label{
display: inline-block;
width: 45%;
margin-bottom: 10px;
}
#q1 input[type="checkbox"],
#q2 input[type="radio"]{
margin-right: 10px;
}display:inline-blockを使うと、横並びと幅や余白の設定が可能になります。
<input>のtype属性ごとにデザインする場合は、セレクタがinput[type=”radio”]のような記述になるので覚えておきましょう。（この場所ではinputセレクタでも大丈夫です）
display:inline-blockを使うと、ボックスが横に並びますが、ボックス同士をピタッとくっつけて並べることができません。ボックスとボックスの間に、謎の余白ができるので注意が必要です。
リセットされたテキストフィールドの線を表示
destyle.cssを使うと、テキストフィールド・テキストエリア・セレクトメニュー・送信ボタンなどのborderプロパティがリセットされて表示されなくなります。
これは、ブラウザごとに異なる表示の違いをなくすために、非表示になっていますので、改めて線の表示と見た目の変更をする必要があります。
input,textarea,select{
border: 1px solid rgb(150, 150, 150);
}
textarea{
width: 100%;
}
button, input, select, textarea {
font-family : inherit;
font-size : 100%;
}2行目は線の表示、5行目はテキストエリアのサイズを可変にしています。
7~10行目は、destyle.cssを使ったときのフォームで必要になる記述なので、メモしておくといいでしょう。
リセットCSSを使用すると、フォームのパーツの書体や文字サイズが継承されないので必要になります。
リセットされたセレクトメニューのボタンを表示
destyle.cssを使うと、セレクトメニューのボタンも表示されなくなります。
これも、ブラウザごとに異なる表示の違いをなくすためですが、ボタンがないとセレクトメニューだということが、直感的にわかりません。
「appearance : menulist-buttom」を使うとボタンが表示されるので、覚えておきましょう。
#q3 label{
display: block;
width: 100%;
margin-bottom: 10px;
}
#q3 select{
appearance: menulist-button;
width: 100%;
padding: 5px;
}<label>と<select>を2行表示するために、display:blockを使いましたが、横に並べた状態でレイアウトしてもいいでしょう。
ポイントは、セレクトメニューのボタンを表示するCSSです。
送信ボタンのデザイン
送信ボタンは一番最後に押すボタンです。
このボタンが押しにくいと、何もなりません。押しやすく、わかりやすいボタンにしましょう。
display:blockにするのがポイントです。
input[type="submit"]{
display: block;
width: 90%;
padding: 10px;
margin: auto;
color:rgb(255,255,255);
text-align: center;
border-radius: 10px;
background-color: rgb(232, 175, 16);
font-weight: bold;
}display:blockで大きさや余白を変えることができます。
動画のボタンの色では、見出しの背景と同じでわかりにくいので変えています。
PC用のレイアウトを作成
スマートフォン用のレイアウトとデザインが完成したら、メディアクエリを記述してPC用のレイアウトとデザインを作成していきましょう。
@media screen and (min-width:960px){
}ブレイクポイントはlayout.cssやindex.cssと同じにしています。
チェックボックスやラジオボタンのレイアウトを変更
幅が広くなるPC用のデザインでは、チェックボックスやラジオボタンを見やすく、選びやすくなるように大きさやレイアウトを調整していきましょう。
#q1 label,
#q2 label{
display: inline-block;
width: 20%;
margin-bottom: 10px;
}3行目は継承されるので不要です。
幅の変更で列の数を調整しましょう。
テキストフィールドのレイアウトを変更
テキストフィールドの長さは注意が必要です。
入力文字数が多い住所などのテキストフィールドが短かったり、電話番号のような文字数がある程度決まっているようなテキストフィールドが長すぎたりするのは、見た目にもブサイクでスペース的にも無駄です。
入力する内容に適切な大きさになるように、CSSでコントロールしていきましょう。
#q4 label{
display: inline-block;
width: 20%;
margin-bottom: 10px;
}
#q4 input{
margin-bottom: 15px;
width: 30%;
}2行目はblockからinline-blockに上書きし、横に並べています。
複数のlabelは幅を設定することで、テキストフィールドの左端が揃います。