5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

/* CSS、スタイルシート質問スレッド【11】 */

1 :1:02/09/12 04:52 ID:???
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず>>4にある解説サイト (かなりわかりやすい) で
 勉 強 してください。

質問の前には過去ログを WinIEの場合[Ctrl+F]で検索しましょう。

また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、>>2(関連スレ)の「バグ辞典」に目を通しておきましょう。

また、「環境を書け」 とか 「ソースは?」 と求められたときは
応じるようにしましょう。 回答が早く返るようにするためです。

※ マターリ進行推奨 ※

952 :Name_Not_Found:02/10/15 19:16 ID:???
アダルトサイトのトップページとかの無意味じゃないEnterページは?

953 :Name_Not_Found:02/10/15 19:18 ID:zzNr2ZBL
教えて君で申し訳ないんですが、
CSSを作成支援してくれるソフトで一番使い勝手がいいのは何でしょうか?



954 :Name_Not_Found:02/10/15 19:55 ID:???
>>953
本格的にやるなら使い慣れたエディタに勝るものなし

955 :Name_Not_Found:02/10/15 21:11 ID:???
ダイナミック疑似クラスについての質問です.

仕様上,
a:linkは,
<a href="~">・・・</a>には適用され,
<a name="~">・・・</a>には適用されません.

一方,a:hoverは,
<a href="~">・・・</a>にも,
<a name="~">・・・</a>にも適用されます.

これは,:linkが疑似クラスであり,href付のaなど一部のタグにのみ適用できるのに対し,
:hoverはダイナミック疑似クラスなので,ほとんどのタグに適用できるからです.

しかし,これにより,<a name="~">・・・</a>に対して,:hoverを適用したくないのに,
カーソルが乗るとa:hoverが適用されてしまいます.

これを<a name="~">・・・</a>に対して,:hoverを適用させないためにはどうしたら良いのか,
わかる人いますか?教えてください.

#まあ,もっとも世の中の”95%以上”のブラウザーは<a href>以外に:hoverが適用されないようなので,それほど問題ないっぽいんですけどね.

956 :Name_Not_Found:02/10/15 21:20 ID:???
>>955
a:link:hover{}
a:visited:hover{}

でどう?

957 :Name_Not_Found:02/10/15 21:55 ID:???
>>955

適用させないのでなく、デフォルト値を上書きしちゃえばいいのでは?
a[name]:hoverとかでさ。

> #まあ,もっとも世の中の”95%以上”のブラウザーは<a href>以外に
>:hoverが適用されないようなので,それほど問題ないっぽいんですけどね.

で、残りのブラウザは属性セレクタが効くので、それをもって制す。

958 :Name_Not_Found:02/10/15 22:11 ID:???
まぁ、nameはやめてidで飛びなさいと。

959 :955:02/10/15 23:08 ID:???
>>956 ばっちりっす.さんくす.
結局,
a:link:hover {・・・}
a:link:active {・・・}
a:visited:hover {・・・}
a:visited:active {・・・}
とすることで,<a href="">にのみ適用することができました.

>>957
>a[name]:hoverとかでさ
という書き方があるんですか?試してみたけど,うまくゆきません...

>>958
それが正道だと思いますが,残り5%に満たないブラウザーが気になる身としては,
Netscape4.x等も無視しきれないわけで(^_^;;.

960 :Name_Not_Found:02/10/15 23:27 ID:???
>>949
プロパティの組み合わせ次第ではMacIEでも出来る。

961 :Name_Not_Found:02/10/16 00:26 ID:???
>>959
擬似クラスの二重指定はOperaで問題が生じるよ。
 http://cssbug.tripod.co.jp/detail/opera/b010.html
href属性のないa:hoverに反応するのはMozilla/NN6〜7だけでしょ。
ならばN6〜7だけが対応してる属性セレクタで指定すればいいわけだ。
a[name]:hover, a[name]:focus {
text-decoration:none;
background-color:inherit;/*又はtransparent*/
color:inherit;
}
IEは対応してないから効かないし、何ら影響ない。

962 :959:02/10/16 00:39 ID:???
>>961
ああ,ほんまや...
逝ってきます...

963 :Name_Not_Found:02/10/16 00:47 ID:???
>>949
えっ、なんでMacIEは>>944でうまくゆかないの?
そんな複雑なスタイル指定でもないのに……。
MacIEって案外CSS対応度が低いのかな。それともバグ?

964 :Name_Not_Found:02/10/16 01:20 ID:???
>>961
仕様のことを考えたら、疑似クラスの組み合わせが一番合理的だし推奨されるべきものなんだけどね。
残念な話です。

965 :959:02/10/16 01:58 ID:???
>>957,961
今度こそばっちりです.ありがとう.
今回はじめて属性セレクタというものを知りました.
コレデワタシモ厨ソツギョウダヨ...

966 :Name_Not_Found:02/10/16 02:52 ID:/dfKulLu
>>963
>えっ、なんでMacIEは>>944でうまくゆかないの?
MacIE は、height の単位を % にすると横幅を基準に値を決めているもよう。
つまり、"height:100%;" なら その要素の縦幅はウィンドウの横幅と同じになり、
横幅 > 縦幅 なウィンドウでは、無駄な縦スクロールバーが出現することになり。
「駄目だった」てのはそういうことですよね?>>949
---
html, body { margin:0; padding:0; width:100%; }
h1 { line-height:1; margin:0; padding:0; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;}
---
height:100%; を削って、以上の記述にすると、
MacIE 5.x でもおおかた意図する表示になるようです。
他のブラウザとの兼ね合いでご判断なさってくださ胃。

ところで、height ってどう解釈するべきなんでしたっけ。調べてみま

967 :859/939/949:02/10/16 12:04 ID:???
>>966
> 「駄目だった」てのはそういうことですよね?>>949
ありゃ、私のとこと違いますね。
ウィンドウサイズがどんなでもウィンドウから半文字分上にはみ出ます。(.headerの効果)
ちょっと実験してみたところ、h1が position:absolute; なせい(だと思う)でbodyが高さ0に
なってるみたいです。 htmlは自動的にbodyの外側を包括するボックスになってるっぽいかな?

heightでの%指定は親ボックスの高さが基準じゃなかったでしたっけ。

>>950
それっぽく、ではなくてスタイル的にはちゃんと中央だよ。
需要があるかどうかは知らないけどtableでしかできないデザインがあって、それでもCSSに移行
しろってのも変な話なんで出来るにこしたことはないだろうっていう趣旨かな。

968 :950:02/10/16 15:01 ID:???
>>967
ボックスのheightが一定である保証がないじゃない

表示領域に対する垂直位置を中央にってのは発想自体が理に適ってない
だからそういうプロパティもないんじゃないかすら

969 :Name_Not_Found:02/10/17 00:17 ID:???
>>966-967
CSSバグ辞典スレッドに報告しておきました。差し出がましくてスマンが。
http://pc3.2ch.net/test/read.cgi/hp/991666454/589
  http://cssbug.tripod.co.jp/detail/opera/b027.html
http://pc3.2ch.net/test/read.cgi/hp/991666454/596
 http://cssbug.tripod.co.jp/detail/macie/b017.html

970 :Name_Not_Found:02/10/17 00:39 ID:ktKL0ljL
ここでいいのか迷うとこなんだけど

<ul>
<li><div style="width:100%">AAAAA BBBBB CCCCC</div>
</ul>

の様にリストアイテムに含んだブロックにwidthを指定すると、
表示が折り返された時、


   AAAAA BBBBB
○ CCCCC

みたくマーカーが下にいっちゃうんだよね。これはバグ?
IE5.5とIE6.0で同じ現象を確認。Moz1.0と1.1ではならなかった。

971 :Name_Not_Found:02/10/17 00:49 ID:???
>>970
試してみたが、私のIE6SP1ではそんなヘンなことにはならないけど。
なんか他に妙なスタイル指定してませんか?

(ところで次スレッドはまだか)

972 :971:02/10/17 00:56 ID:???
あ、ゴメン。確かになるね。前言取り消します。

973 :Name_Not_Found:02/10/17 01:04 ID:???
>>970
リストアイテムに含んだブロックではなく、liそのものに横幅を指定してもなるね。
<ul>
<li style="width:30%;"><p>AAAAA BBBBB CCCCCC長い文章……</p></li>
</ul>

974 :970:02/10/17 01:08 ID:???
>983
あー、なるね。
やっぱりバグかなぁ…カッコ悪いなぁ…。

実際のソースでは、含んでいるのはブロック化したアンカー。
width指定しとかないと、それはそれで別件のバグがあるんだよね>IE

975 :Name_Not_Found:02/10/17 01:09 ID:???
× >983 → ○ >973

976 :Name_Not_Found:02/10/17 01:11 ID:???
>>974
こちらへどうぞ。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/l50

977 :Name_Not_Found:02/10/17 01:53 ID:???
>>974
>width指定しとかないと、それはそれで別件のバグ
とは? 気になりますね。
あ、お答はバグ辞典スレッドの方で結構ですから。

978 :Name_Not_Found:02/10/17 14:01 ID:???
新スレ建てろ

979 :Name_Not_Found:02/10/17 14:08 ID:???
age

980 :Name_Not_Found:02/10/17 18:21 ID:???
>>978

誰か >>902 いうところのFAQの文案を書いてくれたら、立ててもいいけど。
ブロック要素のセンタリングの仕方とか、正しく説明する自信がない。

981 :Name_Not_Found:02/10/17 19:24 ID:???
誰か、次スレよろ。

982 :Name_Not_Found:02/10/17 19:27 ID:???
Q センタリングって…
A (゚Д゚)ハァ? センタリングなんざダセーんだよ、やるなヴォケ

983 :Name_Not_Found:02/10/17 21:33 ID:???
>>980
センタリング問題は、ここを紹介して説明の代りにする。
http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html

984 :980:02/10/18 12:30 ID:???
FAQ書いてみました。ボックス幅とセンタリングだけしかありませんが。
これで問題なければ、次スレは俺が立てますけど……

【FAQ】

Q: IEで見ると大丈夫なのに、Netscape6(or7)で見ると、横スクロールバーが出てしまうのですが……

A: WinIEのボックス・モデルが間違ってるからです。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
widthプロパティは、要素の内容領域の幅を指定するプロパティですが、
Windows版 Internet Explorer は、ボーダー領域 + パディング領域 + 内容領域 の幅で
計算されてしまいます。
Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
「IEとNNのBOXの計測方法の違いについて」
http://www.age.jp/~dfj/html/border2.html

Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table(や、その他のブロック要素)をセンタリングできません。IEではセンタリングされるのに……

A: IEの実装が間違っています。くわしくは下記のページをごらんください。

http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html

985 :Name_Not_Found:02/10/18 13:48 ID:???
>>984
「IEとNNのBOXの計測方法の違いについて」は移転したよ。
http://www.fromdfj.net/html/border2.html

あと、>>4の「・CSS Laboratory対応表・一覧」も移転してるからね。
・CSS Laboratory CSS対応表・目次
 http://is.vis.ne.jp/charts/index.xhtml

その他、リンク切れにはご注意あれ。

986 :Name_Not_Found:02/10/18 13:57 ID:???
903 :Name_Not_Found :02/10/13 11:35 ID:???
>>902
あと、「単に「ネスケ」「Netscape」とは書かないで、ちゃんとバージョンを書け。
4までと6以降とは全く別物だから」ということも書いといてほしい。


948 :sage :02/10/15 14:15 ID:???
>>3のCSS2仕様書邦訳にこれも足しておいてくれないかな。

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

こちらの方がこなれた日本語でわかりよいよ。好みもあるかもしれんけど。

987 :980:02/10/18 15:35 ID:???
立てますた。

/* CSS、スタイルシート質問スレッド【12】 */

http://pc3.2ch.net/test/read.cgi/hp/1034922586/

988 :Name_Not_Found:02/10/18 17:22 ID:???
>>987
あれほどリンク切れに注意と言うたのにぃ。
 //pc.2ch.net/はpc3.2ch.netにしなくてはダメよ。
でもまあ、おつかれさま。

989 :980:02/10/18 17:30 ID:???
>>988
すいません。
そこらへんの修正は【13】のスレ立てる人にお願いします。
あと、ふたつしかない【FAQ】の充実も。

990 :Name_Not_Found:02/10/18 21:59 ID:???
>>987
otu

991 :902=983:02/10/18 22:11 ID:???
>>987
自分では新スレッド立てないで色々口出ししたけど、悪しからず。
私の入ってるプロバイダのホストでは、
新規スレッドが立てられなくなってるんでね。
オツカレサマ。

992 :Name_Not_Found:02/10/18 22:40 ID:???
記念パピコV(^o^)V

993 :Name_Not_Found:02/10/19 16:32 ID:???
埋め立てー。

次スレ
/* CSS、スタイルシート質問スレッド【12】 */
http://pc3.2ch.net/test/read.cgi/hp/1034922586/


994 :Name_Not_Found:02/10/19 16:40 ID:???
理め立て

995 :Name_Not_Found:02/10/19 16:55 ID:???
おなかすいたー

996 :Name_Not_Found:02/10/19 17:06 ID:???
あげちゃうぞーーーーー

997 :Name_Not_Found:02/10/19 17:12 ID:???
997?

998 :Name_Not_Found:02/10/19 17:18 ID:???
/* CSS、スタイルシート質問スレッド【12】 */
http://pc3.2ch.net/test/read.cgi/hp/1034922586/l50

999 :Name_Not_Found:02/10/19 17:18 ID:???
わーい

1000 :Name_Not_Found:02/10/19 17:19 ID:???
1000だーーーーーー!

1001 :1001:Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。

247 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)