制作者の活動(PR)。

アイドル女優・堀北真希ちゃんはうさぎの耳が似合うと思って作った制作者の創作キャラクタ
主な作品

堀北真希ちゃんがボシュロム社コンタクトレンズ用品コマーシャルに出演した事に因んだ、レンズを着けている堀北真希うさぎのイラストと仮想CM動画

プルダウンメニュー(<select>要素)に対するCSSの実装状況。

CSSに於いて平成21年11月現在未だに実装が大きく遅れているフォーム周りへのスタイルのうち、特に遅れが目立つプルダウンメニュー(<select>要素)へのスタイルについて。

プルダウンメニュー(<select>要素)に対するCSSの実装状況・目次。

未だに遅れているフォーム周りへのCSS実装。

今日、CSSは殆どのPC向け視覚系ウェブブラウザで充分な実装となってきております。

かつてはインターネットエクスプローラの実装に難点が多々ありましたが、Acid 2と呼ばれるCSSテストのお蔭か容易に問題点が見出せるようになり、現在最新版のインターネットエクスプローラ 8では充分な実装とされるようになりました。

ですが、これだけCSSが実装されるようになっても未だに対応が遅れているのが、フォーム周りのCSSです。

確かに、フォームに関してはCSSのセレクタの及ばない部分があります。

特に、プルダウンメニュー(<select>要素)にその傾向が顕著です。

ここでは、<select>要素のCSSの実装状況を見てみたいと思います。

サンプルとなるHTML文書。

サンプルとなるHTML文書は以下の通りです。

<title>プルダウンメニューのスタイル</title>
<p>
    <select>
        <option selected="selected">堀北真希</option>
        <option>上戸彩</option>
        <option>新垣結衣</option>
        <option>榮倉奈々</option>
        <option>井上真央</option>
        <option>仲間由紀恵</option>
        <option>長澤まさみ</option>
        </select>
    </p>

つまり、一番目の堀北真希をデフォルトの選択肢としてアイドル女優の中から撰ぶと言うものです。

サンプルとなるCSS。

続いて、サンプルとなるCSSを挙げておきます。

select {
	border: #8f8 solid 2px;
	padding: 0.2em;
	font-weight: bold;
	color: #090;
	height: 2em;
	}

option {
	border: 1px solid #ccc;
	margin: -1px 0 0;
	padding: 0.2em 0.2em 0.2em 24px;
	background: #efe url('Icon.GIF') no-repeat 4px center;
	font-weight: normal;
	line-height: 1em;
	color: #000;
	}

option[selected] {
	font-weight: bold;
	color: #090;
	}

つまり、

  1. プルダウンメニューの周りを緑が強めの薄緑の枠で囲み、背景は青めの薄緑(エメラルドグリーン)とし、文字は緑の太字とします
  2. 各選択肢(<option>要素)はグレーの枠線で囲み、エメラルドグリーンの背景と「Icon.GIF」と言う透過GIF画像を左端に置いて黒の細字で表示するものとします。
  3. 特に、selected属性を与えた選択肢については、緑の太字で表示されるようにします。

実際に表示させてみると…。

さて、以上のHTMLとCSSで実際に表示させて見ましょう。

ファイヤーフォックス 3.5の場合

ファイヤーフォックス 3.5で表示させると、指定した全てのプロパティが適切に適用されているのが分かります。

インターネットエクスプローラ 6.0の場合

インターネットエクスプローラ 6.0では、属性セレクタをサポートしていないのもあるのでしょうが、それにしても<option>要素へのfont-weightプロパティが全然効いていないため、全選択肢が太字のままになっております(<select>要素の同プロパティを継承したままで変更されていないようです)。

また、ボーダの指定も背景画像の指定も無視されております。

加えて、<select>要素の枠線も効いておりません。

インターネットエクスプローラ 7.0の場合

インターネットエクスプローラ 7.0では属性セレクタもサポートされたにも拘らず、option属性を指定した堀北真希が黒字のままになっております。

加えて、ボーダの指定も背景画像の指定も無視されたままとなっております。<select>要素の枠線も相変わらず効きません。

インターネットエクスプローラ 8.0の場合

標準準拠度が高まった筈のインターネットエクスプローラ 8.0では、漸く<select>要素への枠線がきちんと表示されるようになりました。

尚、制作者の環境ではポップアップブロックとなってしまい、実際にこのフォームを開く事が出来ませんでしたので、<option>要素の表示が確認出来ません。

オペラ 10.01の場合

iCabやIEなど他社にCSSの実装に関していちいちいちゃもんを付けているオペラの10.01版でも、ボーダや文字の太さ及び背景画像が無視されております。

サファリ 4.0.3の場合

サファリ 4.0.3も、ボーダや文字の太さ及び背景画像が無視されております。

こうしてみると、ファイヤーフォックス以外については余り見栄えを期待するのは避けた方が良いのかも知れません。

結果を見ての感想。

フォーム周りはCSSの実装が遅れていると感じてはいたのですが、こうして見ると余りにも遅れ過ぎているのではないのかと思いました。

もっとも、フォームの部品はいわばユーザインタフェースと言えるものなので、無闇に弄られると却ってユーザビリティを落とす恐れもあるのでしょう。

しかし、だからと言って実装しなくて良いと言う言い訳にはならないと思います。

どうしてもフォームに見栄えを求めるのであれば、現状ではフラッシュとかで作るかJAVAスクリプトとDOMを活用して作るかしか無いでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com