CSS//Q&A

CSS//Q&A

CSS についての質問がしたいのですが。

[1] ここに書いても構いませんし、どっか他の所 (>>2) に書いた方がいいかもしれません。

[2] CSS の質問が出来る場所, 見れる場所

[29] >>28: いいえ。どんな質問でも構いません。 この WikiPage の名前が「CSSのFAQ」 なのは歴史的事情なので、あんまり気にしないで下さい。

Mozilla と Internet Explorer で表示が異なります。これってバグでしょうか。

[3] まず、 CSSバグ辞典をご覧下さい。

[18] >>3 2002-12-30 20:14: 問題になるのは多くは WinIEOpera の不具合ですね。 もちろん Moz にも不具合はありますが、 Moz の方が標準にかなり近いし、バグってても次の版で直ってたりするし。

変更が反映されません。

[5] Q: CSSスタイル・シートを修正して、ブラウザーで再読み込みしたんですが、変更がなぜか反映されません。 CSS の書き方が間違っているのでしょうか?

[5] A: 書き方が間違っている可能性もありますが、ブラウザのキャッシュのせいで最新のものが参照されていないのかもしれません。 MozillaNetscapeNavigator をお使いの場合は、再読み込みボタンを Shift 鍵と一緒に押してみて下さい。

上付きになりません。

[6] Q: vertical-align 属性を sup にしたのですが、 Mozilla で表示しても上付きになりません。 Mozilla のバグでしょうか?

[7] A: vertical-align 属性の値に sup はありません。 supper と指定しましょう。 (確かに HTML の要素名は sup要素 (と sub要素) なのに、 CSS の属性値は supper] と sub なのは紛らわしいですね。)

[33] >>7 2003-12-17 12:46:30 +00:00: s/supper/super/g。ていうかお前らいままで間違いに気づかないとはどういうことよ? 気づいたら直せよ。

外部 CSS の大きさ

[9] 質問: 20KBくらいもあるのが気になってますが。

[10] >>9 気にしなくていいんじゃないでしょうか。

[11] >>10 福音だ。

[19] Name_Not_Found 2002-12-30 20:17: サイズよりも (サイズに比例はするんでしょうが) サーバーの応答とか転送も含めた時間の方が問題ですね。 スタイル・シートが全部届いてからレンダリングする UA も少なくないですから。

だから目安になる大きさがあるんじゃなくて、 case by case でしょう。 スタイル指定が複雑なことによるレンダリングの速度とかは、今のふつーな環境なら気にしなくていいと思いますし。

スタイル指定をバラバラに行う

[12] 質問: ●いままでのわたしの書き方

h1 {大きさ、配置、など}
h2 {大きさ、配置、など}
h3 {大きさ、配置、など}
p {大きさ、配置、など}
...
.color333 h1 {色、など}
.color333 h2 {色、など}
...

●さっき思いついた書き方

h1
{大きさ}
h2
{大きさ}
h3,p...
{大きさ}

h1,h2,h3...
{配置}
p...
{配置}
...

.color333 h1, .color333 h2...
{色}
.color633 h1, .color333 h2...
{色}
...

後者のほうが、圧倒的にファイルサイズを小さくできる予感! しかも、わたし的に非常にわかりやすい!

ひとつのマークアップのスタイル指定を、 色や大きさなどでバラバラに行うのはイクナイ!なんてことはないですよね?

[13] >>12 ないですね。

[14] >>13 ヤター!ありがとう。

[15] 14: ダイエットに成功しますた。

[16] >>14: 某サイトはぜぇんぶ同じCSS設定して放り込んであるし、 ページごとのはへっだぁの<style>〜</style>に放り込んであるから、 そんなこたぁ気にしない。 かんがえてるのも面倒だし。 放り込み方が雑でいけないなぁ。

古い UA への対策

[20] 質問 (Name_Not_Found 2002-12-30 20:20): WinIE3 とか NN4 への配慮をする必要はありますか?

[21] Name_Not_Found: 幾つかの統計によると WinIE3 の利用者は既に皆無又はほとんど零です。 また、 NN4 の利用者もまだ存在するとはいえ、確実に減少しています。 (サイトの種類・傾向によっては既に皆無でしょう。)

これらの古い UA への対策はもうしなくても良いと考えられます。 逆に対策を施すことにより新しい UA への移行が妨げられる弊害を考えた方が良いでしょう。

ちなみに、 WinIE3 も NN4 もスタイル・シートを無効にする設定が可能ですので、事情があって未だに使っている人はその設定にすれば問題なくなります。 (実際現在の多くのサイトは無効にしないとまともに見ることは不可能です。)

[22] [iif: undef]匿名ブロック 2003-01-05 17:04: 注意点,ブラウザ振り分け <http://east.portland.ne.jp/~sigekazu/css/boxm.htm>

XHTML に適用されない

[23] 質問 (匿名ブロック): HTML 4.01 から XHTML 1.1 に変更したら今まで正常に適用されていた CSS のスタイルシートが一部適用されなくなってしまいました。どうしてでしょうか?

[24] >>23: 選択子の要素型名に大文字を使ってませんか? DD {display: none} とか。 XML では HTML と違って要素型名の大文字・小文字が区別されることの影響がこんなところにも出てきます。

[25] 23: >>24 まさにその通りでした。一部適用されなくなったのはクラス名選択子とか小文字で書いてあった要素型名の選択子でした。

em は使わない方が良い?

[26] 質問 (匿名ブロック): 単位の em をおかしな風に解釈するバグがあるブラウザがあるから使わない方がいいと聞きました。 本当ですか?

[27] 匿名ブロック: 本当です。 WinIE3 は例えば 5em なら em の部分を無視して 5(px) と解釈してしまうので、豆粒より小さくなってしまいます。

しかし、多くの調査で WinIE3 利用者は既に皆無又は皆無に近いことがわかっています。 今更そのようなふるい UA に配慮する必要はないでしょう。 >>20- 参照。

垂直中央にボックスを配置

[30] 質問 (匿名ブロック): 表示領域の垂直中央にボックスを配置するにはどうしたらいいですか? 文字列なら vertical-align: middle でうまくいきますが。

[31] >>30: スタイルシート 縦中央(垂直中央) <http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm>

table-row を複数行に分割

[32] 質問 (匿名ブロック):

<tr><th/><td/><td/></tr>

<tr><th colspan="3"/></tr>
<tr><td/><td/><td/></tr>

のように表示できないでしょうか。

XSLTXBL のような方法で表示のために構造を変えてしまうとか、 幅をスタイルシートで完全に決定できる場合はなんとかなりそうですけど、 一般の場合ではどうでしょうか。

新しい質問の追加

メモ