【JavaScript】項目の内容をチェックしエラーを自動表示するフォーム

前回の記事で紹介した選択した項目をアニメーション等で目立たせるフォームに、エラーチェックを追加したものを紹介します。

こちらがエラーチェックの機能を追加したフォームです。

PHPでこういったエラーを吐き出すのはCMSや動画投稿サイトを作ったときからやっていたのですが、やはりフォームなどでは項目に何かを書いた時点でエラーチェックをして表示してくれる方が、一度送信してから一括でエラーが表示されるよりもずっと使いやすいですね!

今回作ったもののエラーチェックは、上から「英語以外が入力されていたらエラー」、「メールアドレスっぽくなかったらエラー」、「URLっぽくなかったらエラー」、「何も入力されていなかったらエラー」です。ガーっと作ったのであんまり厳重ではありません。

今回のスクリプトをZipファイルでダウンロードするにはこちらからどうぞ。

自由に使用、改修して頂いて結構ですので、ご自由にお使いください。

【JavaScript】選択項目をアニメーションで目立たせるフォーム

選択した要素を目立たせることで、ユーザーが今どの項目を入力しているかを直感的に把握させることができるフォームです。

jQueryを使用しています。

タイプは3つあり、
選択した項目のラベルをアニメーションするタイプ
選択した項目のラベルのフォントカラーをフェードで変えるタイプ
選択した項目input要素の横幅をアニメーションで変えるタイプがあります。

上の3つをまとめてZipファイルでダウンロードするにはこちらからどうぞ。

自由に使用、改修して頂いて結構ですので、ご自由にお使いください。

【CSS】※など一文字をインデントし、リストをきれいに表示する方法

サイトにおいて、マーク付きのリストはよく目にします。

※こんな感じのやつ

上のテキストの部分が一行の場合はきれいに表示されますが、もしも2行になってしまうときれいに表示されなくなってしまいます。

※こんな感じに、テキストが
マークの下にまがたってしまう。

これを防ぐには下記

.sample {
	text-indent:-1px;
	padding-left:1px;
    zoom:1;
}
これによって、テキストが改行されて二行になってもマークの下にはテキストが回りこまず、きれいに表示されます。

【CSS】ページにスクロールバーを必ず表示するテクニック

サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。

もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。

これを防ぐには下記のCSSをhtml要素に追加します。

html {
	margin-bottom:1px;
	height:100%;
}
html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。

まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。

【CSS】要素を親要素の上下中央に表示する方法

要素を親要素の上下中央に表示したい、ということはサイトを作っていてよくあると思います。

たとえば、テキストと画像が横並びになっていて、テキストの分量が増えても画像を上下中央に表示したい、という場合など。


そんなときの方法を紹介します。まずはHTMLから。

<div>
	
	<p>こちらの分量が増えても、buttonを中央に表示したい</p>
	<p><img src="button.gif" alt="ボタンの画像" ></p>
	
</div>
次に、CSS
p{
	display: table-cell;
	vertical-align: middle;
	 display:inline; //IE6,7対策
	 zoom:1; //IE6,7対策
}
display:table-cellで自動的に横並びになるので、floatなどは不要です。

なお、上記のCSSでdisplay:inline;とzoom:1;の前に全角スペースがあるのは、IE6、IE7だけに反映させるためのCSSハックです。