table要素でお問い合わせフォームを作成する方法
私は個人のブログに加えて会社のホームページも作成していますが、コーポーレートサイトで重要なのがこのお問い合わせフォームです。お客様からの反響やお問い合わせをもれなくキャッチするためには、お客様にとって分かりやすく、入力しやすいフォームを設置しておくことが大事です。今回は、まずは一番シンプルにtable要素でお問い合わせフォームを作成する方法をご紹介します。
余談ですが、table要素はそもそも何らかのデータを表形式で掲載するためのタグだと思いますので、お問い合わせフォームにtable要素を使うべきなのかは一旦脇に置いておきます。最も手軽で簡単にお問い合わせフォームを作成するということを考えると、やっぱりtable要素が最適かなとは思いますが。
HTML
さて、そんなことはいいとして、早速HTMLから見ていきましょう。
<table class="inquiry">
<tbody>
<tr>
<th>お名前</th>
<td><input type="text" /></td>
</tr>
<tr>
<th>電話番号</th>
<td><input type="tel" /></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" /></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea></textarea></td>
</tr>
</tbody>
</table>余計なことは考えずに、とりあえずシンプルにこのようなHTMLで進めていきます。よく見かけるタイプのフォームですが、項目と入力欄がそれぞれ並んでいる形式です。このフォームのデザインをCSSで整えていきます。
CSS
.inquiry {
--color-pale-gray: #c7ccd1;
inline-size: 100%;
border: 1px solid var(--color-pale-gray);
border-collapse: collapse;
& tr {
border-block-end: 1px solid var(--color-pale-gray);
&:last-child {
border-block-end: none;
}
}
:is(th, td) {
display: block;
padding: 1rem;
@media (width >= 1024px) {
display: table-cell;
}
}
& th {
text-align: left;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border-block-end: 1px solid var(--color-pale-gray);
@media (width >= 1024px) {
inline-size: 24%;
border-inline-end: 1px solid var(--color-pale-gray);
}
}
& td {
@media (width >= 1024px) {
inline-size: 76%;
}
}
}
input {
&:is([type="text"], [type="tel"], [type="email"]) {
padding-block: 1rem;
padding-inline: 0.75rem;
inline-size: 100%;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border: none;
border-radius: 2px;
box-sizing: border-box;
}
}
textarea {
padding-block-start: 1rem;
padding-block-end: 10rem;
padding-inline: 0.75rem;
display: block;
inline-size: 100%;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border: none;
border-radius: 2px;
box-sizing: border-box;
resize: vertical;
}最低限の見た目をデザインするだけでも割と長くなってしまいましたが、大事なポイントに絞って解説していきます。その前に、先にどんな感じになるか見てください。
See the Pen Untitled by ryskyshd (@ryskyshd) on CodePen.
table全体
--color-pale-gray: #c7ccd1;
inline-size: 100%;
border: 1px solid var(--color-pale-gray);
border-collapse: collapse;一行目はカスタムプロパティでカラーを定義しています。次は横幅ですが、親要素の横幅いっぱいに広がるようにinline-size: 100%;を指定しておきます。次にtable全体に枠線を付けます。最後のborder-collapse: collapse;は、この指定がないとテーブル全体の枠線が二重線になりますのでこれを入れて通常の枠線になるようにしています。
tr部分
tr {
border-block-end: 1px solid var(--color-pale-gray);
&:last-child {
border-block-end: none;
}
}tr部分はブロックのエンド方向（通常であれば下）にborderを指定します。:last-childで打ち消しているのは、表全体の枠線と被るためです。
th/td共通部分
:is(th, td) {
display: block;
padding: 1rem;
@media (width >= 1024px) {
display: table-cell;
}
}このスタイルはモバイルファーストで書かれています。モバイルでは項目名と入力欄が縦積みになるようにdisplay: block;を指定します。また、見やすくするために1remの余白を設けます。次にメディアクエリを使ってビューポートが1024px以上になるとdisplay: table-cell;で通常の横並びにします。
th部分
th {
text-align: left;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border-block-end: 1px solid var(--color-pale-gray);
@media (width >= 1024px) {
inline-size: 24%;
border-inline-end: 1px solid var(--color-pale-gray);
}
}次は項目名のスタイルです。デフォルトの状態ではセンタリングされますのでtext-align: left;を指定します。この辺はお好みですかね。背景色を指定し（枠線の色を使って相対値構文でカラーの一貫性を保ちます）、ブロックのエンド方向に枠線を付けます。次はビューポートが1024px以上の場合ですが、この場合は横並びになるので横幅を指定しておきます。こちらも項目名に合わせて適用なサイズにしてください。最後に、インラインのエンド方向（通常なら右方向）に枠線を付けます。
td部分
td {
@media (width >= 1024px) {
inline-size: 76%;
}
}最後はtd部分です。こちらはメディアクエリで指定するぐらいにしてます。th部分と同じように横幅を指定するのですが、この時、th部分とtd部分を合わせて100%になるようにしてください。
input要素
input {
&:is([type="text"], [type="tel"], [type="email"]) {
padding-block: 1rem;
padding-inline: 0.75rem;
inline-size: 100%;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border: none;
border-radius: 2px;
box-sizing: border-box;
}
}各項目の入力欄（input要素）ですが、属性を指定してスタイリングしていきます。この辺もお好みでどうぞ。私の場合、入力欄の枠線を消して背景色を指定しています。また、inline-size: 100%;で横幅いっぱいになるようにもしています。
textarea要素
textarea {
padding-block-start: 1rem;
padding-block-end: 10rem;
padding-inline: 0.75rem;
display: block;
inline-size: 100%;
background-color: rgb(from var(--color-pale-gray) r g b / 0.2);
border: none;
border-radius: 2px;
box-sizing: border-box;
resize: vertical;
}最後はtextareaです。block-sizeを使って高さを指定してもいいんですが、padding-block-end: 10rem;で見た目の高さを調整しています。その他はinput要素と同じ見た目になるようにしています。
最後に
今回は、メディアクエリを使ってスマートホンやタブレットなど（ビューポートが1023px以下）では縦積み、パソコンなど（ビューポートが1024px以上）では通常通り横並びにするようにしました。タブレットなど少し大きめのサイズでは間延びしたようなデザインになりますので、気になる方はブレイクポイントをもう少し小さくしてあげてもいいかもしれません。次回はラベルなどを追加してもう少し分かりやすく見やすい感じにしたいと思います。
See the Pen Inquiry-1 by ryskyshd (@ryskyshd) on CodePen.