記事の内容
お問い合わせフォーム、CSSを使ってユーザーが使いやすく
ユーザーが使いやすいようなフォームにしてみよう
お問い合わせは、デフォルトでよくデザインされていますが、下の様に項目と内容を横並びにして見やすく、重要な所には※印を色を変えて目立つようにして、記入欄も余白を設けたり幅を広くしています、フォームを見やすくすることでユーザービリティの向上に繋がりユーザーがストレスなく入力できるようにしましょう。
CSSを使って各項目毎変更を加えて見やすいフォームを作っていきましょう。
htmlに記述してフォームを作ってみる
bodyの中にform要素でお問い合わせを作る
htmlに記述をしてお問い合わせを作ります、body要素内にform要素を記述していきます。
form開始タグにフォーム要素の属性を使って入力したデーターの送信先と送信方法を指定します。
送信先と送信方法を知りたい方はこちらを参考にして下さい。
form要素の内側にフォームの入力エリアなどの要素を入れていきます、お問い合わせを作る場合はdl要素の定義リストを使います。
ブラウザに表示させると、下のようなお問い合わせができます。
この様にフォームはデフォルトでもよくデザインされていて、そのまま利用することもできますが、フォームはユーザーが操作するものですので使いやすく変更することも大切です。
項目毎にCSSで見やすいように装飾をする
フォームの幅を指定し左右と上に線を引く
htmlにフォームの記述が終わったらCSSで項目ごとに装飾をしていきます、まず初めに横幅を指定して分かりやすいように左右と上に線を指定します。
CSSファイルを開いてdl要素に対し幅とborderのtopとleftとrightに1px、solid(実線)、色を指定します。
この様な表示なりました、左右と上に線が引かれましたこれでお問い合わせの幅が分かり易くなりました。
要素を横並びにする
今度はdt要素に対してfloat：leftを指定して横並びにしてみましょう。
CSSファイルでdl要素内のdt要素に対してfloat：leftを指定します。
dt要素がfloat属性で浮いたのでdd要素がその間に入り込み横並びになりました。
文字に余白を付けて見た目をよくする
このままでは文字が詰まって見にくいので、dt要素に対してpadding：1em(一文字分)の余白を指定して、少し文字の色を変更してみます。
CSSファイルにパディングとカラーを指定します。
カラーの指定方法には数種類あります。
参考にこちらもどうぞ
dt要素の文字の色と大きさが変わりました、配置が崩れてしまいましたが後で修正していきます。
各項目毎区切りを付ける
項目毎に区切って左右の項目を併せて見た目をスッキリさせてみます。
dl要素内のdd要素に対して、border-bottom(下側)にsolid(実線)を入れて色は他の枠線と同じ色にしています。
marginは各項目の間が開かないように「０」に指定します。
paddingは上に1em(一文字分)、右に０、下に1em(一文字分)、左に18em(18文字分)の余白を作ります。
dd要素の左側に18文字分(16ピクセル×18)の余白を取って縦のラインで並んだのが分かります。
重要事項を目立つようにする
絶対入力をしてもらいたい所、重要な事項に対して「※」印をつけましたが、これをもっと目立たせるために色を変えて指定してみます。
先にhtmlの記述で「※」印に対して、<span>要素で囲み、クラス名を「must」にしていますのでCSSファイルの記述で「.must」に対して色を指定します。
※印の所だけが色が変わりました。
メールアドレスの入力欄の幅を広げる
メールアドレスの入力欄の幅を変更するので、input[type="email"] { }に幅のwidthプロパティでdd要素の幅の50％分を指定します。
記述の注意点は「input」の後に続けて[括弧]を記述します、半角スペースを入れると正しく表示されませんから記述には注して下さい。
inputの後にスペースを入れると正しく表示されません。
当初の幅から広くなって長いアドレスも入力できるようになりました。
他の入力欄も広げて文字サイズも変える
入力欄がある「お名前」「フリガナ」と「メールアドレス」の入力の文字サイズと見やすいように文字の周りに余白を設定したいと思います。
各項目ともinput要素で記述しているので
CSSの指定をinput要素で記述します、フォントサイズを一文字分、文字の周りの余白を5ピクセルに指定します。
文字が大きくなって文字の周りに余白ができて見た目も良くなりました。
checkboxとradioボタンの間隔をあける
お問い合わせのボタンや性別の男女のボタンの間隔を広げてチェックしやすいようにしてみましょう。
type=”checkbox”もtype="radio”も<label>要素で囲われていますので、CSSはlabelで指定します。
各項目の右側に一文字分の間隔が開いてチェックしやすくなりました。
textareaの入力枠を広げる
textareaを広げてお問い合わせ・ご質問内容を入力しやすいように変更しましょう。
今の大きさは横幅(cols)が25文字分と高さ(rows)が5行分になっています。
textareaに対し幅を30文字分、フォントサイズを1文字分、文字の周りに余白を5ピクセル分を指定します。
この様に横幅と高さが変更されました。
送信ボタンを作る
送信ボタンを作るのはtype="submit"です、ボタンの内容は「value」に書いている文字が表示されます。
この様なデフォルトですのでこれをCSSで装飾していきます。
ｐのクラス名に「submit」を付けてこれに対してtext-alignで中央に配置して、border-bottomで要素の下側に線を入れます、ボタンと線の間に余白が開くようにpadding-bottomを16ピクセル分余白を取ります。
今度はボタンに対して文字の周りの余白を上下20ピクセルと左右に100ピクセル
背景色を＃ｃ６６
文字の太さを太字に
文字の大きさを一文字分に
文字の色を白色に
全部の角を15ピクセル分丸める
以上の設定を指定すると以下のようになります。
送信ボタンにカーソルが乗った場合にカーソルの形やボタンの色を変えたい場合は「:hover」を使って「corsor」でカーソルの形を変えます「pointer」は人の手のような形になります。
「opacity」は透過を示し１が全てで小数点で表していきます、ボタンにカーソルが乗ると0.8分ボタンが薄くなります。
label 項目とボタンを関連づける
項目をクリックするとチェックされる様にする
<label>要素でチェックボタンやラジオボタンなどを囲むと項目とボタンなどの構成部品を関連づけることができます。
上の様にlabelで囲まない時は項目をクリックしても変化はありませんが
<label>要素で囲むと
男女の項目をクリックしてもチェックされます、これはチェックボタンでも同様になります。
お問い合わせフォームを使いやすくまとめ
お問い合わせは、デフォルトでよくデザインされていますが、フォームを見やすくすることでユーザービリティの向上に繋がりユーザーがストレスなく入力できるようにしましょう。
