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

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

サンプルはこちら

今回は、別ファイルでサンプルを用意しましたので、ご覧ください。
クリックで別ウィンドウで開きます。

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

フォーム部品の要素はインライン要素。テキストや<img>要素などと同じように、改行されません。
そのままだと、こんなふうに ↓ ぜんぶ繋がって(改行無しで)表示されます。

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

ここで、<br> を使って改行する手もあるんですが、
それだと部品の頭揃えができないし、1セット(「設問と入力部品」のセット)ごとにボーダーなどの装飾を指定したくてもムリ。なので <br> はあんまり おすすめしません
(「入力フィールドが1つだけ」などのシンプルなフォームなら <br> でも問題無し)

1セットずつ、ブロックになるHTML要素で囲む方法がベストです。

その HTML要素には、リスト要素(<ul><ol><dl>)か <p><div> がベスト。
古いサイトでは<table>要素を使ったものもありますが、
<table>は表組の役割があるため、HTMLの文法的にはNGかな。

また、<label>要素もレイアウトのためだけに使いうのは良くない。
「チェックボックス」や「ラジオボタン」に<label>を使うのは当然なので、
ほかの部分にレイアウト目的で<label>を使っていると、CSSの指定がややこしくなります。
<label>はテキストと部品を関連づける役割で使い、レイアウトで頼らないこと。
(文法上正しくて、レイアウトにも利用できるならOK!)

for属性無しの<label>で、設問テキストだけ囲んでレイアウトする、なんてのは完全にNG!
そんなことしないで、設問テキストは<span>で囲んで、入力部品と一緒に<label>で囲もう。

図説すると、こんなかんじ。 これは<li>使用の例。(<ul>(または<ol>)は省略しています)

先ほどのフォームを上の図のようにリスト要素で整えると、こうなりました。 (CSSは未指定)

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

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

1セット(設問と入力部品のセット)ずつブロックになって、だいぶ見やすくなりました。
でも、リスト要素のスタイル(●とか)がそのままですし、部品の揃い方もまだバラバラですね。
これをCSSで整えて行きます。

上のフォームのHTMLソースはこちら ↓ (HTMLはこれで最終。もう変わりません)
赤はレイアウトのために追加した HTML要素
ブルーは<label>要素
グリーンはCSSの指定のためにつけたid属性やclass属性です。

<form id="form1">     <!--form要素に id名を付けました-->
<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="movie" />映画</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="u29">20代</option>
<option value="u39">30代</option>
<option value="u49">40代</option>
<option value="u59">50代</option>
<option value="o60">60代以上</option>
</select> 
</p> 
</li>
<li>
<p>
<input type="submit" value="submit"><input type="reset" value="reset">
</p>
</li>
</ul>
</form>

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

例えばこんなふうに、
設問のテキストを左、フォーム部品を右、
と統一したほうがスッキリする場合もあります。
(サンプルファイルの「サンプル2」がこのレイアウトです。)

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

いずれにせよ、フォーム以外の要素を使って整列させ、そのあとCSSで整えていきます。

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

上記のHTMLソースを CSSで整えたのがこちら。
クリックで別ウィンドウで開きます。

こちらのサンプルで、CSSのソースが全文見られるようになっていますので、ご確認ください。

●まず、フォーム全体の枠や背景は<form>要素に指定
(別に<form>要素じゃなくても良いけどね、<form>の中に<fieldset>使ってもいいし。)
<form>にid名(ここでは#form1)をつけておいて、CSSの「セレクタ」は、
「#form1」または「form#form1」とすればOK。コレを整えます。

form#form1 {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #666;
	background: #F0F8F1;
	/*↓背景グラデーションの指定*/
	background: -moz-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: -webkit-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: linear-gradient(#FBFCFC, #F0F8F1);
}

●次は、リスト要素のデフォルトのスタイル(●とか)をトル
セレクタは「form#form1 ul」で<ul>要素を、「form#form1 ul li」で<li>要素を指定できます。
半角で区切る事で「○の中の○の中の○」と言った具合に、子孫を指定します。
「form#form1 ul li {list-style:none;} 」とすれば●は消えます。
他にもpaddingやmarginが、デフォルトスタイルになっているので、修正します。
<li>要素を「単なる四角い箱」にするわけです。

<li> を「単なる四角い箱」にしてレイアウトするのですから、<p>でもいいんですが、
<li>の中に<p>を入れられる利点があり、使い勝手が良いんです。(<p> in <p> はNG。)
<div>も中に<p>を入れられるけどね。なんとなく習慣的に<li>をフォームに使っています。

form#form1 ul { /*リスト要素ulを初期化*/
	padding:0;
	margin:0
}
form#form1 ul li { /*liも初期化し、ボーダーなどを指定*/
	list-style:none;
	margin:0px;
	padding:10px;
	border-top: 2px solid #FFF;
	font-size: 12px;
}
form#form1 ul li:first-child { /*最初のliにはボーダーをつけない*/
	border-top:none;
}

●あとは、整列のための指定
入力フィールドの左側を揃えるには、設問テキストを囲んでいる<span>の幅を決めればOK。
ただし<span>はインラインタイプのため、「display:block;」でブロック化が必要。
ブロック化すると、インラインの時のように横に並ばなくなります。
で、テキストと部品を横に並べるために、このサンプルでは「float:left;」を使いました。
または「display:inline-block;」なら、幅の指定もできて横並びに(float不要)。ただし古めのIEには無効なので要注意。

/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form1 ul li span {
	width: 17em;
	margin:0px;
	display:block;
	float:left;
/* floatでなく、CSS3 の「display: inline-block」を使う手もアリ */
}

また、「チェックボックス」や「ラジオボタン」は、1つずつ<label>で囲んでいますので、
この<label>にも横幅を指定してあげれば、文字数がバラバラでも整列します。
(文法的に正しく使用しているなら、<label>もレイアウトに活用しよう)

<label>もインラインタイプなので、幅を指定するために「display:block;」でブロック化しますが、
これを横並びにするのも「float」または「display:inline-block;」(古めのIEには無効なので要注意)
このサンプルでは「float:left;」使用。

/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form1 ul li p label {
	margin-right: 2em;
	display: block;
	float: left;
}
/*チェックボックスのlabelの横幅を統一する(pにクラス名.checkをつけて)*/
form#form1 ul li p.check label {
	width: 9em;
}
/*ラジオボタンの方は、labelの横幅指定はしていません*/

「float」を使うと、必ず「clear」でフロートを解除(clearfix)が必要。
でないといつまでもfloatしちゃう。
このサンプルでは「form#form1 ul li:after 」というセレクタを使ってclearfixしました。
「:after 」は疑似要素。これで「 li の直後」ごとにクリアすることになります。コレ便利。

form#form1 ul li:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;   /*←ココまでは不可視のエレメントを作っています*/
	clear:both;     /*←フロートをクリア*/
}

●「チェックボックス」や「ラジオボタン」のちょっとした装飾

「チェックボックス」や「ラジオボタン」の「テキスト」にロールオーバーした時に、
背景などを変えて目立たせる事もできます。<label>でテキストごと囲んでいるからできること。
「label:hover」というセレクタ(これは疑似クラス)を使います。

form#form1 ul li p label:hover {
	background: #FFF;
	color: #096;
	font-weight:bold;
}

そのほかのサンプル

★CSSの「セレクタ」については、
「グラフィックデザイナーのためのCSSレイアウトメモ:TIPS:セレクタとは」をご覧ください。

今回のサンプルは、
<li>でなく<p>要素でブロック化した例(ピンクのほう)もあります。
CSSソースの全文もご覧いただけます。(画像のクリックで別ウィンドウで開きます)

li要素でブロック化した例 p要素でブロック化した例

こちらのサンプルでは、<fieldset>も使ってレイアウトしていますので、見てみてください。
クリックで別ウィンドウで開きます。

次回予告

[46] から始まったフォームに関する記事は、今回の [60] で終了。
HTML5から、新しい要素や属性が増えたため、かなりのボリュームでしたね。

次回は、HTML要素の開始・終了タグの省略について一覧にまとめます。
HTML要素には開始タグと終了タグがありますが、終了タグの無い要素(<br>など)もありますね。
また、終了タグはあるけど省略してもOKな要素もあります。
HTML5からは、開始タグすら省略可能な要素もあるんです。
このへんを、次回まとめてみようと思います。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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