[60] フォームを美しく整えよう（CSS使用）
最終更新日：2018年06月23日 （初回投稿日：2013年11月19日）
フォームは、ちいさな「部品」と「テキスト」とが混在します。
それらをただ並べただけだと、ごちゃごちゃして見づらいので、スッキリさせるために フォーム部品以外のHTML要素と組み合わせて CSSで整える必要があります。
今回は、フォームのレイアウトのコツというか、基本の考え方をメモ。
他のHTML要素と組み合わせる
フォーム部品の要素のデフォルトスタイルは、全部インラインです。
フォーム部品は普通、質問・選択肢になる「テキスト」と一緒に使いますが、CSSを何も指定しないままだと こんなふうに ↓ ぜ〜んぶ繋がって表示されます。
これじゃあ入力する気も起きやしない。
ここで、<br> を使って改行する手もあるんですが、
それだと1セット（「質問テキストと入力部品」のセット）ごとにボーダーで囲むなどのレイアウトをしたくてもムリ。なので <br> は おすすめしません。
（「入力フィールドが1つだけ」などのシンプルなフォームなら <br> でもOK ）
1セットずつ、ブロッキングできる要素で囲むのがベストです。
その要素には、リスト要素（<ul><ol><dl>）か <p> や <div> が最適。
インラインですが <span>もよく使います。CSS で「display: block」や「display: inline-block」などを指定すれば、マージンも調整できて扱いやすくなります。
古いサイトでは<table>要素とその子要素を使ったものもありますが、<table>は表組の役割があるため、フォームに使うには HTMLの文法的に NGかな。
また、<label>要素をレイアウトのためだけに使いうのはNG。
「チェックボックス」や「ラジオボタン」に<label>を使うのは当然なので、レイアウト目的で<label>を使っていると、CSSの指定がややこしくなります。
<label>はテキストと部品を関連づける役割で使おう。
（文法上正しくて、レイアウトにも利用できるなら問題なし！）
for属性無しの<label>で、テキストだけを囲んでレイアウトする、なんてのは完全にNGです。
図説すると、こんなかんじで要素を使い分けると理想的。
これは <li>使用の一例です。（下図では <ul>（または<ol>）は省略しています）
先ほどのフォームを、上の図のように <li>要素で整えると こうなりました。
（CSSは未指定です）だいぶ見やすくなりました。
ただし、リストマーカー（●とか）が表示されたままですし、部品のレイアウトもまだバラバラですね。これをCSSで整えて行きます。
＊ちなみに、上の図のレイアウトは、ほんの一例です。
例えばこんなふうに、設問のテキストを左、フォーム部品を右、と統一したほうがスッキリする場合もあります。
このように、設問のテキストとフォーム部品を全部「縦」に並べる 1カラムのレイアウトもアリですね。（スマホ用ならこれ）
<li>要素じゃなく、<p> や <div>要素だけでブロッキングしてもOK。
いずれにせよ、フォーム部品以外の要素を使って整列させ、CSSで整えます。
では、フォームをCSSで整えよう
こんなサンプルを作ってみました。
サンプルのHTMLはこちら。
<form>要素の中に、<ul>、<li>要素を仕込んでいます。
<li>要素を「質問テキスト+フォーム部品」をまとめるブロックに使っています。
さらにブロック分けするために、<li>要素の中で <p>要素も使っています。
<form class="frmSmpl1">
<ul>
<li>
<label><span>最近おもしろいと思ったTV番組は？</span>
<input type="text" name="favorite" class="txtfiled" placeholder="正確な番組名じゃなくてもOK">
</label>
</li>
<li>
<label><span>その番組の感想をどうぞ</span>
<textarea name="comment" class="txtfiled"></textarea>
</label>
</li>
<li>
あなたの興味のあるTV番組のジャンルを教えてください（複数可）
<p class="check">
<label><input type="checkbox" name="genre" value="drama">ドラマ</label>
<!--（中略）-->
<label><input type="checkbox" name="genre" value="others">その他</label>
</p>
</li>
<li>
あなたの性別と年代を教えてください
<p>
<label><input type="radio" name="seibetu" value="male">男</label>
<label><input type="radio" name="seibetu" value="female">女</label>
<select name="age">
<option>年代</option>
<option value="u19">10代</option>
<!--（中略）-->
<option value="o60">60代以上</option>
</select>
</p>
</li>
<li>
<p> <!--送信ボタンは「disabled属性」で無効にしています↓-->
<input type="submit" value="submit" disabled>
<input type="reset" value="reset">
</p>
</li>
</ul>
</form>
では、CSSです。
まずは、<form>要素に付けたクラス名（サンプルは「frmSmpl1」）でセレクタを作って、フォーム全体の囲み罫や背景などのスタイルを整えます。
.frmSmpl1 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:100%;
color: #666;
padding:.7em;
margin: 2em 0;
border:1px solid #ccc;
/*↓背景グラデーションの指定*/
background: #f0f8f1; /*←グラデーション未対応のブラウザ用*/
background: -webkit-linear-gradient(top, #fbfcfc, #f0f8f1); /*←オールドブラウザ用*/
background: linear-gradient(#fbfcfc, #f0f8f1); /*←標準型*/
}
form要素に直接スタイルを指定せず、<form>の中に <fieldset>要素使って、それに指定してもいいですね。
次は、<form>の中に仕込んでおいた <ul>、<li>要素を整えます。
.frmSmpl1 ul { /*ul要素を初期化*/
padding:0;
margin:0;
}
.frmSmpl1 ul li { /*li要素も初期化し、ボーダーなどを指定*/
list-style:none; /*リストマーカー（●）を無しに*/
margin:0;
padding:.5em;
border-top: 2px solid #fff;
font-size:15px;
}
.frmSmpl1 ul li:first-child { /*最初のli要素はボーダー無し*/
border-top:none;
}
「質問のテキスト」と「入力のためのフィールド」を横に並べます。
「質問のテキスト」を <span>要素で囲んでおき、それを display: inline-block にします。
.frmSmpl1 span {
width: 17em;
margin:0 .5em 0 0;
display:inline-block;
vertical-align:top;
}
テキスト入力部品（<input type="text"> と <textarea>）や、<select>要素の見た目を統一します。
.frmSmpl1 .txtfiled,
.frmSmpl1 select {
width:45%;
padding:3px 5px;
margin:0;
color:#666;
border: solid 1px #ccc;
box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
border-radius:6px;
}
チェックボックス・ラジオボタンの部分の指定です。
.frmSmpl1 p {
margin:.3em 0 0 1em;
}
.frmSmpl1 p label { /*チェックボックス・ラジオボタンの label要素を横に並べる*/
display: inline-block;
margin-right: 2em;
}
.frmSmpl1 p label input {/*input要素とテキストがくっつかないように右マージンを少々*/
margin-right:0.5em;
}
.frmSmpl1 p label:hover { /*チェックボックス・ラジオボタンのlabel要素のマウスオーバー時*/
background: #5ba110;
color: #fff;
font-weight:bold;
}
.frmSmpl1 p.check label { /*チェックボックスのlabelの横幅を統一*/
width: 9em;
}
最後に、送信・リセットボタンのスタイルです。
.frmSmpl1 input[type="submit"],
.frmSmpl1 input[type="reset"] {
cursor:pointer; /*←カーソルを指先型に変化*/
font-size:130%;
font-weight:bold;
width:150px;
padding:5px 0;
margin:.5em .5em .5em 0;
border-style:none;
color: #fff;
/*↓背景グラデーションの指定*/
background:#90e733; /*←グラデーション未対応のブラウザ用*/
background: -webkit-linear-gradient(top, #90e733, #428000 50%, #90e733) #90e733;
background: linear-gradient(#90e733, #428000 50%, #90e733) #90e733;
/*↓以下、ボックスの角丸、シャドウ、テキストシャドウの指定*/
border-radius: 5px;
box-shadow: 2px 2px 3px 1px #666;
text-shadow: 1px 1px 2px #000;
}
.frmSmpl1 input[type="submit"]:hover, /*↓ボタンのマウスオーバー時の透明度を変更*/
.frmSmpl1 input[type="reset"]:hover {
opacity: 0.8;
}
<p>要素を使った例
こちらは上のサンプルと同じ内容ですが、<ul> <li>要素でなく <p>要素でブロッキングしています。レイアウトも若干変えてみました。
サンプルのHTMLです。
<form class="frmSmpl2">
<p>
<label><span>最近おもしろいと思ったTV番組は？</span>
<input type="text" name="favorite" class="txtfiled" placeholder="正確な番組名じゃなくてもOK">
</label>
</p>
<p>
<label><span>その番組の感想をどうぞ</span>
<textarea name="comment" class="txtfiled"></textarea>
</label>
</p>
<p>
<span>あなたの興味のあるTV番組のジャンル<br>を教えてください（複数可）</span>
<span class="check">
<label><input type="checkbox" name="genre" value="drama" />ドラマ</label>
<!--（中略）-->
<label><input type="checkbox" name="genre" value="others" />その他</label>
</span>
</p>
<p>
<span>あなたの性別と年代を教えてください</span>
<span class="radio">
<label><input type="radio" name="seibetu" value="male" />男</label>
<label><input type="radio" name="seibetu" value="female" />女</label>
<select name="age">
<option>年代</option>
<option value="u19">10代</option>
<!--（中略）-->
<option value="o60">60代以上</option>
</select>
</span>
</p>
<p> <!--送信ボタンは「disabled属性」で無効にしています↓-->
<input type="submit" value="submit" disabled>
<input type="reset" value="reset">
</p>
</form>
CSSはこちら。
.frmSmpl2 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:100%;
color: #666;
padding:.7em;
margin: 1em 0 2em;
border: 3px solid #eee9ed;
border-radius: 15px;
}
.frmSmpl2 p { /*p要素に背景や角丸を指定*/
margin:7px 0 0;
padding:10px;
background:#EEE9ED;
border-radius:8px;
font-size:15px;
}
.frmSmpl2 p:first-child { /*最初のpはマージン無し*/
margin:0;
}
.frmSmpl2 span { /*span要素（質問テキスト）をブロック化し横に並べる*/
width:48%;
margin:0;
display:inline-block;
vertical-align:top;
}
/*テキスト入力部品のスタイルを統一*/
.frmSmpl2 .txtfiled, .frmSmpl2 select {
width:45%;
padding:5px;
margin:0;
color:#666;
border:solid 1px #ccc;
background: #fff;
box-shadow: 1px 1px 1px #fff;
border-radius:7px;
}
.frmSmpl2 select { /*selectの幅は小さめに*/
width:10em;
}
/*チェックボックス・ラジオボタンの label要素を横に並べる*/
.frmSmpl2 span.check label, .frmSmpl2 span.radio label {
display:inline-block;
width:8em;
}
.frmSmpl2 span.radio label { /*ラジオボタンの label要素の幅を小さく*/
width:3em;
}
/*input要素とテキストがくっつかないように*/
.frmSmpl2 span.check label input, .frmSmpl2 span.radio label input {
margin-right:0.5em;
}
/*チェックボックス・ラジオボタンのlabelのマウスオーバー時*/
.frmSmpl2 span.check label:hover, .frmSmpl2 span.radio label:hover{
background : #c08b9b;
color: #fff;
font-weight:bold;
}
/*送信・リセットボタンのスタイル*/
.frmSmpl2 input[type="submit"], .frmSmpl2 input[type="reset"] {
cursor:pointer;
font-size:130%;
font-weight:bold;
width:100px;
padding:4px 10px;
margin-right:.5em;
color:#fff;
border:1px solid #bbb;
background: #c08b9b;
border-radius: 5px;
box-shadow: -1px -1px 1px #fff;
}
/*送信・リセットのマウスオーバー時*/
.frmSmpl2 input[type="submit"]:hover, .frmSmpl2 input[type="reset"]:hover {
background: #985267;
}
CSSに関しての細かい説明は省きました（すっごい長くなるから）
CSSについては、本サイトの はじめてのCSS INDEX から調べてみてください。
次回予告
[46] から始まったフォームに関する記事は、今回の [60] で終了です。かなりのボリュームでしたね。
次回は、HTML要素の開始・終了タグの省略について一覧にまとめます。
HTML要素には開始タグと終了タグがありますが、終了タグの無い要素（<br>など）もありますね。
また、終了タグはあるけど省略してもOKな要素もあります。
HTML5からは、開始タグすら省略可能な要素もあるんです。
このへんを、次回まとめてみようと思います。
- 関連記事
-
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ（リンク領域）を作ろう map要素・area要素
- （ちょっとメモ）属性の「引用符」や「値」の省略について
- （ちょっとメモ）HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう（CSS使用）
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素（HTML5.2で削除されました）
- [57] プログレスバー（進捗状況）を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
お久しぶりです
＊一応ご報告してみました。
Re: お久しぶりです
コメントありがとうございます。
ほんとですね。早速修正しました。
