マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

フォームを飾るHTMLの中でも、掲示板や検索に使われるフォームは、ウェブページとサーバー上のプログラムをつなぐための大切な機能だ。なるべ
く多くの人に使ってもらえるように、フォームをきれいに飾り付けてみよう。今回は、ボタンやテキスト入力欄にCSSでスタイルを指定するうえでの注意点やちょっとしたトリックなどを紹介していこう。
文：佐藤和人HTML MANIAXで紹介したテクニックは

http://internet.impress.co.jp/maniax/でソースを公開！

ボタンや入力欄に色を付けるときは要注意！
注意1

CSSが効かないブラウザー
フォームの部品もHTMLの要素なので、ふつうにCSSを指定できるが、注意点がいInternet Explorer 6

くつかある。1つは、CSSに対応しているブラウザーでもフォームの部品にはスタイルの指定がうまく効かないことがある点だ。

Opera 6

たとえば Opera 6では、枠線は入力欄の枠 の 外 側 に 別 に 引 か れ てし まう。
Netscape Navigator（NN）4では、ゴミのNetscape Navigator4ような四角が表示されたり、入力欄が消えてしまったりすることもある。
注意

2Internet Explorer 6のデザインの違い

2つ目は、ウィンドウズXP上でのInternet
Explorer（IE）6の場合に、背景色や枠線を指定すると、ボタンや入力欄のデザイン

背景色なしがXPのものではなく、ウィンドウズMe以前のデザインになること。XPのデザインに慣背景色指定れているユーザーはとまどうかもしれない。
3つ目は、凝りすぎに気をつけること。ス

注意3

タイルをいじりすぎて、ボタンがボタンのよほどほどに！

うに、入力欄が入力欄のように見えなくなると、使いづらいフォームになる。

164 +++ iNTERNET magazine 2003.05 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

1［ 枠線で入力欄を飾る ］
連載第6回（3月号）
では、枠線の変わった使い方をいくつか紹介した。CSSの枠線は、input要素やtextarea要素などのフォームの部品にも適用できる。いつもとは違った入力欄にして、フォームをおしゃれに飾ってみよう。

入力欄の枠線に色を付ける
ウィンドウズXP上のIE 6はテキスト入力欄を青い実線にするが、それ以外のブラウザーでは灰色の立体的な線になる。
ソース①は、クラス名が「text」のinput要
素とtextarea要素にborderプロパティーを指定して、どのブラウザーでも枠線が赤い実線になるようにしたものだ。
「submit」というクラス名を付けた送信ボタンは、widthプロパティーで幅を広げて目立たせている。

① tips1-1.html

なお、textarea要素にはoverflow: autoを指定している。ウィンドウズ版IEでは、* input.text, * textarea { border: 1px solid red; }textarea { overflow: hidden; }input.submit { width: 12em; }table { border-left: 8px solid #FC8; }この指定によって複数行の入力欄のスクロールバーを消し、文字があふれたときにだけスクロールバーを表示させるようにできる。

入力欄のデザインをシンプルにCSSでは、上下左右の枠線のスタイルを変えることができるし、枠線を消すこともできる。この性質は、テキスト入力欄にも応用できる。ソース②は、クラス名「text」のinput要素の枠線を消し、下の枠線だけ赤い実線にしたものだ。シンプ
ルで斬新なデザインのフォームになる。
textarea要素は、枠線を消すとさすがに分かりにくくなるので、赤い点線にした。
ソース③は、枠線を取り払い、黄色い背② tips1-2.html

景色を付けたもの。こちらは枠線なしでもどこが入力欄か分かるし、すっきりしたデ

input.text { border-style: none;border-bottom: 2px solid red; }* textarea { border: 2px dotted red;
overflow: hidden; }ザインだ。
なお、ソース①と②では、アスタリスク（全称セレクター）を要素名の前に付けているところがある。これは、NN4 対策のテクニックだ。NN4 では input 要素やtextarea要素にborderプロパティーを指③ tips1-3.html定すると表示がおかしくなる。NN4は全称セレクターに対応していないので、アス

input.text, textarea { border-style: none;background-color: #FFC; }textarea { overflow: hidden; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

タリスクを付けるだけでCSSの一部を無効にできるのだ。

+++ iNTERNET magazine 2003.05 +++

165

2

［ ボタンと画像の組み合わせ ］
テキスト入力欄の次は、ボタンを画像で飾る方法を紹介しよう。ボタンと画像と言えば、type属性を「image」にしたものを思い浮かべるかもしれないが、CSSやHTML 4の機能を使えばもっと柔軟なデザインができる。

ボタンに背景画像を付ける
テキスト入力欄やボタンなどフォームの部品にも、CSSで背景画像を指定できる。ソース①は、送信ボタン（クラス名を「submit」としたinput要素）に背景画像を指定したものだ。ボタンの四角が画像のサイズと一致するように、widthプロパティーやheightプロパティーには画像の幅や高さと同じ数字を指定している。また、
border-styleプロパティーをnoneとして枠線を消した。
ソース①のサンプルをうまく表示できる① tips2-1.htmlのは、ウィンドウズ版IE、ネットスケープ6以降、Opera 7だ。マッキントッシュ版

á@ tips2-1.html
input.submit { width: 142px; height: 24px;
border-style: none;background: white url(button1.gif) no-repeat; }のIE 5では、ボタンの文字が上端にくっつくように表示されるので、少々格好が悪くなる。

button要素を上手に使う
ボタンと画像を組み合わせるもう1 つの方法として、CSSではなくHTML 4のbutton要素を使う手がある。button要素
では<button>〜</button>の間にテキス
トだけでなく、たいていの要素を入れられる。img要素を入れれば、画像付きのボタンになるわけだ。
しかし、NN4ではbutton要素に対応していないので、フォームが送信できなくな
Internet Explorer 6

ネットスケープナビゲーター4ってしまう。そこで次のような手を使った。
ソース③では、button要素とinput要素を② tips2-2.html（CSS部分）並べる。button要素はID名を「submit1」としたspan要素で囲む。input要素のID#submit1 { display: none; }span#submit1 { display: inline; }input#submit2 { display: none; }名は「submit2」とする。ソース②のCSS
では d i s p l a y プ ロ パ ティーを 使 い 、「#submit1」
を非表示、「span#submit1」は表示、「input#submit2」は非表示とする。NN4では、「要素名＋#＋ID名」
とい③ tips2-2.html（HTML部分）

うセレクターに対応していないので、input要素だけが表示される。それ以外のブラ<span id="submit1"><button type="submit"><img
src="heart.gif" alt="">ì送信</button></span><input id="submit2" type="submit" value="送信">166 +++ iNTERNET magazine 2003.05 +++ウザーではbutton要素だけが表示されるという仕掛けだ。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

3［ フォーカスに合わせて色を付ける ］
画像や枠線を単純に加えるだけでなく、ユーザーの操作に応じてダイナミックにスタイルを変えるようなフォームを作ってみよう。CSSの機能を使えば簡単なのだが、ウィンドウズ版IEではJavaScriptを使った工夫が必要になる。

:focusがだめならJavaScript
CSSにはfocus疑似クラスという機能がある。
「要素名:focus」というセレクターを使えば、要素にフォーカスが当たったときのスタイルを指定できる。ソース①のようにinput要素やtextarea要素でfocus
疑似クラスを使えば、テキストを入力中の欄だけ背景色や文字色、枠線の色を変えることが可能だ。現在どの欄を入力中なのかが一目で分かるので、使いやすいフォームになる。しかし、focus疑似クラスに対応しているのは、ネットスケープ 6以降、マッキントッシュ版IE 5、Opera 7だけだ。残念ながらウィンドウズ版 IEは① tips3-1.html対応していない。
ソース②と③は、ウィンドウズ版IEでも* input.text, * textarea { border: 1px solid #FC8;
background-color: white; color: black; }input.text:focus, textarea:focus { border-color: red;background-color: #FFC; color: maroon; }focus疑似クラスのような機能を使えるよ
うに、入力欄の色を変えるスクリプトを作ってみたものだ。まず、色を変えたい入力欄には、あらかじめソース③のようにイベント属性onfocusとonblurを記述し、それぞれ関数focusInputとblurInputを呼び出すようにしておく。関数の引数にはそ② tips3-2.html（JavaScript部分）の要素自身を表すthisを渡す。
ソース②がJavaScriptのソースだ。関function focusInput (obj) {if(!document.getElementById) return;obj.style.borderColor = "red";obj.style.backgroundColor = "#FFFFAA";
obj.style.color = "maroon";}function blurInput (obj) {if(!document.getElementById) return;obj.style.borderColor = "#FC8";
obj.style.backgroundColor = "white";obj.style.color = "black";}

数focusInputは入力欄にフォーカスが当たったときに呼び出され、blurInputはフォーカスがはずれたときに呼び出される。
関数focusInputでは、まず古いブラウザー で 実 行 さ れ な い よう に 、document.getElementByIdをチェックする。引数objを使ってstyleオブジェクトのプ ロ パ テ ィー b o r d e r C o l o r 、backgroundColor、colorの値を変えれば、フォーカスが当たった入力欄の枠線の色、背景色、文字色が変わる。関数
blurInputは、同様にしてフォーカスがはずれたときの色を元に戻している。これで、ダイナミックに入力欄の色が変わるスク③ tips3-2.html（HTML部分）

リプトの完成だ。

<input class="text" type="text" name="name" size="40"
onfocus="focusInput(this);"onblur="blurInput(this);">インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2003.05 +++167

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jpCopyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.