LINKSTORY LIBRARY(リンクストーリーライブラリー)

LINKSTORY LIBRARY(リンクストーリーライブラリー)

CATEGORY is ホームページ制作

ホームページのお問い合わせフォームを見栄え良く組む方法

ホームページのお問い合わせフォームを見栄え良く組む方法

こんにちは、後藤です。

今回はホームページのお問い合わせフォームを見栄え良く組む方法を紹介します。

今回紹介する方法で組む事によって、コードも見やすくなりますし、スタイルも適用しやすくなります。

 

tableで組む

まずは、tableタグを使用して組む方法を紹介します。

例えば、このように組みます。

注意するところは、<table>タグよりも前に<form>タグを持ってくることです。

また、<button>タグは</table>と</form>の間に持ってきます。

 

スマートフォンに対応する

このままだと、項目と入力フィールドが横並びになっているため、画面の横幅が小さいスマートフォンでは見づらいです。

そこで、スマートフォンのみthとtdのdisplayをblockにすることで縦並びにします。

以下のように記述します。

 

dl,dt,ddで組む

次に、dl,dt,ddで組む方法を紹介します。

例えば、このように組みます。

 

PCのみ横並びにする

このままだと項目と入力フィールドが縦並びで表示されるので、横並びにしたい場合は以下のように設定します。

スマートフォンは縦並びの方が見栄えが良いので、PCのみ適応させます。

他にも「float」や「inline-block」などで横並びにする方法がありますが、項目と入力フィールドの縦の位置を揃えるのに手間がかかったり、「background-color」が項目や入力フィールドの全体にかからなかったりします。

「table-cell」だと縦の位置を揃えるのに「vertical-align」が効きますし、「background-color」も全体にかかるのでおすすめです。

 

まとめ

今回はフォームを見栄え良く組む方法を紹介しました。

tableで組む方法もdl,dt,ddで組む方法もどちらもよく使われますが、dl,dt,ddの方が柔軟性があるので個人的にはdl,dt,ddを使用しています。

この記事を書いた人

後藤
2017年入社です。 コーディングと、メディアサイトの企画・運営、SNS運用を担当しています。 コーディングに関してはまだまだ実力不足なので、早く会社の戦力になれるように日々精進しています。