PakuReserve(パクレゼルヴ) R&D Laboratory

はじめまして。
パクレゼルヴ開発部の”のびーにょ”です。
パクレゼルヴの開発って、何作ってるの？って感じだと思いますが
携帯電話のWEBコンテンツ作ってます。

日々、Google先生に色々聞きながら調べ物とかしてるんですが、いろんな企業のラボが引っ掛かることが非常に多いです。
これって結構ブランディングとかにもなるなーとか思いながら調べ物とかしてるんですが、
外部の人に内部のこと(開発してるものや事)を知ってもらうのにも良いんですよね。
調べればわかることだし、社内で秘密にするレベルの話でもないですし。

ってことで、パクレゼルヴの開発部もブログ形式でラボっぽいことやります。

とりあえず一発目として・・・
【auの携帯電話でセレクトボックス(プルダウンメニュー)内部が改行されることについて】
ちょっと前にはまったのでTips的に

<div style="font-size:x-small">
	好きな果物<br />
	<form action="" method="post">
		<select name = "hogehoge">
			<option value="0">Apple</option>
			<option value="1">Pineapple</option>
			<option value="2">Lemon</option>
			<option value="3">Strawberry</option>
		</select>
	</form>
</div>

普通のフォームでのセレクトボックス。
でも、これだとauの携帯電話だと表示が崩れます。

原因として、プルダウンメニュー内での、フォントサイズは”medium”で表示されるようです。
しかし、”font-size:x-small”でのフォントサイズで、プルダウンメニューの横幅が設定され、
“font-size:x-small”の横幅にも拘らず、”medium”サイズのフォントをプルダウンメニュー内に表示してしまう為、改行されてしまうようです。

解決策として、”select”タグの前で、一旦フォントサイズを”medium”にすることで対応可能です。

他のキャリアでは、このような現象は確認出来ておりませんので、ブラウザの解釈の違いによるものかと思います。

非常に汚いhtmlになりそうな気がするんですけどね・・・

<div style="font-size:x-small">
	好きな果物<br />
	<div style="font-size:medium">
		<form action="" method="post">
			<select name = "hogehoge">
				<option value="0">Apple</option>
				<option value="1">Pineapple</option>
				<option value="2">Lemon</option>
				<option value="3">Strawberry</option>
			</select>
	    </form>
	</div>
</div>

こんな感じですかね。。。

これなら”好きな果物”の部分だけspanとかで指定してもいいんですけど、
ページ全体の文字のデフォルトをx-smallにしたい場合とかだとこうせざるを得ないのかなぁと

良い解決策なんかがあれば、教えていただけると助かります。

【追記】2008/05/23 18:11
どうやら少し勘違いしてました

原因として、プルダウンメニュー内での、フォントサイズは”medium”で表示されるようです。
しかし、”font-size:x-small”でのフォントサイズで、プルダウンメニューの横幅が設定され、
“font-size:x-small”の横幅にも拘らず、”medium”サイズのフォントをプルダウンメニュー内に表示してしまう為、改行されてしまうようです。

これ　実は違ってたっぽいです
SELECTタグ開内ではそれより上で指定されていたフォントサイズの指定が解除される(機能しない)ようです
つまり、SELECTタグの中で個別でoptionの値のフォントサイズを変更して、文字サイズをそろえることもできるようです
以下サンプル

<div style="font-size:x-small">
	好きな果物<br />
	<form action="" method="post">
		<select name = "hogehoge">
			<span style="font-size:x-small">
				<option value="0">Apple</option>
			</span>
			<span style="font-size:x-small">
				<option value="1">Pineapple</option>
			</span>
			<span style="font-size:x-small">
				<option value="2">Lemon</option>
			</span>
			<span style="font-size:x-small">
				<option value="3">Strawberry</option>
			</span>
		</select>
	</form>
</div>

のびーにょ HTMLとか, Tips, その他, 携帯電話