ｃｓｓをモバイルサイトに使用した際…
-
0 名前： AKI ： 2005/06/25 17:06
- 困っています！わかる方教えてください！
モバイルサイトにスタイルシートを適用させています。
cssの内容は
BODY, P, DIV{
font-size : 18px;
line-height : 20px;
}
のみです。
cgiのファイルにcssへを適用させると、selectboxの選択部分の文字が
折り返されてしまって、綺麗に表示ができません。
＊（cgiは条件を指定し目的のページを表示させる内容の物です、条件選択にセレクトBOXを使用しています）
オプション指定で幅を変えたり、文字列の折り返しを禁止したり試したのですが
携帯での表示がうまくいきません。
select要素部分のみcssを適用させない、、、そんな方法が有ればいいのですが、
まだ勉強中のためどのように対応したらよいのかわかりません。
HTML以外の（携帯専用の）cssじゃないとだめなんでしょうか？
手作業で、〈フォントタグ〉を埋め込んでいかなくてはだめなのでしょうか？
どなたか、詳しい方教えてください。
一応、問題となっているselect要素部分の内容を書いておきます。
<div><form action="$myname" method=get>
$form_this_mode
$form_this_count
$what_find<select name="type">
$top_type
$more_type
</select><input type=submit value="選択">
</form></div>
と
print "▽都道府県<br>\n";
print "<select name=P2><br>\n";
print "<option value=\"99\" selected>指定なし\n";foreach (0 .. $#part2) {
print "<option value=\"$_\">$part2[$_]\n";}
のように、色々な内容のcgiを利用しております。
-
1 名前： カヅサツ ： 2005/06/25 17:06 ［URL］
- > select要素部分のみcssを適用させない
CSSには継承という概念があり、プロパティによっては親要素に指定されたスタイルが子要素にも適用されますので、子要素に再度異なる指定するしかありません。
例えば
body{
color: black;
}
p{
color: red;
}
option{
color: black;
}
<h1>見出し</h1>
<p>段落<select><option>オプション</option></select>段落</p>
ならば、「段落」が赤くなり、「見出し」と「オプション」が黒くなることが期待されます。
ただし、環境によっては一部または特定の CSS は無視され得ます。例えば IE は input や select などに対する z-index を無視します。また、ユーザスタイルシートなどによっても変更されます。
-
2 名前： AKI ： 2005/06/25 17:06
- カヅサツさん
ご返答有難うございます、
フォントカラーで具体的に教えていただきましたが、
要は、外部CSSを使う場合、
対象の部分は個別にスタイルを指定してあげなければいけない
ということでしょうか？
大事なことを書き忘れましたが、cssは外部からリンク参照ををしています。
そして、フォントサイズがデフォルト（cssで指定しないようにすると）だと
問題ないのですが、フォントサイズをいじるとセレクトボックスの表示が
一行以上になってしまいます。
モバイルで参照したときだけ、このような状態になるのです。
すいません、返答いただいたのに又質問してしまって。
もう少し、、
…素人なもんで…
判りやすく教えていただけると非常に助かりますm(__)m
-
3 名前： カヅサツ ： 2005/06/25 17:06 ［URL］
- > 要は、外部CSSを使う場合、対象の部分は個別にスタイルを指定してあげなければいけない
いえ、外部であろうとなかろうと、です。
style要素で試してみればわかると思います。
もちろん継承しないプロパティもあります（marginなど）
> フォントサイズがデフォルト（cssで指定しないようにすると）だと
> 問題ないのですが、フォントサイズをいじるとセレクトボックスの表示が
> 一行以上になってしまいます。
> モバイルで参照したときだけ、このような状態になるのです。
たぶん、そのモバイルをオレは持ってないので、なんとも検証できないのですが、
select,option{
font-size: medium;
}
とかでどうですか。
（ダメなら、small, 100%, 80% とか、値を変えてみる）
-
4 名前： AKI ： 2005/06/25 17:06
- カヅサツさん
しばらく出張していて不在のため、お返事遅れました！！
ありがとうございます、チャレンジしてみます。
時間がかかるとは思いますが、結果ご連絡しますね！
