[60] フォームを美しく整えよう(CSS使用)

最終更新日:2018年06月23日  (初回投稿日:2013年11月19日)

フォームは、ちいさな「部品」と「テキスト」とが混在します。
それらをただ並べただけだと、ごちゃごちゃして見づらいので、スッキリさせるために フォーム部品以外のHTML要素と組み合わせて CSSで整える必要があります。

今回は、フォームのレイアウトのコツというか、基本の考え方をメモ。

他のHTML要素と組み合わせる

フォーム部品の要素のデフォルトスタイルは、全部インラインです。

フォーム部品は普通、質問・選択肢になる「テキスト」と一緒に使いますが、CSSを何も指定しないままだと こんなふうに ↓ ぜ〜んぶ繋がって表示されます。
これじゃあ入力する気も起きやしない。

あなたの興味のあるTV番組のジャンルを教えてください(複数可) あなたの性別と年代を教えてください

ここで、<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は未指定です)だいぶ見やすくなりました。

  • あなたの興味のあるTV番組のジャンルを教えてください(複数可)

  • あなたの性別と年代を教えてください

ただし、リストマーカー(●とか)が表示されたままですし、部品のレイアウトもまだバラバラですね。これをCSSで整えて行きます。

*ちなみに、上の図のレイアウトは、ほんの一例です。

例えばこんなふうに、設問のテキストを左、フォーム部品を右、と統一したほうがスッキリする場合もあります。

このように、設問のテキストとフォーム部品を全部「縦」に並べる 1カラムのレイアウトもアリですね。(スマホ用ならこれ)

<li>要素じゃなく、<p> や <div>要素だけでブロッキングしてもOK。
いずれにせよ、フォーム部品以外の要素を使って整列させ、CSSで整えます。

では、フォームをCSSで整えよう

こんなサンプルを作ってみました。

  • あなたの興味のあるTV番組のジャンルを教えてください(複数可)

  • あなたの性別と年代を教えてください

サンプルの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>要素でブロッキングしています。レイアウトも若干変えてみました。

あなたの興味のあるTV番組のジャンル
を教えてください(複数可)

あなたの性別と年代を教えてください

サンプルの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からは、開始タグすら省略可能な要素もあるんです。
このへんを、次回まとめてみようと思います。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

お久しぶりです

ソースを見て勉強していたのですが、こちらの一つ目のサンプルでCSSで背景にグラデーションを指定されているようですが、それが効いていないようです。

*一応ご報告してみました。

Re: お久しぶりです

Akira360さん
コメントありがとうございます。
ほんとですね。早速修正しました。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.