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

1 名前:Name_Not_Found :03/05/23 01:02 ID:???
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
・基礎は解説サイト(>>4・かなりわかりやすい)で勉強してください。
・質問の前に【FAQ】(>>5-7)を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
 WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
 【解説など】(>>4)の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
 正当(valid)なHTMLを心がけて下さい。

初心者の疑問は大抵ここまでで解決します。

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは?」と求められたら応じませう。
 その方が回答が早く得られます。

過去スレや関連リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7

cf. http://fake_lint.tripod.co.jp/css.html
  http://nira.s25.xrea.com/FAQCSS/ls_00.html

2 名前:Name_Not_Found :03/05/23 01:04 ID:???
【過去ログ】
 http://mentai.2ch.net/hp/kako/974/974934062.html
 http://natto.2ch.net/hp/kako/984/984113434.html
 http://natto.2ch.net/hp/kako/992/992992981.html
 http://pc.2ch.net/hp/kako/996/996828258.html
 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
 http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
 http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
 http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
 http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
 http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
 http://pc2.2ch.net/hp/kako/1041/10416/1041641395.html
 http://pc2.2ch.net/hp/kako/1045/10451/1045124732.html
 http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
 http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
【前スレッド】
 http://pc2.2ch.net/test/read.cgi/hp/1050086156/l50

【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
・CSSでイケてるデザインサイト 10
 http://pc2.2ch.net/test/read.cgi/hp/1048475227/l50
・* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
 http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
 http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50

3 名前:Name_Not_Found :03/05/23 01:05 ID:???
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/css1/toc.htm
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

【CSS検証】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

4 名前:Name_Not_Found :03/05/23 01:05 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト (特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け (JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://strict.jp/~sappari/2ch/css.php

5 名前:Name_Not_Found :03/05/23 01:05 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q2: text-align:center;を指定しても Netscape6(or7)ではtableなどブロック要素がセンタリングできません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に4.)をご覧ください。

1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

6 名前:Name_Not_Found :03/05/23 01:06 ID:???
【FAQ】
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
 http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html

Q4: CSSで段組するには?
A4: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと (ネスケ4でも崩れない段組みの実例)
 http://village.infoweb.ne.jp/~fores/

7 名前:Name_Not_Found :03/05/23 01:08 ID:???
【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど?
A5: floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
  http://cssbug.tripod.co.jp/detail/winie/b079.html
   http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングは既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8.いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A8.下記に書いてあります。テーブル・レイアウトは段組のFAQ(A4・>>6)をご覧あれ。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm

8 名前:Name_Not_Found :03/05/23 01:11 ID:???
>>2に訂正。
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第3版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
CSSでイケてるデザインサイト 13
http://pc2.2ch.net/test/read.cgi/hp/1053446369/l50

9 名前:Name_Not_Found :03/05/23 01:28 ID:???
テンプレだけで1000を目指すスレですか?

10 名前:Name_Not_Found :03/05/23 08:30 ID:???
>9
ウィルス総合スレッドとか行ってみ。
もっとスゴイから。(w

>1
乙。

11 名前:Name_Not_Found :03/05/23 09:08 ID:???
>>30くらいまでテンプレのスレはたまに見かけるよね。

>>1
乙狩

12 名前:Name_Not_Found :03/05/23 11:45 ID:j7WO/R4a
font-familyに2バイト文字を使うとNetscapeでは無効になるそうですが、
たとえば、

BODY { font-family: MS Pゴシック ; font-size: 16px ; line-height: normal }

と記述すると、BODYタグに適用するスタイルそのものが無効になるのですか。
それとも、font-familyの部分だけが無効になり、font-sizeなどは有効になるのでしょうか。

font:で一括指定した場合、フォント名が全角だとすべて無効になることは知っています。

13 名前:12 :03/05/23 11:48 ID:???
ごめんなさい、半角でMS PGothicと記述すれば良いということに気づきました。
答えてくださらなくて結構です。すみません。

14 名前:Name_Not_Found :03/05/23 11:51 ID:???
>>12 >>1読め。「Netscapeでは」って、ver6以降なら大丈夫。
>特にNetscapeは、ver.4までと6以降でまったく別物です。

「MS Pゴシック ;」もダメ。
>空白類文字を含むフォント名は引用符 " または ' で括るべきです
cf. http://msugai.fc2web.com/web/CSS/font.html#font-family

15 名前:Name_Not_Found :03/05/23 12:01 ID:???
font-familyプロパティには、generic family(総称フォント)を指定しなくては。
例)
body {font-family:'MS Pゴシック', Osaka, sans-serif;}

16 名前:Name_Not_Found :03/05/23 17:54 ID:???
約5年ぶりにHTMLを触るんことになった
んで 最近はcssはどうかな まだあるのかなってカンジで
見にきたんだけど すごいね
最近は進歩したんだね みんながんばってるね
おじさんはもう新しいこととか覚えられねぇや
キミたちがんぼれー

17 名前:Name_Not_Found :03/05/23 18:23 ID:???
ねぇや
とかいってんなジジイ

18 名前:Name_Not_Found :03/05/23 19:50 ID:???
>>15
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/07a.html#d03n03 を嫁


19 名前:Name_Not_Found :03/05/23 20:59 ID:???
CSSって名前空間ないの?

例えば2つのcssファイルで同じクラス定義した場合、
両方が混ざってるみたいなんだけど……

20 名前:Name_Not_Found :03/05/23 21:37 ID:???
>>19
>>3

21 名前:Name_Not_Found :03/05/23 21:57 ID:???
ないのか……

22 名前:Name_Not_Found :03/05/24 02:50 ID:???
なんか今、一瞬

>>19 + >>3 = >>21
(19に3を参照させたら21になって帰ってきた)

で面白いなとか思った。

やばすぎ。寝る。


23 名前:Name_Not_Found :03/05/24 15:21 ID:???
>>22
19+3=22だもんね。やばすぎ。寝る。

24 名前:Name_Not_Found :03/05/24 16:03 ID:???
なんでリストマーカーに任意のテキストって無いんだろう…

25 名前:Name_Not_Found :03/05/24 16:28 ID:???
内容生成プロパティでええやんけ。>>24

26 名前:Name_Not_Found :03/05/24 16:40 ID:???
>>25
まあそれはそうなんだけど、
imageがあるならtextがあっても良いんじゃないかなって
ちらっと思ってみたんだ。

display:markerに対応したブラウザが早く出れば良いな…

27 名前:Name_Not_Found :03/05/24 17:08 ID:???
>>26
display:marker;はOpera6以降が実装してます。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/visualren.html#display

28 名前:Name_Not_Found :03/05/24 19:03 ID:???
display:none;

visibility:hidden;
でスペースが確保されるかされないかの違いはわかるのですが、
absoluteの場合で、
位置と大きさがもともとのページのスペースに収まっている場合、
違いはあるのでしょうか?


29 名前:Name_Not_Found :03/05/24 19:29 ID:???
リンクされているテキストの上にマウスをポインタしたら、
へこんだようになるようにしたいんですが、どうやればいいんですかね?

30 名前:Name_Not_Found :03/05/24 19:34 ID:???
>>29
>>2-10

31 名前:Name_Not_Found :03/05/24 19:37 ID:???
>>28
実験してみればわかるでしょ?

>>29
それをやってるサイトのソースを見て真似する。

32 名前:Name_Not_Found :03/05/24 19:43 ID:???
>>31
CSSファイルに書き込んでるからダメぽ・・・

33 名前:Name_Not_Found :03/05/24 19:44 ID:tFA3GdMj
テンプレの、段組についてのサイトを読み漁りましたが
分からないので教えて下さい。

<div></div>要素が上から下に3つ続いて
float:left; を使って、その要素の一番上の右横から新たに<div>要素を書き込みたいのですが
どうしても3つ目の右横からになってしまいます。

上下3つのdiv要素を、divでひとくくりにするしかないのでしょうか。
分かりにくかったらすいませんです。

34 名前:Name_Not_Found :03/05/24 19:45 ID:???
>>32
>>4読め。

35 名前:Name_Not_Found :03/05/24 20:17 ID:???
>>31
cssファイルへのリンクのアドレスの前にview-source:を付け加えたらCSSファイルの中身みれますた。

36 名前:Name_Not_Found :03/05/24 20:19 ID:???
>27
あれ?
http://is.vis.ne.jp/charts/css2_visuren/index.xhtml#display
こっちでは未対応になってる。
どっちが正しいのだろう?

37 名前:Name_Not_Found :03/05/24 21:13 ID:???
>>31
>実験してみればわかるでしょ?

実験してみて違いがなさそうだったんだけど、どうよ?って話。

38 名前:Katsu :03/05/24 22:31 ID:DoFgIb9a
>>27 >>36
すいません、間違えて印付けてました。
というわけで早速修正しておきました。
Opera は「display:marker」に対応してません。


39 名前:Name_Not_Found :03/05/25 00:40 ID:???
>>28
>absoluteの場合で、
>位置と大きさがもともとのページのスペースに収まっている場合、

正直、意味わからん。日本語を勉強して欲しいと思った。

40 名前:Name_Not_Found :03/05/25 01:00 ID:???
body{margin: 0% 20% 0% 20%}
body{width:60%}

これでテキストを真ん中に持ってきて、自動的に改行するようにしたいんですが駄目ですた。
何が不味いのでしょうか。ご教授おながいします(´・ω・`)。

41 名前:Name_Not_Found :03/05/25 01:08 ID:???
>40
アホな俺には君の言ってる意味がわかりませぬ(´・ω・`)

42 名前:Name_Not_Found :03/05/25 01:11 ID:???
>>40
文章なら
p { margin: 0 20% 0 20%; width: 60% }
にしる。たぶんこれで大丈夫。


43 名前:Name_Not_Found :03/05/25 01:17 ID:???
>>40-42
margin-left:20%; margin-right:20%; と個別指定しないと
MacIEでは中央寄せにならないバグが。

44 名前:40 :03/05/25 01:27 ID:???
教えて君にここまで親切にしてもらえるとは…ここは(・∀・)イイ!! インターネットですね。
>>42‐43氏
ご教授ありがとうございますた。

45 名前:Name_Not_Found :03/05/25 01:51 ID:???
>>44
質問スレだからな。

46 名前:Name_Not_Found :03/05/25 02:13 ID:???
>>6
リンク先、移転してるよ。
【FAQ】修正
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://alt.s31.xrea.com/overflow.html
 http://alt.s31.xrea.com/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html

47 名前:Name_Not_Found :03/05/25 02:14 ID:r/zyWMiG
子孫セレクタの指定方法について教えてください。
.class td { color: green } のように、クラスを指定してから
要素を指定するのってOKなのでしょうか?IEでは大丈夫のようですが・・・。
教えてくんですみません。

48 名前:Name_Not_Found :03/05/25 02:17 ID:???
「OKなのでしょうか」ですと? OKでない理由なんてありますかね。
>>47>>4のリンク先を訪問しなさい。

49 名前:Name_Not_Found :03/05/25 02:26 ID:r/zyWMiG
すんません、勉強不足なもんで・・・。
例題は殆ど、 要素 要素 { } で書かれてるのばかりだから
不安になって確認しにきました。

50 名前:Name_Not_Found :03/05/25 02:35 ID:???
>>49
解説書ばかり見てないで
よそ樣のサイトの外部CSSをダウンロードして見ると勉強になるよ。

・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://strict.jp/~sappari/2ch/css.php

51 名前:Name_Not_Found :03/05/25 02:43 ID:???
>>50
質問の意味わかってるか?
「できるけど正しい記述なのか?」だろ。
よそ様のサイトで実現できてても正しい記述かどうかわかんねえじゃねえか。
こういうときは、「仕様書嫁」だ。

52 名前:Name_Not_Found :03/05/25 02:46 ID:???
>>51
【CSS検証】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

53 名前:Name_Not_Found :03/05/25 02:52 ID:???
>>52
ぐっじょぶ

54 名前:40 :03/05/25 03:13 ID:???
毎度申し訳ありません。
先程の指摘を受けて、
body {width:60%; margin-left:20%; margin-right:20%;}
に変更しましたがどうもwidthの効果が出ないようです。

_| ̄|○ ドウスリャイインデスカ



55 名前:Name_Not_Found :03/05/25 03:22 ID:???
>>54>>5を読んだのかと小一時間……
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

56 名前:Name_Not_Found :03/05/25 03:28 ID:???
>>54 「widthの効果」ってナニ? 

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは?」と求められたら応じませう。
 その方が回答が早く得られます。

57 名前:Name_Not_Found :03/05/25 10:48 ID:???
1行に左寄せと右寄せを共存させることはできますか?
テーブルデザインなら勝手にセル割りすれば簡単に
できてしまうんですが、それはいやなので・・・。

ありきたりですが
______________________________________________
| Hoge                  _□×|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
みたいなことをしたいのです。
ページはfloatっていうの使って大きくわけているのですが。


58 名前:Name_Not_Found :03/05/25 10:52 ID:???
>>57
段組の応用でできますよ。>>6のQ4参照。

59 名前:57 :03/05/25 10:58 ID:???
>>58
ありがとうございます。がんばってみます。


60 名前:Name_Not_Found :03/05/25 10:59 ID:XIZjMQqn
ページを開こうとするとパスワードを入力せよと言うのがでて
正解か不正解によって2つのページに飛ぶ、といったようなものを
つくるにはどうしたらいいでしょうか


61 名前:Name_Not_Found :03/05/25 11:01 ID:???
>>60は多重書き込み。しかもスレッド間違ってる。アホ。

62 名前:Name_Not_Found :03/05/25 12:16 ID:???
マルチポストか。
そういう非常識なのはよくないね。

63 名前:Name_Not_Found :03/05/25 12:23 ID:???
ULを入れ子にしてるんですがに外側のULにlist-style-image指定して
内側を黒丸にしたいんですが、無理ですか?
http://www.htmq.com/style/list-style.shtml
↑ここにはlist-style-imageが優先されると書かれているので無理かと思いますが
もし入れ子のままできるのであれば教えてください。


64 名前:Name_Not_Found :03/05/25 12:49 ID:???
>>63
明示的に画像マーカーをなくすのは
list-style-image:none;

65 名前:63 :03/05/25 13:07 ID:???
>>64
list-style-image:none; ですか。
list-style:none; ってやってましたわ。
無事いけました。ありがとうございました。


66 名前:Name_Not_Found :03/05/25 20:48 ID:???
CSS2邦訳の、わかりやすい訳の方が、見られません。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
一時的なサーバー落ちですか、移転ですか。

67 名前:_ :03/05/25 20:53 ID:???
http://homepage.mac.com/hiroyuki43/hankaku_b01.html

68 名前:Name_Not_Found :03/05/25 21:07 ID:???
>>66
大分前から見られないぞ?
どうしてもそっちがよければ
KazuteruOKHASHIさん(訳者)にメール出せば?

69 名前:Name_Not_Found :03/05/25 21:17 ID:???
こんな時こそInternet Archiveの出番だ。
http://web.archive.org/web/20010607085153/http://www.fan.gr.jp/~kaz/rec-css2/cover.html
http://web.archive.org/web/20020227235814/http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

70 名前:Name_Not_Found :03/05/25 21:44 ID:???
>>65
Opera6には入れ子リストのlist-style-image:none; を無視するバグがあったけどね。
http://cssbug.tripod.co.jp/detail/opera/b012.html
Opera7では修正された。

代替案として、存在しない画像をリストマーカーに指定する手もあるが、
これはNetscape6がダメ。N7でも直ってない。
http://cssbug.tripod.co.jp/detail/mozilla/b026.html

ちゃんとレンダリングするのはWinではIEだけだったのだ。

71 名前:Name_Not_Found :03/05/25 22:43 ID:???
例えば
p { color:#ffffff ; background-color:#000000 }
にすると、黒いのが勝手に
うにょーんって伸びてしまいますが
これをp要素で書き出す文章が長くなれば
それだけそれに伴って伸びるようにするには
どうすればよいのでしょうか?

72 名前:Name_Not_Found :03/05/25 22:48 ID:???
>>71
説明は他人にわかる書き方でね。
察するに、ブロックレベル要素とインライン要素の差を理解してないのかな。
インライン要素ならボックスはウィンドウ幅ではなくテキストの幅になるよ。
だからインライン要素のタグで括って背景黒のスタイル指定してもよし、
或いはp要素をdisplayプロパティーでinlineにしてもよし。


73 名前:Name_Not_Found :03/05/25 22:59 ID:???
Web標準普及プロジェクト
ブロックレベル要素とインライン要素
http://mozilla.gr.jp/standards/webtips0015.html
>CSSを勉強し始めた人はまずこの概念を覚えなくてはいけません。

74 名前:Name_Not_Found :03/05/25 23:17 ID:???
>>72-73
レスありがとうございます。
CSSは始めたばかりですが
より精進していくつもりです。
では製作にもどります。

75 名前:Name_Not_Found :03/05/25 23:22 ID:???
http://www.scottandrew.com/
http://www.hssh.jp/~hssh/
http://www.1point.jp/~book_2ch/index.html
http://thefool.fc2web.com/
http://red.ciao.jp/fantasy/
http://www.aquaplace.com/
http://starry.night.nu/
http://www.macintoybox.com/
http://www.d1.dion.ne.jp/~hirosi_s/index.html
http://www.annie.ne.jp/~sheepers/komain.html
http://3110.sunnyday.jp/
http://cheser25.hp.infoseek.co.jp/
http://phoenity.com/
http://www.users.yun.co.jp/~souichi/
http://radicli.net/rr/
http://d-o-b.ciao.jp/^o^/
http://www.windfarm.co.jp/
http://www.deadbydesign.com/
http://www006.upp.so-net.ne.jp/Initialz/index.html
http://chankaz.cside4.jp/
http://raku-gaki.com/
http://akiko.kuhndesign.com/
http://www1.odn.ne.jp/~cce60200/
http://www2.ocn.ne.jp/~u.kenji/
http://www.muffy.jp/
http://www.ritsumei.ac.jp/kic/~tyv07679/index-j.html
http://tr.vis.ne.jp/
http://www.interq.or.jp/orange/nori/
http://www.kapowaz.net/?showarticle=13032003
http://www.clagnut.com/



76 名前:mayu功 :03/05/26 02:53 ID:???
フレームを使ってナビゲートを作ろうかと思うんですが、
CSSで代替できますか?

77 名前:Name_Not_Found :03/05/26 02:59 ID:???
>>76

>>6は見たのか?

78 名前:Name_Not_Found :03/05/26 03:00 ID:???
>>76
出来るかどうかと問われたならば
出来ると答えようではないか。
詳しくは天麩羅参照のこと。

79 名前:Name_Not_Found :03/05/26 03:02 ID:???
>>77
ああ。

>>78
親切だな。
これからもそういう風に続けてね。


80 名前:Name_Not_Found :03/05/26 03:08 ID:???
IEを切ればposition:fixedで結構自由にフレームっぽいレイアウトができるな。
例:http://www.w3.org/Style/CSS/

81 名前:78 :03/05/26 03:09 ID:???
>79
今日は酔ってるからな、頑張ってみようじゃないか。

ただoverflow:autoを指定した要素って
見た目はフレームでもマウススクロールが出来ないのが
Gecko使いとしては辛い…

82 名前:Name_Not_Found :03/05/26 03:24 ID:???
>>81
Gecko仮面のおじさんなのか。

83 名前:78 :03/05/26 03:37 ID:???
>80
Fixする要素をHTMLの最初or最後に書けば、
IEでも一応ナビゲートバーの役目には使えるかも。
IEだけ特別の対応するのもどうかとは思うんだけど、
漏れのページの閲覧者は9割以上IEなのがなあ…

>82
おじさまじゃないやいヽ(`Д´)ノ

84 名前:Name_Not_Found :03/05/26 06:41 ID:???
>>83
いや、あなたのページじゃなくて全世界中で9割以上がIEですよ。
IEだけ特別の対応しないでどうするんですか?頭だいじょぶ?
IEが嫌いでどうしても排斥したいと考えてるならばまだしも
自分のサイトをより多くの人に見て貰いたいと考えているならば
一番多いIEユーザを一番に考えないでどうするんですか?
そう言うセリフは「NNだけ特別の対応するのもなぁ・・・」と使うんですよ。

結局、NNはIE以上の糞だし、せいぜいOPERAぐらいですね。
勝負になるのは。だって他に候補がいないんだから。


85 名前:Name_Not_Found :03/05/26 06:43 ID:???
この板は、ネスケバカとオペ厨ばっかで偏りがあるな。

86 名前:78 :03/05/26 07:48 ID:???
>84
だからIEを最初に考えてるよ…
IEで出来ない事がたくさんあって、
IE閲覧者に申し訳なく思いながら妥協の策をいつも練ってる。
IEがもう少し対応の幅が広かったら良いんだけどね。

ちなみに、漏れはNN使ってるなどと一言も書いてないんだけど…

87 名前:Name_Not_Found :03/05/26 08:35 ID:???
>>84
CSSに関して言えばIEの方が遙かに糞

88 名前:Name_Not_Found :03/05/26 10:07 ID:???
IEでレイアウトの崩れるページを見て
一般ユーザーはこう言う。
「だめじゃん、この糞サイト。」

そのページにW3C CSSのValidロゴが貼ってあってもこう思う。
「は? だから何?」

IEがどうこうという問題ではない。

89 名前:Name_Not_Found :03/05/26 10:14 ID:???
>>88
は? だから何?

90 名前:Name_Not_Found :03/05/26 10:36 ID:???
IEが劣るだのなんだのはともかく、結局は
「シェア90%を無視は出来ない」
これに尽きるわけで。

まあ今時IEで見れないページなんぞ好き好んで作るのは
並々ならぬIEコンプレックス持ちだけだろうけども。

91 名前:Name_Not_Found :03/05/26 10:51 ID:???
>>89
まあ、悔しかったらブラウザのシェアでも変えてみろ。

92 名前:Name_Not_Found :03/05/26 10:56 ID:???
>CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
文盲ばっかだな。

93 名前:Name_Not_Found :03/05/26 12:36 ID:???
>>92
旗色悪くなると・・・・・ プッ

94 名前:Name_Not_Found :03/05/26 13:18 ID:???
IEで、ボタンに画像を貼り付けようとしているんですが、XPだとうまく表示できません。
やはり、仕様なんでしょうか?
<INPUT type="button" style="width:27px; height:27px; background-image:url(images/*.gif);">

95 名前:Name_Not_Found :03/05/26 13:28 ID:???
>>94
なんでstyleなんかで画像貼るの?
普通にやればいいじゃん

96 名前:Name_Not_Found :03/05/26 14:26 ID:???
まともなブラウザになってからシェア増やして欲しかった。
MS帝國マンセー

97 名前:Name_Not_Found :03/05/26 15:04 ID:???
<input type="checkbox" に、なんらかのCSSをかますことは可能ですか?

<input type="checkbox" name="planid" value="1" style="border:1px orange solid">
とためしにやってみたらだめでしたが。。

98 名前:Name_Not_Found :03/05/26 15:16 ID:???
>>97
フォーム部品のCSS対応はブラウザによっててんでバラバラで、
詳しく調べてる所も無かったような…

とりあえず漏れの知る所だと、
Mozillaではpaddingを設定すると中のチェックマークが削れる。

全く役に立たん情報スマソ(w;

99 名前:Name_Not_Found :03/05/26 15:41 ID:???
>>97
ちゃんとオレンジ1pxのボーダーになるぞ?
スタイルシート言語の宣言してないんじゃないか?

100 名前:Name_Not_Found :03/05/26 15:52 ID:???
多分>>97はcheckbox自体のボーダー
(大抵border-style:insetみたいになってるやつ)をいじりたいんじゃないのか

101 名前:Name_Not_Found :03/05/26 16:21 ID:???
>>84
「赤信号、みんなで渡れば怖くない。」と一緒だな、>>85も同類
>>86
気にすること無いよ、正統なCSSで糞IEでは解釈できない
ページを作るべきだ。>>88のようなアフォが増えるだけ。





102 名前:カスイケスレより :03/05/26 17:28 ID:???
>>101
【議論厨】
一体今までどこにいたの?ってくらい議論になると沸いてくる人達。
他のスレに誘導しても議論を続ける悪質さで荒らしと同等の性質の悪さ。
ちなみに誘導されたからといって誘導先のスレで議論を続けるわけでもないという
異常な行動パターンを示し、理解に苦しむ。

103 名前:Name_Not_Found :03/05/26 17:33 ID:???
【Strict厨】
正しいHTMLをあまりに厳密に解釈してしまい、HTMLのいわゆる宗教的な部分にまで
踏み込んで晒されたサイトを次々に批判したため、スレの空気は最悪に。
とにかく人様のものにケチをつけたがる。

104 名前:Name_Not_Found :03/05/26 17:42 ID:???
【アイウォン厨】
彼女いない暦=年齢で、とにかく彼女を手に入れようと必死な人達。
何度振られようとI want youを連呼する。
歪んだ愛情からストーカーへと変貌する事もある。


105 名前:Name_Not_Found :03/05/26 18:20 ID:???
実は
>>102=>>104=【Strict厨】=【アイウォン厨】

106 名前:97 :03/05/26 18:37 ID:???
>>100
そうそう、チェックボックス自体になんらかのCSSかませるのかなーと思った、
素朴な疑問。

107 名前:Name_Not_Found :03/05/26 19:08 ID:???
>>102
>理解に苦しむ。
頭悪そうだな(w



108 名前:Name_Not_Found :03/05/26 20:27 ID:???
>>94
button要素は?
NN4以下で致命的なことになるが。

109 名前:Name_Not_Found :03/05/26 21:28 ID:???
>>94も底なしにバカだが、NN4以下のCSSの解釈の仕方自体
最初から間違っているブラウザを眼中に入れている>>108なんかは
どうしようもない香具師だと思える。
もう来るなよ

110 名前:108 :03/05/26 22:08 ID:???
>>109
CSSの問題ならCSSを無効にすれば済むが、>>108はHTMLの話だ。
button要素がボタンとして解釈してくれないのでは、利用者は手も足も
出ないだろう。そのことを「致命的」と言ったまでだ。

111 名前:Name_Not_Found :03/05/26 23:12 ID:???
まじめな話、NN4なんて
閲覧者に相当の配慮をしなければならない立場の
企業や公共機関とかでもない限り、
切り捨てていいんじゃないの?
月光、オペラ、IEとそれぞれを配慮するのと
2世代前のタコブラウザを考慮するのとでは話が違うし。

112 名前:Name_Not_Found :03/05/27 00:21 ID:???
失礼します
外部スタイルシートでtable属性をいじっていたのですが、
paddingのとこだけ反映されないで困っています……。
どなたかのサポートキボンヌです。

TABLE {
font-size : x-small;
color : #000000;
line-height : 1.30;
margin-right : 5.00%;
margin-left : 5.00%;
padding-top : 15.00px;
padding-right : 15.00px;
padding-bottom : 15.00px;
padding-left : 15.00px;
width : 90.00%;
}

こんな風に書いてるんですが、どこが悪いのか……。
ちなみにエディタ上では反映されてます。

113 名前:Name_Not_Found :03/05/27 00:26 ID:???
小数点以下2桁って・・・

114 名前:112 :03/05/27 00:33 ID:MuCjOqyW
>>113
エディタでスタイルシートをいじれる機能があって
それを使うと自動的にそこまで書き込まれちゃうんだyo。
いくら直してもファイル読み込むたびに勝手に直されるので
最近はそのまま使ってます。

115 名前:Name_Not_Found :03/05/27 00:45 ID:???
>>113-114
別に実数で構わんよ。

116 名前:Name_Not_Found :03/05/27 00:55 ID:???
>>112
パッディング変えてどこに反映されるとお考えでしょうか?
table要素に対してpaddingをしても、各セルの余白は変化しませんよ?

117 名前:Name_Not_Found :03/05/27 00:57 ID:???
セルに適用したいなら
th,td{foobar:hogehoge}

118 名前:Name_Not_Found :03/05/27 00:59 ID:???
>>112
普通に、cellspacing="" cellpadding=""使うか、
CSSなら、border-spacing: ; だな

119 名前:Name_Not_Found :03/05/27 01:23 ID:???
>>115-118
サンクスコ。解決しますた

120 名前:Name_Not_Found :03/05/27 01:44 ID:???
>>107
これほど「オマエモナー」というレスがしっくりくる書き込みを久々に見ました。

121 名前:Name_Not_Found :03/05/27 01:46 ID:???
>>120
オマエモナー

122 名前:Name_Not_Found :03/05/27 11:51 ID:???
代替スタイルシートを使って画像(とalt)そのものを切り替える方法を教えていただけませんでしょうか。
イメージ的には
<h1><img src="title_r.jpg" alt="2ch Red Stage" width="200" height="100"></h1>
<h1><img src="title_b.jpg"alt="2ch Blue Stage" width="300" height="200"></h1>
この2つを代替スタイルの選択によって切り替えられるようにしたいという感じです。

123 名前:Name_Not_Found :03/05/27 11:57 ID:???
代替シートでhtmlそのものをどうやって書き換えんのよ
普通は<h1>に背景画像を指定して、それをシートごとに切り