WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:CSS検証サービス結果について

0:[投稿] wondering person [2002/05/29 19:44 ][環境:WIN+IE 不明]

はじめました、こんにちは。

CSSについての質問です。
W3C CSS検証サービス(http://jigsaw.w3.org/css-validator/)で、
スタイルシーツのチェックしてみたんです。

で、結果についての疑問があります。

body  {color:white; background:black;}
h1,h2 {color:aqua; border:solid thin red;}

というような、要素に対して全面色だけを指定しているとこに警告「color全面色に対してのbackground背景色の指定がありません」がでました。

ブラウザ表示するときは、h1,h2要素にbody要素の背景色が表示されるので問題ないなと思っていました。

でも、color属性を指定した場合には、background属性で背景色も必ず指定しないといけないんでしょうか?

よろしく、お願いします。


1:[関連] さっぱり★ [2002/05/30 08:25 ]

その前にParse errorが出ませんか?
全角スペースがあるようですし。


2:[回答] TOM neko [2002/05/30 10:52 ]

たとえば、ユーザースタイルシートで、
h1 { color: black; background: aqua; }
としている人がいると、colorでaquaの指定しか無いh1の文字が見えなくなります。
bodyの背景色を継承させるのはinheritですね。NN4でおかしくな色になるみたいですが。


3:[回答] ma-to [2002/05/31 20:06 ]


そのユーザーがアホじゃないの? 勝手にメガネメガネさせとけよ、と思うがいかに。

検証サービスは、検証しているシートがユーザーシートなのかオーサーシート (造語かな) なのかを分別しているわけではないので、一律なメッセージを送ってきているに過ぎないと思うんだがいかがなものか。つまりユーザーシートの検証をしている人はこのメッセージに注意しなさいよということじゃあないかな、多分。

もしユーザー (それがCSSであろうがなかろうが) に手落ちがないのに、前景色と背景色が一致してしまうという場合があれば話は別だが、そんな場合はない。例えばユーザーが「どうしても文字を読みたい」のならば、ある要素の背景色を透明色に指定した場合にその要素の親 (の親の親の、、、親) には必ず背景色を指定しておかなければならず、ユーザーシートが優先されるルールによればそれは詳細度に関して特に注意しなくても容易に行える作業であるから、ユーザーの手落ち。ユーザーが初期値 (この場合はオーサーシート) に任せて何の指定もしていなければそれは言うまでもなくユーザーの手落ち。
もしウェブブラウザの未熟な実装が元で問題が起こったとしても、それはそのバグを知らない制作者のせいではなくてヴェンダーのせいだろう。
もし。。。

私が短絡的なのかそれともこの問題が (検証サービスのメッセージという権威を背景に) 無条件に遍く信じられてしまったことだからかは知らないが、果たして私の中では少なくとも制作者の関知する事項ではないと思われている。

/*
transparent (initial。inheritは質問者の求めるものではないだろう) は何も書かなくても指定されているはずなので気にすることはないと思う。
N4まで気にする奇人はいないだろうが、JSSTag.prototype.backgroundColor, Layer.prototype.bgColor, Document.prototype.bgColor等が透明にならないときには大概はnullでどうにかなるもので。
*/


4:[回答] TOM neko [2002/05/31 20:50 ]

ユーザースタイルシートよりページ作者のスタイルシートが優先だよ。

http://www.w3.org/TR/REC-CSS2/cascade.html
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet.


5:[回答] satoshii [URL] [2002/06/01 16:57 ]

警告が出る理由は >>2 に述べられている通りですが、>>3 の末尾にあるように background には inherit ではなく transparent を指定すべきでしょうね。
親要素の背景が画像のときには、inherit だと意図しない表示になってしまうと思います。


6:[回答] TOM neko [2002/06/01 17:45 ]

>>5
あ、たしかに。画像が背景なのにinheritだと画像が見えなくなりますね。


7:[回答] おーなーしぇふ [2002/06/02 00:09 ]

今はなき「Web Design BBS」でも以前同じ質問があったようです。まだデータは閲覧できるので、御参考まで。
#でもやはり、TOM nekoさんの回答とほぼ同じ内容ですが

http://www.phoenix-c.or.jp/~zspc/cgi-bin/wwwlng.cgi?print+2000-04/00040011.txt


8:[回答] ma-to [2002/06/02 17:04 ]


/*
30時間ほど上司と不眠で働いた後にスガスガしいスタイルシートの話がよめる掲示板を開設されている管理人に多謝。
*/


>>4
まさか。いくらあほでもそのくらいは分かってるぜよ。最終的には、とでも書くべきだったのかな。さもなくばユーザーシートの意義がない。無用でダルいツッコミはするなぁ(心)。

[6.4.2[

/* From the user's style sheet */
P { text-indent: 1em ! important }    /* 優先 */
P { font-style: italic ! important }    /* 優先 */
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }    /* 優先。4はこれが言いたかったのだろう。 */

]]


補足で蛇足。オーサーはclassだのidだのでユーザーの予測不可能な固有のセレクタを持って来る時には当然、件のメッセージに従っているという前提があるとしている。十分な注意がはらわれているのに背景色と前景色が一致するのはユーザーの自己責任でしょ、という話。そして質問者の提示した例にあるタイプセレクタはこれ以上ないくらい一般的で、ユーザーは確実に予測可能だから、検証サービスの一律なメッセージは当てはまらないだろう、という話。


>>7

7へのツッコミではないが、そのリンク先の回答は「条件を無視して物理法則を適用する」かの如き回答だ。さすがにそんな低学年への指導モドキでは今回の質問者は納得せんだろう。


9:[回答] TOM neko [2002/06/02 21:11 ]

この問題は、むかし「bodyで背景色を指定したらテキストの色も必ず指定すること」って言われていたことと同じですね。「DOS風に黒字に白文字で見ている人だっているから」ですね。CSSではセレクタ単位になって少し複雑に見えますが、単純なことです。

1.ブラウザのデフォルト(デフォルトスタイルシート)
2.ユーザースタイルシート
3.オーサーのスタイルシート
4.ユーザースタイルシートの!important
5.オーサーのスタイルシートの!important

と、この順番でカスケードされますね。

ユーザー(訪問者)にしろ、オーサー(ページ作者)にしろ、前景色と背景色の片方しか指定してないセレクタを書くと、それ以前の段階で指定された色が使われるわけで、それ以前の段階が自分のコントロール下にない、3.以降の場合には両方指定する必要が出てきます。ユーザースタイルシートなのかオーサーのスタイルシートなのかで違いがあるわけではありません。責任があるとしたら書き忘れた人。

自分が定義したセレクタだから書かなくていいって事もありませんが(偶然もあるし)、忘れて不具合が出易いのは、むしろ一般的なbodyとかh1とかですね。

というわけで、
>>1
>でも、color属性を指定した場合には、background属性で背景色も必ず指定しないといけないんでしょうか?

いけません。W3C CSS検証サービスが正解。
(納得できないことを盲信しないのは良いことです)


10:[関連] さっぱり★ [2002/06/02 21:37 ]

>>9
>4.ユーザースタイルシートの!important
>5.オーサーのスタイルシートの!important
あれ? CSS1ですか?


11:[回答] TOM neko [2002/06/02 21:59 ]

>>10
そうでした。>>9の4.と5.は逆です。

1.ブラウザのデフォルト(デフォルトスタイルシート)
2.ユーザースタイルシート
3.オーサーのスタイルシート
4.オーサーのスタイルシートの!important
5.ユーザースタイルシートの!important

ということで。感謝。


12:[回答] ma-to [2002/06/03 14:13 ]

>>9
>>11

そりゃ話はかみあわんな。ようやくスタートが揃った。ほっ。
で、それこそ単純な話ですから、
「オーサーシートに関して、背景色と全面色は【多くの場合】同時に指定しなければならない。」
となるんじゃあないかな。

そもそも1はこれに関する意見を聞きたかったのでしょうし。1が話を限定するためにセレクタをbodyとheadingに絞っているのも、粗い検証サービスのメッセージにはないようなメッセージ、つまり自分への同意を求めているんだと思いますが。


オーサーシートでは、

    *
    {
        color: inherit;
        background: transparent;
    }

    html
    {
        color: #fff;
        background-color: #000;
    }

    h1, h2
    {
        color: #0ff;
    }

で十分でしょ、本来は。*での指定を上書きしているだけです。
同じことをユーザーシートでするのであれば、

    html
    {
        color: #fff !important;
        background: #000 !important;
    }

    body
    {
        color: #fff !important;
        background: transparent !important;
    }

    h1, h2
    {
        color: #0ff !important;
        background: transparent !important;
    }

とかなんとか、暑苦しいことになるんでしょうね。


13:[回答] ma-to [2002/06/03 14:27 ]

12の訂正。
発言番号は0からはじまっているんだな。だから、1ではなくて0。


14:[回答] TOM neko [2002/06/03 15:10 ]

>>12
どうして
「2.ユーザースタイルシート」つまり「!important」のないユーザースタイルシートの存在を無視するのですか?
議論になりませんね。


15:[回答] おーなーしぇふ [2002/06/03 15:47 ]

W3C CSS検証サービス(http://jigsaw.w3.org/css-validator/)
これにおける「color全面色に対してのbackground背景色の指定がありません」という警告がでるのか、という問題についてですが。
注)全面色→前面色or前景色が正しいはずですが、検証サービス自身が全面色と表示するのは、やっぱり誤訳?


ここは一度初心にかえり、まずCSS検証サービスの「FAQ」をチェックしてみると、やはり質問が多かったのか、以下のものが見つかりました。

●W3C CSS Validator FAQ
http://www.websitedev.de/css/validator-faq

----------------------------------------------------------------------
▼Why does the validator complain You have no background-color with your color?

If you don't specify color and background-color at the same level of specifity, your style sheet might clash with user style sheets.

To avoid this, specify always both of them, see Section 9.1 "Color Contrast" in the W3C Note "CSS Techniques for Web Content Accessibility Guidelines 1.0" or the article CSS Color Issues by the CSS Pointers Group for a discussion.
----------------------------------------------------------------------
▼なぜ「color前景色に対してのbackground背景色の指定がありません」という警告がでるのですか?

同レベルの(セレクタの)詳細度(specifity)で前景色と背景色を指定していない場合、あなた(オーサー)のスタイルシートとユーザーのスタイルシートが衝突する可能性があります。

これを避けるため、前景色と背景色の両方を常に指定して下さい。詳しくはW3Cノート(覚書)『ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS技術書』のセクション9.1「色のコントラスト」やCSS Pointers Groupで議論されたCSSの色問題(CSS Color Issues)の文章を参考のこと
----------------------------------------------------------------------
※投稿者による翻訳


というわけで、基本的にはオーサーのスタイルシートが検証対象として想定されていることがわかります。

で、両方の指定を警告する根拠は、本来のCSSの仕様書ではなく、実は「ウェブコンテンツ・アクセシビリティ・ガイドライン」から見たCSSの技術仕様書にあったようです。

■『ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS技術書』
(原文)http://www.w3.org/TR/WCAG10-CSS-TECHS/
(邦訳)http://www.zspc.com/documents/wcag10-tech/css-techniques/
----------------------------------------------------------------------
Section 9.1 "Color Contrast"
『Ensure that foreground and background colors contrast well. If specifying a foreground color, always specify a background color as well (and vice versa).』
http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-colors
----------------------------------------------------------------------
『前景色と背景色のコントラストは、十分なものにしてください。前景色を指定する場合は、常に背景色も同時に指定するようにしてください(逆も同様)。』
http://www.zspc.com/documents/wcag10-tech/css-techniques/#style-color-contrast
----------------------------------------------------------------------
※zspc様の邦訳より引用


もっとも、オーサーが指定しない場合それはオーサーの誤りなのかというと、そうではないという言及が『CSS Color Issues』の中でされています。

■CSS Color Issues
http://www.css.nu/articles/CSS-colours.html
----------------------------------------------------------------------
This instance, however, cannot be your fault. The user should exhibit the same good sense the author has in setting 'all or none' in colors.
----------------------------------------------------------------------
しかし、この例はあなたの誤りではない。色を指定するかしないかという点については、ユーザーもオーサーと同じ良識を示すべきなのである。
----------------------------------------------------------------------
※投稿者による翻訳

というわけで、こちらで議論されているのと同じ内容も見られるようですが、一応まとめると、「オーサー・ユーザーの区別なく前景色と背景色は常に両方指定しておくほうが良いでしょう」というのが、CSS検証サービスの見解であると、私は判断しましたがいかがでしょうか?


16:[回答] TOM neko [2002/06/03 15:48 ]

>>12
オーサーにできるならユーザーでも同では?
*
{
       color: inherit !important;  
       background: transparent !important;
}


17:[回答] TOM neko [2002/06/03 18:13 ]

>>15
調査ありがとうございます。文法的な問題では無く、アクセスビリティの問題なんですよね。気になった部分ですが、

>しかし、この例はあなたの誤りではない。色を指定するかしないかという点については、ユーザーもオーサーと同じ良識を示すべきなのである。

そこでの「この例」は、ユーザーが暗い文字と明るくない背景を指定した場合の問題ですね。つまり、先行するユーザースタイルシートで「見えにくい」指定がしてあるセレクタがあっても、それを上書き指定する義務がオーサーにあるわけでは無い、という意味ですよね。

'all or none' ですから、前景背景両指定か、なにも指定しないかということで、片方だけ指定は論外になってますね。

ってフォローしてみました。

>「オーサー・ユーザーの区別なく前景色と背景色は常に両方指定しておくほうが良いでしょう」というのが、CSS検証サービスの見解である

そうですね。WAI的な意味ですから「推奨であっても強制では無い」ってことで。そもそもページの構成を見ずに、シート単独での検証には限界がありますし。

>>16
inheritとtransparentをHTMLに指定するのって、おかしような気もしますが。「HTML以外のセレクタ全て」という指定が必要なのかな。


18:[回答] TOM neko [2002/06/03 19:57 ]

>>17
ちょっと違いましたね。
「この例」とは、ユーザースタイルシートで暗いcolor指定で背景指定の無いセレクタがあると、そのセレクタに何も指定してないオーサーのページの親要素の背景が黒だと見えづらくなるが、それはオーサーの責任では無いと言う話。(わざわざ見えにくい指定にするのではありませんでした)

つまり、!importantのつかないユーザースタイルシートでも前景背景ともに指定しないと問題出るってことですね。transparent指定も問題出ますね。


19:[回答] おーなーしぇふ [2002/06/03 23:54 ]

>>18
> >>17
> ちょっと違いましたね。
ざっと見ただけで >>2 と同じケースだと思いこんでしましました。読み直すと確かに違っていますね。失礼いたしました(^^;)
#しかしmatoさんのおっしゃる「ユーザーの手落ち」という指摘もわかる気がしました。


20:[回答] TOM neko [2002/06/04 01:11 ]

>>19
>#しかしmatoさんのおっしゃる「ユーザーの手落ち」という指摘もわかる気がしました。

ああ、!important指定で上書きすれば、すべて解決ってことですね。

しかし、何も指定してないページをブラウザのデフォルトで見たときの味気なさには、!important指定しないユーザースタイルシートですよね。オーサーの指定があるなら邪魔したく無いわけです。そういう利用を想定して作られた規格なんですから、!important指定しないユーザーに責任をおしつけられても困るわけです。

というわけで、みなさん。スタイルシートでは前景色と背景色をちゃんと指定しましょう。って、ここだけの話ですが、わたしのページでもまだ全部には指定してないのです(反省)。


21:[回答] ma-to [2002/06/06 01:20 ]


>>15

なるほど、その結論で間違いないと思う。検証サービスというものはそれでいいと思っていることは既に述べた。
しかし、我々はそこまで馬鹿にされた指示をされてもいいのか? これは極めて単純なことだから、はっきりと正しいことを言ってもいいと思う。だれも勘違いせんだろう。そういうこともあって「質問」の形式で「それはおかしいだろう、馬鹿にするなよ、それくらい判断できるよ」な「苦情」が散在するんだと私は自分の都合に合わせて思ってみたりする。
つうか、何を信心深いことを言っているんだか。15も知っているだろうが、3CのCSSページのシートが既に件のルールを破っているだろ。つまり、「皆さんは間違いを起こさぬようにきちんと件のルールを守ってくださいね」とこしゃくなことを言われているだけだよ。


>>14

少し理解が浅い。それがもとで間違えている。なにが議論にならないだ、自分の浅はかを棚に上げておいて。

忌憚なく言うと、制作者は同一のセレクタに前景色と背景色を同時に指定しなければならない、というのはどこかのアホが極めて短絡的に出した結論が一般 (もしくは一部の真性アホ) に信じられているに過ぎないから無視してよい。
しかし、ユーザーが自分のシートであらゆるhtml文書を飾ろうとするのなら、どうしても同一のセレクタには必ず前景色と背景色は同時に指定されなければならない。

//同じことを何回も言わすんじゃあないよ。そろそろ理解すべし。

ともかく、最終的に、上書きするかそれとも上書きしてもらうかの判断までユーザーにゆだねられているんだから、制作者が頭を突っ込むこと自体おかしいだろ。


>>16

? 真剣に意味が分からんよ。12でユーザーの方に書いているんだが、いったい何を言わんと?
つーか、「ユーザーに全ての主導権あり」という基本がようやく実感として飲み込めてきたのか?


>>20

そんなことじゃあないよ、分かっていないなあ。責任の押し付けじゃあなくて、責任とかなんとかの持ち主が制作者であることはありえないんだよ。
こう書くと20は多分「制作者が下手打ったらどうするんだ」なんてことを書くだろうが、それは紛れも無く制作者の責任。制作者が最善を尽くしての話をしていることくらいは理解しておいてね。最善を尽くすに「前景色と背景色を同時に同一のセレクタに指定する」は含まれないから、ちなみに。


22:[回答] ma-to [2002/06/06 01:59 ]


>>16

ああ、*というセレクタをユーザーシートで使うということか。つまり16はユーザーシートを1ヶ月くらいかけて真剣に作ってみたことがないんだろうな。ユーザーシートに*は使わんよ、ボクは。そして誰でもそうだと思うよ、多分。!importantを競合させてどうすんだ (笑)。セレクタも詳細度も違うが、ブラウザが処理できるかどうか疑問だ。競合すら出来ないと思うんだがな。そんな変な仕様も実装も知らないのでちょっと真剣に調べてほしいな、誰か。


23:[回答] TOM neko [2002/06/06 06:15 ]

こんにちは。

>>12 で、ma-toさんが歩み寄りを見せていたにも関わらず、「議論になりませんね」と突き放した事を書いてしまって反省してます。ごめんなさい。

>>3 で、
>もしユーザー (それがCSSであろうがなかろうが) に手落ちがないのに、前景色と背景色が一致してしまうという場合があれば話は別だが、そんな場合はない。
との断言からすれば、
>>12 での以下の記述は!importantのつかないユーザースタイルシートに対する配慮になっています。
>オーサーシートでは、
>
>*
>{
>color: inherit;
>background: transparent;
>}
さらに、
>>21 では制作者側の責任にも言及。
>「制作者が下手打ったらどうするんだ」なんてことを書くだろうが、それは紛れも無く制作者の責任。制作者が最善を尽くしての話をしていることくらいは理解しておいてね。最善を尽くすに「前景色と背景色を同時に同一のセレクタに指定する」は含まれないから、ちなみに。

というわけで、わたしたちの意見の相違は、議論の見かけより非常に少なくなってますね。わたしも「同時に同一のセレクタに指定する」ことが必要だとは書いてませんから。


>>22
>!importantを競合させてどうすんだ (笑)。セレクタも詳細度も違うが、ブラウザが処理できるかどうか疑問だ。競合すら出来ないと思うんだがな。そんな変な仕様も実装も知らないのでちょっと真剣に調べてほしいな、誰か。
カスケードされるだけでしょう。CSSなんですから。!importantをつけることでカスケード順が変わるだけですよ。
まあ、実装の話をするなら、
>*
>{
>color: inherit;
>background: transparent;
>}
で、すでに問題が出ます。inputとtextareaには直接指定しないと、IEで色指定がおかしくなります。

では。


24:[関連] TOM neko [2002/06/06 06:24 ]

おお。Mac IE5だとq要素は""でくくられて表示されるのですが、
ソースを1行ずつ引用するとすごく読みづらいですね。


25:[関連] ma-to [2002/06/06 18:11 ]


>>24

それは私も前から気になっていた。暑苦しいと思う。そもそもセンスが爺くさいったらありゃしない。さすがに兜を脱ぐ。年の功というものなんだろう。
過去にこの掲示板の引用部分に関するスレッドがあったような気もするが気のせいかもしれない。管理人の悩みどころなんだろう、多分。
/*
ちなみに上記は悪口でもなんでもない。爺くさいセンスは嫌いではない。ここはマークアップがシンプルで正しいから好きだ。
*/


>>23

実装だけど、inheritはそれこそ最近のmozillaでかなり実装が進んでいるだけで、IEでは使いものにならないね、確かに。だから結局
h1 {color: Red; }
h1 * {color: Red; }
とかいうように「h1 *」という余計なセレクタを加筆せざるをえないな。それだけならば苦にはならないけれど、WinIEはその他なんでもかんでもおかしいので閉口する。ここ3年で5から6になったがCSSに関しては前進があまりないからかなり時代遅れになってしまった。どうやら標準とは融和しない方向だと見受けられるから、CSS未対応という点ではそろそろN4みたいに切り捨てていっていいだろうと思う。
/*
切捨てを決意して実行しないと無意味にdivで切り分けた変てこページはなくならないと思う。一体どうやってtitle属性の無いdivの切り分けをUAが有効に使えるのだろうか、興味津々誰か具体的に教えて、と常々思っている。おそらくこれはCSSの実装の未熟なWinIEに合わせた不思議マークアップだと想像されるから非難されるべきはヴェンダーだろうな。
body直下div羅列と同じ見栄えをtableで行っているページで最近よく目にするのがわけの分からんsummary属性。captionに書くべき内容がsummaryになっていて、captionがない。さすがにこれは制作者がアホ過ぎるというより他にない。仮に視覚上のレイアウト目的だけであったとしても、tableのマークアップは総じて誰もが苦手なようだ。
何にせよ実装が未熟だからマークアップさえいまだに素直に書けないというのは無視してよい些細なこととも思われない。
*/

!importantについては、WinIEがこちらの思い通りに処理してくれなかったと思う。多用していくとスタイル優先順位が乱れていったという経験がある。ただしそのシートはとっくに削除したから再現できない。そして原因の確認を怠っているから明言しなかった。だから誰かが自己責任で確かめてくれないかなあと思った次第。
仮にそういうバグがあるというのが事実であるとすれば、!importantは「ユーザーシートとオーサーシートもしくはオーサーシートとブラウザ固有のスタイルの切り分け」にのみ注意しながら使うにとどめる (まあ本来そのためにあるんだろうが) のが正解だと思っている。

ユーザーシートを作るというのはオーサーシートを作るのよりはmozillaでthemeを作るほうに近いと思う。
http://www.mozilla.org/xpfe/goodcss.html
はIEのシェアが100%近い実情とはいえ、参考にならないこともないだろう。
上記参照先のGuidelines for Efficient CSSリスト8などはIEにも当てはまると想像されるので、これを意識的に実践している人は少なくないと思う。このときcolorは継承するプロパティだから寧ろ書かないで済ませられる場合にはそうしている方が健全だろう。私はinherit、transparent、auto、initialなどなど大した意味も無いのに書く方だが、それはよい習慣とは言えないと指摘されることがあれば肯くしかない。それら全ては甘い (!importantのない) ユーザーシートに優先させる為だけに書いているわけで、かなりアホらしい行為だ。何故ならユーザーの知覚にどう届いているのかを気にしてみてもそれはユーザーが自身の持つ最終的な優先権で意識的にどうにでもしているものなのだからそれに対する責みたいなものや羞恥心の類を感じることは勘違いも甚だしいから。


このスレッド本来の話題に戻って。制作者に問題がある場合というのは限られている。それは擬似クラス。:hoverなどで前景色と背景色が反転するような指定をしている場合に注意しないと、

    <a href><kbd>i</kbd>ndex</a>

の<kbd>i</kbd>がマウスが重なると同時に消失するというページに遭遇するのはまれなことではない。a:hover * というセレクタを思いつかない人は多い。
私が思い当たる「制作者が背景色と前景色が結果的に同一にならないように注意すべきこと」というのはこの類くらいで、あとは誰彼がわざわざ指摘せずとも誰でもクリアできていると思うが、いかがなものか。


26:[回答] satoshii [URL] [2002/06/09 08:54 ]

> 私が思い当たる「制作者が背景色と前景色が結果的に同一にならないように注意すべきこと」というのはこの類くらいで、あとは誰彼がわざわざ指摘せずとも誰でもクリアできていると思うが、いかがなものか。

でも、現に >>0 さんは

> body {color:white; background:black;}
> h1,h2 {color:aqua; border:solid thin red;}

というスタイルに対して

> ブラウザ表示するときは、h1,h2要素にbody要素の背景色が表示されるので問題ないなと思っていました。

というような勘違い (基本的には "h1,h2要素にbody要素の背景色が表示される" けど、>>2 にあるような問題が起きうる) をしていた訳だし、そういう人は結構多いと思いますよ。

要するに
* {color:inherit; background:transparent;}
body {color:white; background:black;}
h1,h2 {color:aqua; border:solid thin red;}
なら問題ない訳ですが、初めからこのことに気付ける人というのは中々いないんじゃないでしょうか。

あと、ついでに。

> 一体どうやってtitle属性の無いdivの切り分けをUAが有効に使えるのだろうか、興味津々誰か具体的に教えて、と常々思っている。

CSS で要素セレクタとして利用できる、というのは有効な用途ではないんでしょうか? いや、真剣な話…。

…まあ、少なくとも div に id が振られていれば IE や Moz でも活用できますし、木構造を活用できる一般的なパーザなら汎用できると思いますよ。CSS でセレクタにするってのも、木構造を活用している例ですし。
ところで、僕の div もへんてこですかね?


27:[関連] ma-to [2002/06/10 00:51 ]


/*
同じ話題が何度も繰り返されるのは常だが、それが同一のスレッドで繰り返されるとさすがに気分悪い。
*/


>>26

> というような勘違い (基本的には "h1,h2要素にbody要素の背景色が表示される"
> けど、>>2 にあるような問題が起きうる) をしていた訳だし、そういう人は結構
> 多いと思いますよ。

検証サービスは今のままでいいと言っているんですよ、通過儀礼という意味で。あなたはいつまでもそうですか? 一度経験すれば以降は自分で判断できるでしょう。
その問題は賢明な制作者には関係ないのです。明確に線が引けるので制作者がしゃしゃり出るとそれは寧ろ僭越とさえ言えますが、ここら辺の心がけは個人的なことだから好きにしていいでしょうということで。落ち着いて理解宜しくお願いしますね。


>id

投稿後すぐにid属性を書き忘れたのに気づきました。


> …まあ、少なくとも div に id が振られていれば IE や Moz でも活用
> できますし、木構造を活用できる一般的なパーザなら汎用できると思い
> ますよ。CSS でセレクタにするってのも、木構造を活用している例ですし。

木構造の意味が曖昧で分かりませんが、終了タグのない要素も許容した入れ子構造ということなんでしょう、多分。htmlは紛れも無い木構造ということになります。
パースのされ方がbody直下div羅列のみ幅優先に先読みするということを可能にしなければbody直下div羅列の意義の大半は失われると思いますが、そもそもこれの実現にはdivではない特別な要素が必要になります。属性では役に立ちませんし、divはそういうのも含めた特別を敢えて排除した要素でしょ。xmlを書くときに入れ子に応じて独自にdiv1, div2, と要素を変えるのは人によってはそのためでしょ。落ち着いて考えてみてください。
で。htmlは木構造でしょ? 色んな要素がある。わざわざdivで入れ子を深くしたり、切り分けを入れ子で実現せずとも26のいう活用は可能でしょう。<div id>に装飾目的の他に本質的な有利が存在しますか? 存在すれば教えてください。思いつかなければ話にならないからこのスレッドは下げましょうよ。質問者無視にも恐縮しますし。


28:[関連] satoshii [URL] [2002/06/12 03:29 ]

CSS の件については諒解しました。で、以下 div の話。
スレ違いになってきたのでアレですが、別のスレッドを立てるほどのことでもないかと思うので、ここに書きます。

> 色んな要素がある。わざわざ div で入れ子を深くしたり、切り分けを入れ子で実現せずとも 26 のいう活用は可能でしょう。

では、そもそも div という要素型が定義されていることの意義は何ですか? div 以外の要素型には該当しないテキストが存在するからこそ、div という要素型が定義されているのだと思いますが。

どうも、CSS のセレクタにしか使われていないというだけで「不思議マークアップ」という判断をなさっているようですが、そもそも何故「その div が指定されている部分に装飾を施したいのか」ということについては、お考えになりましたか?

例えば、

  大見出し

  見出し1
  段落1-1
  段落1-2

  見出し2
  段落2-1
  段落2-2

という文書に対し、

   大見出し
   ____
  |見出し1|
  |段落1-1|
  |段落1-2|
    ̄ ̄ ̄ ̄
   ____
  |見出し2|
  |段落2-1|
  |段落2-2|
    ̄ ̄ ̄ ̄

というような枠を付けるスタイルを指定したいと考えたとしましょう(これは適切なスタイル指定ですよね)。
しかし、もしマーク付けが

  <h1>大見出し</h1>

  <h2>見出し1</h2>
  <p>段落1</p>
  <p>段落2</p>

  <h2>見出し2</h2>
  <p>段落3</p>
  <p>段落4</p>

のようになっていたとすると、*自然な方法では* このスタイルを指定することはできません。これは CSS の規格の問題と言うより、マークアップの側の問題です。

そもそも、デザイナーが「枠で囲ったスタイルを指定したい」と考えたのは、その枠で囲われるべき部分が「実際に有意味な『範囲』を形成している」からです。SGML/XML というのは、このような有意味な「範囲」を (タグを用いて)「要素」として「明示」するためのものです。

SGML/XML 文書に対して何らかの処理を行う場合には、基本的にこの「要素」が唯一の処理単位になります。何らかの処理を施したい「範囲」が存在すれば、それを「(論理的な)要素」としてマークアップする、というのが SGML/XML というものの方法論です。

これは、「処理」の内容が「スタイル指定」であっても変わりません。むしろ、「スタイルのためにマークアップを行うのは悪だ」の一点張りで、トリッキーなスタイル指定(例えば上の例なら、background-image を使って枠線っぽく見せるとか)によってこれを解決しようとする方が、よっぽど「不思議マークアップ」(あるいは「不思議スタイル指定」)です。

上の文書を X/HTML で記述する場合には、そのものずばりの「章」や「節」を示す要素型は定義されていませんから、「特定の意味は示さないが、取り敢えず何らかの『範囲』であることを示す」div 要素としてマークアップする訳です。

  <h1>大見出し</h1>

  <div>
   <h2>見出し1</h2>
   <p>段落1</p>
   <p>段落2</p>
  </div>

  <div>
   <h2>見出し2</h2>
   <p>段落3</p>
   <p>段落4</p>
  </div>

これならば、「div というまとまり」に対し「その周囲に枠線を付ける」という *自然な* スタイル指定を行うことができます(言うまでもなく、通常はさらに class="section" などと指定して、div のクラス分けを行う訳ですが)。

──というような思考に基づいて記述される div は、ちっとも不思議なものではないと思います。


29:[関連] ma-to [2002/06/13 20:50 ]


>>28

そのとおりだと思う。人間が情報を受け取ることを想定するならば知覚にうったえるものがなければならないと思う。だから装飾は極めて重要だと思う。
構造との切り離しはCSSでは実現されていない (簡単な実例でいえば、htmlに先んじてCSSを作るのは実質不可能) のが事実だから、28の言葉は紛れも無い正論だと思う。

/*
特定された要素だけを送るという発想もあっていいだろう。
SGML/XMLって何の関係が? まあいいや。他所で聞くか、人に頼らず自分で考えるから。
*/

しかし杞憂はある。
制作者が装飾のためのdivでついでに独自に樹形図を作っているつもりの場合が多々ある。驚くほど多々ある。ちなみに28の例示はスキップなく登場する見出しのh2が構造に関して十分有益な情報を提供するからdivで囲む必要は無い。もしも饒舌に階層構造を示唆するのであればdiv1を使えば将来必ず役に立つと楽観的に信じていたりする。つまり<div attribute>はCSSもしくはもっと辛口に言えばWinIEの時代錯誤なCSS実装への対策でしかない。
そうすることは冒頭の賛同にあるように十分に有用だと思っている。*CSSのためには自然* だと思う。CSSなどの「受け取った後の処理」に有効ならば十分なのかもしれないが、それらのためだけに使われる「範囲」というものは出来れば避けるほうが推奨されて然るべきだと思う。
/*
レスもしんどいので宜しく28。
*/


30:[回答] あー [2002/06/16 10:02 ]

> 見出しのh2が構造に関して十分有益な情報を提供するから

提供しません。

<h1>A</h1>
<p>B</p>
<h2>C</h2>
<p>D</p>
<p>E</p>

のような書き方をする人もいるので、たとえ、

<h1>a</h1>
<h2>b</h2>
<p>c</p>
<p>d</p>

と書いていたとしても d が h2 の下なのか、h1 と h2 の間なのか判りません。


31:[関連] ma-to [2002/06/17 16:54 ]


終わりなのに話を戻すのもどうかと思うが、「背景色と前景色を同時に指定」を守らなかったがために起こる不都合は大概はユーザーもしくはヴェンダーの問題だといった。ヴェンダーの問題とは前景色と背景色のどちらか一方しかまともに反映されない要素 (主にform関連) がある、など。
一方、「二つのコンテキストで、同じ色が color と background-color に使われています」という警告は制作者の手落ちになる。例えば
    <body><address>http://........</address></body>
のような改行が見込めない英単語を含む要素に対して、
    body { background: #000; }
    address { margin: 0 40%; color: #000; background: #fff; }
などとすると視覚系CSSをそれなりに正しく実装したウェブブラウザを使っていると多くの表示環境でaddress右側に文字がはみ出る。はみ出た文字がある場合には読めなくなる。従って「見かけ上 (曖昧) の前景色と背景色それぞれから任意に各1色を取り出して比較したとき一致するものがあれば制作者は相当の注意を払う必要になる」と言える。
/*はみ出すという点ではoverflowが適切に指定されないposition:fixed;とかスクロールしないフレームとかは携帯パソではどうしようもなかったりする。*/
こんな小汚い対策例を作ってみた。
http://www32.tok2.com/home/css/clip/joyful.cgi?mode=htmlview&no=47&reno=155

>>30

書いた後気づいたが、pの属する深さが必要である場合、それはそれで整然とした方法をとるだろうということで、放っておいた。「..</div>..</div>」で構造どうのこうのと言われても難儀だ、ということで。指摘ありがとう。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World