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

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

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

1 :Name_Not_Found:01/11/06 20:51 ID:qftEYrKp
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
>>2も参考に。
【過去ログ】
 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/test/read.cgi/hp/996828258/

【CSSと特に関係ない初心者質問はこっちで】
・☆ Webサイト制作初心者用スレッドver12 ☆
 http://pc.2ch.net/test/read.cgi/hp/1005035374/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc.2ch.net/test/read.cgi/hp/991666454/
・/*CSSでイケてるデザインサイト { number:2 }*/
 http://pc.2ch.net/test/read.cgi/hp/998894057/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ その2
 http://pc.2ch.net/test/read.cgi/hp/1003378794/

2 :ご参考まで:01/11/06 20:52 ID:qftEYrKp
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1-961217.html
・CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html

【その他資料など】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・三日坊主++の部屋
 http://east.portland.ne.jp/~sigekazu/
・CSS Laboratory対応表・一覧
 http://www.inter-cool.net/~phantasm/wdzone/note/index.html

3 :Name_Not_Found:01/11/06 23:10 ID:bUC3L4H8
おぉ、もう五代目なのね。新スレおめでとうございます。


CSSがもう少し普及してくれれば(と言うか実装がいけないんだけど)、
authorも大分楽になるのになぁ……って、その時はもう新しい仕様が出てるか……鬱。

4 :仮死:01/11/07 02:30 ID:TDxZUDmC
スレ立てサンクス

5 :Name_Not_Found:01/11/07 09:47 ID:wdjsf67A
しっつも〜んっす
リストを横に並べる方法を教えてたもれ

6 :Name_Not_Found:01/11/07 10:23 ID:ufjNxgEB
li { display:inline }

これかな?

7 :Name_Not_Found:01/11/07 19:11 ID:gnsN5y2y
>>6
お〜〜thx!
アリガタヤアリガタヤ

8 :Name_Not_Found:01/11/07 20:47 ID:Y6XObqwU
行間や文字と文字の幅って単位どれを指定すればよいのですか?
ポイントとかピクセルとかパーセントとかありますけど

9 :Name_Not_Found:01/11/07 20:57 ID:gnsN5y2y
ワシはemにしとるよ

10 :Name_Not_Found:01/11/07 22:06 ID:wagdf2cZ
漏れもem。でも、%のほうがいいという噂

11 :Name_Not_Found:01/11/07 22:38 ID:32SaoEjG
自分は %。日記や小説などの長文(日記が長いんだ俺)は 150%。
ちなみに IEのデフォルトがだいたい 120%、ネスケ4.xが 100%相当。らしい。

12 :Name_Not_Found:01/11/07 22:38 ID:32SaoEjG
↑あ、行間ね。

13 :8:01/11/07 23:20 ID:vYpB0Oct
有難うございます。
文字間の幅は皆さんどれくらいとってますか?

14 :8:01/11/07 23:28 ID:vYpB0Oct
文字間の幅はとると見にくくなるものなのですか?

15 :Name_Not_Found:01/11/07 23:38 ID:GtW/0e6j
letter-spacing は IE がバグ持ってたはず。 どんなんだっけ。

16 :name{ not:found}:01/11/08 00:47 ID:n0AOcnbu
画像の周りに1ピクセルの枠をつけるのに、
img {border:1px solid #000000}
だとNN4.xでは対応してくれません。なんとかCSSで切り抜けたいのですが、
どうにかならないものですかこれ?

17 :Name_Not_Found:01/11/08 06:25 ID:voGAtLzG
>>16
一括指定ではなく、boeder-lett/-right/top/bottomでバラバラに指定しよう

18 :Name_Not_Found:01/11/08 06:28 ID:unaHdYI0
>>16
N4はクソだからな…
確かダメなんじゃなかったかな?
俺も画像リンクに枠がつくのを無しにしたくて
a img { border: none; }
とかやったけどN4は無視してくれた記憶がある。

>>8
俺は文字間隔は特に指定してない。
もし指定するとしたら em を使うと思う。
行間は140%程度にしてるかな。

19 :Name_Not_Found:01/11/08 07:07 ID:pSyNWMBp
>>18

A IMG {
 border:0px none;
 color:#ffffff;/*NN4はborder:0px none;だけだと画像リンクの枠線が消せないので*/
}

20 :Name_Not_Found:01/11/08 07:12 ID:pSyNWMBp
>>15
letter-spacingがバグるのはMacIEだけ。WinIEは大丈夫。

21 :まかー:01/11/08 10:56 ID:pYRbEcdQ
>>20
そりゃtex-align:justifyじゃねーの?

22 :まかー:01/11/08 11:00 ID:pYRbEcdQ
あうー、ゴメンzspcで調べたらおかしかった。

23 :Name_Not_Found:01/11/08 16:09 ID:5IhISpav
>>20-22
「自分の文書を「可哀想なマカーにも快適に読ませてあげよう」という、愛に満ちた方おられましたら、@media screen{}にでも収めて」とのこと。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001_06a.html#day03num01

24 :Name_Not_Found:01/11/09 14:48 ID:WZGK6zQz
HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する方法ってあるんでしょうか。
link rel="stylesheet" type="txt/css"
だと、CSS1かCSS2かの区別ってないですよね。

CSS1はCSS2のサブセットになっているから、必要ないといえば必要ないのかもしれませんが。

25 :Name_Not_Found:01/11/09 14:51 ID:SyoDdTC9
>>24
>HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する
なんでそんなことしたいと思ったの?

26 :Name_Not_Found:01/11/09 15:38 ID:ZT5rYYOa
ブラウザの実相状況に合わせたいと思われ。
<script language="JavaScript1.x">の感覚では。

27 :Name_Not_Found:01/11/09 15:52 ID:SyoDdTC9
CSS1だけOKでCSS2はダメ――みたいにきっちりわかれてるブラウザなんてあるの?
ブラウザの実装に合せて振り分けするなら、別の方法があるし。
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm

28 :Name_Not_Found:01/11/09 16:06 ID:W9SwMvHr
>>24
関係ないけど、CSSのContent-Typeはtext/cssだと思われ。

29 :24:01/11/09 16:08 ID:WZGK6zQz
>>HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する
>なんでそんなことしたいと思ったの?

自分が書いているところでCSS1しか使っていない(というか知識がなくて使えない)ので、
そこらへんをきっちり書けたらちょっといいかな、と思ったのです。

わざわざ自分の無知無能を晒すこともないスね。
逝きます。

30 :Name_Not_Found:01/11/09 16:31 ID:Dm1WWMT9
>>29
割とよく使用されるA:hoverもCSS2ですよ。使ってないんですか?

31 : :01/11/09 17:35 ID:HbeHohjV
行高
line-heightは1.5か1.75がよい
日本語にはね。

32 :Name_Not_Found:01/11/10 06:46 ID:AM0+n4hD
シツモンなんですけども、tableじゃなくスタイルシートでレイアウトするメリットというのはいったいなんなんでしょう。。

33 :Name_Not_Found:01/11/10 07:06 ID:oms6jngk
>>32
・文書構造と見栄えの分離。
・ほかに閲覧機器の種類によって表示を変えることも可能。(ディスプレイ表示用と印刷用でスタイル変えるとか)
・スタイルシートに未対応の古い環境でも正常に表示できる。

34 :Name_Not_Found:01/11/10 09:48 ID:wpMYZ2oz
ガイシュツだったらごめんなさい。
IE6ってスクロールバー関連のCSSに対応していないんですか?
5.5の時はちゃんと出てたんですが…。
独自CSSはやっぱり消える運命なんですかね…。

35 :Name_Not_Found:01/11/10 10:18 ID:7Tsuvkfx
>>34
IE6使っている人に聞いたけど、対応しているって話ですよ。
私はまだIE5.01なので確認できませんが。

36 :Name_Not_Found:01/11/10 11:58 ID:sMfTtZsw
>>34
bodyでなくhtmlに指定すべし。

37 :Name_Not_Found:01/11/10 12:00 ID:B4nDVf7I
>>32

たとえば、CSSでイケてるデザインスレにageられているようなところのいくつかには
スタイル選択スクリプトなんてのが仕掛けられていて、デザインを何種類かから選べたり
するんだが、そういうのをクライアント側だけで対応するなんて、CSSでないと無理。

それは>>33氏がいう「文書構造と見栄えの分離。 」の応用事例。

まあ、複数のCSSファイルを用意するような凝ったことをしないまでも、外部CSSファイル
の数字をちょいちょいと書き換えて、サイト全体の見た目を簡単に変えられるこの快感
を一度覚えてしまうと、TABLEレイアウトなんてやってられんし、そういう経験を踏まないと
なかなかわかってもらえんかも。

38 :Name_Not_Found:01/11/10 13:20 ID:ruqcb/eJ
>>32
スタイルシートはテーブル・レイアウトの代用だけのためのものではなく、
もっと表示スタイル全般に関して色々できる可能性のあるものですよ。
まあご存知の上でテーブル・レイアウトとだけ比較したいのだったらいいんですが。

39 :32:01/11/10 14:16 ID:fWo2YqWu
>>33
>>37
>>38
解説有り難うゴザイマス
CSSイケてるスレできれいなサイトのソースを見てびっくりです。
dt?dd?暗号?でtableみたいなレイアウトが出来てる!って。
>スタイル選択スクリプトなんてのが仕掛けられていて、デザインを何種類かから選べたりする
みたいなのはいきなり無理でしょうが、tableのレイアウトをcssで表現してみようかと思います。
htmlについての知識も古いので(HTML3.0)一から勉強してきます。
有り難うございました!

40 :Name_Not_Found:01/11/10 16:31 ID:evNrlZDn
HTML3.0 !!

そりゃ勉強したほうが良いよ…。

41 :Name_Not_Found:01/11/10 22:23 ID:g3O03Rra
>>39
3.2じゃなくて3.0ってあたりが漢だねぇ…

42 :Name_Not_Found:01/11/10 22:30 ID:cvWtKdrs
>dt?dd?暗号?でtableみたいなレイアウトが出来てる!

って、テーブルレイアウトばっかやってた頃の私と全く一緒だ。(笑)
え?<div>でやってんの?出来るのか?そうなのか?とか
<ul><li>なのになんでそんな事してんの!?オレもやりて〜!!みたいな。
なつかしい・・。

43 :Name_Not_Found:01/11/10 23:16 ID:m4e5mhhl
>>42

漏れもそんな感じ。
もう何年も前ですが、自分より詳しそうな人のソースを見ると、自分と全く違う
タグ使いで、そのあたりから興味を持ちだしました。
好奇心は大事です。

44 :Name_Not_Found:01/11/10 23:20 ID:BxafCuFe
>>39
まず3.0ってのが問題ありだな。
その知識はどこで仕入れたんだい?
本?だったらその本は今すぐに捨てることをお勧めする。

45 :44:01/11/10 23:24 ID:BxafCuFe
僕の場合、HTMLを最初に習ったときに、いいHTMLの書き方を習ってたらしく、それをそのままひきずってたんで結構良かったとおもう。

46 :オカダ:01/11/11 01:57 ID:9TQLeGFi
position:fixed;
……対応してないブラウザがけっこう多いので、
http://hp-design.net/dhtml/sample-menuelevatenavi.html
↑のダイナミックHTMLサンプルを使ってました。
ところがIE6標準モードでは、これが動かないのです。
IE6の標準モードで、position:fixed; と同等の効果を
出せる方法はないものでしょうか?
対応ブラウザはIE6の標準モードに限定でよいのですが……。

47 :こんなページがあったよ。:01/11/11 05:48 ID:l/thuOpR
「 IE6 と IE5.5 の互換性について」
http://hp-design.net/announce/ie6_ie55.html

48 :Name_Not_Found:01/11/11 12:36 ID:CK+yJWZM
>>46

固定したい部分をfixedするのでなく、それ以外の部分をoverflowさせる手がよく使われてる
ようですね。

49 :Name_Not_Found:01/11/11 12:47 ID:JqjS/LMb
>>48
なるほどそういう手が、と一瞬思ったが
それだと閲覧者がスクロールするのにPageUp/Downキーやカーソルキー、
ヘタするとホイールまで使えなくならない?

50 :オカダ:01/11/11 12:52 ID:5La0DDG4
>>47
ご指摘ありがとうございます。
私もそのページのことは知っていましたが、
将来的なことも考えて、標準ではない「互換モード」を
利用したくないと思っています。
margin:0px auto;
でセンタリングされないといった問題もありますので。

>>48
なるほど、固定したい部分以外をoverflowさせるのですね。
どうもありがとうございました。助かります。

51 :Name_Not_Found:01/11/11 13:03 ID:CK+yJWZM
>>50
http://www.cc-net.or.jp/~piro/
ここの"Flat"が実例でし。

52 :Name_Not_Found:01/11/11 15:26 ID:+Il47Wmd
>>50
overflowを用いた擬似フレーム
http://dfj.cool.ne.jp/html/overflow.html
http://pc.2ch.net/test/read.cgi/hp/991666454/118-129

53 :Name_Not_Found:01/11/11 16:55 ID:/bvcpGQH
<hr size="1" width="600" align="left">

このタグを同じ見栄えのまま、スタイルシートに置き換えて方法を教えて下さい。
どのスタイルシートに置き換えて良いのか、イマイチ分かりません。
対応ブラウザはIE5だけになっても構いません。

54 :Name_Not_Found:01/11/11 17:04 ID:rptySOIh
hr
{display:none;}

55 :Name_Not_Found:01/11/11 17:25 ID:FoGWIcuV
HR{heigh:1px; widyh:600px; float:left;}

56 :Name_Not_Found:01/11/11 17:25 ID:BwYaIF/O
hr
{
width:600px;
height:1px;
margin-left:0;
margin-right:auto;
text-align:left;
}
CSS対応ならこれぐらいで動くだろう。

57 :Name_Not_Found:01/11/11 18:03 ID:nfJwu7ZO
IE6ってbox-sizing対応してないんですか?
初期値は変わってるのに。

58 :53:01/11/11 18:38 ID:/bvcpGQH
>>55
自分も、float:left を指定していましたが、これだとIEで
適用されないんです。

>>56
text-align:left を使うんですね。知りませんでした。

協力してくださってありがとうございました。感謝。

59 :Name_Not_Found:01/11/11 20:38 ID:SrnH+3/U
>>57
文書型宣言によって自動的にモードを切り替えますが、
box-sizingプロパティ自体には対応してません。


#CSS3が勧告になったら対応してくれるのかなぁ……って、いつのことやら(泣)。

60 :オカダ:01/11/11 20:49 ID:5La0DDG4
>>51
>>52
overflowを用いた擬似フレームについて、よくわかりました。
感謝してます。

>>49
たしかに擬似フレームですと、ページが表示された直後では
ホイールなどが効きません。けれども、スクロールさせたい
ボックスの内部を一回左クリックしますと、以降はOKでした。

61 :57:01/11/12 00:26 ID:rd+QbC5g
>>59
レスどうもです。やはりですか。すると、

{
width: 100%;
padding: 1em;
-moz-box-sizing: border-box;
}

こういうケースでは、IE6だけ横バーが出るのを回避できないことになりますが、
これはどうしたら・・・。泣き寝入りでしょうか。

62 :Name_Not_Found:01/11/12 00:38 ID:fsUEPWRV
>>61
XHTMLにすればIE6でも互換モードになるから大丈夫。

63 :Name_Not_Found:01/11/12 00:40 ID:RAvGcurV
>>61
overflow-x:hidden;
overflow-y:auto;
を追加すればいいと思われ。

64 :白夜:01/11/12 00:40 ID:l7oQBdIs
質問です。
画面をスクロールさせても文字が追従してくるのって
スタイルシートで出来るんでしょうか?

例えば画面右上にトップに戻るリンクがあるとして
画面を1番したまでスクロールさせても
ちゃんと右上にトップへのリンクが表示されてるようなものです。

よろしくお願いします。

65 :57:01/11/12 01:48 ID:rd+QbC5g
>>62-63
ありがとうです。
>XHTML
移行となると厄介ですが、
いよいよとなったらせざるを得ないかも知れないですです。。。

>overflow-x
当面はそれで誤魔化そうと思います。

>>64
Moz, N6, MacIE5でなら可能です。(position: fixed;)
ただしWinIEがさっぱりなので、使わないのが無難です。

エスケープ文字を用いて、IEはabsolute、Mozはfixedにする方法があったような・・・。
これかな?
http://www.cc-net.or.jp/~piro/latest/2001/09.html

66 :Name_Not_Found:01/11/12 02:24 ID:ck3m+tUp
>>64
ここみたいなの?
http://www.inter-cool.net/~phantasm/wdzone/index.html
だったら、それがいま話題になってるoverflowによる擬似フレームです。

67 :調布:01/11/12 02:38 ID:M2qEUUtY
間違えてスレッド4の方に質問してしまいました、あらためて・・・・

縦に長いTABLEを印刷したら、改頁の時にセルが分断されました。
そこで、10行毎に <TABLE>・・・</TABLE> とやって、
スタイルシートの印刷時の改ページの指定を
TABLE {page-break-after:always;}
とやったら、紙1ページにTABLE10行分となって具合が良いのでが、
ブラウザーIE5.5で見ると、TABLE10行毎に、ワケメができて
カッコ悪いです。ブラウザーで見た時にTABLEをすっきりつなげるには
どんな手段があるでしょうか?

68 :Name_Not_Found:01/11/12 03:35 ID:ck3m+tUp
10行づつのtableを作るのはムダな手間です。一つの大きなテーブルで十分。
.printarea {page-break-after:always;}
とでもして、
その表の10行ごと、つまり10箇目のTR要素ごとに
<TR class="printarea">とclass指定を振ってはいかが。

69 :かん:01/11/12 07:55 ID:rvAgDCiT
すいません…
tableの中にtable入れた文字がcssの影響を受けないんですけど…
どうしたらいいでしょうか?

70 :yuu ◆xo3ilszg :01/11/12 08:50 ID:94/SBoem
>>69
tdにもスタイルつけたらいいんじゃない?
td td とか。

71 :Name_Not_Found:01/11/12 09:28 ID:vxLkEX4S
>>65
WinIE に position: fixed; を使うと、効かないこと以外に何かあるんですか?

72 :Name_Not_Found:01/11/12 14:50 ID:xCU/QjX1
>>69
もしかしてネスケ4の話ですか。
あれはダメです。Cascading Style Sheetの解釈がバグだらけです。
バグらないものだけにすると、NC4.xにはごく簡単なスタイルしか適用させられません。
どうしてもネスケ4でってことなら、JavaScript Style Sheetでやるしかないかも。

73 : :01/11/12 16:30 ID:bwByNHEs
>>67
table に margin を指定するとか(できたっけ?)
>>68
確かに無駄だね。
まぁ、替わりにtableの中身が大きすぎると画面で表示が遅くなるけどさ。

74 :Name_Not_Found:01/11/12 18:25 ID:CI1CCkMK
イメージに色付の枠線を表示させたいのですが、
{ border-style:soid; border-color:#ffffff; }
でいいんでしょうか??
ぜんぜん表示されないんですが、もしかして激しく間違ってるんでしょおか。

75 :Name_Not_Found:01/11/12 18:42 ID:HjO/TVsq
>>74

soid→solid

76 :白夜:01/11/12 18:52 ID:b9vETjRh
>65
うーん、WinIEじゃ、ダメなんですか。
ありがとうございます。

>66
そう!こんな感じです!
overflowですか!ありがとうございます。
早速、やってみます!

77 :74:01/11/12 19:10 ID:tps0pmT4
>>75
ありがとうございました。
スペル間違ってただけッスね。恥ずかし〜。

78 :Name_Not_Found:01/11/12 19:33 ID:oZVaay7p
img{display:none}にしても画像はDLされちゃうのでしょうか?

79 :Name_Not_Found:01/11/12 20:04 ID:gI7mQWTZ
どうやらWindows版IEの5.01以降だと
日本語フォントは10pt以下にならないような気がするんですが
実際のところどうなっているんですか?

80 :Name_Not_Found:01/11/12 20:40 ID:Qf3SM3G6
>>78
される

81 :調布:01/11/12 21:15 ID:IHsWirg5
>68
>73 ありがとうございました。
<TR class="printarea">でうまく出来ました、
ただ、私の環境では、
<TR class=printarea>
としないと、 Internal Server Error
と言う表示が出てしまいました、
スタイルシート辞典のCLASSのページにも ” ” を付けるようになっていた
のですが・・・・
あと私の感想ですが、印刷した時の10行づつの区切れは、
<TABLE>・・・</TABLE> の方がスッキリしているようです。
今、marginとは何か調べているところです。

82 :Name_Not_Found:01/11/12 21:17 ID:oZVaay7p
>>80
ムムム・・ありがとうございますた。

もう一つ質問してごめんなさい。

111
222
333
444
555
666

縦にずらーっと並んだ行を

111 333 555
222 444 666

みたいにしたいのですが、table使わないとダメ?
どうみても表じゃない内容なので、できればcssを使って何とかしたいのです。

83 :白夜:01/11/12 21:18 ID:b9vETjRh
すみません。
66さんに教えてもらった擬似フレームのやり方がいまいちわかりません。

以下にソース貼ります。

□HTML□
<DIV class="contents">
<SPAN>TOP</SPAN>
<A href="column.html">COLUMN</A>
<A href="bbs.html">BBS</A>
<A href="link.html">LINK</A>
<A href="mail.html">MAIL</A>
</DIV>

□CSS□
DIV.contents {
margin: 5px;
padding: 0px;
float: right;
}
DIV.contents A:link, DIV.contents A:visited {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #000000;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #cccccc;
border-style: solid;
border-color: #ffffff #666666 #666666 #ffffff;
border-width: 2px;
}
DIV.contents A:hover {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #ffffff;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #999999;
border-style: solid;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 2px;
}
DIV.contents SPAN {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #ffffff;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #999999;
border-style: solid;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 2px;
}

と、いう風になってます。

ドコにoverflowを指定するんでしょうか?
何度もすみません。お願いします。

84 :ちょこら:01/11/12 21:26 ID:Zwxh/9uS
>>83
どこをどう固定したいのか、
とかも書かないとわからないよ。

85 :白夜:01/11/12 21:28 ID:b9vETjRh
>84
すみません。
DIVで囲んだトコ全て固定したいんです。

86 :Name_Not_Found:01/11/12 21:29 ID:BsF8WPuc
>>82

<div style="float: left">
111
222
</div>
<div style="float: left">
333
444
</div>
<div>
555
666
</div>

とか

87 : :01/11/12 21:31 ID:cvHMxzRB
>86
お行儀よく width も指定してあげてね.
この場合 33% とか?

88 :白夜:01/11/12 21:37 ID:b9vETjRh
85の訂正
DIVで囲んだトコをページ右上に固定したいです。
よろしくお願いします。

89 :ちょこら:01/11/12 21:44 ID:Zwxh/9uS
<DIV class="contents">
<SPAN>TOP</SPAN>
<A href="column.html">COLUMN</A>
<A href="bbs.html">BBS</A>
<A href="link.html">LINK</A>
<A href="mail.html">MAIL</A>
</DIV>

これ以外に
<div class="main">

</div>

というのを作っておいて、

body {
overflow: hidden;
}

.main {
width: 100%;
height: 100%;
overflow: auto;
}

.contents {
position: absolute;
top: 1em;
right: 1em;
/*位置は適当にね*/
}

これでいいんじゃないかな。
間違ってたら誰か訂正お願いします。

90 :ちょこら:01/11/12 21:44 ID:Zwxh/9uS
>>89>>85,>>88
でした。

91 :ちょこら:01/11/12 21:49 ID:Zwxh/9uS
>>89
忘れてた。

body のスタイル指定に
margin: 0;
を追加してください。

92 :白夜:01/11/12 22:02 ID:b9vETjRh
ちょこらさん!出来ました!
親切に教えていただきありがとうございます!

93 :Name_Not_Found:01/11/12 23:39 ID:UJ84oqOB
>>81
table {margin-top: 0; margin-bottom: 0;}
で、テーブルの上下の余白(マージン)が無くなります。

94 :Name_Not_Found:01/11/13 02:58 ID:ygQgQPVc
>>79
俺の5.01では font-size:1pt; とかやるときちんと激しく小さい読めない字になるが。

>>81
>ただ、私の環境では、 <TR class=printarea> としないと、
>Internal Server Error と言う表示が出てしまいました、
CGIで出力するときに " をエスケープしてないという初歩的なミスでは?

95 :初心者:01/11/14 01:39 ID:ONFQTcP5
<STYLE type="text/css">
<!--
BODY {
color: #666666;
background-color: #ffffff;


/*リンク部分の下線を消去*/
A:link, A:visited, A:active, A:hover { text-decoration: none ;}

/*リンク部分の色*/
A:link { color: #666666 ;}
A:visited { color: #666666 ;}
A:active { color: #666666 ;}
A:hover { color: #333333 ;}

/*文字の位置*/
DIV { text-align: center ;}
P { text-align: center ;}
TD { text-align: center ;}
-->
</STYLE>

NN4.5でみると、リンクの設定以外は認識してくれますが
IE6で見ると思いっきりシカトされてしまいます・・・・
どう書いたら認識してもらえるでしょうか

96 :Name_Not_Found:01/11/14 01:57 ID:HSh+XG8c
質問はあげれ。

97 : :01/11/14 01:58 ID:wVDsvK8m
>95
どうなることを期待して,どうならないのかを書かないことには,
誰にもどうにもしようがないと思うのですが….
関係ないとは思うけど,
・<head></head> 内に書いてる?
・<head></head>内でそれより前に <meta http-equiv="Content-Style-Type" content="text/css"> って書いてる?

98 :初心者:01/11/14 02:07 ID:ONFQTcP5
>>97
><head></head> 内に書いてる?
><head></head>内でそれより前に <meta http-equiv="Content-Style-Type" content="text/css"> って書いてる?
はい。

何がしたいのかというとリンク部分の色を指定し、
また、リンク部分の下線を表示させたくないんです

99 :初心者:01/11/14 02:08 ID:ONFQTcP5
sageてしまいました・・・すみません

100 : :01/11/14 02:19 ID:wVDsvK8m
>98
そのままコピー&ペーストしたんだよね?
だとしたら BODY の閉じカッコ } が全角なのが原因.

101 :初心者:01/11/14 02:26 ID:ONFQTcP5
>>100
うわ、、、致命的なミス(w
ご指摘ありがとうございます。

でも何故か下線は消えないのですが・・・

102 : :01/11/14 02:30 ID:w877rQwV
>95

A:link { color: #666666 ; text-decoration: none ;}
A:visited { color: #666666 ; text-decoration: none ;}
A:active { color: #666666 ; text-decoration: none ;}
A:hover { color: #333333 ; text-decoration: none ;}

なんでこうなるのかは知らん

103 :初心者:01/11/14 02:35 ID:ONFQTcP5
>>102
ありがとうございます。できました!

>>95のやつは本で調べた通りにやったんですがね・・・・

104 : :01/11/14 02:51 ID:wVDsvK8m
>103
まだ見てるかな…少なくともうちの IE6 じゃちゃんと消えるんだけど.
もちろん underline にすれば下線が出るし.インターネットオプションの「リンクの下線」の
ところもいろいろ変えてみたけど関係なさげ.

で,上手くいくようになれば a{text-decoration: none;} だけでいい.
上手くいかないうちは原因不明なので何とも言えないが.

しかし…もちろんわざとだろうが,来た人はリンクかそうじゃないかどうやって判断するのさ?

105 :Name_Not_Found:01/11/14 04:53 ID:8oTLdrCm
>>104
うちのIE5.5でも>>95のスタイル記述でちゃんと下線は消えました。
なんかシートかhead内に他によけいな指定を入れてるのでは? >>103

106 :白夜:01/11/14 07:11 ID:6TaUiexe
>103
漏れもIE5.5でa{text-decoration: none;} だけで桶だたよ

107 : :01/11/14 13:38 ID:UETipLgW
<DIV style="text-align:justify; text-justify:distribute-all-lines">
aiueo</DIV>
どうして均等割付はtext-justify:distribute-all-linesの部分も付けなきゃ
有効にならないんですか?
あと、「distribute-all-lines」の値を変えると何か変わりますか?

108 :初心者:01/11/14 15:06 ID:kg9DOzkK
>>100さんに指摘された全角を半角に直したらちゃんと機能しました
(下線が表示されなかったのはフレームページ側のソースを直してなかったのが原因でしたw)
お騒がせしましたm(_ _)m

それとアクセシビリティーを考えて
<STYLE type="text/css">
<!--
BODY {
color: #666666;
background-color: #ffffff;

/*リンク部分の指定*/
A:link { color: #666666 ;}
A:visited { color: #666666 ;}
A:active { color: #666666 ;}
A:hover { color: #999999 ; text-decoration: none ;}

/*文字の位置*/
DIV { text-align: center ;}
P { text-align: center ;}
TD { text-align: center ;}
-->
</STYLE>
に変更しました
あえて下線を消してるページもありますが(^^;

109 :Name_Not_Found:01/11/14 19:29 ID:CxFZEIHq
>>107
text-justify:の他の値についてはここを見て。
 http://www.doraneko.org/misc/i18n-format/WD990127.html#a5
 http://east.portland.ne.jp/~sigekazu/css/international.htm
要は、英語だけでなく各言語での組版規則の慣例を考慮すると
justifyにも色々な種類があってよいって提案がされてる。
といっても草案段階だが、これをIE5以降は独自拡張プロパティとして
先取り実装したわけです。したがってIE以外では指定しても効き目無し。
またMacIEではtext-align:justify;で表示が変になることがあるので注意(>>23参照)。

110 :Name_Not_Found:01/11/15 09:46 ID:xctKSZvS
http://x31.rsjp.net/tmp/admin.html
(実際はphp3ではき出しているものなのですが、そのhtmlソースをとってきて「.html」にしました。
なお、文字はダミーのものに変えています)
で、印刷の際に不具合が起きています。

●想定しているブラウザ:
IE5.0以上、Win98

●不具合の内容:
================================================================
3台のPC(Win98+IE5.5が2台、WinME+IE6が1台)で印刷したところ、
2台ではつねに正常に印刷される。
しかし、
1台で(Win98+IE5.5)印刷した際、時々(3回に1回くらい?)
2カ所とぎれるところがある。

その2カ所の内訳:
・左上の方にある「団体管理者の会員コード:」がとぎれる
(「団体管理者の会員コ」までしか表示されない。)

・左下の方にある「株式会社あいうえ(かぶしきがいしゃあいうえ)」
の、()内が、途中でとぎれる
================================================================

しかし、その不具合の起きていた
うっかりPCのプリンタドライバを更新してしまったところ、正常に表示されるようになってしまった。
(古いプリンタドライバを入手できないため、症状が再現できなくなってしまった)

(追記:
また、クライアント(依頼主)のPCでは、
同様のとぎれる症状が起きるらしい(IE5.5))

●自力で探した情報:

いろいろウェブを探したものの、
http://www.microsoft.com/japan/support/kb/articles/J054/7/06.htm
(ただしその大元の情報は、microsoft 本家の
http://support.microsoft.com/support/kb/articles/Q255/9/65.asp

にある
================================================================
現象
Select コントロールが含まれている Web ページを印刷または印刷プレビューすると、
ページが、ブラウザに表示されているとおりに表示されない場合があります。
原因
弊社では、これを、この資料の冒頭に示す
Internet Explorer 5.5 の問題として認識しております。
================================================================
という、こころもとない情報しか見つかりませんでした。

なんとも症状が再現できないだけに、途方に暮れています。
(クライアント様のパソコンで何度も試すわけにもいきませんし・・・)

上記ページの原因なり、あるいはこういった印刷バグ関係の情報なり、
何かお持ちな方、いらっしゃいませんでしょうか?

111 :Name_Not_Found:01/11/15 23:00 ID:rSTMswu5
>>110
それって全然スタイルシートの問題ではない気が……。
別のスレッドでお尋ねになっては?
それとも印刷仕上がり状態をCSSで制禦したいってことなんですか?

112 :110:01/11/16 00:28 ID:N5/I1w/m
>>111
>それって全然スタイルシートの問題ではない気が……。
いや、CSSをかなり使ってるから、それが原因かな、という自分の推測なんですが。
CSSを抜かすと、単純なテーブルなんで(しかもネストすらしてない)
(ただ、なんせ、状態を再現できないので、確信もてないんですが)

113 :Name_Not_Found:01/11/16 03:40 ID:wDBEp8uB
ブラウザ振り分けを教えて下さい。
NC4とIE3には空にしたcssファイルへ振り分けたい->kara.css
ネットスケープ6とIE5.5では見え方が違うので、これも振り分けたい->n6.css ie55.css
おねがいしまっす

114 :Name_Not_Found:01/11/16 03:57 ID:mAmJo8yP
>>113
既出。
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

115 :Name_Not_Found:01/11/16 04:30 ID:wDBEp8uB
>>114
そこ見たのですが具体的な書き方がわからなかったので書き込んだのです。
ずばり、答えを下さい。おねがいしまっす

116 :Name_Not_Found:01/11/16 04:44 ID:mAmJo8yP
>>115
あまり甘えないで少しは自分の頭を使ってはどうか。

<link rel="stylesheet" type="text/css" href="ie55n6.css"
lang="ja" charset="Shift_jis" media="print, screen">
<!-- NN4ではmedia属性にscreen以外の値を指定すれば読み飛ばされる -->
<link rel="stylesheet" type="text/css" href="kara.css">
<!-- IE3は一番下しか読み込まない -->

で、ie55n6.cssの先頭に
@import 'nn6.css' screen, print;
と書く。適当に“! important”を使用すべし。

他にもやり方はある。目的によって振り分け方法をあれこれ案出すること。

117 :Name_Not_Found:01/11/16 04:56 ID:wDBEp8uB
>>116
ごめんね、ありがとう。
xとかyじゃどれに振り分けられるのかわからなかったの。
答えくれてありがとう。いろいろいじってみます^^

118 :Name_Not_Found:01/11/16 04:59 ID:wDBEp8uB
113と115と117です。
コピペしてから気が付いた。
ネットスケープ6には振り分けは効かないの?

119 :113 115 117 118:01/11/16 05:03 ID:wDBEp8uB
ごめん、私あほかも。

>で、ie55n6.cssの先頭に
>@import 'nn6.css' screen, print;
>と書く。適当に“! important”を使用すべし。

これがネットスケープ6に振り分けてるのかな・・・

120 :Name_Not_Found:01/11/16 05:09 ID:mAmJo8yP
>>119
もういっぺん>>114のリンク先を熟読してください。
>除 IE3 & IE4 & IE5/6 & NC4
><STYLE type="text/css">
><!--
>@import "x.css" all;
>@import 'y.css' screen, print;

>Netscape6は対応している。

わからなかったら各シートにcolor:red;とか簡単なスタイル指定を書き込んでブラウザによって表示が変化するか実験してみること。

121 :113 115 117 118 119:01/11/16 05:23 ID:wDBEp8uB
>>120
何度もごめんね。

nn6.cssにbody{display:none}書いたら真っ白になったよ。
nn6.cssをkara.cssと同じように何も書いてなかったの。
何も書いてなかったら元のcssが適応されるんだね。

他の振り分けもうまくいきました。ありがとう!

122 :113 115 117 118 119 121:01/11/16 05:26 ID:wDBEp8uB
>nn6.cssをkara.cssと同じように何も書いてなかったの。
>何も書いてなかったら元のcssが適応されるんだね。

もうしわけない。これウソ。
cssの指定が間違ってただけでした(;´Д`)
板汚しごめん。

123 :Name_Not_Found:01/11/16 10:59 ID:xKgSZsUb
セル内のテキストにフォントサイズを指定したいのですが、
<td>にスタイルを適用した方が良いのでしょうか?
それとも各テキストに対して<p>を付けてそちらに適用
した方が良いのでしょうか?
ちなみに行間などの指定はしていなくて、フォントサイズ
だけ設定したクラスです。

124 :Name_Not_Found:01/11/16 11:18 ID:gtyk6rsy
>>123

td内にp以外が入る可能性を考慮したら、tdに基本的なスタイルを設定しておいて
セル内の各要素に継承させる方がツブシがきくのではないですか?
td内にはいろんなものを含むことができるのですから。

そして、td内の各要素毎に違う部分だけ改めて設定し直すと。

だいたい、スタイル設定のためにpにするとかじゃなくて、それが段落であるなら
スタイルがどうであれ、pはp。

125 :Name_Not_Found:01/11/16 18:43 ID:2IAVsMIZ
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
↑これの応用でIEやネスケに対する外部スタイルシート振り分けはできますが、
iCabやOperaといったマイナー・ブラウザへの振り分けもしたいのです。
JavaScriptでないと無理ですか? でもUA名を擬装してくる場合もあるし……。
シートを読み込ませない方法でもいいです(特にiCabは実装がひどいらしいので)。

126 :Name_Not_Found:01/11/16 19:02 ID:gtyk6rsy
>>125

http://www.remus.dti.ne.jp/~a-satomi/nikki/2001_11b2.html#day16num02
Operaは偽装してもOperaという文字列は含まれてるので判別可能らしい。

iCabは知らん。

127 :125:01/11/16 19:18 ID:0Ze3u4oJ
>>126
これですか?
===================================
uaVer = navigator.userAgent;

isNN4 = (document.layers);
isIE50 = (uaVer.indexOf("MSIE 5.0")!=-1);
isIE4 = (uaVer.indexOf("MSIE 4")!=-1);
isIE = (uaVer.indexOf("MSIE")!=-1);
isMoz = (uaVer.indexOf("Gecko")!=-1);
isOp6 = (uaVer.match(/Opera.6/)!=null);

if (isOp6) { isIE50 = false; isIE = false; }

isWin = (uaVer.indexOf("Windows")!=-1);
isMac = (uaVer.indexOf("Mac")!=-1);
================================================
できればJavaScriptに頼らず、>>125のリンク先みたいな応用で
振り分けられるとbetterなのですが。
逆に、いままでスクリプト抜きで振り分けしてた場合、Operaにそれが通用せず、
却って妙な表示になることもあるかもしれないので、不安です。
Operaは@importにどの程度まで対応してるのか……。

128 :Name_Not_Found:01/11/16 19:36 ID:PHxCbSir
>>127
var isOp6=(uaVer.indexOf("Opera")!=-1);
でいいんじゃないの?

>>125
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
ここの説明は間違っている部分があるので、
実際にブラウザで確認した方がいいよ。

129 :125:01/11/16 19:48 ID:0Ze3u4oJ
>>128
>http://east.portland.ne.jp/~sigekazu/css/boxm.htm
>ここの説明は間違っている部分があるので、
知りませんでした。すみません、具体的にはどの部分で、正しくはどうなのですか。
一応、私のサイトではあそこの説明通りにやって問題が確認されてませんので。

130 : :01/11/16 20:23 ID:qZ0Njp2o
フレームボーダーを無くそうと思ってもなくせません。

そこで
フレームとフレームの間の色を黒にしたいのですが
これはスタイルシートで指定すべきなんでしょうか?

131 :白夜:01/11/16 21:00 ID:d5LoP+aH
>130
<FRAMESET bordercolor="black">

132 :白夜:01/11/16 21:01 ID:d5LoP+aH
あ、ごめん。CSSで答えてないや・・・

133 :Name_Not_Found:01/11/16 22:56 ID:gcwk7CkL
CSSって大量にマークアップした文書には向いてないのでしょうか。
50KB〜100KBくらいのhtml文書をローカルで表示させると、
「リンクにカーソルを乗せる」動作で数秒フリーズしてしまいます。
完全に表示させるまでに4秒ほどかかったりもします。
外部CSSファイルは6KBくらいなのですが、、、
マークアップの仕方かCSSの使い方がおかしいのでしょうか。
こういった問題に関するサイトなどどなたかご存じではありませんか?
または解決方法などお教えいただければ幸いです。
よろしくお願いします。

134 :Name_Not_Found:01/11/16 23:01 ID:OPVWUYO0
>>128
あそこはよく参照してるので、誤ってる箇所を指摘してくれると助かります。

>>133
使用してるブラウザは? どんなスタイルを適用してるの?
もう少し具体的な情報が無いと、判断できません。

135 :Name_Not_Found:01/11/17 13:31 ID:NNU45TT3
>>133

掲示板の大きい過去ログ(ファイルサイズはちょうどあなたのいうくらい)
で、ビシバシCSS使っているが、うちの超ポンコツ機(メモリ20MCPU100MHz)
のIE5で見てもそんな現象はなかった。

136 :Name_Not_Found:01/11/17 17:52 ID:yL/e9MdX
MacIE5について質問です。

ZSPCによると、caption-sideは×となってるのですが、
友人が言うには「bottomなら対応してる。」とのこと。

しかし、この友人もMac持ってるわけではないので、
記憶違いしてる可能性は否定できず。
caption-sideなんて使いそうにないので、どーでもいいといえば
どーでもいいのですが、気になってしまいます。

実際のところどうなのでしょうか。MacIE5を持ってる方教えてください。

137 :Name_Not_Found:01/11/17 20:54 ID:GF8Ctmvx
>>127

CSSそのものをCGIとしてしまう手はどうでしょうか?

たとえばこんなん。
http://homepage2.nifty.com/afterglow/data/other/css.txt

138 :133:01/11/18 00:49 ID:nwLaTQMq
>>134

ブラウザはIE5です。
<DL>〜</DL>で囲った内容、画像(両方とも50個くらい)をfloatさせているとフリーズします。
サイト共通のスタイルとしてアンカーの装飾(background-color)をしています。
<DL>をfloatさせる必要はないのですけども、画像はfloatさせたいのです。
PCのスペックはそんなに悪くはないので(P3-550MHz、メモリ256)、やはりCSSかと。
CSSの限界ってどのくらいなんでしょうかねぇ。

139 :Name_Not_Found:01/11/18 00:54 ID:AGqr1GYq
>>138
ナゼそうすぐに css の限界とかいう話になるの?
あんたの書き方がおかしかったり、
特定ブラウザの挙動がおかしいだけの可能性が高いでしょ。
はっきり言って css の仕様とは関係ない話だよ。

っていうか css の限界っていう言い方が変です。

140 :Name_Not_Found:01/11/18 01:17 ID:2gtlAEXh
>>138
それはcssの限界ではなく、メモリーやリソースの問題。
だから、環境によって激しく異なる。

141 :133:01/11/18 02:03 ID:P7K+Evk/
あんまり噛みつかないでください。

>>139-140
ということは
>CSSって大量にマークアップした文書には向いてないのでしょうか。
には「そうでもない」ということでしょうか?
でも自分の環境で軽く表示させるようにするのが先決ですね、、がんばりまふ。

142 :Name_Not_Found:01/11/18 02:28 ID:AGqr1GYq
>>141
>>CSSって大量にマークアップした文書には向いてないのでしょうか。
>には「そうでもない」ということでしょうか?

だからー、適用させる文書の容量と、cssを適用させた
ことよる不具合の間にそもそも因果関係がないでしょうが。仕様的には。
特定のUAの実装か適用させたシートの問題でしょう。

143 :Name_Not_Found:01/11/18 02:36 ID:npb3hf70
どうしてもCSSのせいにしたいなら、
CSSを使わずに画像を回り込ませてフリーズしない事を確認しろ。

144 :Name_Not_Found:01/11/18 02:49 ID:OWk1Vide
CSSのせいなんじゃなくて、直接的には「その処理」が原因でしょ。
CSSの限界ではなく、自分のPCの限界を知る方が重要かと。

145 :Name_Not_Found:01/11/18 13:32 ID:vHGOMEiQ
マウスカーソルがリンクのところに触れると下線が出たり色が変わるやつってありますよね。
それで、はじめリンク文字が灰色だったのが、カーソルが触れて赤色の下線が出てリンク文字が白に変わる、というようにするにはどうすればいいのでしょうか。

現在こんな↓感じなんですが。どうも下線の色の変え方がわからないんです。
a:link { text-decoration:none; color:silver; }
a:visited { text-decoration:none; color:silver; }
a:hover { text-decoration:underline; color:white; }

よろしくおねがいします。

146 :Name_Not_Found:01/11/18 14:32 ID:nAW1tH+W
>>145
下線(text-decoration:underline;)はテクストのcolorと同色になるので無理。
もしどうしてもやりたいなら
a {text-decoration:none;}
a:link { color:silver; }
a:visited { color:silver; }
a:hover { color:white; border-bottom:1px solid red;}
これで下線が文字に近づきすぎだったら、お好みでpadding-bottomも指定する。

但しインライン要素へのborder指定はIE5.5以降でないと効きません。
(display:block;とすれば話は別だが)

147 :145:01/11/18 14:43 ID:vHGOMEiQ
>>146 やってみました。自分のイメージにかなり近くて良い感じです。ありがとうございました。

148 :Name_Not_Found:01/11/18 20:58 ID:gTtbDneX
自分で作ったHTML文章にcssを適用させて
ie4で見ると固まりました。
ie4のことは無視してもいいでしょうか。

149 :Name_Not_Found :01/11/18 21:17 ID:vtjlUZYd
IE4だけ蹴る方法なかったかな。

150 :Name_Not_Found:01/11/18 21:22 ID:JyVZS/os
「IE4で見ないでください。特にMacIE4は死んでください」
と書いておく。

151 :白夜:01/11/18 21:25 ID:RVynwZWS
>148
ジャバスクリプトでスタイルシートを切り替えたら?

+ JavaScript の質問用スレッド vol.5 +
http://pc.2ch.net/test/read.cgi/hp/1002539301/

↑ここのガイシュツらしいけど・・・

152 :Name_Not_Found:01/11/18 21:56 ID:lWJT/Ncu
>>148-149
たぶんガイシュツだと思うけどこれは?
ttp://east.portland.ne.jp/~sigekazu/css/boxm.htm

153 :Name_Not_Found:01/11/18 23:54 ID:oeTMoq78
背景色の指定について質問です。

widthの、中央60%だけ白、その他の部分を違う色にしたいんですが、
どのように指定すれば出来るんでしょうか?
いろいろ試行錯誤しているんですけどどうしてもうまくいかなくて。

154 :Name_Not_Found:01/11/19 00:07 ID:E8a4XMzH
>>153
20%,60%,20%の<div>三つを横に並べるのではダメですか。
両脇の20%づつの部分にも中央と連続したテキストを載せるの?
ならムリかもしれない……。
背景画像を配置したら? きっちり60%にはならないけど。

155 :Name_Not_Found:01/11/19 00:07 ID:u0wTbmCz
>>153
完全に60%にする方法は今はなさそうだけど、
適当な幅の画像を中央で縦方向のみ繰り返し表示させるというやり方はどうでしょうか。

156 :153:01/11/19 00:18 ID:xCSoK4pB
なるほど、それは思いつきませんでした。どうもありがとう。
背景画像を使う方法、試してみます。

157 :白夜:01/11/19 03:01 ID:NBUv1L4p
>153
遅くなったけど
>>154のやり方で指定して
メインはポジションを絶対指定したものを作ると(・∀・)イイ!!

158 :Name_Not_Found:01/11/19 06:08 ID:YJfLzCuz
各ページからTOPへリンクを張ろうと思い、そこだけ共通のスタイルシートを
作りたいのでス。今は、
<head>
<style type="text/css">
<!--
@import url(cmn.css);
-->
</style>
</head>
<body>
<p class="a">
<a class="b" href="http://〜">TOP</a>へもどる
</p>

というふうにしてるのですが、アンカー部分のクラス指定がうまくできません。
a.b:link{〜}
ではダメだったので、アンカー部分のクラス指定のやり方を教えて下さい。
それともある範囲にだけ特定のスタイルシートを適用することってできるのでしょうか? それができればそっちの方がソースがきれいですよね。いくつも
クラス指定しなくていいし。
御教授プリーズ。

159 :Name_Not_Found:01/11/19 06:18 ID:UldqZi5t
>>158
A:link.b {font-weight:bold;}
または
.a A {font-weight:bold;}

.a A:link, .a A:visited {font-weight:bold;}

P.a A {font-weight:bold;}
でもよい。

ついでながらCSSの「セレクタ」について勉強し直した方がよいかと思ふ。

160 :Name_Not_Found:01/11/19 14:23 ID:a8r88QFs
>>159
そう言うあなたも間違ってますけど……。
> A:link.b {font-weight:bold;}
これはダメ。通常のクラスと擬似クラスを併用する時は、
A.b:link { font-weight:bold; }
のように、通常のクラスを先に書かなければいけない。

161 :Name_Not_Found:01/11/19 17:28 ID:n7sXJUlA
>>150-152
thx

162 :Name_Not_Found:01/11/19 20:49 ID:HFGzEf4a
仕様書(日本語訳)のをどこかでダウソできないかなぁ?
しってたら教えてね。ネタちゃうんで。よろしく。

163 :Name_Not_Found:01/11/19 21:50 ID:qwYtvDVR
http://www.google.com/search?hl=ja&q=CSS+%96M%96%F3&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

164 :Name_Not_Found:01/11/19 21:53 ID:mdfFuYX4
{ position:relative; top:○○%; left:○○%; } って記述しても、
ネスケで見るとぜんぜん無視されちゃってるみたいなのですが・・・。
なぜなぜ。。???

165 :Name_Not_Found :01/11/19 22:27 ID:R1YPbv9q
>>164
Netscapeのいくつよ。

166 :164:01/11/19 22:46 ID:vQOy8iP1
>>165
6.2です。

167 :Name_Not_Found:01/11/19 22:56 ID:VfWIctaP
やっぱダメだね。6.2

168 :159:01/11/19 22:58 ID:5tzcmyuG
あ、間違った。ご指摘有り難う。>>160
>>158
>a.b:link{〜}
>ではダメだったので、
とあったので混乱しました。自分のシートにはA.b:link{〜} で書いてるのに……。
しかし、すると>>158のはナゼ効かなかったんだ?

169 :Name_Not_Found:01/11/19 23:15 ID:5tzcmyuG
>>164-167
うちのNetscape6.2では、その記述で有効だったよ。
但し特に親要素を持たない場合。
その適用させた要素を<div>とかで括ると、
なぜかtop:y%が無視されて、left:x%だけ有効になりました。
しかし単位を%でなくpxやemにするとtopの記述も無視されなかった。
バグかな。

170 :164:01/11/19 23:33 ID:vQOy8iP1
>>169
そうですかー。
spanで括ったのがダメな要因なのかな。
あと、インラインフレームもpositionで指定したいんだけど、
これもダメダメでした。
IEではばっちりーだったんだけど。。
ってか、もしかしてインラインフレーム自体ネスケではダメダメなんだっけ?
うう。もうちょっとちゃんと勉強してきます。

171 :白夜 ◆GiKO.QrM :01/11/19 23:40 ID:GcM8VuUW
>170
ネスケはインライソフレームは未対応

172 :164:01/11/19 23:45 ID:vQOy8iP1
>>171
あーそうなんですか。ありがとうございます。
6.2で見たところ一応表示はされてるんだけど、変な表示になっちゃってた。。
インラインはダメか。。作り直しだ。

173 :Name_Not_Found:01/11/19 23:47 ID:I9q7FwxV
>>170
<IFRAME>未対応なのはネスケ4まで。
NN6以降はサポートされてます。
但しStrictではないはず。
overflowプロパティを使ってみては?

174 :158:01/11/20 00:38 ID:w/MFhS17
>159 >160
えと、結論から言うとできました。
A.b:link{〜}ではできなかったのではなく、できていたのですが
そのページのみに使っている(クラス指定の中では使用してない)
リンク時のスタイル(ex)background-color:#000000)をも適用していたため
できていないように感じたのです。
だからアンカー部分をクラス指定する場合は、通常の疑似クラス指定で使っている
要素も全て書いていなくてはいけないようです。
説明わかりにくかったらスンマソ。
でもどうもありがとうございました。

175 :164:01/11/20 23:16 ID:S6RjAwuc
>>173
6以降なら対応してるんですね、ありがとう!
position:relativeで%指定じゃなくしたら、ちゃんと表示されるようになりました。

176 :Name_Not_Found:01/11/21 17:13 ID:1QzcIhj7
NN4.xで<LAYER>を使って<IFRAME>を実現する方法がNetscapeのサイトに載ってたような。

http://jt.mozilla.gr.jp/docs/web-developer/upgrade_2.html
http://sites.netscape.net/ekrockhome/standards.html

177 :白夜 ◆GiKO.QrM :01/11/22 00:47 ID:U3GGNz82
ガイシュツだったらすみません。
テキストエリアにボーダーを指定すると
ネスケじゃ書込めないと言われたんですが
これは仕様(?)なんですか?バグなんですか?

178 :Name_Not_Found:01/11/22 06:57 ID:pbx4megY
>>177
「書き込めない」なんてそんな無茶な「仕様」がありますか。
たぶんバグでしょ。
ところでどの「ネスケ」って4のこと、それとも6のこと?

179 :白夜 ◆GiKO.QrM :01/11/22 12:27 ID:FhnepUyo
>178
回答ありがとうございます。
よく考えたらそんな「仕様」なワケないですよね。
ネスケ4の事でした、説明不足ですみません。

180 :Name_Not_Found:01/11/22 13:54 ID:mDaVn0PQ
 <Hn>要素の下のmarginって、CSSでどう設定すればいいナリか?
ゼロにしたいナリが、どうしてもあいてしまうナリ。

 ちなみにDTDは4.01Strictナリ。

181 :Name_Not_Found:01/11/22 13:56 ID:5v0MCiB4
>>180

182 :Name_Not_Found:01/11/22 13:59 ID:5v0MCiB4
>>180
下のmargin ? margin-bottom のこと?
h1{ margin-bottom: 0px; }
とかでいいはずだけど。

これは想像だけど、Hn の次の要素( p とか )の
margin-top が 0 になってないのでは?

# >180 うっかり書き込みしてもうた。スマソ

183 :180:01/11/22 14:18 ID:mDaVn0PQ
 なんか下の要素(h2)のmargin-topを0pxにしたら解決したでし。
hnはmargin-top:もデフォであるんですね……。thx

184 :Name_Not_Found:01/11/22 14:29 ID:G0meolSU
>>183
私はNN6のデフォルトスタイルでH2〜6がマージン空けすぎで気に入らないので、
いちいちmargin:5px 0;と指定してます。

185 :Name_Not_Found:01/11/22 14:36 ID:O7dGqLld
textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはCSSでどうにかなりませんでしょうか....

186 :Name_Not_Found:01/11/22 15:21 ID:2HtvhAoE
>>180-184
漏れは
p, h1, h2, h3, h4, h5, h6 { margin: 0.5em 0em; }
にしてる。
IEもNNもデフォルトは 1em 0em っぽいけど空きすぎだと思う。

187 :Name_Not_Found:01/11/22 16:59 ID:ZP7SZRdO
NNのデフォルトは自分で確かめられますよ。
C:\Program Files\Netscape\Netscape 6\res\html.cssに格納されてます。
全部1emではなくもうちょっとそれぞれに微妙なスタイルが設定されてます。

188 :Name_Not_Found:01/11/22 17:41 ID:AEIxSGQV
>>186
N4でも動作するのでしょうか?

189 :Name_Not_Found:01/11/22 17:46 ID:0/qzZMPQ
>>188
もちろん。
でも、その手のブラウザ別の実装状況については
CSS対応表が各種あるからそれで調べること。
>>2にも挙げてあります。

190 :Name_Not_Found:01/11/22 18:58 ID:O7dGqLld
textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはCSSでどうにかなりませんでしょうか....

191 :Name_Not_Found:01/11/22 19:07 ID:2t69sHX3
>>185>>190
繰り返すなよ……
うんだ、どもならんべや。――これで満足かい?

192 :Name_Not_Found:01/11/22 20:01 ID:R32uFfKd
>>190
<input type="text" name="xxx" class="textarea">
----
input.textarea { width: 80%; }

もし仮に、こういうことを聞いているんじゃなかったらすまぬ。

193 :Name_Not_Found:01/11/22 20:04 ID:cTrNUPer
>>179
borderの指定の仕方によって回避可能。
border-style: solid;
border-color: #ccc;
border-width: 1px 1px 2px 2px;
こんな風にばらしてやるとうまくいくかもしれない。

194 :Name_Not_Found:01/11/22 20:36 ID:mjvWiNLT
>>192
textareaは普通のタグですが?

195 :192:01/11/22 20:57 ID:R32uFfKd
>>194
そうですね。

196 :Name_Not_Found:01/11/22 21:07 ID:a2GW5AOy
>>194
念の為に言っとくけど、class属性値のtextareaと
要素名のtextareaに関係は無いぞ。

197 :Name_Not_Found:01/11/22 21:13 ID:2N/WcWsd
>>194
textareaは普通の"要素"ですが?

198 :白夜 ◆GiKO.QrM :01/11/22 23:51 ID:LKFYe2o6
>193
あ、なるほど。
試してみます。
ありがとうございます。

199 :Name_Not_Found:01/11/23 05:56 ID:COex5ag8
>>198
ネスケ4はダメ子ちゃんだから、textareaに限らず
borderの一括指定がうまく機能しなかったりする。
これ有名なバグね。
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html

200 :白夜 ◆GiKO.QrM :01/11/23 07:16 ID:FeIui1yw
>199
ありがとー。
ホント、ダメダメですねぇ。。。
やっぱり指定しないようにしときます。
1番無難なんで(w

201 :Name_Not_Found:01/11/23 08:24 ID:wAkQYxBk
>>200
ネスケ4にもせめてブロック要素のborder位は指定してやれよ、可哀相だろ。

202 :Name_Not_Found:01/11/23 11:39 ID:OtxEZb3G
ガイシュツだったらすいません。
IE6.0を使っているんですが、CSSが使えません。
<style type="text/css">
<!--
-->
と書くと何も表示されなくなってしまいます。
これってバグでしょうか。

203 :ちょこら:01/11/23 12:01 ID:KYbiFCae
>>202
xhtml で書いてるんならその挙動で正解。
DOCTYPEスイッチが標準準拠モードになってるんでしょう。
xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。

…で合ってるよね?
質問は age れば?といいつつsage。

204 :Name_Not_Found:01/11/23 12:42 ID:OtxEZb3G
すいません
初心者な者でxhtmlとかDOCTYPEと言われてもわかりません。
xhtmlってなんですか。htmlとどう違うんでしょうか。
要するにIE6.0でCSSを使うにはどうすればよいのでしょうか。
ちなみにインラインではCSSは使えるのですが、html文書全体にCSSを適用することができません。

205 :Name_Not_Found:01/11/23 12:45 ID:JHEHm90B
      
      
     

206 :Name_Not_Found:01/11/23 12:48 ID:gC2tJ8zu
204>>
さらしage

207 :ちょこら:01/11/23 12:53 ID:KYbiFCae
>>204
特別な事は何もないよ。
何も考えずに普通に使えると思うんだが…。

もし、いろんなところからソースをコピペしてるんなら
組み合わせによってはそういう症状が出るでしょう。
そういうときは諦めて一から勉強しましょう。

208 :Name_Not_Found:01/11/23 13:10 ID:tA9lYnA0
>>202

</style>閉じてないんじゃないの?

209 :Name_Not_Found:01/11/23 13:11 ID:BfP52YOP
>>204
<style type="text/css">
<!--
-->
</style>
↑閉じタグ忘れとか、そういう単純なのではなく?

210 :Name_Not_Found:01/11/23 13:12 ID:BfP52YOP
あっ、かぶっちゃった。打つの遅くて鬱。

211 :Name_Not_Found:01/11/23 13:27 ID:yFM6+eql
>>208
>>209
</style>の閉じ忘れでした。
1から勉強しに逝って来ます。

212 :ちょこら:01/11/23 13:43 ID:KYbiFCae
ガ━━(゚Д゚;)━━ン!

213 :ちょこら:01/11/23 13:45 ID:KYbiFCae
っていうか、良く見たら
>何も表示されなくなってしまいます。
って書いてあるじゃん。
俺が勘違いヤローだ。
逝ってきます。

214 :Name_Not_Found:01/11/23 17:00 ID:h1RMImgX
>>203
>xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。
これってほんと?
んじゃ今後は<style>の中身はコメントで括らない方が正しいってこと?
でもそうすると一部の古いブラウザでスタイル指定がまんま表示されちゃうんだよなあ…

215 :Name_Not_Found:01/11/23 17:01 ID:74KOPn/J
わらった

216 :Name_Not_Found:01/11/23 17:51 ID:cvK8Ys9h
>>214
なるべく外部スタイルシートにしろってAnother HTML Lintでも注意されるでしょ。

217 :Name_Not_Found:01/11/23 20:38 ID:rWKhCdy1
>>214
<style type="text/css">
<![CDATA[
<!--
-->
]]>
</style>

という風に、CDATAマーク空間にすればいいと思われ。

218 :Name_Not_Found:01/11/23 20:39 ID:rWKhCdy1
age忘れ、すまん。

219 :Name_Not_Found:01/11/24 06:52 ID:rqFxRd3y
リンク部分を文字色は本文と同じで、下線だけ青くしたいので、
次の通り指定しました。
A:link, A:visited {
text-decoration:none;
border-bottom:1px solid blue;
color:black;
}

しかしWinIE5.5未満はインライン要素へのborder指定が効きませんよね。
つまりリンク部分が全く他と区別つかなくなってしまって、これはいけない。
そこでWinIE5以前では通常の下線表示のままにして、version 5.5以降
及びMacIE5・NN6等では上記のtext-decoration:noneが適用される風に
仕組めないかと思ったのですが……。
下記ページを見たんですが、いい手が浮かびません。
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm
JavaScriptを使ったシート振り分けしか手はありませんかね?
ご教示いただけると助かります。

220 :Name_Not_Found:01/11/24 11:27 ID:GBZ8shRJ
@import url() all;
でa{text-decoration: none}を呼び出し、さらに
<!--[if gte IE 5.5000 ]>
<style type="text/css">
a {text-decoration: none}
</style>
<![endif]-->
も書いておくってのは?

JavaSriptでやったほうがスマートに見えそう。

221 :Name_Not_Found:01/11/24 12:34 ID:nmisyc6z
text-decoration:expression('none');だとIE4〜5でも対応ですか?

222 :219:01/11/24 12:47 ID:nmisyc6z
>>220
有り難う。うーん、head内style要素が要りますか……。
確かにスマートでありませんね。

JavaScriptで補正用外部CSSシートを読み込ませると、
JavaScriptオフにしてる閲覧者に問題が生じるので、
なるたけスクリプト無しでやってみたいんです。

223 :Name_Not_Found:01/11/24 12:52 ID:rGyBxada
>>222

SSIがつかるならそうするとか、
あるいは外部CSSをCGIにしてしまうとか・・・

224 :219:01/11/24 12:54 ID:nmisyc6z
>>223 借りてるWebスペースがSSI・CGI共に不可なんです……

225 :Name_Not_Found:01/11/24 13:02 ID:bsiyzsxk
>>221
expression(〜)は確かIE5以降。
しかも、初期バージョンではインラインスタイルとして書いたものしか
効かないというのを、MSDNのどこかで見た記憶がある。

226 :219:01/11/24 13:12 ID:JGULGIZF
>>225 おおっ、朗報。
てことは、外部スタイルシートにexpressionで指定しておけば
head内style要素で<!--[if gte IE 5.5000 ]> 〜<![endif]--> とするのと
同じ効果があるわけですか。
しかし確認したくともMSDNのどこに載ってるのかが見つけられず。

227 :219:01/11/24 13:25 ID:JGULGIZF
すみません、見つけました。
http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm
「最後に : 現在提案されている CSS 関数構文は、スタイル シートの中で使用した場合には機能しま
せん。インライン スタイルでのみ設定するようにしてください。これについては近いうちに修正する
予定です。」――1999 年 3 月 19 日
この修正がIE5.5からなのか、IE5.0でもなのかが問題ですね。
うちのマシンは5.5なもんで確認できません。
どなたか5.0の方いらっしゃいませんか。

228 :Name_Not_Found:01/11/24 15:16 ID:PmZhnkzF
>>227
5.0でもいけるよ。

229 :219:01/11/24 15:36 ID:zZsM0GKo
>>228
あ、試験してくれて有り難う。
となるとやはりIE5.5以上にだけ適用させる手には応用できませんね。残念。

230 :Name_Not_Found:01/11/24 16:04 ID:+vrkuKDn
5.01ってなかったっけ? Win版IE。

231 :Name_Not_Found:01/11/24 16:05 ID:ScHHPtRR
Selectors Becomes a W3C Candidate Recommendation

15 November 2001: W3C is pleased to announce the advancement of
"Selectors" to Candidate Recommendation. Selectors are patterns in
the Cascading Style Sheets (CSS) language that match to elements in
HTML and XML. This specification describes the CSS1 and CSS2
selectors and new selectors for CSS3. A test suite is available.
Please send your comments by May 2002 and read more on the CSS home
page.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
http://www.w3.org/Style/CSS/Test/
http://www.w3.org/Style/CSS/

232 :Name_Not_Found:01/11/26 09:42 ID:EWj+7wjH
>>221-9
もしexpression()で振り分けができるとしても、
CSS関数構文はスクリプト・オフでは機能しないんだから
JavaScriptでブラウザ振り分けするのと結果は同じことになります。

233 :Name_Not_Found:01/11/26 13:50 ID:bLHUXiWd
今さっきスタイルシートの本を読み始めたばかりの超初心者です。
<DIV ALIGN="center">でセンタリングしたテーブルの中のテキストの
フォントサイズなどを設定したいのですが、セレクタをDIVとしても
フォントが設定されません。
テーブルの中のテキストは<P>や<H>なので囲んでいないのですが、
セレクタを何にすればいいのでしょうか???



<DIV ALIGN="center">
<TABLE>
.
<TABLE>
.
</TABLE>
.
</TABLE>
</DIV>

234 :233:01/11/26 13:51 ID:bLHUXiWd
すいません。。。↑のタグたちはなんでもないです。消し忘れました。

235 :Name_Not_Found:01/11/26 14:05 ID:8LHOdXAR
tr や td でも囲んでいないのか?
ていうかそういうページの作りなら素直に font size とか使えよ。

236 :Name_Not_Found:01/11/26 14:08 ID:OgyWbgGM
>>233
div, div table {font-size:80%;}
これで、div直下の文字もdiv内テーブルの文字も80%になる。
div td { }でもよいが。

237 :233:01/11/26 14:13 ID:bLHUXiWd
ありがとうございます!
<TABLE>や<TR>、<TD>もセレクタにしていいんですか。そうか〜。

> font size とか使えよ。
<FONT SIZE>だと、Winで見るとやたらとでかいのでいやなんです。

238 :236:01/11/26 14:21 ID:StzOFnCU
分けて書くなら、これでもいい。

div {font-size:200%;}
table, th, td, caption {font-size:100%;}

この下の行の指定によって、テーブルの文字サイズは
divへの文字サイズ指定(200%)を初期値(100%)として引き継ぎ、
2倍角の文字として表示される。

239 :235ではないが:01/11/26 14:28 ID:1XSCdL7E
>>237
せっかくCSSを勉強し出したんだから、テーブル・レイアウトからは卒業しようねってことだよ。

あと、HTMLの要素は全てセレクタになるんだな、これが。
http://www.tg.rim.or.jp/~hexane/ach/fscs/

240 :233=237:01/11/26 15:19 ID:bLHUXiWd
> divへの文字サイズ指定(200%)を初期値(100%)として引き継ぎ、
(´Д`?)
table, th, td, caption {font-size:100%;} も実質200%になるということですか?
そしたら
div {font-size:200%;}
table, th, td, caption {font-size:200%;}
にしたらテーブルの文字サイズは400%になるかと思ったら、ならなかった。
意味がわからにゃい。。。

241 :Name_Not_Found:01/11/26 15:44 ID:R50JMmat
>>240
次のソースに対して適用して実験してみた。

<div>
<table>
<tr><td>VSSの試験中</td></tr>
</table>
</div>

div {font-size:1.5em;}
table {font-size:2em;}
これは下記に等しい。
div table {font-size:3em;}

確認したブラウザはWinIE5.5とNetscape6.2。
単位をemでなく%にしても同様だった。

242 :Name_Not_Found:01/11/26 15:59 ID:R50JMmat
>>240
table, th, td, caption {font-size:200%;}
これだと、最初にtable要素全体が200%とされ、
ついでその子要素であるtd要素等も200%にされるから
都合400%になる。
table {font-size:200%;} かtd {font-size:200%;} だけの指定にすべし。

243 :Name_Not_Found:01/11/26 16:27 ID:MUUl4Sz0
スタイルシートでこういう指定の仕方ってわからないです。
#FileList {position: absolute; left: 30%; width: 70%; height: 100%}
#Media {margin-left: 15px}
#Panel {position: absolute; width: 30%; height: 100%; overflow: auto}
#PieChart {width: 100px; height: 50px; margin-top: 10px}

#FileListとか#***** で指定するとどのタグに対して、指定してるのかもサッパリです。
p.linkのような指定の仕方なら分かりますが、#を使った書き方ってなんですか?

244 :Name_Not_Found:01/11/26 16:31 ID:6a5ZfZWv
>>243
いっぺんここ通して読んでくれ。基礎です、基礎。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs05.htm

245 :Name_Not_Found:01/11/26 16:38 ID:yQm2WCDg
#はidです

<p id="giko">はぁ?</p>
な場合は
P#giko
としますが、1つのファイルにIDは一個しか使っていけないので
要素は書かないことが多いのです

246 :243:01/11/26 16:57 ID:MUUl4Sz0
>>244-245
ほんとに基礎でした。
でも、助かりました。ありがとう!

247 :240:01/11/26 17:39 ID:bLHUXiWd
>>241-242
(´Д` ?)
さっきからずーっと実験やってます。わかったようでわからない。。。
とりあえずありがとうございます。。。

248 :白夜 ◆GiKO.QrM :01/11/26 20:38 ID:V0Rnqtwb
>247
TABLE, TD {font-size: 200%;}
だと、

<TABLE> ←ここでまず200%になる
<TR>
<TD> ←ここでさらに200%になる
てすと ←実質400%
</TD>
</TR>
</TABLE>

って事。
カンマは複数の要素に指定する事。
この場合<TABLE>と<TD>に
font-size: 200%;が適用されてる。

249 :Name_Not_Found:01/11/27 17:46 ID:iqF9S18e
NNでもまともに見えて、
IEならそこそこ洒落たデザインになるようなCSSの例を教えてください。
ちなみにHTML4.01Strictと<BR>、
JavaScript無しでやってます。

250 :Name_Not_Found:01/11/27 17:53 ID:uMnCjoyN
>>249

NN4で使えるものを、まず何かまとめておいて、IEやN6/Mozilla向けを
@importで呼び出すのが常套かと。
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

251 :Name_Not_Found:01/11/27 18:14 ID:C41ZJhqq
@importの多用は感心しない。私はmedia設定でNN4除けをしてる。
そしてNN4に対してだけ専用cssファイルをJavaScriptで読み込ませる。
できればJavaScriptも使用したくないんですが、
どのみちNN4ではスクリプト・オフだとスタイルシートも無効になるので
まあいいかと。

252 :Name_Not_Found:01/11/27 18:15 ID:N1slhFeK
>>250
参考になりました。
thx

253 :Name_Not_Found:01/11/27 18:27 ID:DfkchFgQ
>>249
確かに、一つのCSSファイルを全てのブラウザに適用させて済ませたいところだが
ネスケ4はバグがひどすぎて、組合せによっては何がバグるかも推測つかないので、
CSSを認識させないか、専用のファイルを作ってやるのが一般的方法です。

254 :Name_Not_Found:01/11/27 18:32 ID:vJcMXiRa
@importを使うと
NN4.0xが落ちるって本当?

255 :Name_Not_Found:01/11/27 19:01 ID:haLemKfy
>>251
なぜimportだめ?

256 :Name_Not_Found:01/11/27 19:11 ID:DfkchFgQ
>>255
ダメではないが好もしくない。読み込みが遅くなるし、構造がつかみづらい。
IEの「名前を付けて保存」>「Webページ、完全」でも、@importで指定された
外部cssファイルだと保存してくれないし。

参考:
LEVEL5「やたらとCSSファイルを小分けにする」
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html

257 :Name_Not_Found:01/11/27 19:26 ID:a8QtDBK0
N4をよけるためだけにmedia="print,screen"を指定するのってなんか釈然としないんだけど。。
印刷した場合の見え方、確認してないし。。
割り切った方がイイ?

258 :Name_Not_Found:01/11/27 19:31 ID:DfkchFgQ
>>257
ならばmedia="all"でどうですか?
どのみち何も指定してない場合は、allと同じことですよね。
それともscreenにだけ適用したいってことですか?

259 :Name_Not_Found:01/11/27 20:15 ID:a8QtDBK0
>>258
allだったらauralにもbrailleにもtvにもOK!ってコトじゃないの?

表示確認してるのはscreenだけなんだけど。。

260 :Name_Not_Found:01/11/27 20:45 ID:Q0FH+SE0
>>259
メディア・グループがvisualに属するプロパティならば
いくら指定してもauralやbrailleには関係無いはずです。
それに、プリントアウトして読む人だって珍しくないんだから、
印刷プレビューでprintの表示確認位しようよ。

261 :Name_Not_Found :01/11/27 20:47 ID:Df4IkChI
NN4避けのために使用する@imortなど一回で済むのにいきなり「多用」まで話が飛躍する上、
「感心しない」などと偉ぶった口調の>>251の態度は感心しない。

262 :Name_Not_Found:01/11/27 21:09 ID:8bj1BC8R
>>261
うん、感心しない。しかし@import一回で済むにしても、
やはり@importしか書いてないまっさらのCSSファイルって
何か間違ってる気がする……。裏技だから仕方無いのか?

263 :Name_Not_Found:01/11/27 21:11 ID:XW53It8u
>>261
どうでも良いが話のレベルをすり替えないでくれ。
251の態度について話したいんじゃない。
CSSについて話したいんだ。

>>260
CSSのmedia指定にきちんと対応してるブラウザってあったか?

264 :Name_Not_Found:01/11/27 21:14 ID:wybgafWN
極惡CSS研究所「ステルスCSS!隠せ」
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/kakuse.html
↑import20回だってさ。IEだと認識しない。

265 :Name_Not_Found:01/11/27 21:32 ID:wybgafWN
>>260
気になったので簡単な実験をしてみました。
<link rel="stylesheet" href="./red.css" media="print">
red.cssにはbody{color:red;}とだけ指定を入れました。

ブラウザはWinIE5.5SP2。
モニターで見ると、文字色に変化無し。しかし印刷プレビューでは文字色は赤に。

次にmedia="screen"とすると、ブラウザでは文字色赤、印刷プレビューでは黒。

結論――ちゃんと対応してるみたいです。

266 :Name_Not_Found:01/11/27 21:45 ID:V66EZg1r
NN4避けのためなら<nolayer></nolayer>で囲めばいいでしょ

267 :Name_Not_Found:01/11/27 21:50 ID:gMG2SCHf
>>266
そんなHTML4.01に存在しない独自拡張タグ使用する方が問題多いよ。
大体それHEAD内に書き込んでも意味無いし。

268 :Name_Not_Found:01/11/28 00:15 ID:OP19kqQi
>>267
あるもないも、意味大有りよ〜

269 :Name_Not_Found :01/11/28 00:38 ID:Az+Ab3Jt
>>262
俺は@importの後にNN4に読み込まれても困らない分を書き込んでるよ。
どっちかと言うとNN4で処理できない分をimport先に追い出した感じ。

270 :Name_Not_Found:01/11/28 07:33 ID:yYAA/Nep
>>269
その「NN4で処理できない分」が明確に分けられるんならいいんですが、
ネスケ4のバグっぷりは(組合せ次第では)何がバグるか見当もつかないから……。
結局専用CSSを書くのと労力は同等になりませんか。

271 :Name_Not_Found :01/11/28 09:21 ID:L5fxRUiu
>>270
同等(以上かも)。表示確認を果てしなく繰り返すしかなく…。
もともとNetscape4でもしょぼいなりの表示をしたかったからなんだけど。

272 :Name_Not_Found:01/11/28 10:13 ID:jtx1UR/8
ネスケ4専用のCSSファイルを作る位なら、いっそJavaScript Style Sheetにするってのはどう?
http://www.zspc.com/stylesheets/jss/index.html
それでももし、自分とこの独自拡張であるJSSも満足に表示できないのなら、NC4.xは本当のクズ。

273 :Name_Not_Found:01/11/28 13:17 ID:GTpfJ81m
H2とH3にスタイルシートで背景色と背景画像を指定してます。
パソコンの画面で見ると問題なく意図通り表示されるのですが、
プリントアウトすると背景色だけ刷られて背景画像が印刷されません。
IE5.5の印刷プレビューでもやはり背景色は見えるのに背景画像が見えなくなってます。
オプションの「背景の色とイメージを印刷する」はチェック済みです。
シートでmedia="print"や@media printと指定してみても結果は同じ。
これはIEの仕様(バグ)なんですか?
印刷にも背景画像を反映させるにはどうしたらよいのか、助言ください。

274 :Name_Not_Found:01/11/28 19:44 ID:Ch3wxPGJ
>>273
プリントアウトの設定が背景色も印刷することが出来たなら
黒背景色のサイトなんかを印刷したら、インクいくらあっても足りない。
背景色が省略されたときは、その文字色も違う色になって印刷されるはずです。
それなりに親切な設定だと思いますよ。

どうしてもブラウザで見たままの印刷をしたいなら、画面ごとプリントスクリーンキーで
キャプチャして、画像編集ソフトから印刷してみてはどうでしょ。

275 :Name_Nyot_Foundにょ:01/11/28 21:07 ID:76W9ThI1
フォントの大きさ等をHEAD内に指定し、
TABLEタグ内でそれを使うとなぜか下に
空白が出来てしまいますが、なぜでしょう?

276 :Name_Not_Found:01/11/28 21:23 ID:GwY2nA6B
>>272
使ってみたけど、全然だめ。
ネスケ4のクソスタイルシートをJavaScriptで書けるだけ。
表示はまったく変わらん。
ネスケ4なんて@importで十分だゴルァ!

277 :273:01/11/28 22:33 ID:I33kHPra
>>274
>プリントアウトの設定が背景色も印刷することが出来たなら
なにか誤解なさってませんか。
既に>>273でも書きましたが、背景“色”は現に印刷できるのです。
(そのための設定がIEの「インターネットオプション>詳細設定」にもあります。)
にも拘らず背景“画像”だけが印刷に出ないので、これを何とかしたいのですが。
つまり、background-colorでなくてbackground-imageの方です。

278 :Name_Not_Found:01/11/29 00:20 ID:I/0xIjdm
>>275
質問の意味がわからん。
>TABLEタグ内でそれを使うとなぜか下に
それって何? 下って何の下?
もっと具体的に、できればソースを出して質問しておくれ。

>>276
表示は変らんけど、CSSでの意味不明なバグり方はしないだけマシでもない?

279 :275:01/11/29 00:46 ID:+yJ5xusL
最初から書くとこんな感じです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>2ch</TITLE>

<STYLE TYPE="text/css">
H3{font-size:17px;font-family:"Times New Roman";font-style:normal;color:#000000;}
H4{font-size:14px;font-family:"MS ゴシック";font-weight:lighter;font-style:normal;color:#000000;}
</STYLE>

<META content="text/html; charset=Shift_JIS" http-equiv=Content-Type>
<META content="MSHTML 5.50.4134.0600" name=GENERATOR></HEAD>
<BODY>

<TABLE CELLPADDING=2 CELLSPACING=0 BORDER="1" BORDERCOLOR="#FFFFFF" WIDTH="375">
<TR>
<TD BGCOLOR="#DAF2FE" ALIGN="RIGHT" WIDTH="120">
<H3>11/29,002001</H3></TD>
<TD BGCOLOR="#E3E4FF" ALIGN="RIGHT"><H4>今日はいい天気でした。</H4>
</TD></TR>
</TABLE>

</BODY>
</HTML>


TABLEタグ内に HEIGHT="小さい数" を記述しても変わリません。
HEAD内に記述せずにSPANで各々やれば大丈夫なんですが、
日記なので、後々管理が辛いのです。

これはどうしたらいいのでしょうか?

280 :275:01/11/29 00:52 ID:+yJ5xusL
補足。
セル内の文字の下に空間が出来てしまうという事です。

281 :ネットマフィア ◆4mrpMqxg :01/11/29 00:54 ID:DTsj+P3M
俺様のいうウェッブデザイン書けや!!下僕ども!!
ってところに来い!!そして書けよ!!わかったか!!

282 :Name_Not_Found:01/11/29 00:56 ID:nsks0o69
H3と H4に margin-bottom: 0px とか入れるが吉。

283 :275:01/11/29 00:59 ID:+yJ5xusL
>>282

ありがとうございます!! 解決いたしました。
よ〜し、徹夜でホムペをCSSでリフォームするにょ〜。

284 :Name_Not_Found:01/11/29 01:05 ID:ehF5/CBn
>>279
せっかくCSSを利用するなら、もう少し勉強してテーブルレイアウトを止めるといいよ。

285 :Name_Not_Found:01/11/29 01:06 ID:nsks0o69
「今日はいい天気でした。」ってぇのは日記の本文?
だったら H4を使うのはどうかと思う。

286 :Name_Not_Found:01/11/29 01:53 ID:uxo2n6Tz
>>279
何でH3とH4なの?ってのは置いといて

H3とH4のスタイル指定に margin-bottom:0px を追加してみれ

287 :286:01/11/29 01:55 ID:uxo2n6Tz
あーなんでこんな古いのにレスつけてんだ、漏れ
すでに解決済みだっつーのに
逝ってきます・・・

288 :Name_Not_Found:01/11/29 03:28 ID:ogVPFo1y
スタイルシートの切り替えにJAVAスクリプトを使わない方法ってありますか?
スレ違いかな・・

289 :275:01/11/29 04:09 ID:x9Th/qEa
>>285様、286様。

レスありがとうございます。

H1,H2は、他に記述するものが出来たときの為にあけたんですが、
CSSじゃない<H1>タグのように、大きさが順々に小さくなったりするものではないですよね?

290 :Name_Not_Found:01/11/29 05:05 ID:AbJc1jQY
>>289
<H3><H4>を使うのはどうか、というのは
<H1>から使うべきだという意味ではないと思われ。
<Hn>は見出しを記述するために使うべきもの。
http://tohoho.wakusei.ne.jp/html/h1.htm

291 :Name_Not_Found:01/11/29 10:16 ID:qEj2hSAm
>>288
代替スタイルシートのことなら↓
http://pc.2ch.net/test/read.cgi/hp/991400015/l50
http://www.xinada.ne.jp/~handa/tech/CSS/StyleChange/index
ブラウザへの振り分けのことなら↓
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

292 :Name_Not_Found:01/11/29 13:01 ID:HLPr1L9w
tableのセルの上にマウスがきたらセルの背景色を変えるっていうのは
ジャバスクリプトじゃないと無理ですか?

293 : :01/11/29 14:06 ID:no3+VYQS
>292
td:hover とかやればできるはずなのだが,
まともに対応している UA は多分まだない.
(N6 で不完全に対応していた気がする.)

294 :Name_Not_Found:01/11/29 14:07 ID:crTlkipW
>>292
CSSだけではムリです(少なくとも今の:hoverの実装では)。
cf. ttp://east.portland.ne.jp/~sigekazu/css/javascript.htm

295 :Name_Not_Found:01/11/29 14:23 ID:HLPr1L9w
どうもありがとうございます。
ジャスクリプト行きます。

296 :Name_Not_Found:01/11/30 16:52 ID:NB/RRvhG
>>294
ウソを言うな〜
セルの中で便宜的にAタグを使えばできる。
ついでに、IEならHTML+TIMEという技術を使えばできる。

297 :オカダ:01/12/01 06:53 ID:Nsgpp8zQ
IE6標準モードでふつうのボックス要素にoverflowを適用する方法は
ないものでしょうか? 擬似フレームをやってたので、HTML要素のみに
適用というのは残念。どうにかならないものでしょうか。せっかく
標準モードで margin-right:auto; margin-left:auto; という
ブロック要素のセンタリングが使えるようになっただけに……。

298 :Name_Not_Found:01/12/01 11:24 ID:7st21Uox
>>297
>HTML要素のみに
何のこと?
divとかならIEはwidthかheightを指定しないとoverflowが効かない。

299 :298:01/12/01 11:45 ID:7st21Uox
追加
html,body{height:100%}
も指定しておくと疑似フレームには役立つかも。

300 :300:01/12/01 17:11 ID:KFygR0+6
CSSをCCSと言う人がまわりにいて鬱。

301 :Name_Not_Found:01/12/01 18:29 ID:JTijVgWa
HTMLの <TABLE> のレイアウト利用が大っ嫌いで、
CSSをはじめたんですが、(かちゅスキン改造の為でもあるけど)
TABLE の代替策が見つからない(わかりません)。

枠線の表示は、borderで出来るのは分かるんですが…
いろいろ考えてみたんですが(1hour程)サパーリです(苦笑

どなたか教えてください。

302 :Name_Not_Found:01/12/01 18:33 ID:qhYSDkTx
まず、tableの代わりに使うのだと言う発想をやめる事。
それから具体的にはどのようなレイアウトにしたいかを明確に。

303 :Name_Not_Found:01/12/01 18:56 ID:GsBo7A8e
>>301

まあ、イケてるデザインスレのソースをじっくり研究することだ。
特にposition、floatまわりを重点的に。

304 :イケデザ住人:01/12/01 19:21 ID:giKLdJN+
>>301
入門でてっとり早いのが、左右どちらかにマージンをとって、そのマージン以下の幅の
ブロック要素をabsoluteで配置するとか。左右2段レイアウト程度なら
以下が参考になるんでは。

↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/divkage.html
↑こっちはあくまで『極悪サンプル』らしいが(笑)

305 :Name_Not_Found:01/12/01 20:59 ID:AsTCyrIu
>>304
僕も勉強の為そのサイトに逝こうとしたら、
IEの。。。で、OS落ちました(泣
IEのばかやろぉぉぉお!M$なんで分割されなかったんだよぅsage

306 :100:01/12/02 01:39 ID:QrDM7CEN
<span onmouseover="this.style.background='#ff3399';" onmouseout="this.style.background='';">トップページへ</span>
これを全体に効果がでるってことにはどうすればいいですかねぇ?

307 :白夜 ◆GiKO.QrM :01/12/02 03:11 ID:BGIGmY2L
>306
↓削除依頼だしたらね
質問スレ
http://pc.2ch.net/test/read.cgi/hp/1007225570/

308 :Name_Not_Found:01/12/02 03:23 ID:BhizBq3w
>>304
↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html

ドキュソタイプ宣言に激しくワラタ

309 :Name_Not_Found:01/12/02 09:33 ID:5XVBVQ1M
http://www.skipup.com/~l-_-l/web/jikken/1.html に曰く、
>左側はdivで囲っていない。というのも、 それをやると(やってみればわかると
>思うが) 頭の横巾100%から先程の40%を引いた値のままだらだらと下へ続く。と
>いうか、めんどくさいので作った。

しかしその http://www.skipup.com/~l-_-l/web/jikken/2.html を見ても、
1.htmlと何ら変りがない。IE5.5、NN6で確認。
むしろ http://www.skipup.com/~l-_-l/web/jikken/3.html がそれに近い。
どうなってるの?

310 :Name_Not_Found:01/12/02 10:16 ID:1kb4cN9p
http://dfj.cool.ne.jp/のformスタイルのときに、
背景画像が透けて、したの文字が見えるのですが、コレはどうすればいいのでしょうか。
網目状の透過gifでも使っているのでしょうか。

311 :うっ。:01/12/02 11:02 ID:AQuYs/K9
>>310
ソース見てないけど、filterのアルファブレンダリングでしょ。
bodyとかtableにstyle="filter:alpha(opacity=60)"とかにしてみ。
style="filter:alpha(filter:alpha(style=1,startX=0,startY=100,finishX=100,finishY=0,opacity=100,finishopacity=20)"
とか、細かく設定もできる。
あとは自分で調べて。いろいろあるし。

312 :Name_Not_Found:01/12/03 12:58 ID:NAeaD+SR
×アルファブレンダリング
○アルファブレンディング Alpha Blending

313 :Name_Not_Found:01/12/03 13:09 ID:/sdiTgB3
>>311
ありがとう御座います。
そうか、だからIE専用スタイルなんだ…

314 :297:01/12/03 23:49 ID:oVWFFsQR
>>298,>>299
IE6の厳格モードでは、何でそんな仕様にしたのかわかりませんけど、
BODY要素にoverflowが効かないんですよ。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp

にも、

> 注 : 属性 overflow、overflow-x、および overflow-y は、コンテナのサイズより大きい
> コンテンツを管理するときに使用するもので、標準準拠モードが有効になっていると、
> これらの属性は HTML 要素に適用されます。

とあります。

315 :297:01/12/03 23:49 ID:oVWFFsQR
実際に調べてみますと、標準モードでは従来の擬似フレームの設定では
フレームにならない場合が多くあります。例えば縦に長いページの場合、
メインの部分をoverflow属性でスクロールさせたつもりが、HTML文書の
全体がスクロールして、position:absolute;で位置を固定したはずの
ナビゲーション部分が上に流れていってしまいます。

そこで、IE6標準モード対応型の擬似フレーム作成術があれば、
どなたか知恵を貸していただきたいな、と思った次第です。

316 :297:01/12/03 23:50 ID:oVWFFsQR
とりあえず>>297より日も経ち、http://hp-design.net/
新規公開された標準モード対応のELAVATING NAVIGATOR 2を
使用することで落ち着きました。

いずれにせよ、いずれ互換モードは朽ち果てるわけでして、
どうせ一年も続かない私のサイトなどはどうでもいいですが、
企業サイトに関わるプロのデザイナーさんはたいへんですね。
対応すべきブラウザが一つ増え、その一方でノウハウの蓄積が
ある準拠ブラウザが消えてしまうわけですから。

317 :Name_Not_Found:01/12/04 11:18 ID:2vXlz8X8
>>314-316
ここ参考になりませんか。
http://www17.u-page.so-net.ne.jp/qb4/chiharu-/overflow.html#mozilla
http://pc.2ch.net/test/read.cgi/hp/991666454/118-129

318 :Name_Not_Found:01/12/04 15:49 ID:AlC/dwkx
おしえてください!hover対象のテキストをポイントすると
そのテキストを含んだテーブルがちょこっと動くんですよ。
グラっと。ガイシュツだったらスマソですが回避方法ご存知ありませんか

319 :Name_Not_Found:01/12/04 17:34 ID:z4lvX7kC
>>318への宿題。
その現象が起こるOS、UA及び、A:link、A:visited、A:hoverに対する
スタイル指定を、全て示せ。

320 : :01/12/04 18:06 ID:FWi9S/pa
>>318

要するにa:hoverにしかborder指定してないだけじゃん

A:link、A:visitedとかにa:hoverと同じwidth指定して
色をtransparent(透明)にでもしろ

321 :Name_Not_Found:01/12/04 21:01 ID:E/k6b5t/
UL{margin:0 auto;}と指定しました。
NN6やIE6の標準準拠モードでは左右マージンをautoにすればセンタリングされるはず。
しかしちっとも表示に変化がありません。margin-leftとmargin-rightにしても同様。
ULでなくliをセレクタにして指定すると、ULに設定したborderから間が空きすぎますし。
リスト・コンテナを中央揃にするにはどうしたらよいのですか。

322 :Name_Not_Found:01/12/04 21:02 ID:/06UgKs+
318です。ありがとうございます

323 :Name_Not_Found:01/12/05 10:00 ID:wdBgvhi9
>>321
ulのwidthを定めると良いでしょう。

324 :Name_Not_Found:01/12/05 10:48 ID:elEck6B4
>>323
??? width指定ではセンタリングにはならないのでは?
――特にリストの横幅が入れる内容によって定まらない場合は。
もしうまく中央寄せにするやり方があるのならご教示くださいませんか。

325 :Name_Not_Found:01/12/05 12:37 ID:Gf6STMfX
>>316
だからbody{height:100%}
が必要なんだってば。

<style type="text/css">
html,body{overflow:hidden;height:100%;margin:0;}
div.scroll{height:100%;overflow-x:hidden;overflow-y:scroll;}
</style>

これでbody直下のdiv.scrollをスクロールさせれるはず。

326 :Name_Not_Found:01/12/05 13:03 ID:wdBgvhi9
>>324
いや、{margin:0 auto;}と同時に、です。

http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#the-width-property
ここの「10.3.3 通常フローの非置換ブロック要素の場合(Block-level, non-replaced elements in normal flow)」
を読む限り、ブロックレベル要素の width を auto にした場合
( デフォルトが auto なので指定しない = auto を指定 )
margin-left や margin-right に指定した auto は 0 と算出される。

誤読してたらゴメンだけど。

327 :324:01/12/05 14:23 ID:8H9Dk338
>>326
ここですね。見ました、有り難うございます。
http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#q6

width:x%(100%以外)を指定すれば、中央寄せにできました。
しかしできれば、リストコンテナ内の最長のli要素に合せて
ul要素のwidthを自働的に指定できる手があると助かるんですが。
IEのCSS関数構文(expression)でもないと無理ですかね?

328 :Name_Not_Found:01/12/05 15:39 ID:wdBgvhi9
>>327
自動的となると俺には思いつかない。
すまん。

329 :Name_Not_Found:01/12/06 01:19 ID:pwfBjt9M
UICの「もっと書き込み隊」カスタマイズが上手く出来ない・・・

330 :Name_Not_Found:01/12/06 10:12 ID:RVUNkfK2
>>329
それはご愁傷様。
で、質問は?

331 :Name_Not_Found:01/12/06 23:58 ID:5QVaOlp5
age

332 :Name_Not_Found:01/12/07 01:00 ID:V54p3vid
Mac_NN6
外部スタイルシートで

body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}
.j9, .j10. .12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}

はスタイルを読むけど、

.j9, .j10. .12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

(つまりクラスの指定が先の場合)はダメってのは
そういう仕様?それともなんか間違ってます?
だれかおしえてくさい。

333 :Name_Not_Found:01/12/07 01:05 ID:2Cy2v0ZI
>>332
>.j9, .j10. .12
.j9, .j10, .j12、ではなくて?

334 :333:01/12/07 01:16 ID:2Cy2v0ZI
一応、解説しておきますか。
ピリオド“.”とカンマ“,”を間違ってはどれがセレクタかブラウザも混乱します。
クラス名は先頭に数字を使ってはいけません。「.12」は不可。

335 :297,314-316:01/12/07 03:32 ID:k0mqkU7e
>>317
>>325
どうもありがとうございました。スクロールバーが二本出ることさえ諦めれば、
IE6標準モードで擬似フレームを実現できることを確認しました。

もっとも外側のバーは空なので、見た目に気になるだけ不都合はありません。
(NN6では予想通りバーは一本のみでした)

336 :Name_Not_Found:01/12/07 12:04 ID:8+1uPd9s
>>332
「MS Pゴシック」「MS UI Gothic」は'で括らないと。
http://www.fan.gr.jp/~kaz/rec-css2/fonts.html#value-def-family-name

Macもっていないんで、これが原因かは分からないけど。

337 :Name_Not_Found:01/12/07 17:49 ID:Ud0nVczr
テーブルセルに
td { font-size: 10pt; text-align: center; vertical-align: middle}
というカンジでテキスト位置を中央に指定しています。
テーブルの中のテーブルセルには有効なのですが、大元のテーブルの中に
あるテーブル自体はネスケでは中央にきてくれません。
IEでは大丈夫なのですがネスケではこういう場合無理なのでしょうか?
入れ子になった内側のテーブルをネスケでセルの中央に配置するには
どうしたらよいのでしょうか。

338 :Name_Not_Found:01/12/07 18:00 ID:IL74rrGI
ネスケってネスケ6?
内側のテーブルに次のスタイルを付ける。
table#naka { margin-left: auto; margin-right: auto; }

テーブルがtext-align: centerでセンタリングされないのは
正しい動作。ってFAQかな?

339 :Name_Not_Found:01/12/07 21:18 ID:9EvYWv0S
>>335
外側のスクロールバーも消せる。
ちっとは自分で考えれ。

340 :Name_Not_Found:01/12/07 23:02 ID:vyQKz28W
IE6のみにスタイルを適用させる方法があったと思うのですが、
googleあたりで探しても見付かりません。
検索語が悪いのかもしれませんが・・・。
ご存知の方がいらっしゃいましたら、教えて下さい。
宜しくお願いします。

341 :Name_Not_Found:01/12/07 23:07 ID:yvFN5ElP
>>340
<!--[if gte IE 6 ]>
<LINK rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
で、どうか。
cf.http://east.portland.ne.jp/~sigekazu/css/boxm.htm

342 :Name_Not_Found:01/12/07 23:11 ID:yvFN5ElP
あと、piro氏によれば――
>WinIE4/5/6 にのみスタイルを適用したい場合、独自拡張の expression()を使えば可能。
>例: margin:expression('0 0 1em 2%');
>
>WinIE6 にのみスタイルを適用したい場合、1に加え、文字列のエスケープを使えば可能。
>例: \6D\61\72\67\69\6E:expression('0 0 1em 2%');
>
>MacIE5 のみ除外したい場合、文字列のエスケープに空白を含めれば可能。
>例: \6D \61 \72 \67 \69 \6E :0 0 1em 2%;

343 :340:01/12/07 23:15 ID:vyQKz28W
>>341-342 お二方
は・・・早いですね(^^。
どうもありがとうございましたm(_ _)m

344 :340:01/12/07 23:16 ID:vyQKz28W
あ、お一人でした。すみません。

345 :332:01/12/08 00:50 ID:/67rhIAC
>333-334
あ、書き込みミス。
.12は.j12の間違い。
で、やっぱり順番とか関係あるんスかねぇ。

346 :Name_Not_Found:01/12/08 00:54 ID:QbiweLCS
>>345
で、カンマとピリオドの混同もちゃんと直したの?
順番は、同じセレクタ・同じプロパティなら下の記述ほど優先する決まりだが。

347 :Name_Not_Found:01/12/08 00:57 ID:fb7r3mt9
>>345
もう>>336の指摘は験したの?

348 :☆!☆:01/12/08 01:28 ID:Yx5TD+pJ
インラインフレームの属性でallowTransparency とは何なのでしょうか?
allowTransparency をgoogleで検索しても、8件しか出てきません

349 :Name_Not_Found:01/12/08 01:36 ID:btdCfGEJ
>>342
その方法だと、
スクリプトがOFFのときにスタイルが適用されないので、
使うべきではない。

350 :Name_Not_Found:01/12/08 01:39 ID:btdCfGEJ
>>348
IE5.5以降でフレームの背景を透明にして、
透過させることができます。

351 :☆!☆:01/12/08 01:51 ID:Yx5TD+pJ
>>350
早いレスありがとう!

バリューコマースのバナータグに付いてて、
ビルダーV6でエラー表示(赤字)になるのですが、
未対応という事でいいのでしょうか?

352 :Name_Not_Found:01/12/08 01:56 ID:btdCfGEJ
>>351
マイナーな機能だから、
たいていのHP制作ソフトでは未対応だと思うよ。

353 :Name_Not_Found:01/12/08 02:03 ID:fra0umGi
>>338
ありがとうございました。
text-align: centerではテーブルはセンタリングされないのですね。
IEではうまくいくのになぁ。やはりネスケ対策は難しいです。

354 : :01/12/08 02:57 ID:/RSUta4V
>353
それはネスケ対策と言うのか…?
#text-align: center; で IE5.5 以前(と 6 の互換モード?)でテーブルが
#センタリングされるのは IE の正しくない動作,というのが FAQ なのです.

355 :☆!☆:01/12/08 04:00 ID:Yx5TD+pJ
>>351
ありがと!

356 :341:01/12/08 12:20 ID:XDYJ+bJT
実は>>341の方法は験してないので、IE6と5.5未満をお持ちの方、結果を聞かせてくれると有り難い。

357 :Name_Not_Found:01/12/08 17:22 ID:btdCfGEJ
>>356
×IE4.0以前(未確認だけど確認するまでもなく×)
×IE5.01
×IE5.5
○IE6.0
×Netscape,Mozilla
×Opera

358 :341=356:01/12/08 21:17 ID:mkFgbZqZ
>>357
おお、バッチリ大丈夫ですね。有り難う。

359 : :01/12/09 00:15 ID:iSLgK9w3
>>354
テーブルのセンタリングは、text-align: center;かつ、テーブルの
左右のマージンをautoにすればほとんどのブラウザに対応できる

でオッケーかな?

360 :アホクサ:01/12/09 00:41 ID:MgxueAIk
<center></center>でくくった方がマシだな。
テーブル枠はテキストじゃないぞ。

361 :Name_Not_Found:01/12/09 00:47 ID:r3OTfsTJ
スレタイトル読んでくれや。
読んでないにしても、なぜよりによって <center> ?
せめて <div align="center"></div> とか
テーブルなんだから <table align="center">

362 : :01/12/09 01:00 ID:kITCh39W
>359
で,text-align: center; を正しく解釈してくれるブラウザが
内容までセンタリングしないように
td{text-align: left;} とか入れとくとさらに幸せかも.

363 :332:01/12/09 01:42 ID:q92zeAFY
346-347
レスおそくてスマソ。
336の指摘は験しました。
やっぱり順番すかねェ。

364 :Name_Not_Found:01/12/09 01:49 ID:KZNT43fd
>>363
具体的に、>>332の後者でどのスタイル指定が効かなくなるのかを書いてくれないと。
>>332の通りの記述なら順番は関係無いはず。もし順番に左右されるならバグ。

365 :Name_Not_Found:01/12/09 05:44 ID:C7+YngP0
┌────────────────────┐
│           コンテンツ            │
├───┬───┬────┬───┬───┤
│ ほ げ │. うま │ かえれ │ ギコ │ もなー│
├───┴───┼────┼───┴───┤
│. 逝ってよし!. │.      │. オマエモナー │
└───────┴────┴───────┘

上記のようにCSSで記述しようとおもったんですが
%で幅を決めてたら上手くいきません。

<DIV class="contents">
<H2>コンテンツ</H2>
<UL class="up">
<LI>ほげ
<LI>うま
<LI>かえれ
<LI>ぎこ
<LI>もなー
</UL>
<UL class="under">
<LI>逝ってよし!
<LI>オマエモナー
</UL>
</DIV>

HTMLはこんな感じです。
%記述じゃムリなんでしょうか?
よろしくお願いします。

366 :Name_Not_Found:01/12/09 09:06 ID:Kh/z3PyX
方法はいくつかあるけど、何でCSSは書かない?
絶対配置? float?

367 :359:01/12/09 11:36 ID:iSLgK9w3
>>362
サンクス!参考にさせていただきます。

368 :Name_Not_Found:01/12/09 14:21 ID:GgsGKJtA
2ch の上の欄の「掲示板タイトル」と「■ ▼」みたいな
テキストを両端に位置させるのを、
<table>タグを使わないでスタイルシートで実現できますか?

369 :Name_Not_Found:01/12/09 14:29 ID:bRjZaP8Y
>>368
float:leftとfloat:rightでやってみ。

370 :名無しさん@Emacs:01/12/09 14:44 ID:GgsGKJtA
>>369 サンクスコできたよー

371 :365:01/12/09 17:20 ID:Bfqybrzw
>366
バカなんで
display: inline;
と書いてますが問題ありでしょうか?

絶対配置ではありません。

372 :Name_Not_Found:01/12/09 17:26 ID:9+cTo4b/
だから何をdisplay:inlineにしたんだよ。
それから、
置換要素でないインライン要素にはwidth,heightは適用されないぞ。
IEだと適用されるが、それはIEが間違って実装している。

373 :365:01/12/09 17:55 ID:Bfqybrzw
説明不足すません。

LIをインラインにしてます。
floatの方がいいんですね。
書き換えます。

374 :365:01/12/09 18:24 ID:Bfqybrzw
粘着で申し訳ない・・・

floatのしたらborderが消えるんですがぁ・・・(;´Д`)

375 : :01/12/09 18:30 ID:fOhDr9pi
>365
あのね,情報を小出しにされるよりは,
CSS を全部(と言うか少なくとも li まわりとか ul とか)書いてくれたほうが
答える側も答えやすいのよ.
今の状態だと 1 つずつしか進めないから.

376 :Name_Not_Found:01/12/09 18:33 ID:nOvWQxS9
>>365
HTMLソース出したんならスタイルシートのソースも全部さらしてくれや。

377 :365:01/12/09 18:47 ID:Bfqybrzw
.contents {
margin: 0 10%;
padding: 0;
}

H2 {
margin: 0;
padding: 1pt;
background-color: #ccc;
font-size: 85%;
line-height: 110%;
text-align: center;
font-weight: bold;
border-width: 0 1pt 1pt;
border-style: none solid solid;
border-color: #333;
}

.contents UL {
margin: 0;
padding: 0;
font-size: 80%;
line-height: 110%;
text-align: center;
font-weight: bold;
}

.contents UL LI {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 0 1pt 1pt;
border-style: none none solid solid;
border-color: #333;
float: left;
}

.contents UL LI.last {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 1pt 1pt 1pt;
border-style: none solid solid solid;
border-color: #333;
}

.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}

.contents UL.under LI {
margin: 0;
padding: 0;
width: 20%;
}

378 :365:01/12/09 18:49 ID:Bfqybrzw
すみませんです。
↑ので出来たと思ったら画面サイズ変えたら
上段のコンテンツが何故か指定幅より小さくなっちゃいました。

379 :365:01/12/09 18:50 ID:Bfqybrzw
あ、ちなみに上段に8つ、
下段に4つコンテンツを入れてるんです。

380 :Name_Not_Found:01/12/09 18:58 ID:nOvWQxS9
>>377
floatさせる要素には同時にwidth指定が必要です。

381 :365:01/12/09 19:19 ID:Bfqybrzw
>380
後述の
.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}
じゃ、ダメでしょうか?

382 :365:01/12/09 19:42 ID:Bfqybrzw
妥協して解決させました・・・。(トホホ

383 : :01/12/09 22:19 ID:RgFeSctl
background-colorは継承されないですよね
なのに、例えばbodyに指定した色が子要素にも引き継がれて
bodyの全ての背景色が同じになるのが理解できません。
どういうことなのでしょうか?

384 :Name_Not_Found:01/12/09 22:25 ID:jvN0sIjY
transparent だから。

385 :383:01/12/09 22:44 ID:RgFeSctl
>>384
ありがとうございます
しばらく意味がわからなかったのですが、じっくり考えたらわかりました
初期設定がtransparentというのが原因で、継承してるように見えてしまう
わけなんですね。なるほどなるほど。

386 :332:01/12/09 23:30 ID:1qecMy96
>364
.j9, .j10, .j12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}

を先にもってくるとNN6(Mac)では
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

が効かないんですわ。

387 :Name_Not_Found:01/12/09 23:54 ID:QiWds+9q
>>386
.j9, .j10, .j12 {font-family:Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;}
でも駄目ですか?

388 :Name_Not_Found:01/12/10 01:05 ID:mdbS/pTZ
初心者バレバレで申し訳ないですが、どなたか画像をページの右上にはっつける方法を教えてください。
お願いします

389 :Name_Not_Found:01/12/10 01:11 ID:LY29C/nJ
>>388
ここ見て試してごらん。
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position

390 :Name_Not_Found:01/12/10 01:13 ID:b8586i0j
>>388
背景として表示させるんじゃなければ
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align

391 :388:01/12/10 01:28 ID:mdbS/pTZ
389-390さんありがとうございます。
見たんですが正直わかりませんでした。やりたいのは、同じ行の左端と右端に画像を載せる、ということです。
最初tableでやろうとしたんですが、CSSの方がスマートかなと思いまして。
tableでいうと、
<table border="0" width="100%">
<tr><td align="left"><img src="a.gif"></td><td align="right"><img src="b.gif"></td>
</table>
という感じの配置です。
もしわかりましたらよろしくお願いします

392 :389:01/12/10 02:09 ID:NkcuTqIm
>>391
ならば、この辺見ればわかるかな。
http://www.sugai.f2s.com/web/CSS/back.html#background-image
http://dfj.cool.ne.jp/html/background.html#background_image

同じ行の左右両端に置くのなら、floatで位置指定がいいかも。
http://dfj.cool.ne.jp/html/position.html
頑張って勉強してね。

393 :391:01/12/10 03:23 ID:Ah2VTRvW
なんとなくそれっぽい事ができました。
といってもdivでそれぞれを別の要素にしてポジション指定し並べたっていう場当たり的な方法ですが。。
ともかく389さんご丁寧にありがとうございました。

394 :Name_Not_Found:01/12/12 01:11 ID:l5uOr/1j
Win2Kなんですが、外部スタイルシートでのフォント指定が反映されて
ないようなのですが(一部)・・cursiveフォントとかが普通のゴシックになり
ます。IE5.5SP2です。Win98の時はちゃんと表示されました。表示させる
方法ないですか?

Win板でも訊いちゃいました・・まるちスマソ・・。こちらのほうがいいかなと
思いまして・・

395 :Name_Not_Found :01/12/12 17:36 ID:T7ysIgpL
質問です
◆レイヤーを常にブラウザ中央に表示させたい!
◆サイトの見栄えをチェックする時、win上でmacやunixの表示確認は可能ですか?
教えてください

396 :Name_Not_Found:01/12/12 17:43 ID:A1PuWS+m
>>395
左右の中央ならともかく上下でも中央ってのは(CSSでは)無理みたい。
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?past=5&c=r&n=226
div{position:absolute;top:50%;left:50%}が関の山、かな。

プラットフォームが別なのにそんな表示確認できる方法があったら私が知りたい。

397 :Name_Not_Found:01/12/12 17:55 ID:N59NruEW
Operaでpaddingが効かないんですがどしたらよいでしょうか?

398 :Name_Not_Found:01/12/12 18:14 ID:UPE9BbW2
>>397
インライン要素への padding 指定は無視してるみたいだね。
margin は効くのに。
正直、「諦める」以外の対策を思いつきません。

span のネスト?いやそれはダメだろ>俺。

399 :Name_Not_Found:01/12/12 18:22 ID:N59NruEW
>>398
レスどうもです。
つまり今後paddingは使わない方向で
対策していくしかないのですか・・・・。

゚゚(´□`。)°゚。ウワアアァァァーーーン!
Operaのうんこたれ〜!

400 :Name_Not_Found:01/12/12 18:56 ID:UPE9BbW2
>>399
Opera ユーザの数なんてたいした数でもないし、
無視すると言うのも、手ではある。
Opera 普及サイトだとでも言うなら話は別だけど。

401 :Name_Not_Found:01/12/12 19:22 ID:Qe/S+BIj
>>397-9
???……Opera6で、ちゃんとインライン要素へのpadding有効ですが?

402 :Name_Not_Found:01/12/12 20:17 ID:UPE9BbW2
>>401
あ、ホントだ。恥。

効かないのはインライン要素じゃなくてリンク系の擬似クラスだった。

403 :403質問:01/12/12 23:18 ID:qrcILXSg
左marginを空けたwidth100%の画像を置いています。
(区切り線として、hrの換わりに)
IE6だと、「ウィンドウ幅の80%-右margin」の幅の画像が描かれます。
しかしNN6.2だと、「左marginを20%とった後で100%の幅」の画像が
描かれてしまい、どうしても横スクロールしてしまいます。

要は
IE:margin幅を除いた100%が幅になる
NN:margin幅は関係無しにウィンドウ幅100%を幅にして、その後でmarginを
  付け加える
となるのですが、どちらのブラウザの解釈が正しいのでしょうか?

ちなみにCSSは
img.line{
margin:0px 5px 0px 20%;
width:100%;height:2px;
}
です。IEの方が正しそうなんですが・・・

404 :Name_Not_Found:01/12/12 23:32 ID:x1MWsYnB
>>403
widthの幅は、marginとpaddingは含まない。
また、widthを%で指定すると親要素の幅から計算されるから、
実装はN6が正しい。はず。

405 :403質問:01/12/12 23:36 ID:qrcILXSg
>>404
おぉ!そうなんですか!ありがとうございます。
そうなってくると、両方のブラウザで左20%、右5pxのmarginを残した
画像を表示するのはなかなかムツカシイですね。
他の方法を考えてみるか・・・

406 :Name_Not_Found:01/12/12 23:37 ID:0EDtl3Kr
>>403
NN6が正しい。WinIEでもver6で標準準拠モードにすれば正しく計算する。
cf.http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width

IEの互換モード(従来の正しくなかった表示)の方に合せたいのなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozillaの記述。N6で有效。*/
}
とする。
但し、Operaには効かない。

407 :403質問:01/12/12 23:37 ID:qrcILXSg
カキコした瞬間に思いついたんですが、
divかなんかに画像を入れて、divにmarginを設定したらいけるかな?
とりあえず試してみます。大きなヒントになりました。
ありがとうございます>>404

408 :403質問:01/12/12 23:41 ID:qrcILXSg
っと。>>406さんのは高度なテクですね。
CSS2の辞典しか持ってないもんで、そんな方法は
思いつきませんでした。CSS3辞典も買わなきゃ!(^^)

409 :404:01/12/12 23:44 ID:x1MWsYnB
>>403
これとか
hr.line {
 margin: 0px 5px 0px 20%;
 height: 2px;
 background-image: url(line.gif);
}
ただ、2pxだと画像がちゃんと表示されない。むぅ。

410 :403質問:01/12/12 23:53 ID:qrcILXSg
>>409
フム・・・文法的にはhr使った方が正しいですもんね。
とりあえず、今はそれを試してみます。10分後に結果
報告します。笑

411 :403質問:01/12/13 00:03 ID:6WIV3Uva
ぐげ・・・>>409でおっしゃったとおり、画像が出ませんでした(;´Д`)
DIV使ってみるかな

412 :403質問:01/12/13 00:09 ID:6WIV3Uva
DIV使ったらどちらも表示OKでしたヽ( ´∀`)ノ

文法的には少しおかしいけれど、表示さえうまく
いけば問題ないので万事オッケーです(^^

しかし、けっこうマスターしてきたつもりだったけど
CSS3があるとは思わなかった。笑
box-sizing:border-box;なんて初めて見たんでびっくり。
勉強が足りませんな。

413 :Name_Not_Found:01/12/13 00:19 ID:YiFRIxfI
>>412
CSS3は勧告候補でまだ正式に規格となってません。
だから裏技みたいなもんです。
前はその辺に詳しいページがあったのだけど、作者に削除されてしまって、
いまは下記の圧縮ファイルをダウンロードしないと読めません。
http://www.cc-net.or.jp/~piro/tips.lzh

414 :403質問:01/12/13 00:25 ID:6WIV3Uva
>>413
なんと・・・そうでしたか。
では、とりあえずはCSS3の勉強は見送ることにします。
規格化されたら始めます。

皆さんありがとうございました。>>404 >>406 >>413

415 :Name_Not_Found:01/12/13 01:31 ID:gKWkRL7K
>>414
まぁ無理にとは言わないけど、少しずつでも読んどいた方がいいと思うよ。
仕様書の量は多いけど、基本的にはCSS2と殆ど変わらないし。

ttp://www.w3.org/TR/2001/CR-css3-selectors-20011113
ttp://www.w3.org/TR/2001/WD-css3-background-20010924
ttp://www.w3.org/TR/2001/WD-css3-fonts-20010731
ttp://www.w3.org/TR/2001/WD-css3-box-20010726
ttp://www.w3.org/TR/2001/WD-css3-values-20010713
ttp://www.w3.org/TR/2001/WD-css3-cascade-20010713
ttp://www.w3.org/TR/2001/WD-css3-text-20010517
ttp://www.w3.org/TR/2001/WD-css3-mediaqueries-20010517
ttp://www.w3.org/TR/2001/WD-css3-roadmap-20010406
ttp://www.w3.org/TR/2001/WD-css3-color-20010305
ttp://www.w3.org/TR/2001/WD-css3-ruby-20010216
ttp://www.w3.org/TR/2001/WD-css3-multicol-20010118
ttp://www.w3.org/TR/2000/WD-css3-userint-20000216
ttp://www.w3.org/TR/1999/WD-css3-page-19990928

416 :Name_Not_Found:01/12/14 00:36 ID:ZD/d5KCU
恐ろしく間抜けな質問ですが、どうか教えてください。
画像をセンタリングしたいのです。
一体どうすれば。。

417 :Name_Not_Found:01/12/14 00:39 ID:ABQlsI8s
<div style="text-align: center">
<img src="***" alt="***" width="***" height="***">
</div>

418 :416:01/12/14 00:40 ID:ZD/d5KCU
text-alignでできました。お騒がせしました。。
textじゃないのに、、

419 :Name_Not_Found:01/12/14 00:42 ID:AYyud0Vy
>>416
img{text-align:center;}でどう?
どんな文脈で配置するか、画像を挿入する前後の要素の関係にもよるけど。
できればHTMLソースも出してみて。

420 :Name_Not_Found:01/12/14 00:44 ID:AYyud0Vy
>>418
この場合、textってのはインライン要素のことだからね。

421 :416:01/12/14 00:49 ID:ZD/d5KCU
417さん419-420さんどうもです。
単純にバナーみたいなGIF画像を配置したかっただけで、リファレンスを見たのですが、
どうしてもセンタリングにtextしかないので悩んでしまいました。
インライン要素、、というのはつまり、ボックスをセンタリングするのではなく、
ボックスの要素をセンタリングする、という概念でよろしいでしょうか?

まだまだ勉強不足なようで、教えてくださる皆様にはほんと感謝しています。
このスレッドの方はみんな親切で幸せです。では。

422 :Name_Not_Found:01/12/14 00:52 ID:EsbolDvs
というか、HTMLは全部テキスト(文字)だから。感覚的には画像はテキスト
じゃないけど、それを表示させるタグはテキストだし。タグ自体に
せン太リングスタイルを使うという感じかな

423 :Name_Not_Found:01/12/14 01:19 ID:xgSaczea
>>421
ボックス・モデルはCSSでは全ての要素に当てはまるんですけど。
その全要素はインライン要素とブロック要素とに大別されます。
http://www.kanzaki.com/docs/html/element-level.html#inline
↑基本ですので勉強して下さい。

424 :Name_Not_Found:01/12/14 01:23 ID:xgSaczea
ブロック要素のセンタリングはmargin-left:ayto;margin-right:autoでできることになってます。
つい最近も話題になったFAQなので、読んで下さい。↓
http://pc.2ch.net/test/read.cgi/hp/1007538322/445-484

425 :Name_Not_Found:01/12/14 22:45 ID:J6P/a0Ew
おいらこーゆーレイアウト(http://user404.hoops.ne.jp/page01.html
を外部スタイルシート2枚(各ページ共通のdefault.cssにこのページ専用のレイアウトを上書きするtable.css
で作ったんですけど、全てのtableを中央揃いにするのに一個一個のtabeleタグにalign=centerって埋めてるんですけど
他のタグと共にスタイルシートで一括表現出来ないでしょうか?centerタグを先頭と後尾に指定は邪道っぽいんで使いたくないので
なんとかスタイルシートで表現したいんですけど、だれかスタイルシート詳しい方いらはりますか?

426 :Name_Not_Found:01/12/14 22:51 ID:ABQlsI8s
そもそもこーゆー状況で table を使う事自体がアレなので
(ここは strict スレじゃないから良いのか? まぁいいや)
div とかで囲んでてきとーに左右の margin 設定するのが吉かと。

427 :Name_Not_Found:01/12/14 22:54 ID:t3EtYaxy
>>425
ネタですか? ほんとにCSSを勉強してますか?
すぐ上に類似のFAQがある事に気が付きませんか?

428 :425:01/12/14 23:08 ID:J6P/a0Ew
上っすか?たぶんmarginのやつですか?
えーとモデルが323女史の日記なんですけどあれをスタイルシートで書き直して
うまくいかないなぁと思ってたんですが
<center>
<table>
日記本文A
</table>
<table>
日記本文B
</table>

</center>
をなんとか

<table>
日記本文A
</table>
<table>
日記本文B
</table>


スタイルシートに一行記述

にしたくて

とほほさんとこで見てそれ(maginなんとか)一回試してうまくいかなかった気がしたんですけど
もっかい試してみます

429 :425:01/12/14 23:19 ID:J6P/a0Ew
あ、やっぱうまくいかないみたいなんですが

左右に均等にマージン振ってテーブルを中央に寄せるのは出来るんですけど
テーブルの横幅がブラウザのサイズや解像度でぶれるので、モデルにしてるサイトみたいな
左右の空白が大きいのを再現するとブラウザ最大にしてるとそっくりなんですけど
小さい窓にしたら横空き幅固定だと線みたいなテーブルになるんですけどなんとか
要素の大きさ保ったままセンタリングって出来ないっすか?

430 :Name_Not_Found:01/12/14 23:44 ID:t3EtYaxy
>>429
本当に>>424のを読んだの?
……ひょっとして、幅の指定は%だけって思ってる?

431 :425:01/12/14 23:59 ID:J6P/a0Ew
えーと‥‥、一応ptで指定を、なんかやはり間違ってます?ためしに424を真似たら左寄りになるんですけど

<table style="margin-left:auto; margin-right:auto; width:400pt;">
<thead><tr><th>
■ 2001年12月中旬 ■
</th></tr></thead>
<tbody><tr><td>
日記本文
</td></tr></tbody>
</table>

432 :Name_Not_Found:01/12/15 00:05 ID:Sn5BrJHP
autoはIE6から

433 :425:01/12/15 00:10 ID:oBidc1rA
うちのブラウザ5.5でした(^^;

友人にネスケはいないんですけど5.01とか5.5の方が
6.0使ってるやつより多いんで、スタイルシート使って
テーブル要素ごとセンタリングゆーのは諦めます
5.5でもセンタリング反映って現時点では無理ってことでいいんですか?

434 :425:01/12/15 00:14 ID:oBidc1rA
連続投稿すいません、>>433の現状で無理、の意味ですけど
tableのwidthは400ptか500pxにしたままでセンタリングという意味で

435 :Name_Not_Found :01/12/15 00:29 ID:Ifjsfnpu
IE5 は text-align:center で table センタリングするんじゃなかったっけ。
インライン要素みたいに。

436 :425:01/12/15 00:37 ID:oBidc1rA
>>435
<table style=text-align:center;>にしてみたんですが
IE5.5の環境だと左寄りのまんまみたいです

437 :Name_Not_Found :01/12/15 00:55 ID:Ifjsfnpu
>>436
そうじゃなくて、<table></table>を含む要素で text-align:center を指定するの。

438 :425:01/12/15 01:04 ID:oBidc1rA
>>431の<thead>や<td><th>にtext-align:centerを指定するとセル中の文章のセンタリングですよね

えーと<table></table>を含むってことは

<ココ↓>
<table>日記12/14</table>
<table>日記12/13</table>
<table>日記12/12</table>
</ココ>

ってこと(tabeleより外側)ってことでしょうか?おれのページだと
tableの外側は<body></body>になってしまうんですがtable以外にも
題名とか連絡先等の左寄せのテキストコンテンツを置いてるので<body>に埋めると
他の部分が冗長になってしまいます、すいません

439 :425:01/12/15 01:15 ID:oBidc1rA
あ、<p style=text-align:center;>〜(テーブル数個)〜</p>でいけました
ありがとうございます

<center>の方が早いのかも知れないけど使わないですみました(^^

440 : :01/12/15 01:18 ID:DuzNQ/st
>439
せめて <div> にして….
つーか,IE55 なら <table> に text-align:center; でいいはずだよ.
それでならないのは,他の何かがおかしいと思うのだけど.

441 :425:01/12/15 01:24 ID:oBidc1rA
そうなんスか(^^; < 他がおかしい
>>436みたいな感じに書いたんですけど

あとどうせ<br>で間隔調整してるんで<br>一個減らして<p>のがいいかなぁと(^^;
<br><div>=<p>のつもりで今までいたんですけどやっぱ定義とかつかいどころとか
w3oなんとかってとこの勧めでやっちゃだめとかあるんでしょうか?

442 :Name_Not_Found :01/12/15 01:24 ID:Ifjsfnpu
>>438
そういうことです。
tableをdivタグで囲むだけのことすら冗長と思うなら
私ごときからはもう何も言うことはありません。

443 :Name_Not_Found:01/12/15 01:28 ID:OPvrN5bb
正直、425は<center></center>でいいと思われ…。

444 :425:01/12/15 01:32 ID:oBidc1rA
>>443
だって<center>はdiなんたらtag(廃止予定、使っちゃイカンtag)とか
どっかで聞いたんでエラー判定サイトで出るエラーを減らそうかなぁと(^^;

おれも最初そうやってたんですけど < <center>〜</center>

445 : :01/12/15 01:41 ID:DuzNQ/st
>425
<html>
<body>
<table style="text-align: center; width: 100px; border: solid thick red">
<tr><td>
あほーあほーあほー
</td></tr>
</table>
</body>
</html>
枠つきの幅 100px テーブルが中央寄せ,その中で左寄せで文字,にならない?

446 :Name_Not_Found:01/12/15 01:49 ID:RqNZhc9n
>>440
>あとどうせ<br>で間隔調整してるんで<br>一個減らして...
おいおい、それこそcss使うところじゃねーか。
あとdefault.cssでfontを指定してるのになんでfont-familyを何度も指定してるんだ?
それにfont-size固定は好まれないよ。
単に中央寄せしたいだけならテーブルレイアウトから脱却しろよ。

てな感じで原理主義者が突っ込みを入れると思われるので注意が必要かも。

447 :425:01/12/15 01:49 ID:oBidc1rA
>>445
そのインラインの方法でも外部cssファイル参照の方法でも
>>436でも言ってるけどやってみたのに中央に表示されなかったよ
環境はIE55のSP2だけど

たぶん<div style=text-a〜>〜</div>が正解なのかなぁ

448 :425:01/12/15 01:53 ID:oBidc1rA
なるへそです

出来るだけ原理主義な方に指摘されないようなソース目指してたんですけど
ツッコみどころ満載でしたね、すんません
とりあえずこのスレの教訓を旨に<center>〜</center>は
<div style=text-a〜>〜</div>で置き換えときます

449 :445:01/12/15 02:11 ID:DuzNQ/st
あー,僕が勘違いしてた.確かに table に指定じゃ無理だわ.
勉強しなおしてくる.ごめん.

#table も使わないし IE は 6 だしでまったく検証のしようがなかった.
#あちこち検索して表示例見てやっと理解した.ダメすぎ.

450 :Name_Not_Found:01/12/15 02:38 ID:bVXfOwyN
CSSである要素内での改行を禁止することはできますか?

具体的には、2chの「スレッド名一覧」において、

======
1. ++++ 2.@@@@@ 3.XXXX
XX 4.OOOO
======
ではなく、

======
1. ++++ 2.@@@@@
3.XXXXXX 4.OOOO
======
という風に、3を途中で改行させない方が見易いですよね。
a要素内での改行を禁止すれば、できるのではないかなと
思いまして。

色々調べると、印刷時にページ分割をしないプロパティは
見つかったんですが、上記のようなプロパティが見つかりません。

どなたかご存知の方いませんか?

451 :Name_Not_Found:01/12/15 03:26 ID:nZ6d3F03
>>450
a{
white-space: nowrap;
}
で一応可能だと思う。
ただしwhite-spaceはブロック要素に限るのでお勧めしない。

a{
width: ***
display: block;
float: left;
}
という手もある。widthが必須なのでこれもお勧めできない。

452 :Name_Not_Found:01/12/15 03:52 ID:jbbRLFsk
インラインOKだよ。エラッタも読もう。

453 :Name_Not_Found:01/12/15 04:18 ID:nZ6d3F03
すまん。知ったか厨ぶりを遺憾なく発揮してしまった。
首吊ってくる。

454 :Name_Not_Found:01/12/15 04:20 ID:nZ6d3F03
The 'white-space' property applies to all elements, not just block-level elements.
これね。

455 :Name_Not_Found:01/12/15 05:39 ID:bgSG01Xk
しかし、初心者から熟練者まで、まったり混在したスレではあるね。
レベルを問わずCSSについて質問できるという、かなり理想的なスレですな。

良スレsage

456 :Name_Not_Found:01/12/15 10:42 ID:zPVkjgR5
>>425 遅レス御免
そもそも、CSSを使って一括指定したいのなら
tableでレイアウトしている事自体意味が無いZO!
centerが廃止予定だと知っていてなんでtableでレイアウトを
しようとするんだか……

<body>
<div class="main">
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
</div>
</body>

div.main { text-align: center }
h2, div.sentence { width: 400pt; margin: 0 auto; padding: 5pt; font-size: 100% }
h2 { background-color:#a9a9ca; color: white }
div.sentence { text-align: left }

これは、模範解答じゃ無いYO!
div.mainのタグ付けとCSSの指定はbodyに置き換えてもいい
(その場合はやその他の要素にtext-alignを指定し直す必要あり)
兎に角、頑張って勉強しましょう。

457 :Name_Not_Found:01/12/15 12:00 ID:83xHJKH0
テーブルの中の背景を、外部cssから読み込みで
作っています。
bg画像を下固定でx軸繰りかえし・・・までは上手くいったのですが
なぜか背景色が指定していない緑になります。

458 :457:01/12/15 12:05 ID:83xHJKH0
途中で送信してしまいました。すみません。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=x-sjis">
<title>タイトル</title>
<link REL="stylesheet" TYPE="text/css" href="1.css">
</head>
<body bgcolor="#000000">
<table>
<tr>
<td class="bg">
<br>
内容</td>
</tr>
</table>
</body>

1.cssの方は
.bg {
BODY {bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こんな感じです。

何方かお教えくださいませんか?
宜しくお願いします。

459 :iMa:01/12/15 12:08 ID:xaSAtwNK
BODY {bgcolor

じゃなくて
BODY {background-color:#000000}

だね

460 :457:01/12/15 12:17 ID:83xHJKH0
>>459
レス有り難うございます。

.bg {
BODY {background-color:#000000; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こう変えてみたんですが、背景画像の上がなぜか緑になります。
環境がmacIEなのは関係あるのでしょうか?

461 :iMa:01/12/15 12:28 ID:xaSAtwNK
ああ、とんでもないことやってたんだね

.bg {
bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}

こうすれば。BODY { はいらない。

462 :457:01/12/15 12:34 ID:83xHJKH0
何度も有り難うございます。
でもやっぱり緑になるのは解消できません。
申し訳ないです・・・。

463 :Name_Not_Found:01/12/15 12:38 ID:GWX+0fad
.bg {
background-color: black; ...以下同じ...

464 :iMa:01/12/15 12:37 ID:xaSAtwNK
何度もごめん

bgcolor=""じゃなくて

bgcolor:#000000;

だ。

465 :457:01/12/15 12:42 ID:83xHJKH0
>>463
>>464
本当にすみません。
どちらもやってみたのですが、駄目でした。
背景画像の方は上手くいくのですが・・・。
どうして背景色は駄目なんでしょう…。

466 :iMa:01/12/15 12:43 ID:xaSAtwNK
基本的でした。
以下をコピ。

.bg {
background-color:#000000;
background-image:url(img/bg.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom left;
}

これこれ。こんな感じだ。

467 :Name_Not_Found:01/12/15 12:48 ID:xaSAtwNK
というか
.bg {
background:#000 url(img/bg.jpg) repeat-x bottom left fixed;
}

と簡略化した方がスッキリする。

468 :457:01/12/15 12:49 ID:83xHJKH0
>>466
それで上手くいきました!
本当に感謝してます!有り難うございました!!
ちなみに、今まではどうして駄目だったんでしょうか?
参考までに教えて頂けませんか?

469 :Name_Not_Found:01/12/15 13:00 ID:xaSAtwNK
1つめ

.bgの指定内にさらにBODY要素に対する指定があった

2つめ

bgcolor="#000000"
てのはHTML用であり、CSSには使えない。(HTMLからコピーしたのかどうか知らないけど)


CSSの本でも1冊購入すればいいと思う。

470 :Name_Not_Found:01/12/15 13:05 ID:4ndlypG2
>>460
repeat-xの後ろに ; が入ってなかったよ。単純なミス

471 :457:01/12/15 13:25 ID:83xHJKH0
本当にお世話になりました。
今日にでも本を買って、もっと勉強します。
有り難うございました。

472 :Name_Not_Found:01/12/15 16:26 ID:GcAB25PV
IE6、Mozillaともに、A要素にbackground-positonプロパティが効いてしまうんですが、
これは実装バグでしょうか。

A:link の下辺にマーカー風の画像を貼り込んでるんです。

473 :Name_Not_Found:01/12/15 16:31 ID:b4Q+CvGM
わざとそういう実装にしたんじゃないかな?
仕様書には効かないとしか書いてないけど、
実際問題どこを基準に表示するのかは実装依存で
それなら、効くようにしたほうが融通が利くし。

しかし、インライン要素が複数行にわたったときの
background-positonの挙動って、
WinIE,MacIE,Mozで全部ちがうのね。。。

474 :Name_Not_Found:01/12/15 16:46 ID:GcAB25PV
>>473
速レス感謝します。
そういうものですか。実際使ってる以上そのほうが助かるんですが、
何かこう、もやもやして落ち着きません。

確かに折り返し以降がおかしなことになりますね。
MacIEはわかりませんが。

475 :Name_Not_Found:01/12/15 18:08 ID:K2XUaEks
ul { list-style-image: url(hoge) ]
li { line-height: 1.4; }
この二つを組み合わせると、IE5やIE6でimageの位置がずれまくります。
なにかいい解決策はないでしょうか?

476 :Name_Not_Found:01/12/15 18:32 ID:LSr06CY1
<object>使ってでできるスクロールバーって
スタイルシートで色変えれなくないですか?
おしえてください

<textarea>なら変わるんですけどね。

477 :Name_Not_Found:01/12/15 18:45 ID:zPVkjgR5
>>475
解決策は無い。
リストマーカーの位置は厳密には定められてないもんで。

478 :Name_Not_Found:01/12/15 19:23 ID:QBzDLtKr
>>476
objectで呼び出された側のHTMLで変えないと無理。
画像とかだと不可能なんじゃないかな。

Win版IEだけobjectの扱いが他と違うよね。
変な余白が付くし、枠とスクロールバーが付くし。

479 :Name_Not_Found:01/12/15 20:46 ID:K2XUaEks
>>477
そうですか・・・ありがとうございます。

line-height: 1.0 にして、padding-bottom: 0.3em 等で行間をとってみたりと
いろいろ挑戦したのですが、別のところが崩れやがって挫折したぞゴルァ(゚Д゚)

480 :Name_Not_Found:01/12/15 21:56 ID:zPVkjgR5
>>479
リストマーカーの代わりに、
padding-left: *px;
background: url(hoge) no-repeat;
でやってみるって手もあるけど、
微妙にリストマーカーと違うから……

481 :Name_Not_Found:01/12/15 21:59 ID:b+gt5jHO
特定要素中にしか現れない要素
<caption>, <tr>, <td>, <li>, <dt>, <dd>あたりって、
css2的にはブロックレベル要素扱いでいいのかな?

482 :Name_Not_Found:01/12/15 22:09 ID:zPVkjgR5
>>481
dtやddはブロックレベルで扱えるが、tableは違う。
http://www.fan.gr.jp/~kaz/rec-css2/tables.html
仕様書に載ってる。疑問に思うなら先ず読む様に。

483 :481:01/12/15 22:40 ID:V76JoxHx
>>482
いや、そこを読んだんだよ。そしたら、

>TH { text-align: center; font-weight: bold }
>CAPTION { caption-side: bottom; width: auto; text-align: left }

って例が出てたから、「あれ、text-alignが使えるってことは、
thやcaptionもブロックレベル要素扱いなのかな」と思って。

484 :Name_Not_Found:01/12/15 22:50 ID:E++hM7Gg
>>483
テーブル関連は例外と考えた方がいいと思われ。

485 :Name_Not_Found:01/12/15 22:54 ID:zPVkjgR5
http://www.fan.gr.jp/~kaz/rec-css2/visuren.html#q5
別にdisplay:blockがブロックレベル要素、と言う訳ではないのだろうね。
tableのページにはtext-alignを使うと書いてあるけど、
明記はされてないみたい。
インライン要素を含むボックスを生成する、と言う意味では
ブロックレベルだと考えていいんじゃない?

486 :Name_Not_Found:01/12/16 00:29 ID:qT6hj2AR
>>479
画像に余白を入れるなどして調整したらどう?

487 :雀板初心者質問スレの1:01/12/16 00:36 ID:fxnN3vG2
>>456
あ!そうやればtable初めから要らないですやね(^^;
さすがここの人に聞くとスキルが別次元

CSS勉強始めたばっかで、lintで出る文法エラー一個一個
潰してる途中なんですけど勉強しなおしてきます(^^ ども

488 :Name_Not_Found:01/12/16 00:47 ID:TyUKZXGW
>487
スキルが別次元って…。
なぜ CSS があるのかを勉強すべし。

489 :Name_Not_Found:01/12/16 03:25 ID:z9Dlu7J9
あげるなYO!

490 :Name_Not_Found:01/12/16 04:29 ID:Va0Jf7Oz
>>489
ここ良スレだし、別にいいと思う。

491 :Name_Not_Found:01/12/16 12:33 ID:P6W1wmJg
>>480
どうしようもなく困ったらその手を使おうと思います。

>>486
IE5/6に合わせると、Netscape6でずれてしまいます。
N6は中心揃えしてくれるみたいです。
N6を基準にしようか……
サイトの性格上、N6/Moz使いがけっこう多そうだし

492 :Name_Not_Found:01/12/16 15:08 ID:yYo0O69y
>>491
そうでもないよ。

493 :Name_Not_Found:01/12/16 18:31 ID:pvh1euxs
「左揃え」「真ん中」「右揃え」意外で、
左よりちょいと半分ぐらい右よりの位置から
文章を書き出せるように、なんてことは出来ますか?
分かりにくくてごめんなさい。
お願いします。

494 :Name_Not_Found:01/12/16 18:32 ID:Z7EiZ2Py
marginでも指定しろ

495 :Name_Not_Found:01/12/16 18:33 ID:pvh1euxs
いぢわる・・・。
ごめんなさい、分かりません。

496 :Name_Not_Found:01/12/16 18:35 ID:C0RPZbW8
>左よりちょいと半分ぐらい右よりの位置から
ワケわからん♪

margin: 0 0 0 20%;

497 :Name_Not_Found:01/12/16 18:38 ID:Z7EiZ2Py
何が意地悪なのか俺わけわかりません(w

ってか基礎覚えれ

498 :Name_Not_Found:01/12/16 18:50 ID:HVbrn/LI
実はtext-indentのことだったりして。

499 :Name_Not_Found:01/12/16 18:58 ID:C0RPZbW8
>498
ガ━━━(゚Д゚;)━━━ン!

500 :Name_Not_Found:01/12/16 20:27 ID:mIsfL67E
1. 質問する
2. marginでも指定しろ、と言われる
3. 「margin」というのが何なのか判らない
4. 検索する
http://www.google.com/search?q=margin&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

という流れに行かない理由が判りません。

501 :Name_Not_Found:01/12/16 20:52 ID:C0RPZbW8
>500
聞くほうが早いと思ってんじゃない?
検索のほうが早いのに

502 :Name_Not_Found :01/12/16 21:08 ID:5mb2PyF7
自分の頭は使いたくないんだろうな。自分の頭で達成した方が楽しいのに。

503 :Name_Not_Found:01/12/16 21:34 ID:Y/yttHaK
むしろ Google 知らないんではないかと思われ。

504 :425や487なんかの雀板住人:01/12/17 01:45 ID:Nnj942qg
>>456
今頃ですが、色々勉強しなおしてきてちょっと気になったので

あの後>>456を参考に手直ししてみたんですがまず>>456の指示の
--
<div class=A>←これが

<div class=B>
○○
</div>←これに
<div class=B>
△△
</div>

</div>←class=Aの終了になって欲しかったとこ
--
だと、←でツッコみ入れたみたいなことになってしまいますよね

それで<div class=A>の替わりに<p class=A>で置き換えてみたんですけど
調べていくうちに、そもそもブロック要素(<p>〜</p>や<div>〜</div>)の中に
ブロック要素を置くことは出来ないってあったんで始めから文法上まずい指定文だったんじゃないですか?
生意気言ってすいません(^^;、いま一時的にtableに戻して表現方法を模索中っす
今→http://isweb35.infoseek.co.jp/diary/zch/page02.html

505 :425や487なんかの雀板住人:01/12/17 01:46 ID:Nnj942qg
あ、間違えた
http://isweb35.infoseek.co.jp/diary/zch/page01.html

506 :Name_Not_Found:01/12/17 01:56 ID:UUP5zYN6
>>504
>そもそもブロック要素(<p>〜</p>や<div>〜</div>)の中に
>ブロック要素を置くことは出来ないって
div の中にブロック要素置けないなんてどこに書いてあった?URL教えてくれ

疑問があれば質問する前に>>2のその他資料をよく読みましょう。

507 :504:01/12/17 02:02 ID:Nnj942qg
>>506
lintのエラー解説37番ですよttp://openlab.ring.gr.jp/k16/htmllint/explain.html
< div の中にブロック要素置けないなんてどこに書いてあった?URL教えてくれ

508 :Name_Not_Found:01/12/17 02:14 ID:jjKJGBEv
>>507
誤解してますね。
<p>〜</p>の中にはブロック要素は含めませんが、
<div>〜</div>ならば文法とも適合してます。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/block#div

509 :雀板初心者質問スレの1:01/12/17 02:20 ID:Nnj942qg
>>507
あ、そうだったんスか!すいませんありがとうございます(^^

510 :Name_Not_Found:01/12/17 15:03 ID:lgfy90y9
CSS切り替えスクリプトってドコで配布してるんですか?

511 :Name_Not_Found:01/12/17 15:06 ID:bxP9fub1
>>510
検索すれば?

http://www.google.com/search?q=CSS%90%D8%82%E8%91%D6%82%A6%83X%83N%83%8A%83v%83g&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=

512 :Name_Not_Found:01/12/17 15:50 ID:ERT7JYpR
すんまそん、ddのインデントって、CSSの何で変えられましょうか。
text-indext:0pxとかだと、IE6では無視されてしまうのです。

513 :Name_Not_Found:01/12/17 15:57 ID:ERT7JYpR
超すんまそん。dlが抜けてただけにおじゃりました。

514 :yuu ◆xo3ilszg :01/12/17 16:20 ID:1W76Rx7n
>>504
DIVの閉じは省略できないので、「←これに」のところが「←これが」の
閉じタグだとすると、文法的におかしいわけです。
ですから、class=Aの閉じは、「←class=Aの終了になって欲しかったとこ」の
ところであるとパーズされて問題ないのです。

515 :504:01/12/17 18:17 ID:Nnj942qg
そうなんスか、いっこ勉強になりました(^^

516 :Name_Not_Found:01/12/17 19:18 ID:7wyjET+K
<ul>のマージンについて質問です。

ul { list-style-type: none;text-align:left;padding-left:0px}
↑この場合、N6ではマージンが無くなるのですが、IE6だと無くならないんです。

ul { list-style-type: none;text-align:left;margin-left:0px}
↑この場合、IE6ではマージンが無くなり、N6では無くなりません。

どっちの解釈が正しいのでしょうか?ちなみにOpera6はIEと同じです。
どっちも書けばどっちでも同じようになるので良いのですが、なんだか
気持ち悪くて・・・。
というよりそもそもこのスタイル定義自体NG?
px単位に関してはこの際置いといて・・・。

517 :Name_Not_Found:01/12/17 19:27 ID:gMtNutbk
>>516
>どっちの解釈が正しいのでしょうか?
デフォルトスタイルに正しいも何もあるわけがない。
デフォルトスタイルのレンダリング方法が、UAによって異なるのは当たり前。

>どっちも書けばどっちでも同じようになるので良いのですが
margin と padding を同時に指定すれば良いのです。

HTML文書の制作者が、
特定のUAの整形結果(デフォルトスタイルシート)に依存して、
スタイルシートを部分的にしか記述しない事。

518 :517:01/12/17 19:35 ID:gMtNutbk
>スタイルシートを部分的にしか記述しない事。
訂正。スタイルシートを部分的にしか記述しない事に問題があるのです。

519 :Name_Not_Found:01/12/17 20:14 ID:ELcckRei
>>516
ボックスモデルの勉強をした方がいいと思われ。
http://www.fan.gr.jp/~kaz/rec-css2/box.html
http://east.portland.ne.jp/~sigekazu/css/style.htm

marginやpaddingの初期値は、規格だと確かに0だけど、
実際にはブラウザ(User-Agent)が持っている(と見なされる)スタイルシートで
上書きされてしまうので、きっちり詰めたいのならちゃんと0と指定すること。

> px単位に関してはこの際置いといて・・・。
つうか、0なら単位を付ける必要は無いと思われ。

520 :Name_Not_Found:01/12/17 21:08 ID:hFh5xgE4
秀和システムのHTML&CSS&Javascript本が新版出てますね。
IE6とかMoz/N6も考慮されてます。

521 :Name_Not_Found:01/12/17 21:11 ID:EH6RftiM
Bodyのデフォルトの余白はOperaだとpaddingだよな。

522 :Name_Not_Found:01/12/17 21:14 ID:BTnPdsoa
>>520
これ?
http://www.shuwasystem.co.jp/~book0828/
新版出たのか。欲しいな。

523 :Name_Not_Found:01/12/17 21:32 ID:hFh5xgE4
>>522

ああ、そのシリーズだと思う。青い表紙です。

524 :Name_Not_Found:01/12/19 12:23 ID:/g1CweEM
Opera6日本語パッチあてているもので確認したんだけれど
font-variant:small-capsを指定していると、親要素のフォント
サイズより小さく表示されるんだね。
日本語にsmall-capsなんて考えられないけどね。

525 :Name_Not_Found:01/12/19 13:05 ID:d+F6hKwm
>>524
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/

526 :Name_Not_Found:01/12/19 13:06 ID:FB3AS/c/
>>519のリンク先でmarginのautoの意味はなんとなく(おそらく他で指定した値に矛盾しない平均値)
になるんだということは分かったのですが集約形で書いた指定文の意味がサパーリ
例えば[margin: 0 auto;]って集約形ですか?

それとmarginとpaddingの違いは、marginは上2em下1em空けろ指定した時
指定要素が二つ続いたら指定空き同士が重なって二つの内大きい方の値2emになり
合算値の3emにはならないけれどpaddingは重ならず合算の3emになるってこと
なんでしょうか?、他にも定義的な違いとかあるんでしょうか?

527 :Name_Not_Found:01/12/19 13:13 ID:FB3AS/c/
> 2つの値を指定した場合、1つ目の値が上下のマージン
> 2つ目の値が左右のマージンに適用される。
ですよね、上下は0で左右がautoってことでいいんですよね・・・
margin最近使い出したんでよく分かってないんですがpaddingとの
違いが相殺するか否かしか私には気づけないんですが

528 :Name_Not_Found:01/12/19 13:16 ID:3gGJx59o
>>526-527
ボックス・モデルを理解してください。
http://www.sugai.f2s.com/web/CSS/box.html

529 :Name_Not_Found:01/12/19 14:15 ID:FB3AS/c/
>>528
勉強させてもらいます

530 :名無さん:01/12/19 19:33 ID:X+8FEluX
リストを、

画面幅広
-----------------------
・ほげ1 ・ほげ4 ・ほげ7
・ほげ2 ・ほげ5 ・ほげ8
・ほげ3 ・ほげ6 ・ほげ9

画面幅狭
---------------
・ほげ1 ・ほげ6
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
・ほげ4 ・ほげ9
・ほげ5

みたいに表示させるにはどうしたらいいんでしょうか。

531 :Name_Not_Found:01/12/19 19:39 ID:7fnir/7u
>>530

li{display:inline;}
li:before{content:"・";}
li{white-space:nowrap;}

こんな感じか? contentプロパティの対応状況がアレだが…。

532 :名無さん:01/12/19 19:50 ID:X+8FEluX
>>531
ありがとうございます。
その方法だと、

1 2 3
4 5 6
7

って配置になっちゃいます。

1 4 7
2 5
3 6

って配置が理想なんです。

float を使った段組みだと、事前に決めただけの段数にしかできませんよね?
それ以前に、一つのリストで段組できるかどうかがわからない...

533 :531:01/12/19 20:00 ID:7fnir/7u
>>532
スマ。番号よくみてなかった。漏れのスキルではその組み方はわからない。
CSS2では無理な気がするけど…。

534 : :01/12/19 20:22 ID:BQ9FELs7
DHTML ならできそうな気がする.気がするだけで僕にそれを作る能力はないけど.
いずれにせよ HTML+CSS2 だけじゃ無理だと思う.CSS3 の multicol(だっけ) を待つか.

535 :Name_Not_Found :01/12/19 21:24 ID:IflONOGS
スクロールバーの色とかは変え方知ってるけど
セレクトボックスの矢印とかスクロールとかの色の変え方わかりません
というか出来るの?

536 :Name_Not_Found:01/12/19 21:34 ID:v9ixxAL6
>>535 できない。背景色なら指定できるが。

537 :名無さん:01/12/19 22:12 ID:ZzuQaq/3
>>534
おぉ、multicol なんてのがあるんですね。
そのものズバリってかんじだ。

でも CSS3 ってまだ正式に採用されてるわけじゃないんですよね。
マターリまつしかないのかぁ。

CSS でデザイン組むのって、C でプログラム組んだりするより遥かに面倒ですな...
互換性が無さすぎるYO!

538 :Name_Not_Found:01/12/19 22:34 ID:FFaQyHTi
>>537
CSSではないがmulticolはある。
http://tohoho.wakusei.ne.jp/html/multicol.htm
但しNC4のみの独自拡張タグ。

539 :Name_Not_Found:01/12/19 22:58 ID:YddAvnK2
>>537
俺はCSSしかできんが、Cってそんなに面倒くさくないの!?
マジっすか!?

Cもやってみようかな・・・このままじゃ就職ないし。笑

540 :534:01/12/19 23:02 ID:tV0ktJtX
ID 違うけど 534

>537
CSS3 のマルチコラム(草案),リンク先は神崎さんのところ
www.kanzaki.com/book/html/updates.html#css3-multicol

541 :Name_Not_Found:01/12/20 00:05 ID:7fyY1V6f
もし間抜けな質問だったらすいません。

サイズの違う画像を並べて配置したいのですが、その方法がわかりません。
具体的には、100*100の画像2つと、200*200の画像1つを、
--------------
|100| |
----- 200 |
|100| |
--------------
って感じで配置したいのですが、その方法がわからないのです。
tableだったらcolspanを使う感じのレイアウトです。
左寄せ(か右寄せ)だったら絶対座標で指定できるのですが、
この画像全体を中央寄せにしたいので、座標が指定できないのです。。

どなたか識者の方、力をお貸しください。
宜しくです。

542 :541:01/12/20 00:07 ID:7fyY1V6f
--------------
|100|     |
|---| 200  |
|100|     |
--------------
なんか表がズレました。。
わかるとは思いますが一応訂正させて下さい

543 :Name_Not_Found:01/12/20 00:21 ID:3PUQ6xL6
>>541-2 一例ですが。
--------------
| A |     |
|---|  B   |
| C |     |
--------------
<div aligh="center">
<div id="imagearea">
<img src="A.gif" alt="A" width="100" height="100" id="A">
<img src="B.gif" alt="B" width="200" height="200" id="B">
<img src="C.gif" alt="C" width="100" height="100" id="C">
</div>
</div>
#imagearea {width:300;height:200;}
#A {float:left;}
#B {float:right;}
#C {clear:left;float:left}

544 :541:01/12/20 00:39 ID:7fyY1V6f
543さんありがとうございます。お教えいただいた方法でできました。
図々しいのですが、さらに
---------------------
| A |     | D  |
|---|  B   |-----|
| C |     | E  |
--------------------
とする方法もあれば教えていただきたいのですが。。
思ったより難しくて苦戦しています。いじってるうちに詳しくなれるでしょうか、、

545 :543:01/12/20 00:41 ID:3PUQ6xL6
ごめん、間違った。
<div aligh="center"> →<div align="center">
で、
#imagearea {width:315px;height:215px;}
と少し大きめにしたら、狙った通りに配置される。
でももっといい方法があるかも。

546 :Name_Not_Found:01/12/20 00:49 ID:3PUQ6xL6
>>544
それは結局、[A・C][B][D・E]から成る三段組ですね。

CSSを用いた段組の作成のコツ
http://dfj.cool.ne.jp/html/column.html

547 :541:01/12/20 00:50 ID:7fyY1V6f
あ、読んでみます。ありがとうございます

548 :Name_Not_Found:01/12/20 08:28 ID:tP1PgXRk
>>529
CSS話とは少し外れますが、
画面幅が狭いということは

---------------^
・ほげ1 ・ほげ6 |
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
---------------v
(画面外)
・ほげ4 ・ほげ9
・ほげ5

みたいに、途中の要素が画面の下まではみ出して
スクロールさせないと見えなくなる可能性も高いわけで、
ユーザビリティ的に問題がある気がします。
>>531 の方法のほうが、
同じはみ出すにしても順番に最後だけはみ出すので
使いやすいかと思われ。

549 :Name_Not_Found:01/12/20 10:49 ID:tG2jn4dL
>>548
たしかに。項目を並べたときに、自然と

・ほげ1 ・ほげ2
・ほげ3 ・ほげ4
・ほげ5 ・ほげ6

と思ってしまうかもしれないし、それにあえて逆らう必要も
ないのでは?

・・・と思いつつ、TVの番組表みたいなのを
作りたいのかもしれないですね。
それだと意地でも縦に並べたい気持ちもわかる

550 :Name_Not_Found:01/12/20 12:55 ID:YGkB8adw
>549
番組表なら「表」なんだしテーブルでいいと思う

551 :Name_Not_Found:01/12/20 13:25 ID:pHFvkPmY
>>550
同意。データを納めるのに表があるんだからねぇ。
ところでCSS3っていつ頃勧告になるんでしょうね。
すごく期待しちゃうんですけど。
でも対応ブラウザがないね。

552 :Name_Not_Found:01/12/20 17:58 ID:g+gVfudJ
>>551
http://www.w3.org/Style/CSS/current-work#table
によると、まず"Selectors"が2002/06にRecommendationとなる予定。
もちろん、他にもモジュールは沢山あるから、ブラウザが実装するのは2003年以降かな……。

553 :Name_Not_Found:01/12/20 18:07 ID:OzJNgzFx
初歩的な質問ですみませんが、HP作らなければならなくなったのですが、
本などみるとスタイルシート を利用したほうが良いと書いてあるのですが、

その反面スタイルシートに書いてもブラウザで対応していない部分が
あるようなことも書いてあるのですが、実際のところ今のHTMLってどうなんですか?

554 :Name_Not_Found:01/12/20 18:15 ID:/pErEqmM
>>553
ブラウザやバージョンによってまちまち。
特にNetscape4はスタイルシートを読み込ませただけで落ちたりする。
以前にもまして各ブラウザの各バージョンでの表示チェックは怠れない。

555 :Name_Not_Found:01/12/20 18:24 ID:OzJNgzFx
>>554
各ブラウザの各バージョンのチェックをする時間が無い場合、スタイルシートは使わない方がいいのでしょうか?

556 :Name_Not_Found:01/12/20 19:02 ID:4BSN/o/P
・CSS 使用の場合

 現在使われているブラウザで CSS にそこそこマトモに対応しているのは
 IE5 、 IE5.5 、 IE6 、 Netscape6/Mozilla 、Opera6
 (Opera は 6 以前でもそこそこ対応してるけど
  日本語がまともに表示出来ないのでとりあえず除外)。

 NN4.x と IE3 も一応対応してるけど実装がメタメタで。
 また CSS を読み込ませない方法もあるので除外。
 IE4 はよく知らないけど一応除外(ヲイ。

 IE5 以降は極端な違いは無いのでとりあえず 5 を使うとして
 表示確認に使うべきブラウザは
 IE5 、 Netscape6 or Mozilla 、 Opera6 の 3 つ。
 (Opera はまだマイナーなので除外しても良いかも知れない)
 一応 CSS 非対応ブラウザ(及び IE3 、 NN4)での表示も
 確認するとして NN3 とか加えて、計 4(3) つ。


・CSS 非使用で、物理要素やテーブルレイアウトで作る場合

 上記 4 つに加えて NN4 、 IE3 も含めて計 6(5) つ。

557 :Name_Not_Found:01/12/20 19:06 ID:4BSN/o/P
それから、
CSS 使用──というか HTML4.01 以上に準拠した記述を行えば
例え CSS に対応していないブラウザでも見た目が殺風景ではあるけど
文字情報の閲覧に(少なくとも理屈のうえでは)問題はない。
音声読み上げブラウザなど非視覚系 UA にも(たぶん)対応。

また極論ではあるけど、将来
「 HTML4.01 及び CSS2 完全対応、 ただし物理要素は一切非対応」
なんてブラウザが出てこないとも限らない。
まぁ今日明日にこんなブラウザが出ても普及は無理だろうけど
自分ならとりあえず使ってみるかも知れない。

なによりも W3C が
「文書構造は HTML で、見栄えは CSS で記述」
と言ってて、 UA 制作側もそれを意識してきているので
従っておけば安全。
例え HTML4.01 以上 + CSS で正しい記述をしていて
レイアウトが崩れてしまうようなブラウザがあっても
「ちゃんとした規格がある以上、それに対応していないブラウザが悪い」
と胸を張って言える。

558 :Name_Not_Found:01/12/20 19:07 ID:4BSN/o/P
ただし「胸を張って云々」はやっぱ個人サイトに限るかな。
どうして「HP作らなければならなくなった」のかは知らないけど
もし企業とかのサイトを作るのならば
NN3 や NN4 でもそこそこ見栄えのするサイトを作らなければ
ならないかも知れない。

559 :Name_Not_Found:01/12/20 19:41 ID:pHFvkPmY
>>558
でも、http://www.harmonate-town.com/
こういった例もあるわけじゃないですか。
結局は、いかにクライアントに理解してもらうかなんじゃ
ないのかな?
そういう意味では、「紀野と」なんかじゃこのようなサイトを
作ることないでしょうけどね。

560 :Name_Not_Found:01/12/20 20:49 ID:YfjbnPQj
>>552
>まず"Selectors"が2002/06にRecommendationとなる予定。
>ブラウザが実装するのは2003年以降かな……。
IEなんかは草案からのフライング対応が十八番だから、(rubyとか縦書きとか)
次のバージョンでは対応してるって可能性もないとは言えないと思う。
まあ、次のバージョンがいつ出るかっていうとアレだが(わら

561 :Name_Not_Found:01/12/20 21:00 ID:pZCsnh4k
カーソルについて質問です。
以前は

A:link
{
cursor:n-resize;
text-decoration:none;

}

A:active
{
cursor:n-resize;
text-decoration:none;

}

A:visited
{
cursor:n-resize;
text-decoration:none;

}

A:hover
{
text-decoration:underline , overline;
color:magenta;
background:aquamarine;
cursor:n-resize;
}

とするとリンクにポイントするとカーソルが↑のような表記になったのですが
IE6にしてからはサイズ変更のアイコンになってしまいました。
これはどうしたら直るものなのでしょうか?

562 :Name_Not_Found:01/12/20 21:13 ID:SKaBfGme
横れすでスマソ。&& IE6はよく分からんが、
カーソルって基本的に (以下・時間がないので省略)

563 :Name_Not_Found:01/12/20 21:26 ID:5vtDcD3f
>>561 "n-resize"の意味って分かってっる?

564 :549:01/12/20 22:10 ID:tG2jn4dL
>>550 >>551
確かに。でも、テーブルにするとメンテナンス性悪いやん。
縦のテーブルがあれば・・・

565 :Name_Not_Found:01/12/20 22:13 ID:YfjbnPQj
>>561
>>562-563の意訳は「カーソル変更するなヴォゲ!!」です。
「n-resize」は「上方向へのサイズ変更を示すカーソル形状」です。
英語くらいできた方が良いのでは。

あと、a:hoverなカーソルはpointer(デフォルト)にしておいて下さい。
Winではpointerもdefaultも矢印ですが、
マックではふつうpointerが「手」の形状になるので、
これを変更されるとリンクの区別が付きにくくなってマジうざいです。

無意味なカーソル変更は初心者丸出し。

566 :Name_Not_Found :01/12/20 22:21 ID:DB9R3S1o
なぜ意味を知らずに値を与えるということがあり得るんだろう?

567 :Name_Not_Found:01/12/20 22:40 ID:YfjbnPQj
>>566
「blockquoteは字下げを行うタグです」

568 :Name_Not_Found:01/12/20 23:49 ID:0mLDOkfU
>567
???

569 :561:01/12/20 23:50 ID:O1TWI+AN
>>565

わかりました。
どうも私は解釈を間違っていたようですね。
Macのことは全然頭に入れてませんでした。
出直してきます。
因みにあのカーソルのものはwww.tanasan.comというところでソースが載ってたので
そのまま載せただけです。当時はそんな事知らなかったもので、ろくに意味もふかく
気にしなかったのです。

570 :Name_Not_Found:01/12/21 00:07 ID:c55+mQ+L
>>568
そう解説してる本/サイトは少なくとも要素の意味なんて考えてないんだろ。

571 :568:01/12/21 00:20 ID:mocg4zHR
>570
あ、なんとなく理解出来た。ありがとう。

572 :Name_Not_Found:01/12/21 00:31 ID:12hmk5xr
IEでTABコードを表示する方法を探しています。
PREタグでかこむのも方法ですが、ソースコードならこれでも良いのですが、
文章などが混じっていると、ブラウザのウィンドウサイズに合わせて文章を折
り返してくれず、横スクロールバーが出てしまうのでいやです。
スタイルシートを使うのも手ですが、white-spaceのpreはIEではまだ実装さ
れていないです。
TABをスペースに変換してやるのも手ですが、その画面をコピペすると当然、
TABがスペースの集合になっちゃうので、これもいやです。TABはTABとして
扱いたいんです。
TEXTAREAフォームをリードオンリーにして、そこに表示させる手も考えまし
たが、これもブラウザのサイズに応じてフォームサイズが可変しないのでい
やです。

一晩考え試行錯誤しましたがわかりませんでした。
そんなわけで、なんかいい方法分かる人いませんか?

573 :566:01/12/21 00:45 ID:EKDxZzzU
>>568 >>570
いい加減な解説はいくらでもありうるってことやね。
CSS勧告ぐらい見りゃいいのになあ。

574 :Name_Not_Found:01/12/21 01:06 ID:2vsUr6z7
>>572
pre {
width: *%;
overflow: auto;
}
タブをタブとして扱うならpreを使うしかない。
コピペされることを考慮してるってことはソース関係じゃないの?

575 :541:01/12/21 01:10 ID:GWZ4h/8q
541です。あれから色々調べてみました。
結局のところ、tableやdivで現状では使えるalign="center"に相当する機能は、
CSSでは場当たり的な方法でないと実装できないということみたいですね。
tableで場当たり的デザインをするのに飽きたので、CSSを勉強しようと思ったのですが、
いきなり壁にぶつかってしまって困っています。
CSSからしてみれば、Webページは左寄せにしろ、中央寄せにはするな、という事なんでしょうか。
んー、難しい。もうちょっと勉強してみます。

576 :Name_Not_Found:01/12/21 01:41 ID:OiwZ/Pkz
>>575 はい。せめて、もう少しでいいから、勉強してください。

577 :572:01/12/21 02:07 ID:12hmk5xr
>>574
さっそくありがとうございます。
ソース関係の表示ですが、解説本のように、説明もついてるし、
ソースもついているようなものの表示に使いたいのです。

pre {
width: *%;
overflow: auto;
}

を試してみましたが、残念ながらうちのIE5.5では、
望んでいるようには表示されませんでした。
でもありがと。

578 :Name_Not_Found:01/12/21 02:41 ID:mocg4zHR
>577
まさか、
width: *%;
↑このまま記述したんじゃないよね?

579 :572:01/12/21 02:56 ID:12hmk5xr
>>578

width: 100%;
width: 200pt;

などとも指定してみましたが、なにか?

580 :Name_Not_Found:01/12/21 03:22 ID:mocg4zHR
>579
急に態度変わるなぁ。

今、試したけどムリっぽいね。
PRE要素をインラインにしてタブだけを囲ってみたけど
これでもブラウザサイズに対しての改行はムリだった。
(囲ってないとこの改行ね)

581 :574:01/12/21 03:32 ID:2vsUr6z7
>>577
PREだと溢れる分はどうしようもない。
ページに横バーが出ないだけマシだと思って。

TEXTAREAを使うのなら、
textarea {
width: *%;
}
これでサイズは可変になるよ。あんまりお勧めしないけど。

582 :572:01/12/21 03:57 ID:12hmk5xr
>>581
なかなか良い方法だと思いましたが、なんというかこー、
いまいち割り切れないものが残りますね。
でも一つ勉強になりました。ありがと。
やっぱIEだと無理なのかな。

583 :Name_Not_Found:01/12/21 06:10 ID:HQSg6JU5
>>575-576
実際、みなさんはセンタリングをどうやってますか?
私は
.center {
margin-left:auto;
margin-right:auto;/*NN6,Opera,MacIE・WinIE6標準準拠モード向け*/
text-align:center;/*NN4,WinIE5.5,MacIE・WinIE6互換モード向け*/
}
です。但しこれだとtext-align:centerの所為でブロックだけでなく
中の文字も中央寄せになりますが、まだまだ多数を占めるWinIE5.5以下の
閲覧者のためには仕方が無い。
あと、NN6/Mozilla独自拡張のtext-align:-moz-centerもありますが、
text-align:centerとmargin:0 auto;を共に指定してる以上無意味ですし。

584 :Name_Not_Found:01/12/21 06:23 ID:9h0cQWcO
場合によるけど、こういうのならやったことある。

body{
text-align: center;
}

div{
width: *px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

585 :名無さん:01/12/21 11:01 ID:p7+qCQXx
こういうときどうしたらいいんでしょう。

/* in basic.css */
body{
background-color: #7cc; /* A */
color: #000;
}


/* in article.css */
div.navigator{
background-color: #fff;
color: #7cc; /* B */
}

A と B の値を同期させたいんですけど、
いちいち両方書換えるしか方法ないんでしょうか。
変数使いたい....

586 : :01/12/21 12:02 ID:SC2hcv2a
>583
で .center p{text-align: left;} とかやる.

587 :Name_Not_Found:01/12/21 12:40 ID:BABLTxX0
>>585
今ちょっと眠いから見当違いのこと言うかもしれないが我慢しれ。

色の管理が面倒だということなら、
レイアウト用のシートと配色用のシートに分けれ。
あとは置換でイパーツだ。

588 :Name_Not_Found:01/12/21 16:48 ID:8rZ2W/DF
例のヤツで初めて自分のCSSファイルチェックしたら
指定された背景色(background-color)に対応する前面色(color)が指定されていません : BODY
と出ました。もっと下の階層(要素)に指定してあれば問題なさそうなのにわざわざbodyにもcolor
を指定するのはなんででしょう?厨房な質問でスマそ

589 :Name_Not_Found:01/12/21 17:48 ID:OiwZ/Pkz
>>588
スタイルシートが、
body {background: black;}
p {color: white; background: transparent;}
だとすると、
<h1>ごるぁ</h1> とか <pre>藁</pre>の色が不定になるからだと思われ。
なんてったって、カスケーディングですので。

590 : ◆HTMLQ/Ac :01/12/22 01:57 ID:rgyuqKsi
>>572
>IEでタブコード
ここにタブを書いてみます「 」←ここにタブがあります
&#9;ね。文字参照。これじゃタブにならないの?

591 :572:01/12/22 02:33 ID:siWo8/Zg
>>590
IEだと だとタブは表示されないよ>>590
$a = 0;
$b = 0;

592 :590:01/12/22 03:37 ID:rgyuqKsi
>>591
WinIEは対応してないのか? MacIE5ではきちんとタブになるんだけど…。
WinIEだとどんな表示になるの? そのまま&#9;って見えるのか?

593 :572:01/12/22 04:02 ID:siWo8/Zg
>>592
だと、WinIEでは無いものとみなされるようです。
スペースにもならない。
バージョンよって振る舞いは違うかもしれないですが。

594 :590:01/12/22 04:21 ID:rgyuqKsi
>>593
ふーんそうなのか。
役に立てずスマソ。

595 :572:01/12/22 04:55 ID:siWo8/Zg
いえいえ、親切にありがと>>594

596 :Name_Not_Found:01/12/22 23:46 ID:XV35yJWA
すみませんが、CSSのbehaviorについて
詳しく説明されてるサイトって無いでしょうか?

検索したんですが関係ないものばっかり出てきてしまって・・・。

597 :Name_Not_Found:01/12/23 01:25 ID:xZpNVasW
>>596
「ビヘイビア」で検索

598 :596:01/12/23 02:31 ID:ay9/d/Qe
>597
ありがd。
そか、英字じゃダメか。チクショー(わ

599 :596:01/12/23 03:42 ID:ay9/d/Qe
DHTML BehaviorってCSSのと同じ使い方なんですか?
何度もすみません。

600 :Name_Not_Found:01/12/23 12:32 ID:/pI8RM5F
600

しつもんです。
CSSの「width」の働き方は、IE5とIE6で違うんですか?

601 :Name_Not_Found:01/12/23 12:33 ID:/pI8RM5F
age

602 :Name_Not_Found:01/12/23 13:07 ID:gJjN9L+l
>>600

ここの「ボックスのサイズの指定方法の違い」を参照。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp

603 :Name_Not_Found:01/12/23 15:20 ID:/pI8RM5F
>>602
ありがとうございました。
どっちに合わせたらいいんだろ。
うーん…。

604 :Name_Not_Found:01/12/23 15:46 ID:5OL1AFSk
>>603
お勧めはXHTML(XML宣言あり)

-moz-box-sizing: border-box;

605 :Name_Not_Found:01/12/23 19:12 ID:6LfysPKG
macIEはどーでもいいのか・・・
box-sizng:border-box

606 :Name_Not_Found:01/12/23 22:14 ID:hqBuU+O+
box-sizing:border-box;
ってIE6標準モードでは効くんだっけ?

607 : ◆/PTR4B.. :01/12/23 22:55 ID:t1s/l1Se
>>606
効きません。
モードによって自動的にbox-sizingは切り替えられますが、
box-sizingプロパティ自体には未対応です>IE6

608 :Name_Not_Found:01/12/23 23:30 ID:hqBuU+O+
とすると、
-moz-box-sizing: border-box;
box-sizing: border-box;
を書いておいてもIE6標準モードでだけ意図しない表示になっちゃうのか…
ううむ

609 :名無さん:01/12/24 03:15 ID:LuIsbl3y
hr を幅 40% にして左寄せしたいんですが上手くいきません。

<div class="note">
<hr />
<ul>
<li>hogehoge</li>
<li>hagehage</li>
</ul>
</div>

div.note hr{
width: 40%;
margin-left; 0em;
margin-right: auto;
}

Mozilla は上手くいくんだけど、 IE5.5 だとセンタリングされてしまう...

610 :Name_Not_Found:01/12/24 06:22 ID:/xZfc1lj
>>609
IE5.5ならば、text-align:left;で、どうですか。

611 :Name_Not_Found:01/12/24 06:34 ID:jQSThiRW
-moz-box-sizing: border-box;とかの使い方を
学べるサイトってどこでしょうか?

612 :名無さん:01/12/24 06:39 ID:LuIsbl3y
>>610
おぉ、勉強になりました。

613 :Name_Not_Found:01/12/24 06:47 ID:/xZfc1lj
>>611
http://www.cc-net.or.jp/~piro/tips.lzh

614 :名無さん:01/12/24 06:54 ID:LuIsbl3y
たて続けですみません。

li の背景色を一松模様にすることってできませんかね。

<ul>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
...
</ul>

一個一個にclass=..つけるのは面倒です...

615 :Name_Not_Found:01/12/24 07:00 ID:/xZfc1lj
>>614
市松模様は、CSS3の実装を待って下さい。ずっと先になるかもしれないけど。
全部にclassを振らないでも、li{background:green;}とでもして、
あと二種類はクラスにして上書きすれば、少しは手間が省けます。

616 :Name_Not_Found:01/12/24 07:16 ID:9+KzmWt1
>>606-613
みんな既出です。
http://pc.2ch.net/test/read.cgi/hp/1005047493/56-62
http://pc.2ch.net/test/read.cgi/hp/1005047493/403-413
過去ログ活用しようよ。

617 :アホ:01/12/24 07:21 ID:BMIVKDjC
1.CSS=スタイルシート
2.CSS≒スタイルシート
3.CSS≠スタイルシート
どれですか?
答える気にならなければ無視して下さい。

618 :Name_Not_Found:01/12/24 07:38 ID:GjBkvwQp
つーか答えようがないんだが。
問題の意図がわかるようでわからん。

619 :Name_Not_Found:01/12/24 07:46 ID:9+KzmWt1
>>617
CSSはCascading Style Sheetです。
世の中にはJavaScript Style Sheetなんてものもあります。
が、Web制作の世界でスタイルシートと言ったら十中八九CSSのことです。
セロテープ(商標名)と言ったら類似商品を総称するみたいなもんです。

620 :Name_Not_Found:01/12/24 08:08 ID:rGmCYygo
XSL(Extensible Stylesheet Language)なんてのもある。
つまり

スタイルシート ⊃ CSS

ということです。

621 :617:01/12/24 09:58 ID:BMIVKDjC
>>619-620
なるほど。
という事は、少なくとも「このスレでは」スタイルシート=CSS、と解釈してOKな訳ですね。
ご回答有り難う御座いました。

622 :Name_Not_Found:01/12/24 10:22 ID:pHJSygA3
CSS2仕様書邦訳がNot Foundになるよ。↓
http://www.fan.gr.jp/~kaz/rec-css2/
困るなあ。
まあこっちもあるけど。↓
http://www.y-adagio.com/public/standards/tr_css2/

623 :Name_Not_Found:01/12/24 11:03 ID:rGmCYygo
>>622
Googleのキャッシュやウェイバックマシーンを活用しる!!

624 :Name_Not_Found:01/12/24 18:07 ID:dMbOu4W3
CSSにCSSを読み込む方法ってNN6だと対応されてるんでしょうか?

625 :Name_Not_Found:01/12/24 18:15 ID:5NqLf42N
>>624
@importのこと? 勿論、大丈夫。
NN6は最もCSS対応の進んだブラウザですよ。
cf.http://hp.vector.co.jp/authors/VA022006/css/media.html#at-import-rule

626 :624:01/12/24 18:18 ID:JpmS21mf
>>625
素早い解答、ありがとうございます。
自分で確認しようにも私のPC、何故かNN6が上手くインストールできないのでちょっと不安だったんです。

627 :611:01/12/24 18:39 ID:lvxHXREn
亀レス、スマソ。

>611
ありがとうございます。今から熟読します。

>616
すみません。次からは検索かけてから質問します。

628 :Name_Not_Found:01/12/24 19:13 ID:oHWhLyYx
テーブルとCSSのレイアウト論争みたいなスレッドないですか?

629 :Name_Not_Found:01/12/24 21:15 ID:uE321HdG
>>628
枯れた議論ではあるけど、やりたいなら

Strict-HTML スレッド 2.0 (W2C Recommendation)
http://pc.2ch.net/test/read.cgi/hp/1008380243/l50

がいいと思うよ。

630 :Name_Not_Found:01/12/24 22:59 ID:oHWhLyYx
>>629
ありがとうございます。
確かに枯れてる…。

631 :Name_Not_Found:01/12/25 08:35 ID:jGID/wOv
floatの効果がよく分からない(T-T)
上で出てる段組の解説サイトってもうかなり分かってる人を前提に話してるんだもん

632 :566:01/12/25 08:38 ID:lD7RAman
>>631
<img align="left"
とか使ったことない?

633 :Name_Not_Found:01/12/25 08:44 ID:gIxFKm6m
>>631
他に解説サイトを検索で探したら?
http://www.sugai.f2s.com/web/CSS/display.html#float

634 :Name_Not_Found:01/12/25 08:55 ID:5FQxcxFz
>>631
Academic HTMLを通して讀み給へ。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs04.htm
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-12.htm

635 :631:01/12/25 09:00 ID:jGID/wOv
、ありがとう! (^^
上のサイト解読するには実力不足だから>>634のひとに教えてもらったトコで
勉強しなおしてきます、どもすいません

636 :Name_Not_Found:01/12/25 13:50 ID:rraEVf14
いまだにフォント指定の仕方がよくわかりません。
本文全部のフォントカラーなどを指定するのはどうすれば良いのでしょう?
リンクだったら
A:link{color:7B68EE;}
って書けばいいのはわかるんだけど。
本文内の一文(タイトルとか)を指定する方法はわかるんだけど。
超基礎であろうフォント指定がいまだわからないのです…。
どなたか教えて下さいm(__)m
フォント名はDHP平成明朝体W3で、フォントサイズは小
(8pt?xx-small??)でのサンプル希望。

637 :Name_Not_Found:01/12/25 14:03 ID:e0KhVd5F
>>636
BODY { font-family: 'DHP平成明朝体W3'; font-size: small; }

638 :636:01/12/25 14:10 ID:rraEVf14
>637
ありがとうございます!
普通にBODY内に書けば良かったんですね。
あまりに基本的過ぎなのか、何処を探してもサンプル
載ってなくて困ってたんです。
早速使わせて頂きます〜(礼

639 :名無さん:01/12/25 14:43 ID:NnLGFvny
border の四辺の長さを変えることって出来ますか?

+----+
|ハンヌラ党
+-----------+

みたいな感じで。

640 :Name_Not_Found:01/12/25 14:53 ID:IErp20xb
>>639
無理。ボックスはあくまで長方形。
違う長さのボーダーが欲しければ違うボックスが用意されてないとしょうがない。

641 :640:01/12/25 15:00 ID:IErp20xb
追記。
>>639みたいのであれば上の線はbackgroundでやると言う手もある。
border-left、border-bottomは普通に設定して、
同じ太さ、適当な長さの2色GIFを
background: url(gif) no-repeat 0 0;
で指定してやるといい。
ただ、この場合上の線のサイズpxに固定されてしまうけど。

642 :Name_Not_Found:01/12/25 15:00 ID:Fq3EH9tb
ダミーの要素を用意すればできそうだけど、そのためにダミーを入れるのもアレですな。

ただ、利用できそうな要素があるならそれを利用するのはいいだろうけど。
その「ハンヌラ党」のところにspanを指定してborder-topつければいいんでない?

643 :Name_Not_Found:01/12/25 15:05 ID:pNcgTDsy
>>639
#hannu{border-top:1px;border-bottom:1px;border-left:1px;}
#ratou{border-bottom:1px;}
<span id="hannu">ハンヌ</span><span id="ratou">ラ党</span>

とかにすればできるけど、ソースが汚くなるなぁ。

644 :名無さん:01/12/25 15:13 ID:NnLGFvny
>>640-643
うーん、前後に hr 入れて長さ変えるとかの手段とるしかないのかなぁ..
でも意味の無い要素が出てくるのって気持ち悪いですよね...

とりあえず、一つの要素でやるのが無理だと理解出来ただけでも助かりました。

ありがとうございます。

645 :名無さん:01/12/25 18:08 ID:NnLGFvny
<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>

みたいなのを、

+-------------------+
|ほげほげ ↑↓|
+-------------------+

みたいにしようと思って以下のような CSS を書いたんですけど上手くいきません。
float した部分って親のブロックからはみでるんですね...

+-------------------+
| ↑↓|
+ほげほげ-----------+

こうなってしまう...


div.header {
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1 {
float: left;
}

div.header .navigator{
background-color: #0f0;
}

646 :Name_Not_Found:01/12/25 18:27 ID:QnyX7b/7
navigator -> navi と h1のmargin / padding 設定。

647 :名無さん:01/12/25 18:35 ID:NnLGFvny
>>646
げふん、navigator -> navi はコピー時のミスです...

h1 の margin / padding を 0 にしても、
p の高さが低くてだめでした。

p の margin とか padding をいじって高さを高くすれば OK ですが、
どれぐらい高くすればいいかいまいちわかりません。
h1 のフォントサイズに依存すると思うんだけど...
うーん...

648 :Name_Not_Found:01/12/25 18:41 ID:6v2gO8tO
h1 のサイズを **em ってカンジで明示的にしておいて
それにあわせればよろしいかと。

649 :名無さん:01/12/25 18:47 ID:NnLGFvny
>>648
うー、やっぱそれしかないんですかね...
うーーうーーうーー...
あんまり font-size はさわりたくなかった...sage

650 :Name_Not_Found:01/12/25 19:23 ID:LwAmAMyT
>>645
回り込み(float)させる要素にはwidth指定が必須です。

651 :名無さん:01/12/25 19:37 ID:NnLGFvny
>>650
改良してみました。が、さっぱりです...
高さがぁ。
いい加減面倒になってきた...

<style>
div.header{
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1{
float: left;
width: 80%;
text-align: left;
}

div.header div.navi{
background-color: #0f0;
}
</style>

<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>

652 :名無さん:01/12/25 19:46 ID:NnLGFvny
あきらめました。ここだけテーブル使います。

+---------------+
|AB← →C|
+---------------+
<div class="box">
<div class="left">A</div>
<div class="left">B</div>
<div class="right">C</div>
</div>

みたいなことを簡単にできることを期待してたんですが。

653 :名無さん:01/12/25 19:48 ID:NnLGFvny
>>652
違うな...
<div class="box">
<span class="left">A</span>
<span class="left">B</span>
<span class="right">C</span>
</div>
でした。

654 :Name_Not_Found:01/12/25 19:57 ID:LwAmAMyT
>>651
div.header div.navi{
background-color: #0f0;
}
を下記に改良すべし。
div.header p.navi{
background-color: #0f0;
float:right; width:10%;
}
float:leftでもよい。ブロック要素を改行分下げずに回り込ませるには必要。

655 :名無さん:01/12/25 20:04 ID:NnLGFvny
もうちょっと頑張ってみます。

>>654
上手く左右に分配されました。
でも div.header 自身が死んでます。
中の要素が全て float だと、空だってことになっちゃうんでしょうか。

656 :Name_Not_Found:01/12/25 20:11 ID:LwAmAMyT
>>655
使ってるブラウザは?
WinIEならdiv.headerの背景色がh1やdiv.naviも包含してくれる。
(CSSの仕様からすれば正しくないが)
NN6ならdiv.header{position:relative}を追加すれば同様に。
(正しいのかどうかわからない)

floatでなくてposition:absoluteを使った段組の応用でもいい。

657 :名無さん:01/12/25 20:18 ID:NnLGFvny
>>656
NN6系です。
position: relative; を入れたらうまくいきました。
ほんとにほんとにほんとーーーに感謝してます。
あなたは神です。

658 :Name_Not_Found:01/12/25 20:23 ID:LwAmAMyT
>>656
一応、参考まで。
ttp://sigekazu.vis.ne.jp/file/dir34/column.html
ttp://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=321
http://pc.2ch.net/test/read.cgi/hp/991666454/273-274

659 :名無さん:01/12/25 20:34 ID:NnLGFvny
>>658
読みました。なんかテーブルに流れそうです...
頭痛い...

660 :Name_Not_Found:01/12/25 21:25 ID:L8onXVrT
>>651
別解を以下に。
.header{
width: 100%;
background-color: #f00;
position:relative;
}

.header h1{
position: absolute;
width: 80%;
text-align: left;
}

.header .navi{
margin-left:82%;
width:15%;
background-color: #0f0;
text-align: right;
}

661 :Name_Not_Found:01/12/25 21:40 ID:L8onXVrT
>>651
改良版。これでも同じことになるはず。
.header{
width: 100%;
background-color: #f00;
position:relative;left:0;top:0;
height:2em;
}

.header h1{
position: absolute;left:0;top:0;
width: 80%;
padding:0;margin:0;
}

.header .navi{
position:relative;
left:82%;
width:17%;
background-color: #0f0;
text-align: right;
}

662 :Name_Not_Found:01/12/25 22:09 ID:L8onXVrT
>>651
これが一番簡単かも。
.header{ background-color: #f00; }
.header h1{ display:inline;}
.header .navi{
display:inline;
background-color: #0f0;
}
naviの右寄せはh1にmarginでも設定するか。

663 :Name_Not_Found:01/12/25 23:54 ID:+epy9qd6
こんなことを聞いてはいけないのかもしれないのですが、
ttp://homepage1.nifty.com/fujitay1/index.html
このトップページのCSSがオンの時のInformation、Othersの部分の
CSSがどうなっているのか分かりません。
分かる方がおられましたらよろしくお願いします。

664 :Name_Not_Found:01/12/26 00:03 ID:OcdR7+ah
>>663
>CSSがオンの時のInformation、Othersの部分の
訊ねたいのが背景色なのかborderなのかa:hoverなのかワカラン。

>CSSがどうなっているのか分かりません
ソース見て、外部cssファイルをダウンロードすべし。

665 :Name_Not_Found:01/12/26 00:04 ID:gltEWVrv
>>663

h2.menu-title2{
font-family: "Verdana","Helvetica",sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: center;
line-height: 1.4em;
padding-left: 0.0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
margin-left: 0.5em;
margin-right: 0.5em;
background-color: #ffd000;
}

666 :663:01/12/26 00:12 ID:4QYjdzJY
レスありがとうございました。
それと、質問の仕方が悪くて大変ご迷惑をおかけしました。
申し訳ありません。

>>664さん
伺いたいのは、上記の部分の位置に関してです。
テーブルを使わないで、どうやってInformationとOthersを表示しているのかが分からないのです。
クラスはおそらく、"menublock"の部分だと思います。
外部CSSはたくさんあるようで、自分がダウンできた3つ(top_ie4.css、base.css、fugure.css)
には該当の所がなかったのです。

>>665さん
本当にありがとうございました。

667 :665:01/12/26 00:25 ID:gltEWVrv
これか?top.cssより。

div.menublock{
width: 49.99%;
float: left;
}

668 :663:01/12/26 00:29 ID:4QYjdzJY
>>665さん
ありがとうございます。おそらくそれだと思います。
さらに伺ってしまいますが、
どうやったらそのCSS(top.css)を出すことができるのですか?
自分はスクリプトの自動振り分けが理解できなかったので、
iCabのCSS表示機能を使いました。

669 :665:01/12/26 00:39 ID:gltEWVrv
よくわからんけど、キャッシュを漁ったらみつかった。

なんか、ブラウザ判別スクリプトと、その結果によって
違うcssを食わせるスクリプトを併用してるようだけど、
IE6じゃ段組にならなかった・・・(あとでIE5で見て気がつく)

670 :663:01/12/26 01:45 ID:9bC7K7hm
>>665さん
ありがとうございました。レス遅くなってすみません。

671 :Name_Not_Found:01/12/27 01:14 ID:pBmt71Zl
クラス定義するときって、要素名入れてる?

p.section{...}

.section{...}

どっちがいいんだろう。

672 :Name_Not_Found:01/12/27 01:29 ID:nxWRtQ/L
タグごとに使い分けたいのなら入れる。
使いまわししたいのなら入れない。

673 :Name_Not_Found:01/12/27 02:44 ID:Vdwziy9J
>>671
便乗質問ですが、要素名入れたほうが、例えば参照が速くなるとか、
そういうあたりのメリットはありますか?

674 :Name_Not_Found:01/12/27 02:51 ID:o9NlLyiw
あの、ジオシティーズとかにメモ帳で書いたcssをアップするにわどうしたらいいんでしょうか?超初心者なのですがよかったらおしえてほしいです

675 :Name_Not_Found:01/12/27 03:25 ID:pBmt71Zl
<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

みたいなのを、

りんご+ごりら+らっぱ

みたいに表示したいんですが、これは CSS レベルで対処可能でしょうか。

676 :Name_Not_Found:01/12/27 03:26 ID:xRvZhi8L
>>674
普通にFTPとか
ファイルマネージャのEZファイルアップロードツールとかで
転送できます。

677 :Name_Not_Found:01/12/27 03:53 ID:W0m/afWw
>>675
li { display: inline; }

でどう?

678 :674:01/12/27 03:55 ID:o9NlLyiw
できました!んでですね、text-decoration:none;てしたんですけど、下線が消えないんですけど、なんででしょうか?

679 :Name_Not_Found:01/12/27 03:56 ID:kRIlJ3OF
>>675
li { display: inline; }
li:before { content: "+"; }
li:first-child:before { content: ""; }

680 :675:01/12/27 05:52 ID:Cl1PhqiF
>>679
ありがとうです。

+の代わりに画像表示したくなった場合って
どうしたらいいんでしょう。

681 :Name_Not_Found:01/12/27 06:02 ID:kRIlJ3OF
li:before { content: url(image.gif); }

682 :Name_Not_Found:01/12/27 13:39 ID:VQkKM7x7
内容生成プロパティー(content:)や、擬似要素の:beforeや:after等は、
まだMozilla/NN6位しか対応してなくてWinIEが実装してないので、
指定しても絵に描いた餅にしかなりませんよ。

683 :CSS初心者:01/12/27 15:18 ID:1TX8c+YH
CSSの主旨に著しく反するかもしれないのですが、
任意の画像をある位置を基点に相対位置で表示したい場合には
どうしたらいいのでしょうか?

ある位置というのが、閲覧環境によって絶対座標が
変ってしまうような場合で、この文字の右に画像を
表示したい、などという場合です。

最初からレイアウトに画像を組み込んでおけばいいのですが、
画像は状況に応じて適宜表示したいので、CSS使ってるです。

684 :Name_Not_Found:01/12/27 16:06 ID:pznN81eZ
>>682
今更何を言い出すやら。

685 :Name_Not_Found:01/12/27 17:14 ID:+UO3S5vK
初心者質問板からここに誘われてきました。

ガイシュツだったらすみません。
背景画像で、左側と、上側、下側に画像を挿入して
フレームで囲ったようなページを作りたいのですが、
例示:
http://home4.highway.ne.jp/radicon/
 の、"Plain"のスタイルのような感じです。

background のrepeatを使用すると、xかyかどちらかしか出来ません。
三つとも表示させるにはどのようにしたらよいのでしょうか?

686 :Name_Not_Found:01/12/27 17:23 ID:K40r6YT+
>>685

画像は左上と左下のカーブの部分にしかないみたいよ。

687 :685:01/12/27 17:27 ID:pelXi0hX
>>686
となると、あれはどうやってあるんですかねぇ?

結果的にああいう感じになれば良いのですが・・・

688 :Name_Not_Found:01/12/27 17:38 ID:K40r6YT+
関係ありそうなのはこのへんか?

body{
font-family:"MS Pゴシック","Osaka",sans-serif;
background:#eeeeee;
color:#555555;
margin:0;
padding:0;
}


左上のカーブ

#bodyfake{
margin:40px 0 30px 15%;
padding:2em 1em 0 0;
background:white url("../Theme/plain/corner_t.png") no-repeat;
height:expression('1px');
}


左下のカーブ
address{
font-family:"Arial";
text-align:right;
background:url("../Theme/plain/corner_b.png") bottom left no-repeat;
padding:100px 0 1em 0;
clear:both;
}

689 :685:01/12/27 17:47 ID:pelXi0hX
>>688
あ、スタイルシートの場所はJSからのファイルから行けるんですね。
すみません、ありがとうございます。
なんとか検討してみます。

690 :質問です:01/12/28 06:55 ID:hCFFqN55
td { text-align: center; margin-right: auto; margin-left: auto}
これを追加したら、NN4.7では<center>タグを無視してテーブルが
全部左に寄ってしまうのはなぜなのでしょう?
テーブル内ではセンタリングされているのですが。

691 :Name_Not_Found:01/12/28 06:59 ID:We+CgplL
>>690
中味でなくテーブル全体を中央揃にしたいんでしょ?
セレクターをtdでなくてtableにしてみよう。

692 :Name_Not_Found:01/12/28 07:01 ID:hFbk9fNB
autoは6からじゃなかたけ?

693 :Name_Not_Found:01/12/28 11:27 ID:Y8nJl6YV
>>690
どこのtdに指定していてそれがどこのcenterと関係してるのか知りたいが、
tableをセンタリングさせたいならtdに指定しても無駄だぞ。
て言うかtdのmarginは基本的に無意味なんだが。
……え、centerタグ?
取り敢えず、そのtableとcenterのHTMLとCSSソースをコピペしてくれ。
何か無茶やってる気がする。

694 :推理:01/12/28 14:33 ID:okUDPh9V
NN4じゃautoが効かないから<center>使ってテーブルをセンタリングした。
各セル内部もセンタリングしたいからと align:center で指定してみたら
NN4ではテーブルがセンタリングされなくなった…。

NN4ならそんなもんなんじゃないのかなあ。
<table align=center>とかどう。NN4だけのためにそこまでやる必要があるかどうかだけど。

695 :Name_Not_Found:01/12/28 17:07 ID:Z0ec9/Oq
スタイルシートをHEADに書いて
BODYの一カ所だけに適用したいときに
何か目印つけますよね?
あれって、なんでしたっけ?

696 :Name_Not_Found:01/12/28 17:14 ID:NT6kM+71
>>695

idのこと?

697 :Name_Not_Found:01/12/28 17:17 ID:Z0ec9/Oq
>>696
そう!それです!

<!--
filter:alpha(opacity=80) }
-->

↑これを1つのテーブルだけに適用したいのですが
どうこにidをつければいいんでしたっけ?

698 :Name_Not_Found:01/12/28 17:22 ID:Z0ec9/Oq
まちがえた
これです
table {
  filter:alpha(opacity=88);
}

699 :Name_Not_Found:01/12/28 17:25 ID:ZvE7fSpN
基礎から勉強するよろし。

table#abc {
  filter:alpha(opacity=88);
}



<table id="abc">

もっともこの場合classのほうがいいかもしれん

700 :Name_Not_Found:01/12/28 17:35 ID:Z0ec9/Oq
>>699
ありがとうございます!!
休み中に基礎から勉強したいと思います

701 :Name_Not_Found:01/12/28 20:22 ID:Y8nJl6YV
>>694
だから、そもそもtdに指定しているのが間違いなの。
marginを指定するならtableに、
text-alignを指定するならtableの親要素に。

702 :694:01/12/28 21:06 ID:XxRFrSQm
だってさ。
>>690

703 :Name_Not_Found:01/12/28 21:51 ID:BAxuxiuC
CLASS名って日本語でも可ってどっかにあったんですけど、
実際のところどうなんすか?
何か不具合とかあります?

704 :ネオ ◆/PTR4B.. :01/12/28 22:46 ID:c6+npU8H
>>703
既出かもしれませんが、一応。
HTML 2.xのclass属性はSGML NAME tokenなので、日本語は使えません。
HTML 4.0/4.01のclass属性はcdata-listなので、日本語も使えます。
XHTML 1.0のclass属性も同上。
XHTML 1.1/XHTML Basicのclass属性はNMTOKENSなので、日本語は使えません。
#Modularization of XHTMLで、class属性の定義が変更された為(CDATA→NMTOKENS)。
http://www.kanzaki.com/docs/html/xmodules.html#s_cmnatts
参照。

但し、CSSで使えるのは基本的にASCII文字だけなので、
実際にCSSで日本語を使うには、\(U+005C)でエスケープしてやる必要があります。
p.\65E5 \672C \8A9E { color: red } /* 「日本語」をエスケープした例 */
対応しているUser-Agentについては
http://sigekazu.vis.ne.jp/char/sjis/charset.htm
参照。

【結論】
HTML 4.0/4.01 or XHTML 1.0を宣言した文書に於いて、スタイルシート側でエスケープをすれば
使えますが、よっぽどのことが無い限り、止めておいた方が賢明かと存じます。

705 :Name_Not_Found:01/12/28 22:57 ID:BAxuxiuC
>>704
ありがたく存じます。

やめておくことにします。

706 :Name_Not_Found:01/12/28 23:01 ID:Y8nJl6YV
>>704
XMLのNMTOKENSは日本語使えるぞ。
それから、@charset構文で日本語コードも使えるので、
セレクタ中の日本語も問題無し。仕様書的には。
ただし、誰もやらないので不具合はほとんど報告されていない。
最新のMozillaやIEは問題無いと思うけど。

707 :ネオ ◆/PTR4B.. :01/12/29 00:01 ID:zza4hcwA
>>706
そうでした……。
適当なこと書いて申し訳ありませんでした>>705
味噌汁で顔洗って、修行し直して参ります……。

708 :Name_Not_Found:01/12/29 00:05 ID:b9r4SM34
td { text-align: center; margin-right: auto; margin-left: auto}
について質問させてもらったものです。皆さんありがとうございます。

もともとCSSは使わず<body>全体を<center>タグのみで中央揃えに
していたのです。ところがCSSを突っ込んだ途端、NNで中央に行かなく
なった・・・という訳です。テーブルも、セル内部も全て中央揃えにしたいのですが
<table align=center>ではうまくいきませんでした。CSSを使わず
各tdにいちいち位置指定してやれば両方でうまくいくのですが。
うう、くじけそうです。

709 :教えて君:01/12/29 01:04 ID:2Cz9+zJO
>>706
>>707
どちらにせよ、やめとくのが無難ということで。

で、ついでにもう一つ質問があります。
textareaにVerdanaとかのフォント指定をすると、
Macで文字化けするって聞いたことがあるんですけども。

検索してもよくわかんなかったんで。

710 :Name_Not_Found:01/12/29 09:11 ID:WcSHEcHN
>>708
table自体の中央寄せはtableへの横marginをauto、
tableの親要素にtext-alignをcenter。
セル内の中央寄せはtdにtext-alignをcenter。

http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4

……何で頑なにソースを見せない?

711 :Name_Not_Found:01/12/30 01:49 ID:AH2goiXP
>>710
すいません、忘れてました。
ソースはこんなカンジです。
とりあえずIE・NNとも中央にきましたが、
NNのほうはセルの中身が左寄せになってます。

<html>
<head>

<style type="text/css">
<!--
table { text-align: center; margin-right: auto; margin-left: auto}
-->
</style>
</head>

<body>
<center>

<table width="300">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><img src="img1.gif"></td>
<td><img src="img2.gif"></td>
</tr>
<tr>
<td width="150"><b>テキスト1</b></td>
<td width="150"><b>テキスト2</b></td>
</tr>
</table>
</center>
</body>
</html>

ここへあらたに
td { text-align: center; margin-right: auto; margin-left: auto}
を追加すると、NNだと全体が左に寄ってしまいます。
やっぱり無理にCSS使わないほうがよいでしょうか?

712 :MOULIN ◆ROUGEr/U :01/12/30 02:04 ID:AC6qUqu1
>>709
MAC IEのどのバージョンか忘れましたが、
font-familyの先頭にVerdanaなどの英語フォントを指定すると、
フォームの入力を促す要素関連で文字化けした、と記憶しています。

フォント指定の順番で、何より最初にMACにある日本語フォント
例えばOsakaなどを入れてやると文字化けは回避できるはずです。

713 :Name_Not_Found:01/12/30 09:24 ID:GlqD8Bx3
>>711
だから何でtdにマージンを…。

714 :Name_Not_Found:01/12/30 12:02 ID:/BWZJas+
>713
....

715 : :01/12/30 12:46 ID:AyyiTV09
>711
そりゃどうも N4 のバグっぽいなあ,と思った.以下全て,
td{text-align: center;} を入れるとテーブル全体が左によってしまう.
<div align="center">
<div style="text-align: center;">
<table align="center">

何か間違っている気がしないでもないが,とりあえず,CSS は使わないってことで.

>713
試してみたけどそこは本質じゃない.

716 :Name_Not_Found:01/12/30 13:28 ID:t6m5TEsc
すいませそ。
ガソバッタんですが解決出来なかったので質問します。

TDにIEおまけのfilter:Alphaをかけてスケさせました。
でもTD内に含まれるIMGはスケさせたくないのです。
このスケ解除の方法はあるんでしょうか?

TD{filter:alpha(style=0,opacity=80,)}

試しにIMGに
opacity=100
とやってみましたがTDの80を基準にしたみたいでスケでした。(逝

さらにIMGに
style=1,
opacity=100,
finishopacity=100,
startx=0,
starty=0,
finishx=0,
finishy=0,
とかやって「無かった事に」しようとしたんですがヤパーリスケでした。(逝

どうか助けて下さい。

717 :Name_Not_Found:01/12/30 16:13 ID:aissWtfa
背景画像のリピートなんですが、
部分的にリピートさせるってことは出来ますでしょうか。

□□□▽▽▽▽
□□□▽▽▽
□□□▽▽
□□□▽

リサイズすると、

□□□□□□▽▽▽▽
□□□□□□▽▽▽
□□□□□□▽▽
□□□□□□▽

のように、□の部分だけ増えるみたいな。

718 :Name_Not_Found:01/12/30 16:43 ID:oVA1Qiu4
>>717
たぶんムリ。
どうしてもってことならば、□と▽とでボックスを分けて
それをbody全面に絶対配置しz-indexも指定するとか、かな。

719 :Name_Not_Found:01/12/30 18:18 ID:aissWtfa
印刷用のスタイルシートを書くときってどうしてます?

私の場合、ナビゲーション部分は印刷時はいらんだろうってことで、

<div class="navigation">
<a href="prev.html">戻る</a>
</div>

で、

.navigation { display: none; }

ってしてます。

他にこうしたらいいぞーみたいなのってありますか?

720 :Name_Not_Found:01/12/30 19:09 ID:cmEHX0Ig
>>719
font-size:10pt;
ウェブと違って印刷では文字サイズ固定で弊害が無いから。
それからバックグラウンドが暗い色で白抜き文字なんかの場合、
インク代が無駄だから*{background:white none; color:black}にする。
あと無料スペースでは広告部分にIDを振って、#adv{display:none;}。

721 :Name_Not_Found:01/12/30 19:49 ID:jkA7TVA7
で、印刷すんの?きみら

722 :Name_Not_Found:01/12/30 19:59 ID:aissWtfa
>>721
しないんすか?
やったら文章多いとこって結構印刷しますが...

723 :Name_Not_Found:01/12/30 20:39 ID:oNIMJ3D8
>>721
技術情報系は印刷するねぇ。

724 :Name_Not_Found:01/12/30 22:35 ID:XxGcZioI
すみません、旧スレに書いてしまいました。

カーソルをCSSで、<body>等のところはcrosshairで、
<A>の上だけはe-resizeになるように設定しています。
そこでユーザーサイドクリッカブルマップを使っているのですが、
その上のクリックできる部分でもカーソルを変えたいと思い、
<area 〜(省略)〜 style="cursor:e-resize;">としたのですが、
カーソルは変わらずcrosshairのままです。
念のためと思い、<map>にも同じ指定をしたのですが変わりません。
カーソルがデフォルトのままなら、普通に手の形になるのに…。
すみませんどなたかアドバイスをいただけませんか?
試したブラウザはIE5.5とNN6.2とNN4.73とOpera6.0です。

725 :Name_Not_Found:01/12/30 23:12 ID:809ZojnI
>>724
見たよ。前スレの流れからして絶対ネタだと思った。質問自体も。
「カーソル変えるなゴルァ(゚Д゚)」
って答えが返ってくる前に逃げたほうが良いかと。

726 :Name_Not_Found:01/12/30 23:14 ID:ss1AoSKI
>724
カーソル変えるなゴルァ(゚Д゚)

727 :Name_Not_Found:01/12/30 23:34 ID:809ZojnI
ほら言わんこっちゃない。

728 :Name_Not_Found:01/12/31 00:03 ID:bSHRNUIf
>>724 こちらへの登録をお勧めします。

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

729 :724:01/12/31 00:40 ID:y/BQKu+O
>>725
済みませんでした…。

>>728
わかりました。
どうもありがとうございます。

730 :Name_Not_Found:01/12/31 02:05 ID:wI2oT13K
Alpha解除は出来なそうなんでしょうか・・・。

731 :Name_Not_Found:01/12/31 02:46 ID:4WaCvgpO
>>730
ブラウザの実装から考えると、それはちょっと辛いのではないかと思います。
思うだけなのでsage。

732 :Name_Not_Found:01/12/31 03:07 ID:wI2oT13K
>>731
思うだけでも返答して頂いてありがたいです。
だってレス0なんですもん。
やっぱり難易度高いんでしょうか。(ナキ

一応sage。

733 :Name_Not_Found:01/12/31 03:46 ID:mmNrRvwQ
>716=730=732
たった今、テストしました。
出来ましたよ。

TD { filter: alpha(〜);}
IMG {
  position: relative;
  filter: alpha(style=0,opacity=100,finishopacity=100,);
}

って感じです。
相対位置指定を書けば桶でした。絶対位置指定でも桶のようです。

では、頑張って下さい。

734 :Name_Not_Found:01/12/31 03:58 ID:mmNrRvwQ
見てくれてなかったら寂しいのでageますね(w

そうそう、ヒントは
「<DIV> <SPAN>にフィルタを設定する場合には
position属性でrelativeかabsoluteと、
width属性、height属性を設定する必要があります」って
書かれてたからです、と。

735 :Name_Not_Found:01/12/31 04:21 ID:wI2oT13K
>>734
可能だったんですね!!!!
今やってみましたが完璧桶でした!!
すごい感動です感謝の気持ちでイパーイです!!

>見てくれてなかったら寂しいのでage
>「<DIV> <SPAN>にフィルタを設定する場合には
>position属性でrelativeかabsoluteと、
>width属性、height属性を設定する必要があります」
わざわざageて頂いた上にヒントまでーー!!
ホントありがとうございました!
もっと勉強して精進します!!

736 :bigbrother:01/12/31 07:27 ID:cfG9Hyfa
  タイトル
 あいうえお
 あい
 あいう
という風に、
タイトルは中央、
下の3つは、タイトルの左に一文字前のところから表示されるには
どうすればいいですか?
文字の大きさを固定すればいけるかもしれませんが、
文字のサイズは%で設定していて、ブラウザから変えられるようにしています。
どのような文字サイズでも、下の3つは、タイトルの最初の文字の左に一つ前のところから表示させたいのです。
margin-leftや、border-style:solidなどを使って色々しましたが、出来ませんでした。

知っている方いらっしゃいましたら、教えてください。

737 :Name_Not_Found:01/12/31 09:44 ID:+sQCFvRN
>736
タイトルと下の文が同じ大きさなら
margin-left: 1em
で可能。

後は眠いから任せた・・・

738 :Name_Not_Found:01/12/31 09:44 ID:+sQCFvRN
追記 タイトルにマージンね。

739 :Name_Not_Found:01/12/31 12:13 ID:BLUbL063
>>736
タイトルや下の三つの文字列の長さは決まってる?
それから、下の三つは始点がタイトルの一文字前なのはいいけど、
終点はどこ? ウインドウの端?

タイトルの文字列の長さが決まってるなら下三つのwidthをそれより
2em大きくしてブロック要素をセンタリングさせればいい。
それで終点もタイトルの一文字後ろになる。

タイトルの文字列の長さも決まっていないなら、
そもそもセンタリングさせるべきかどうかも疑問。
下三つのよりもmarginなりtext-indentなりで1em下げる方がいい。

どこかの文字列の長さに自動的に併せるなんて芸当は
CSSには出来ないので期待しない様に。

740 :Name_Not_Found:01/12/31 17:48 ID:afQYkilf
なんか、他の要素の大きさとかぐらい参照出来たっていいのになあって思うよ...

741 :Name_Not_Found:01/12/31 18:25 ID:rcmCalZb
line-heightで行間指定した行に画像をつけると、行間が元に戻ってしまいます。

あいうえお      あいうえお 画像
         →  かきくけこ
かきくけこ

といった感じです。
なにか良い解決方法はありますでしょうか。

742 :Name_Not_Found:01/12/31 18:40 ID:yBOdiIEX
>741
おそらくテーブルの TD 要素で CSS を指定しているのでは?
文字列を
<SPAN STYLE="font-height:140%;"></SPAN>
のようにくくってみそ。

743 :Name_Not_Found:01/12/31 19:12 ID:K3/ODC6/
font-heightって・・・

744 :Name_Not_Found:01/12/31 19:16 ID:yF5qYvMU
>>741
表示確認したブラウザ名(とバージョン)も書いて下さい。
それがNN4なら有名なバグです。どうにもなりません。
http://www.zspc.com/documents/css2/text/lineheight.html

745 :742:01/12/31 19:27 ID:zm99z9k1
>743
やっちまった!はづかしー!

746 :Name_Not_Found:01/12/31 19:37 ID:yF5qYvMU
>>740
IE5.0以降ならば、CSS関数構文(expression)で出来るのではないかな。
cf.「DHTML Dude: さらにダイナミックに」
http://www.microsoft.com/japan/developer/workshop/default.asp
まあ結局、CSSにJScriptを組み合せたみたいなものですが。

747 :Name_Not_Found:01/12/31 19:48 ID:afQYkilf
table 要素をレイアウトに使うのは間違いだとしても、
table 的なレイアウト方法は間違っていないと思いますがどうでしょうか。

.section {
display: grid;
bin: 2 2; /* 2x2 のグリッド */
}

.section .log { slot: 0 0; } /* 親要素の (0,0) に配置 */
.section .info { slot: 1 0; } /* 親要素の (1,0) に配置 */
.section .main { slot: 0 1; } /* 親要素の (0,1) に配置 */
.section .contact { slot: 1 1; } /* 親要素の (1,1) に配置 */

+-----+--------+
|log |info |
+-----+--------+
|main |contact |
+-----+--------+

みたいなの出来るようにならんかなあ。

748 :Name_Not_Found:01/12/31 19:49 ID:afQYkilf
妄想なのに age ちまった...逝ってきます...

749 :Name_Not_Found:01/12/31 20:07 ID:Mb13cnR0
>>747
ちょっと違うかもしれないけど、
役に立つはず。
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html

750 :Name_Not_Found:01/12/31 20:07 ID:BLUbL063
>>747
trとtdに相当する要素があればdisplayでそれを指定出来るが、
今の所出来るのはMozillaだけ。

751 :Name_Not_Found:01/12/31 20:12 ID:afQYkilf
>>749
はい。
その手の float とか position を使ったレイアウトにうんざりしたので
妄想してみました。
float とか position って grid 的レイアウトに使うものじゃないですよね。

>>750
それは知りませんでした。勉強してみます。

752 :Name_Not_Found:01/12/31 21:41 ID:+2gnEbQy
Mozillaでfilter:alpha()みたいな事できませんか?
-moz-opacityが怪しいと思い,いろいろいじってみたのですが,
透明化ができませんでした。
どうしたらいいのでしょうか。

753 :741:01/12/31 23:40 ID:rcmCalZb
>>744
すみません。忘れてました・・・
今更でしょうがIE5.5です。

>>746
な、なんかむずかしそう・・・・ですが、やってみます。
ありがとうございますー。

754 :Name_Not_Found:01/12/31 23:53 ID:ePO9fDPh
>>740>>741なの? 意外。

755 :741:02/01/01 02:33 ID:C3/0YUdP
>>754
あああああー! 間違えたー!!
>>746を俺に対してのレスだと思ってしまった・・・
ホントすみません。
はずかしー。ひー。

756 :Name_Not_Found:02/01/01 03:01 ID:vb9Qps/w
-moz-* なプロパティのリストってどこにあります?

757 :Name_Not_Found:02/01/01 03:14 ID:+btljE+6
>>756
Piro氏のところに昔あったんだが。
で、webarchive漁ったらあったよ。
http://web.archive.org/web/20010620011420/www.cc-net.or.jp/~piro/tips/page/p0032.html

758 :Name_Not_Found:02/01/01 09:39 ID:mh02XTRD
あげましておめでとう(w

759 :Name_Not_Found:02/01/01 23:42 ID:3k2yDyYK
初歩的質問で恐縮。どなたか教えてください。
body{
font:small/125%;
color:#6600cc;
background-image : url(2ch.gif);
}
この際、時々ではあるがテキストに背景画が上書きされてしまう。これの対処法を。
上書きが起こる部分は上部右側。環境はIE6です。
既出ですよね。すんません。過去ログも見たんだけどちょっと分かんなくて。

760 :Name_Not_Found:02/01/02 00:44 ID:7bYKPfxb
formのselectタグをなんとかスタイルシートで
立体化を平面化にしたいのですが、出来ないのでしょうか?
フォームボタンとテキストボタンとスクロールのデザインの変え方は判っているのですが
CSS関係のサイトをあちこちに探して見ましたが、見つかりません。
どなたかご存知の方、いらっしゃいますか?
一応selectタグの背景色の指定方法は判るのですが
style="color : black; background-color : silver;"・・・かな?
(一応class=txtとしておいてまとめて書いているのですが)

しかし、borderの指定をしてもできなくて。
不可能でしょうか?

761 :Name_Not_Found:02/01/02 02:53 ID:5KAQHex1
余計な要素を追加しないで、
hr を n本の違った色の横線にするってことは出来ますかね。

そういう需要は画像ですますべき?

762 :Name_Not_Found:02/01/02 03:55 ID:j/Tdd6Rx
それ以前に、そんな線を引く意味があるかどうか。

763 :Name_Not_Found:02/01/02 11:25 ID:1rTBPjTg
>>760
Win版IEでは不可能。

764 :Name_Not_Found:02/01/02 14:40 ID:+Uc5qjit
border-topとborder-bottomで2ほーん

765 :Name_Not_Found:02/01/02 16:45 ID:BDgPeZaj
ちょっと恥ずかしいこと聞きますが、
世間一般でスタイルシートと言うと、CSSの事を指しているのですか?
なんかjavaスクリプトスタイルシートというのがあると聞いたので。

766 :Name_Not_Found:02/01/02 17:09 ID:c1Ya5AxC
>765
過去ロ(以下略

ま、一般にはCSSを指す。

767 :Name_Not_Found:02/01/02 17:19 ID:xSPYoEK6
>766
ありがとふ

768 :Name_Not_Found:02/01/02 18:28 ID:R0/c1eoY
idは「一度しか使えない」ということを聞いたんですが、それは
「idそのものが一度しか使えない」ということでしょうか?それとも
「idに使う英数字の組み合わせが一度しか使えない」ということでしょうか?

769 :Name_Not_Found:02/01/02 18:32 ID:yKlu+Wxz
ID="名前"
要素に対して名前をつけます。ただし、同一の文書中で同じ名前を重複して使うことはできません。

770 :Name_Not_Found:02/01/02 21:41 ID:GFsjgCfs
>>762
デザイン上必要だったんじゃ?

771 :Name_Not_Found:02/01/03 00:54 ID:NmUESC6S
>>759
>font:small/125%;
……?
font-size:smallの誤記かな。

772 :Name_Not_Found:02/01/03 01:04 ID:Upyupbhg
>>760
Netscape6.2だったらできたような気もする。
selectへのスタイル指定で下向き三角のボタン部分の表示を、optionへのスタイル指定でドロップダウンロストの背景を変更できる。
(もし6.2でできなくても、次期バージョンでは確実にできる。)

>>761
-moz-border-top-colors: white red black;
のような感じに書けば、外側から1pxごとに色を変えられる。
ただし最新のMozillaのみ対応。

773 :Name_Not_Found:02/01/03 03:36 ID:9lmvrUjh
>>771
読めやゴルァ!
ttp://www.w3.org/TR/REC-CSS2/fonts.html#font-shorthand

ただし、この書き方の場合font-familyが省略不可になってるから、>>759
そこが間違い。互換モードじゃないとはじかれる可能性も

774 :Name_Not_Found:02/01/03 07:19 ID:gKIAkCyZ
>>772
-moz-* って、CSS3 で実装されるかもしれない機能の先取りですよね?
将来的には border-top-colors 的なのが導入される可能性があるってことですか?

775 :Name_Not_Found:02/01/03 09:22 ID:gKIAkCyZ
<input class="button" type="submit" value="ok" accesskey="o" />

とかやっといて、ボタンのラベルの横に accesskey を表示しようと思って

.button { content: "(" attr(accesskey) ")"; text-decoration: underline; }

ってやったんですが、ボタンのラベルの横でなくボタンの横に出ちゃいました。

ラベルの横に出すにはどうしたらいいんでしょう?
div で囲むぐらいしか思いつかない...

776 :759:02/01/03 12:56 ID:qsy/X6l7
>>773
どうもです。font-familyを使いたく無かったんで、まとめ指定をやめました。
でも症状改善せず。他人のサイトでも同じ症状をみたことあるんだけど、バグ?

777 :Name_Not_Found:02/01/04 01:23 ID:wHLquHB5
>>759>>776
こちらへどうぞ。

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

778 :Name_Not_Found:02/01/04 20:58 ID:iPwtrgjH
>>759
うちでもそれあるよ。float使ってるんじゃない?

うちは全ページの隅に同じ背景入れてるんだけど、
float使ったページのみ画像がテキストにカブってる。
IEはfloatに弱くて関係ないとこにも不具合が出るから、
これもそうなんじゃないかと思う。

779 :759:02/01/04 23:45 ID:Lea4B9wJ
>>778
ありがとう。
でもfroat使ってないんだよね。
バグにしてjは簡易なタグなんで、こちらで質問させて頂いた。
どうなんでしょう、同じ症状の方っていらっっしゃいませんか?

780 :Name_Not_Found:02/01/04 23:49 ID:xaJZpgye
>>774
詳しくはCSS3の仕様(策定中)を見ないと分かんないけど、
一概に「-moz-*はCSS3の先取り」とは言い切れない。

781 :Name_Not_Found:02/01/05 00:38 ID:7XUU8Swz
画像とテキストを違うブロックにしてみたら。

782 :778:02/01/05 01:48 ID:XMY7jmhg
>>779
改めて確認してみたら、以前その現象が起こってた2ページのうち、
片方では再現しなくなってた。
floatは依然使ってるから原因は別にあるみたいね。スマソ
シートいじったからだと思うんだけど、どこをどういじったか忘れちった。

>>781
それが別ブロックなんだわ。うちは。

783 :質問:02/01/05 03:34 ID:aDz4vMBw
画面四隅をぐるっと囲むように色or画像を入れたいのですが、
フレームを使ってやってみたところ、NN4.7ではどうしても
誤差が生じてずれてしまいます。(IEではOK)
画面サイズに応じて伸び縮みしなくてもいいので、CSSで
カチっと表示させる適当な方法があれば教えてください。
ちなみに枠の中身は別ページを表示させたいのでテーブルは
使えません。(インフレーム機能はネスケはダメですよね?)

784 :Name_Not_Found:02/01/05 04:24 ID:MWXbRwoZ
>>783
無理だと思う。
そもそもNN4.7をCSSでどうにかしようと思うのは諸刃の剣ではないの?

785 :Name_Not_Found:02/01/05 21:57 ID:eE0NvMlo
>>783
色でいいのなら、囲みたい要素に
border:100px solid red;
とかで、どう?
或いは親要素にpadding:100px;background-image:url(img.gif);と指定して
広めに取ったパディング領域に画像を配置。で、そのパディングに囲まれる領域には
IDでも振って#id{background-image:none;}とか。

786 :785:02/01/05 21:59 ID:eE0NvMlo
あ、ごめん。
「枠の中身は別ページを表示させたい」のか。
うーん、JavaScript(DHTML)で何とかできない?

787 :Name_Not_Found:02/01/06 02:07 ID:Nj1M2Kxc
>>784
>>786
やっぱむずかしいですよね・・・お手間とらせました。m(_ _)m

788 :Name_Not_Found:02/01/06 21:23 ID:I1r2pFSQ
移行しました。

スクロールしても動かない背景ってできますよね。
それみたいにスクロールしても動かない文字ってできますか?

789 :Name_Not_Found:02/01/06 21:52 ID:yhEKHhs1
div { display: fiexed; } だっけ?
(綴り合ってるか知らん)
けど、これはまだ実装に問題多いからオススメできない。

790 :Name_Not_Found:02/01/06 21:59 ID:I1r2pFSQ
div { display: fixed; }
(多分綴りこう)

ありがとうございます!
いろいろ試してみます。

791 :Name_Not_Found:02/01/06 22:15 ID:SQFSRmxn
>>789-790
いや、position:fixed;でしょ。WinIEが実装してないけど、
position:absolute;とoverflowプロパティの組合せで擬似フレームが出来るから、
応用すれば、背景に文字を固定することも可能かな。

792 :Name_Not_Found:02/01/06 22:15 ID:1QcbgdXZ
>>789-790
そんなむちゃくちゃな知識を……試すんではなく、調べろ。
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
このposition:fixedにはIEが対応してない。
そこで留めたい要素には何もせず、スクロールさせたい方をdiv等で括って
丁度iframeと同じ様に設定する手もある。

793 :Name_Not_Found:02/01/06 23:16 ID:SQFSRmxn
>>788-790
ここの真似するよろし。(新年限定バージョンみたいだからお早目に)
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html

794 :Name_Not_Found:02/01/07 05:33 ID:FrZ2fptw
>>791-792
あ、すまん。うろ覚えで書いてもた。
ID:I1r2pFSQさん、ゴメンナサイ。

795 :Name_Not_Found:02/01/07 08:59 ID:/aSoj742
>>788です。
ありがとう(^◇^;)(^◇^;)

796 :Name_Not_Found:02/01/07 11:57 ID:+ftvg6CU
>>793
そこのソースだけど……
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>

これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。

797 ::02/01/07 12:10 ID:T3Z0B9qV
がいしゅつだったらごめんなさい。

行間指定するときは

layout-grid-line:

使えば良いのですか?

798 :Name_Not_Found:02/01/07 12:19 ID:4ij34HUe
>>797
なんじゃそりゃ。普通 line-height: じゃないのか?

799 :Name_Not_Found:02/01/07 12:22 ID:+ftvg6CU
>>797
こちらをお読み下さい。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#line-height
http://east.portland.ne.jp/~sigekazu/css/international.htm

800 :Name_Not_Found:02/01/07 16:28 ID:flexzaBJ
style="res: 800; get: zuzaaaa;"

801 :Name_Not_Found:02/01/07 18:26 ID:qLnZTmix
800{display:none)

802 :Name_Not_Found:02/01/07 19:46 ID:NuK4/n6a
>>796
>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。

803 :Name_Not_Found:02/01/08 02:59 ID:J7JFfRRN
要素を増やすことって出来ますか?

<h1 id="a112">ほげりすぎ - <cite>中田さんより</cite></h1>
<ul class="navigation">
<li><a href="#a111">前の記事</a></li>
<li><a href="#a113">次の記事</a></li>
</ul>
<p>
もー、ほげほげほげほげうるさいったらないんですよ。
</p>

みたいなのがあったとして、
<ul class="navigation">..</ul> を、 p 要素の後ろにも表示したいんです。
これって CSS レベルでの対処は可能でしょうか。

ナビゲーション関係は文章構造の範疇なのかなぁ。

804 :Name_Not_Found:02/01/08 04:52 ID:31lH4Aa5
CSSでは無理だけどXSLならできるのでは。

805 :Name_Not_Found:02/01/08 08:06 ID:J7JFfRRN
クラスの派生がしたい....

.section { border: 1px solid black; }

.update { border: 1px solid black; font-size: 0.9em; }

この程度だったら逐一書換えればいいけどさ。
プロパティが増えてくると同期が面倒。
とりあえず、共通部分だけまとめてみる。

.section, .update { border: 1px solid black; }

.update { font-size: 0.9em; }

この方法は、.section が別の場所で定義されてたりすると破綻しちゃう。
ぬうん。

.section { border: 1px solid black; }

.section::.update { font-size: 0.9em; }

とかやりてー。

806 :Name_Not_Found:02/01/08 11:07 ID:tQOYQU+e
>>805
"派生" って概念とは違うと思うけど
class 属性に複数のクラス名を記述できること、知ってる?

807 :Name_Not_Found:02/01/08 11:47 ID:J7JFfRRN
>>806
なんですとー?
<div class="section update">...</div>
みたいなこと出来るんですか?

Mozilla で試したら上手くいった...知らなかった....
IE とかはどうなんでしょう?

何にしても、感謝ですー。

808 :Name_Not_Found:02/01/08 15:15 ID:M06DXjHt
>>807
IE〜4、NC4は未対応らしい。

809 :名無しさん@名前キボンヌ:02/01/08 17:57 ID:Ft9r8HvI
例えば あ の文字は全て <font color=red> で表示するとかできますか?
(説明ヘタですね・・・(^◇^;))

810 :Name_Not_Found:02/01/08 18:03 ID:cpwgbfVT
あ の文字を全てマークアップし
適切なクラス名をつける必要があるでしょう。

811 :名無しさん@名前キボンヌ:02/01/08 18:07 ID:Ft9r8HvI
やっぱマークアップしなきゃ無理ですか・・ありがとうございました。

812 :Name_Not_Found:02/01/08 21:01 ID:O26U3dTc
>>802
>>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。

MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。

813 ::02/01/08 23:34 ID:UyeLpES0
>>798>>799
ありがとうございます。
勘違いしてました。

814 :Name_Not_Found:02/01/09 00:08 ID:LQ37kbnz
<TABLE width=400 align="center">
<TR><TD align="right">あいうえお</TD></TR>
</TABLE>

「センタリングの幅400の右端」に表示したくてこんなことをやってるんですが、
スタイルシートでの表示方法があったら教えてください。

815 :Name_Not_Found:02/01/09 00:55 ID:hOihItB0
<div style="text-align:center;">
<div style="width:400px;text-align:right;">あいうえお</div>
</div>
文法的に正しいかどうかは別にして、とりあえずどうでしょう?

816 :Name_Not_Found:02/01/09 05:11 ID:FjA20C4h
<STYLE type="text/css">
<!--
A{
text-decoration : none;
cursor : default;
}
A:HOVER{
color :ここに文字色;
text-decoration : none;
cursor : default;
visibility : visible;
float : none;
clear : none;
position : relative;
top : 2pt;
left : 2pt;
}
-->
</STYLE>
お聞きしたいのですが、↑上のタグをつかって、リンクの上にカーソルを置くと
字や画像が少しズレて、さもへこんだように見えるようにしたのですが、
画像が動かないのです。(字はちゃんとへこんだように見える)

でも、例えば外部から直リンしたバナーなどの画像はちゃんとへこんだように見えます。
この違いはどういうことなのでしょうか?

817 :Name_Not_Found:02/01/09 05:47 ID:aeBRwAp/
Win2kで、スタイルシートなどでのフォント指定が効かない
のは、何とかなりませんか?例えばcursiveフォントとか。
普通のゴシックみたいになってしまうんですが・・。

818 :Name_Not_Found:02/01/09 12:19 ID:wp7d7nrX
>>816
無駄が多すぎ。

A:HOVER{
color :ここに文字色;
position : relative;
top : 1;
left : 1;
}

819 :Name_Not_Found:02/01/09 14:05 ID:vevw6H+5
<html>
<head>
<style type="text/css">
<!--
.note {
text-indent: 1em;
}
-->
</style>
</head>
<body>
<div class="note">
<p>段落1</p>
<p>段落2</p>
段落じゃないけど
</div>
</body>
</html>

この場合、最後の「段落じゃないけど」のところが、IE6ではインデントされるのに
N6ではされません。text-indentってブロック要素にしか有効じゃないと思った
のですが、クラス指定しているdivがブロック要素だから中のものに対してIE6だと
有効になってしまうのかな?

820 :814:02/01/09 17:04 ID:mFB18ZIY
>>815
TABLEレイアウトから卒業したいので、それで行きたいと思います。
ありがとうございました。

821 :Name_Not_Found:02/01/09 18:33 ID:U8IV2Oxn
>>819
答えられなくて申し訳ないのだけど、
あなたは、IE と Netscape のどちらの描画を望んでいるの?

822 :819:02/01/09 19:08 ID:vevw6H+5
>>821
この書き方だとIE6の表示を望んでいるように取れますね。
私としては、N6の方が正しい解釈なのかなと思っているの
ですが、どうなんでしょう?
描画を望むというのではなく、どちらかの実装的な不具合
なのか、仕様書的にはどっちの表示もありなのかという
部分でのお話です。

どちらかの実装的な不具合ならば、ゴルァって言いたいん
ですけどね。

823 :Name_Not_Found:02/01/09 21:00 ID:sq7yO034
>>822
Netscape 6の方が正しい解釈だと思ふ。

824 :817:02/01/09 22:54 ID:VVvTvh99
2度目の放置決定な予感・・板違いっすか?

825 :Name_Not_Found:02/01/10 00:54 ID:3vZSHmwt
>817
そんなフォント、オイラのPCには入ってない。
フォント名は大文字・小文字区別するんじゃなかったっけ?
大抵、頭文字は大文字だと思うけど、どうよ?

826 :Name_Not_Found:02/01/10 02:35 ID:jj+UruCs
>>825
仕様書読め。

827 :Name_Not_Found:02/01/10 07:15 ID:gtJgaG6P
cursiveはフォントファミリー名

828 :名無しさん ◆MZ2000oY :02/01/10 14:00 ID:rzK8YWF0
・「ス切リボ」は便利そうだけど Moon Browser じゃ使えない〜
・すっきり風スタイルシートチェンジャは別窓とかプロンプトが
出るのがちょっとヤだ〜
・ ieex のスタイルシート切り替え機能って腐ってるじゃん

という自分の不満を満足させるために(ワラ 、 ieex を更新しました。
右クリックから「スタイルシートの切り替え」を実行するたびに、代替
スタイルシートを順次適用してゆきます。
ちょっとスクリプトがごちゃごちゃになってしまったのと、あまりたく
さんのケースで実験していないので不具合があるかもしれません。
人柱になってくださるかたを募集中しています。

http://www.kohshi.org/ieex/ の ieex 0.10 alpha 5 です。
なんかあったらこのスレかうちの掲示板に連絡ください〜 宣伝スマソ

829 :名無しさん ◆MZ2000oY :02/01/10 14:07 ID:rzK8YWF0
Outsider Reflex で切り替えがぜんぜんできないのはいまのところ
仕様です(;´Д`)

830 :Name_Not_Found:02/01/10 14:49 ID:eeBDtrj2
CSSを見られるのがどうしても嫌なので
外部ファイルとして読み込みたいのですが
どうしたらよいのでしょうか?

831 :Name_Not_Found:02/01/10 14:59 ID:QAxN9UXE
>>830
外部ファイルにしても
リンクすることになるので
アドレスがバレで見られちゃいます。

832 :名無しさん ◆MZ2000oY :02/01/10 15:21 ID:rzK8YWF0
「募集中しています」… 電波か漏れは… 逝ってきます

833 :Name_Not_Found:02/01/10 18:30 ID:nyLErBBF
え?でもどこを見ればバレるんですか?
例えば他のサイトを見ても</.***>  (*は適当です)
みたいに書いてあってバレないと思うのですが。

834 :Name_Not_Found:02/01/10 18:36 ID:Z78xVuFd
JavaScriptはクライアントサイドで動いている以上、ブラウザから見えないと不都合が起こる気がする。

835 :Name_Not_Found:02/01/10 18:37 ID:Z78xVuFd
>>834
失敗。CSSに読み替えて。
鬱だ。ゴハン煎ってきます。

836 :Name_Not_Found:02/01/10 18:47 ID:yYkIAh7P
>>833
<LINK rel="stylesheet" type="text/css" href="../mona.css">

<HEAD>内に↑こういうのない?
っていうか、これが外部リンクのやり方なんだけどさ。
あと、その例えは意味不明。

837 :Name_Not_Found:02/01/10 18:49 ID:vvyixr1r
>>833
たとえば
http://www.bakabakka.com/
というサイトがあったとして、そのサイトのトップページで
外部CSSが使われていたとする。
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
で、http://www.bakabakka.com/のあとにstyle.cssをつけて
http://www.bakabakka.com/style.css
にアクセスすると、見えちゃうんだなこれが。
あと、IEで「名前を付けて保存」するときに
ファイルの種類を「Webページ、完全」にしておくと、
リンクされているCSSファイルごとローカルに保存できるので
オフラインでじっくり読んじゃったりもできます。

838 :Name_Not_Found:02/01/10 19:08 ID:Z78xVuFd
じゃあ、>>833はパスの基本というかパスのこと全くわかってなかったことで。
いいですか?

839 :Name_Not_Found:02/01/10 19:13 ID:Wn2pdzmV
ん、次の質問はこちら。
↓↓↓↓↓↓↓↓↓

840 :祝、初書き込み:02/01/10 19:17 ID:FYeU6j6b
恐る恐る2chに初めて書き込みします。
<TABLE STYLE="table-layout:fixed">
:
</TABLE>
これを書くと表示時間が早くなる様なのですが、
外部CSSに、
TABLE { table-layout: fixed; }
と記述して全てに適用させると、レイアウトが崩れてしまいます。
一つ一つサイズ指定をしなければ駄目なのでしょうか?
(初心者ですが宜しくお願いします)

841 :840:02/01/10 19:50 ID:FYeU6j6b
あっ、質問はageるんですよね・・・

842 :Name_Not_Found:02/01/10 20:21 ID:JTdmujkG
>>840
最近のパソコンのCPUパワーからいけば、
表示時間はたいして変わらない気がする。
よっぽど長大なテーブルを作っているのなら別だけど。

table-layout:fixedを使うときは、
<TABLE>
<COL WIDTH="100"><COL WIDTH="300"><COL WIDTH="200">
のように列幅を指定する。

843 :Name_Not_Found:02/01/10 20:30 ID:/QT0uD87
>>840
と言うか、サイズを指定しないと自動テーブルレイアウトアルゴリズム(table-layout: auto)になるのでは。
http://www.w3.org/TR/1998/REC-CSS2-19980512/tables.html#fixed-table-layout
> The table's width may be specified explicitly with the 'width' property.
> A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm.

844 :Name_Not_Found:02/01/10 20:36 ID:v5OVjPFC
サイズ指定しないと
IEは勝手にtable幅100%にするよ。

845 :817:02/01/10 23:23 ID:zTptX82x
ダメか・・これはWin2kだけの症状なのかな?
前使ってたWin98SEではちゃんと認識されたんだけどな・・。
何でcursive使うわけ?って言われればそれまでなんですが(藁

846 :Name_Not_Found:02/01/10 23:50 ID:g+BbptQw
>>845
>>817の質問の仕方がまづいからでは。
そもそも表示確認したブラウザの名前とバージョンは?
指定は一般フォントファミリーだけ指定してるの?
(body{font-family:cursive}とか)
それとも特定のフォント・ファミリーでもなのか?
(body{font-famiy:'MS P明朝',serif})
……等々、もっと具体的に状況を記述してくれないと応答できません。

あと、font-family:sans-serif;だけだと、却ってWinIE5〜で弊害がありますよ。
http://www.microsoft.com/japan/support/kb/articles/J058/3/67.asp
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html#level4

847 :Name_Not_Found:02/01/11 01:24 ID:duSZhUd8
background: #fff url(hoge.jpg) no-repeat top 100px;
は誤った書式なのでしょうか?
N6だと何も表示されません。IE6は大丈夫のようです。

848 :Name_Not_Found:02/01/11 01:30 ID:mviFhGCc
>>847
同様の書式でここ↓の【使用例】はNN6.2でちゃんと見えてますが?
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background

849 :Name_Not_Found:02/01/11 01:43 ID:RteBlg0T
>>847
100px top と書いてみてはどうですか。

850 :Name_Not_Found:02/01/11 01:46 ID:duSZhUd8
>>848
top right 等は大丈夫でした。
px指定にするとダメです。

851 :Name_Not_Found:02/01/11 01:47 ID:duSZhUd8
>>849
ダメでした。

852 :Name_Not_Found:02/01/11 01:54 ID:EisS/Knr
>>850
指定した要素の幅は100px以上ありますか?

これはバグかもしれませんが、こんな例があります。
body{
background-image:url(test.gif);
background-repeat:no-repeat;
background-position:600px top;
}
<body>
<h1>見出し</h1>
<div>
短い文章
</div>
</body>

これで、ブラウザのウィンドウ幅を600px以下で視ると背景画像は現れず、
600px以上にして閲覧された場合のみ背景画像が表示されるはずです。
ところが、WinIE6やOpera6では意図通りになりますが、NN6では
ウィンドウ幅に拘らず、背景画像は現れません。

853 :Name_Not_Found:02/01/11 02:00 ID:duSZhUd8
>>852
body直下のdiv要素です。幅は100px以上あります。
バグかもしれません。

854 :巨額詐欺:02/01/11 02:03 ID:ASJJA4dU

巨額詐欺の疑いのある、グローバリーについて

掲示板を拝見されてるの皆様、新年あけましておめでとうございます。
掲示板の趣旨とは直接関係ない話で申し訳ないのですが、この世の中では許せない事があります。

http://www.max.hi-ho.ne.jp/sakimono/index.htm

この会社はありもしない儲け話をでっち上げ、巧みに客の財産を聞き出し、全財産を巻き上げます。

2002年になりましたが、一向に改善する気配すらなく、悪質化は進む一方です。
この会社の営業は世間の皆様の迷惑になっています。

それだけではなく、殺人事件なども実際に発生し、新聞ザタになっています。

みなさんもこちらの掲示板に投稿し、悪徳会社に騙される不幸な人が増えないようご協力お願いしま
す。


http://messages.yahoo.co.jp/bbs?action=q&board=8745

また、この書き込みを見て賛同頂ける方はこの内容をコピーしていろんな掲示板に書き込みをお願いします。


           

855 :852:02/01/11 02:05 ID:EisS/Knr
因みに、確か>>852の例は、一括指定でpxをemにしても表示されませんでした。

856 :Name_Not_Found:02/01/11 02:05 ID:ML1nbygP
>>847
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position
> 'background-position'
> Value: [ [<percentage> | <length> ] {1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

仕様ではlength(pxやem等)とtop等を混ぜて使ってはダメ。
よってNetscape6の動作は正しいと思われ。

つーか
background: #fff url(hoge.jpg) no-repeat 0 100px;
じゃだめなの?>>847

857 :Name_Not_Found:02/01/11 02:35 ID:duSZhUd8
>>856
ありがとうございます!
0 100px で上手くいきました。

858 :Name_Not_Found:02/01/11 02:56 ID:7EdWoKmp
ブラウザ標準の色を使う事ってできるんでしょうか?

例えば、body {color:#000000}の状態で、
DIVタグの中の文章をブラウザ標準の色(たいていは黒だけど)で表示したりできるんでしょうか?

859 :Name_Not_Found:02/01/11 03:04 ID:ZgtQa6oP
>>858
できない。
標準色はユーザーによって違うから依存すべきではない。

860 :Name_Not_Found:02/01/11 03:10 ID:EisS/Knr
>>858
ブラウザってよりもOSのGUI環境に合せたシステム色なら指定できるけど。
http://www.y-adagio.com/public/standards/tr_css2/ui.html#system-colors
つまり、ユーザーの好みに合せた指定ってことになりますね。

861 :860:02/01/11 03:13 ID:EisS/Knr
下記の「システム色見本」を視ればそのブラウザが対応してるかどうかわかります。
http://openlab.ring.gr.jp/k16/htmllint/colors.html

862 :840:02/01/11 07:39 ID:XM5YGvwo
>>842; >>843; >>844; さん有り難う御座いました。
というか、このスレを見て勉強し
テーブルレイアウト自体から卒業した方が良いですよね。(笑)

とりあえず今はIE6でしか確認できないので、
ネスケやマックの事とかまで考えると、混乱してきて大変です。

863 :840:02/01/11 07:45 ID:XM5YGvwo
あっ、ID:XM5YGvwo に変わってる。
IDって変わるんですね・・・。
あそこが???になってる人は一体どうやってるんですか?

864 :Name_Not_Found:02/01/11 10:35 ID:Bta36zmq
>>863
メールアドレス欄に何か書いてあればなります。<???
でもこの板はいまのところ強制IDなので、なりません。
IDは日付が変わったり接続しなおしてIPが変わったりすれば変わります。
2ちゃんねるのことでわからないことがあったら、
↓を見るといいです。
「2ch初心者FAQ」
http://www.skipup.com/~niwatori/
「2典」
http://freezone.kakiko.com/jiten/index.html
あとは初心者板で訊くとか。
http://cheese.2ch.net/qa/

865 :Name_Not_Found:02/01/11 19:49 ID:RJLfdojW
CSS で

.fbox {
border: 1px solid black;
margin: 0;
padding: .2em;
}

のように書き、HTML で

<div class="fbox">

</div>
<div class="fbox">
<P>中</P>
</div>
<div class="fbox">

</div>

とすると、IE 4 以降では中央のボックスの上下に <P> によるスキマができます。Opera 6、Mozilla 0.9.7 ではボックス内にスキマが空くので 3 つのボックスがくっついて見えます。

IE でこのスキマを生じさせないようにするにはどうすればいいのでしょうか? 悪あがきに

p {
margin: 0;
}

としてみたものの、<P> 以外の要素についても同じことを書くわけにもいかず、参っています。

866 :&gt;&gt;865:02/01/11 19:54 ID:o/M/jg4W
.fbox *
{
margin: 0;
}
でいいのでは?

867 :Name_Not_Found:02/01/11 19:56 ID:o/M/jg4W
ミスった……。
>>866>>865への解答。

868 :865:02/01/11 20:07 ID:RJLfdojW
<a href=866 target=_blank>>>866</a>

それも考えたのですが、そうすると <ul> や <blockquote>などの表示が悲惨になってしまいます。

せっかく回答をくださったのにすみません。

869 :865:02/01/11 20:09 ID:RJLfdojW

う、みっともない。見苦しくて失礼。

870 :Name_Not_Found:02/01/11 20:21 ID:CtsdvOuF
>865
UL等を先に記述して最後に>>866さんのを書けば
桶かもしれない。(未確認)

871 :名無しさん:02/01/11 20:26 ID:Sj/M5p8t
DIV とかを2個使うにはどうしたらいいのでしょうか?

<style TYPE="text/css">
<!--
DIV{margin-top : 5pt;
margin-right : 5pt;}
DIV2{margin-bottom : 10pt;
margin-left : 10pt;}
-->
</style>

DIV2にしたらできるかなぁ・・
とか思ってやってみてもやっぱり無理でした・・(当たり前か・・。)
どうすればよいのでしょうか?

872 :Name_Not_Found:02/01/11 20:45 ID:8+oi53Pa
>>871 classを使え。
classが何かって? 調べろ。

873 :Name_Not_Found:02/01/11 20:47 ID:2rymCieg
みなさん-moz-*なプロパティって
どこで情報を仕入れてるですか?

自分でWeb上をあさってみたものの
某P氏のサイトにあったものには
遠く及ばないのですが。

874 :Name_Not_Found:02/01/11 21:23 ID:93n8VRdv
>>873
多分ここが一番詳しいんでないかと。
http://www.xulplanet.com/tutorials/xultu/elemref/ref_StyleProperties.html

875 :Name_Not_Found:02/01/12 12:43 ID:Sp8YVqBs
スクロールバーの色を変えるプロパティは
W3Cが定めるCSSの範囲では、認められていないと
聞きましたが本当?

876 :Name_Not_Found:02/01/12 12:54 ID:0Uoeg1Ih
>>875
WinIE5.5以降の独自拡張です。

877 :Name_Not_Found:02/01/12 12:57 ID:+xL0QDvZ
N6のユーザCSSってどこで設定するんでしょう?

878 :Name_Not_Found:02/01/12 13:18 ID:OQYd4pSB
>>877
プロファイルディレクトリの中の \chrome\userContent.css に記述する。
プロファイルディレクトリの場所については
http://pc.2ch.net/test/read.cgi/software/996198735/908 を参照。

879 :873:02/01/12 15:15 ID:bbHY6coi
>>874
ありがとう。
がんばって訳してみるっす。

880 :質問です:02/01/12 16:20 ID:bBgfeaKP
font-familyとfont-sizeを組み合わせで指定する方法はありますか?

たとえば、
font-family:Arial;font-size:100%が第一志望として、
このフォントがない場合は、
font-family:Times New Roman;font-size:110%
を指定するような?
フォントってモノによってサイズが違うから、希望がない場合は、
代替フォントをサイズ指定を含めて指定したいのです。。。

881 :Name_Not_Found:02/01/12 16:52 ID:JvymBIxC
>>880
まさにそのために
font-size-adjustがあるけど、
対応してるUAは皆無だと思われ。

882 :880です:02/01/12 17:23 ID:vZ9AJKdD
>>881
そうですか。。。(泣)
ジャバスクリプトで相手のパソコンがフォント持ってるか
調べる方法はありますか?

883 :Name_Not_Found:02/01/12 18:01 ID:GGRnpQd+
>>882
あるっちゃーあるよ

884 :880です:02/01/12 23:58 ID:pqEnQCI3
>>883
おおお、その方法はいかに?
とってもむずかしいのですか?
ブラウザやOS判別するみたいに簡単なのですか?
でも、、、
あんまむずかしいとできそうにないや(また泣く)

885 :Name_Not_Found:02/01/13 02:41 ID:007dX70N
これってどうよ
http://www.geocities.co.jp/HeartLand-Oak/8031/Lunar/Lunar.html

886 :Name_Not_Found:02/01/13 02:47 ID:m39rWuF4
なんか根本的なところで CSS の使い方を間違ってる気がするサイトだな。
あと NS って何よ。

887 :Name_Not_Found:02/01/13 03:14 ID:MJja3X41
>>884
"EnumFontFamiliesEx"で検索。

888 :Name_Not_Found:02/01/13 03:28 ID:EiBia7CG
>>886
わかってんだろーけど、一応こたえるよ。
NetScape=ネスケ。アメリカではこう略す。

889 :Name_Not_Found:02/01/13 03:31 ID:m39rWuF4
>アメリカでは
あ、そーなんスか。勉強になりました。

890 :880です:02/01/13 14:14 ID:mQ5UobjT
>>884
ありがとうございます!
でもこれってVBですか。。。?
むずかしそうです(泣)
でもがんばって勉強してみます。

891 :Name_Not_Found:02/01/13 14:20 ID:umghksbf
>>890
+ JavaScript の質問用スレッド vol.7 +
http://pc.2ch.net/test/read.cgi/hp/1010823511/9-13

892 :Name_Not_Found:02/01/13 21:43 ID:ewi3vR8g
>>885
全体的になんか、わかってない感がただよってるんだよな。
ソフトの方は先を考えて作ってないというか。

893 :CSS初心者:02/01/13 22:19 ID:L9hTJyPh
フォントの設定について教えて欲しいのですが、
全体的にMacではフォントサイズ12、
Winsowsでは「小」を前提にレイアウトを組んでいます。

でもIEでは「小」はデフォじゃないですよね?
これを強制的に「小」にするにはどうしたらいいのでしょう?

CSSスタイル定義で
「h4」に再定義してフォントを「小」として
ページ全体に「h4」をかぶせたのですがダメでした。

こういうやり方ではないの?

894 :Name_Not_Found:02/01/13 22:30 ID:zXhj6w13
>>893
ユーザーに小さいフォントサイズを強制すんな。
h4を全体に被せんな。見出しに使え見出しに。
フォントを「小」とした、って、一体何やったの?
h4 { font-size: small } か?

ページ全体のフォントサイズを指定したいならbodyだ。例えば
body { font-size: x-small }
ここで重要なのはブラウザで自由にフォントサイズを変えられる様に
em、%、あるいはlarge等キーワード指定してやる事。
ただし、おすすめは%。

895 :Name_Not_Found:02/01/13 22:32 ID:DequuYlm
>>893
>ページ全体に「h4」をかぶせたのですが
んな無茶苦茶な。
CSSの前にHTMLの書き方を勉強した方がよさげ。

あと、小さい文字サイズでの固定指定はよろしくない。
body{font-size:100%}がよい。下記参照。
 http://pc.2ch.net/test/read.cgi/hp/1004167821/l50
 http://dfj.cool.ne.jp/html/fontsize.html

896 :893:02/01/14 00:12 ID:m5AQCoR+
さっそくのレスさんきゅ〜です。

たしかにフォントサイズを強制するのは迷惑という話を聞いていたので
「フォントサイズ小で最適化してます」みたいな
コメントだけで終わらせることも考えてますが・・・。

最終的にはMacな人はフォントサイズ12、
Winの人は、デスクトップの設定でフォントサイズ9くらいで見てもらいたいな〜と思ってるのですが
フォントサイズをごちゃごちゃ考えても
一長一短でキリがないような気がするので
それに影響されないレイアウトを考えろってことですかねぇ。

897 :Name_Not_Found:02/01/14 00:29 ID:D6/EJSn5
>フォントサイズをごちゃごちゃ考えても
>一長一短でキリがないような気がするので
>それに影響されないレイアウトを考えろってことですかねぇ。

そ。

898 :Name_Not_Found:02/01/14 03:37 ID:u9WrhIq9
>>796 >>802 >>812
>>>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
>>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。
>MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。

↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
どうなってるの? ブラウザの問題ではなかったのかな。

899 :Name_Not_Found:02/01/14 03:57 ID:+qT9BreY
>>896
こういうスレもあるぞ

なんで字が小さいんだ?
http://pc.2ch.net/test/read.cgi/hp/1004167821/

900 :Name_Not_Found:02/01/14 11:42 ID:n2Q9aM91
900!!

901 :Name_Not_Found:02/01/14 13:00 ID:+Js0lMeJ
>>898
>↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
>http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
>でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
>どうなってるの? ブラウザの問題ではなかったのかな。
変わっているよ。

<DIV CLASS="center" STYLE="font-size: 80mm; line-height: 110mm; margin-bottom: -440mm; color: #FFCCCC">
<SPAN>謹<BR>賀<BR>新<BR>年</SPAN></DIV>

font-sizeの4倍じゃなく、line-heightの4倍margin-bottomをマイナスにしている。
異常があるように見えたのは、デフォルトのline-heightの取り方がブラウザによって
違っているからじゃないかな。

902 :898:02/01/14 15:43 ID:5jNlNJiq
>>901
あれ、ソース変ってる。表示も少し変化した!
昨晩見た時は下記の通りだったのに。
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>

903 :Name_Not_Found:02/01/14 16:21 ID:daRtzNtg
<hr>を左に位置させたいんだけど
hr {
align: left;
width: 50%;
}
で、上手くいかないんです。
助けてくらはい。

904 :Name_Not_Found:02/01/14 16:24 ID:oa/qDpeR
align なんて無いんじゃ・・・・

hr{
width:50%;
margin-left:0;
margin-right:auto;
}

905 :Name_Not_Found:02/01/14 16:29 ID:daRtzNtg
>>904
ども。
でも上手くいかない…なんでだろ?

906 :Name_Not_Found:02/01/14 16:35 ID:5jNlNJiq
>>904-905
hr{text-align:left}を追加してみ。

907 :Name_Not_Found:02/01/14 16:43 ID:daRtzNtg
>>906
うぉう出来た。ありがと。

908 :Name_Not_Found:02/01/14 21:24 ID:9uXNLIjQ
DreamWeaverでテーブルのボーダーを指定したんですが、NS6.2とIE5で見た目が違うんですが、どうしたらいいのでしょう?

tdの定義>ボーダー>左右上下 1ピクセル カラー#CCCCCC

とやるのですが、この状態だとNSできちんと見えるのですが、IEだと何も見えません。

ちなみにMac。

HTML初心者なので、的はずれな質問かも知れませんが、どなたか教えて下さい。

薄い色の四角い枠でテキスト囲みたいだけなんですが、やり方自体違うのかな?

909 :Name_Not_Found:02/01/14 22:08 ID:shssQHkK
>>902
ここはヲチ板じゃないんだから、そのサイトがいつ更新されたかは
関係ないよ。
もともとそのサイトが話に出たのは、背景の文字を固定したい、という
ことだったよね。"position: fixed"を加えれば、一応、対応している
ブラウザでは希望は満たされそうだ。
ただ、縦方向の位置合わせだけど、line-height × 行数だけmargin-bottomを
マイナスにするというやり方は、行数があらかじめわかっていないと
使えないんじゃないかな。そのサイトの場合は「謹賀新年」を一字一行に
分けているので、4行ということがわかっているけれど、一般性は
ないよね。

>>908
スレ違い
http://pc.2ch.net/test/read.cgi/hp/1007610142/l50

910 :Name_Not_Found:02/01/14 22:09 ID:eRxCwZuK
overflowだけど、visible、hidden、auto、scroll …まだあったっけ?
これらってie5でも全部機能します?
ie6にしてしまい自分では確認できんので教えてください

911 :Name_Not_Found:02/01/14 22:10 ID:Sa9MhKtL
ありがとう!

912 :Name_Not_Found:02/01/14 22:14 ID:3meOvflL
>910
visibleってデフォルトのハズなんだけど、
指定無しでは縦スクロールバーは常に見えてるが
visibleを指定しても overflow-y:auto; のように解釈されてるような・・・。

当方、Win98SE IE5.5SP2

913 :Name_Not_Found:02/01/14 22:17 ID:LTJ0MbW9
>>908
この野郎!css使うな呆け!W3C信者のお仲間入りはやねてねo
テーブルネストでお願いo
☆☆☆IE4〜6、NN4、NN6で確認済み☆☆☆

<!--↓枠の色はbgcolorで指定ねo-->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓枠のサイズはcellspacingで指定ねo背景色はもちbgcolorで指定o
 widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="1" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆(はあと
</td></tr>
</table>
</td></tr>
</table>

あ、ドキュソ宣言もやめてねo
Dreamweaverだと大丈夫だがo

914 :Name_Not_Found:02/01/14 22:19 ID:3meOvflL
ごめ、912は無視して。
bodyに指定したときの話してました。。。

915 :Name_Not_Found:02/01/14 22:19 ID:cywOolfy
>>910
対応表、見ようね。
http://www.zspc.com/documents/css2/display/overflow.html

916 :Name_Not_Found:02/01/14 22:26 ID:C65V6HnZ
CSSなんてどうせOFFにしているし…。
だいたいONにしてる奴なんかいるのか?

917 :913:02/01/14 22:26 ID:LTJ0MbW9
間違ったわ☆呆けッ!!
<!--↓枠の色はbgcolorで指定ねo枠のサイズはcellspacingで指定ねo-->
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓背景色はもちbgcolorで指定o
 widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆(はあと
</td></tr>
</table>
</td></tr>
</table>

ウトゥー

918 :912:02/01/14 22:32 ID:3meOvflL
>910
お詫びにテストした。IE5.5SP2
http://www.kiss-kiss.net/overflow.png

919 :Name_Not_Found:02/01/14 22:35 ID:cywOolfy
>>916-917
アホくさ。
CSSなら簡単なのに……
<div style="border:1px solid #ccc">
テキスト
</div>

いまだにテーブルレイアウトだけに執着してる奴ぁご苦労さん。

920 :910:02/01/14 22:44 ID:d6+8xsM0
>912 >915
どうもありがとうございまっす!
912さん画像まで…ほんとに感謝します。おかげで今日は良く眠れそうです

921 :Name_Not_Found:02/01/14 22:46 ID:daRtzNtg
なんとか出来たと思い、NN4.xと6.xでチェックしたら
…なんか目も当てられない状況になっていたのですが…

これは鬱氏する以外に方法が無いものでしょうか?

922 :Name_Not_Found:02/01/14 22:52 ID:cywOolfy
>>921
ハア? 何が出来たって?
名前と用件を述べてくれ。

923 :912:02/01/14 23:00 ID:3meOvflL
>920
じゃ画像消しますね。
ちなみにテストでheightは全て70pxだったんですが
visibleでIEでは、背景色も一緒に幅が広がってましたが
NN6だと背景色は伸びないので注意して下さい。

>921
多分、ボックスサイズの実装の違いかな?
HTML * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
これでも追加しとくとよろし。
NN4は知らんが。

924 :Name_Not_Found:02/01/14 23:08 ID:cywOolfy
>>921>>903か?
あのな、>>904>>906を「追加」指定するんだよ。
hr{margin-left:0}はNN6・Opera向け記述、
hr{text-align:left}はWinIE向け記述、
NN4は水平線にスタイルシート効かない。
以上。

925 :Name_Not_Found:02/01/14 23:20 ID:9uXNLIjQ
>>913

ありがとうございます。何とか出来ました。

926 :Name_Not_Found:02/01/15 17:56 ID:sCWBFCeU
h1とかh2とかにborder-bottom指定すると行全体に下線が引かれて
しまうのですが、文字部分だけに下線を引くことってできませんか?

927 :Name_Not_Found:02/01/15 18:02 ID:9vZjiprg
下線が引きたいだけなら text-decoration とか、
色とか太さとかもいじりたいから border-bottom のが良い、というのなら
span で囲ってそっちに設定するとか。

928 :Name_Not_Found:02/01/15 18:03 ID:qlAWkpiR
>>926

width指定したらどうですか?

例)
<h1 style="width: 1em;border-style: solid;border-width:0 0 1px 0;border-color:black">あ</h1>

929 :926:02/01/15 18:34 ID:sCWBFCeU
>>927-928
どうもありがとうございます。やっぱり基本は行全体なんですね。
spanでくくるかwidth指定するか、はたまたtext-decorationで
片づけてしまうか色々いじりながら考えてみます。
早速のレスありがとうございました。

930 :Name_Not_Found:02/01/15 18:50 ID:1s0bLhw9
>>928
文字数が変わるたびに長さを再指定するのがやや鬱だな・・・
926がその労を厭わないというなら別にいいけど。

931 :Name_Not_Found:02/01/15 23:27 ID:BqViac3+
画像のサイズを % 指定したいんですが、上手くいきません。

img.thumbnail {
width: 30%;
height: 30%;
}

これだと、親要素の大きさの 30% になっちゃいますよね。
自分のサイズの 30% にするにはどうしたらいいんでしょう。

あと、
.something {
padding: 2em - 1px; /* 2em より 1ピクセル短かく */
}
みたいなことするにはどうしたらいいんでしょう?

.something {
padding: 2em;
}

.anything {
padding: 2em - 1px;
border: 1px solid black;
}

みたいにして、 .something と .anything を同じ大きさにしたいのです。
もっとも中身に依存はしますけど。

932 :Name_Not_Found:02/01/15 23:58 ID:HE38q6Dk
BBSのメッセージ欄のスタイルに
background: #000000; filter:Alpha(opacity=60)
としてフィルタをかけて半透明にしたのですが、
テーブルの中全体が半透明になってしまいます。
背景だけを透かせて文章は半透明にしたくないのですが、
CGIのHTML書き出し部分を変更せずにそのようなことは可能でしょうか?

933 :Name_Not_Found:02/01/16 00:21 ID:YPVhjVDo
>>932
>>733 あたりどうぞ。

.message {
透過指定
}

.message *{
透過解除
}

ってかんじかな?

フィルタ周りは使ったことないんでよく判ってる人キボン。

934 :Name_Not_Found:02/01/16 00:36 ID:UpmFb/Tv
>>932
背景にアルファ埋め込みの透過PNGを使うのが一番イイと思う。
対応しているブラウザ(NS6など)では透過されるし、未対応の場合は普通の背景画像になるし。

935 :Name_Not_Found:02/01/16 00:48 ID:oT844DWd
>>933>>934

一応テーブル無いでも再度不透明のアルファを設定したのですが、
どこか間違っていたのかもしれません (^-^;
透過PNGは思いつきませんでした。試してみようと思います。

お早いレスありがとうございました♪

936 :Name_Not_Found:02/01/16 01:36 ID:YPVhjVDo
>>935
相対or絶対指定が抜けてたってやつじゃないの?

937 :Name_Not_Found:02/01/16 01:38 ID:4+fqp3pV
>>926
h1{
display:inline;
border-bottom:solid thin black;
}

938 :Name_Not_Found:02/01/16 01:41 ID:YPVhjVDo
>>937
インラインにしちゃうと、微妙に意味が変わっちゃうような。

939 :Name_Not_Found:02/01/16 02:46 ID:FsqkP48X
>926
h1{
width: 50%; /* ここで調節 */
border:solid thin black;
}

940 :935:02/01/16 03:27 ID:oT844DWd
>>936
その通りみたいです。
相対位置指定を書き加えたらちゃんと適応されました。

941 : :02/01/16 13:15 ID:kc1VENIv
>931
前半.自分の(つまりオリジナルの)30% にならない?なるはずだけど.
後半.JavaScript と組み合わせるか IE 限定で expression とかいうのを使うか.
いずれにしても規格内の CSS だけでは無理だと思う.

942 :Name_Not_Found:02/01/16 14:09 ID:nqdVmOJW
>>941
うーん、当方 Mozilla 9.7 ですが、ウィンドウリサイズすると大きさ変っちゃいます。

後者の方はあきらめました。

943 : 941:02/01/16 16:10 ID:kc1VENIv
>942
あ,ほんとだ.仕様書に「containing block を元に計算される」って書いてあるや.
どこかで違うことを読んだような気がしたけど勘違いだったらしい.ごめん.
ということで,これも JS とか使わなきゃだめそうだね.

944 :Name_Not_Found:02/01/16 21:08 ID:+/q5cVsx
テーブルで言う、
<table>
<tr>
<td>メニュー</td>
<td>ニュースとか</td>
</tr>
</table>
このような形にしたいので色々駆使しているのですが、どうしてもニュースとか、の部分が
下にいってしまいます。どうすればいいでしょうか?

945 :944:02/01/16 23:53 ID:+/q5cVsx
答えてホスィのでage

946 :Name_Not_Found:02/01/17 00:00 ID:lznFZw6m
float: left;

947 :Name_Not_Found:02/01/17 00:27 ID:9U1iBnh3
>>946
ども、float:left; と float:right; を両方に入れたらできました。

ただ、左と右の間がすごくあいちゃうんです…
なにか手は無いものでしょうか?

948 :Name_Not_Found:02/01/17 00:27 ID:i5BFFOBO
<INPUT TYPE="TEXT" SIZE=20 STYLE="BORDER-STYLE:solid;BORDER-COLOR:white;BACKGROUND:#CCCCFF;" onFocus = "if (document.all)
{ this.style.backgroundColor='orange';this.style.color='#FFFFFF'; }" onBlur = "if (document.all) { this.style.backgroundColor='hotpink';this.style.color='#FFFFFF'; }">
 ボタン全部の外観をこのように変えたいのですが・・・。
離れたときと書き込みしたときに、外観が変わるようにスタイルシートで設定はできないのでしょうか?

949 :Name_Not_Found:02/01/17 00:34 ID:XVXo8b6/
>>948
A要素をdisplay: block 化して、width、heightの設定で出来ると思う。

950 :Name_Not_Found:02/01/17 00:35 ID:YlOtV//B
>>947
td{
display:inline;
margin:0;
}

951 :Name_Not_Found:02/01/17 00:36 ID:YlOtV//B
>>948
つまりどうしても擬似クラスを使いたくないと?

952 :948:02/01/17 00:44 ID:i5BFFOBO
すいません、ほんと初心者なんで、わからないんです。
 擬似クラスとか
A要素をdisplay: block 化して
とかさっぱりわからないです。(汗)

953 :Name_Not_Found:02/01/17 00:44 ID:S6ZWOzmI
>>947
いっそのこと

<ul>
<li>メニュー</li>
<li>ニュースとか</li>
</ul>

li {
list-style-type: none;
display:inline;
}
とか

954 :948:02/01/17 00:47 ID:i5BFFOBO
どっかネットで拾ってきます。。。
 すいませんでした。

955 :947:02/01/17 00:49 ID:9U1iBnh3
>>950
すいません。テーブルレイアウトをやめるためになるべく
divで指定しているのですが…こんな感じで。

div.a{
color:#000000;
background-color:transparent;
padding-top:1em;
padding-bottom:1em;
width:15%;
float:left;}

div.b{
width: 50%;
height: 35em;
margin-bottom: 2em;
border:1px solid #CC9966;
float: right;}

これをくっつけたいのですが―
我儘いってすいません。

956 :947:02/01/17 00:50 ID:9U1iBnh3
>>953
あーなるほど。
やってみます。

957 :Name_Not_Found:02/01/17 00:55 ID:YlOtV//B
>948 まだいるか?

a{
color:transparent; /* 任意に */
background:#ccccff;
border:solid #ffffff 1px;
}
a:visited{
color:#ffffff;
background:#ff69b4; /* hotpink */
}
a:focus{
color:#ffffff;
background:#ffa500; /* orange */
}

意図したものになってなさげ。後は自分でどうにかしてみぃ

958 :948:02/01/17 01:16 ID:i5BFFOBO
>>957
本当にすいませんでした。m(__)m
 自分でよく調べてみましたら、ここにわたしの求めていたようなことが書いてありましたので、
下記のアドレスのサイトにある書きこみを参考にしようと思いました。
 本当に親切にありがとうございました。m(__)m
http://bbs.otd.co.jp/wizard/bbs_tree?base=3947&range=1

959 :Name_Not_Found:02/01/17 07:47 ID:dJWzlm5n
>>947
両方にfloat:left;で。

ところで、次スレッドの雛型だれか作って。

960 :次スレ1:02/01/17 14:35 ID:2QAW1FKR
/*【CSS】 スタイルシート質問スレッド【6】*/

CSSに関する質問はこちらへ。
>>2 関連リンク集。参考にすれ。

【過去ログ】
#1 { http://mentai.2ch.net/hp/kako/974/974934062.html }
#2 { http://natto.2ch.net/hp/kako/984/984113434.html }
#3 { http://natto.2ch.net/hp/kako/992/992992981.html }
#4 { http://pc.2ch.net/test/read.cgi/hp/996828258/ }
#5 { http://pc.2ch.net/test/read.cgi/hp/1005047493/ }

【CSSと関係ない初心者質問はこっちで】
☆ Webサイト制作初心者用スレッドver15 ☆
 http://pc.2ch.net/test/read.cgi/hp/1010524882/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
 http://pc.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 3rd style
 http://pc.2ch.net/test/read.cgi/hp/1010065020/

961 :次スレ2:02/01/17 14:37 ID:2QAW1FKR
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1-961217.html
・CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html

【その他資料など】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・三日坊主++の部屋
 http://east.portland.ne.jp/~sigekazu/
・CSS Laboratory対応表・一覧
 http://www.inter-cool.net/~phantasm/wdzone/note/index.html
・CSSでイケてるデザインサイトリンク集
 http://members.tripod.co.jp/monar01/

1個追加してみた。リンクチェックはしてない。

962 :Name_Not_Found:02/01/17 14:39 ID:2QAW1FKR
>>960
過去ログのURLの前、全角になっちゃってた。シパイ。

963 : :02/01/17 15:43 ID:q02I9PiK
功罪評価スレッドは入れなくてもいいと思う….
あと,CSS関連 の FAQ とかあったっけ?あったら 3-5 あたりに.

964 :947:02/01/17 17:03 ID:9U1iBnh3
>>959
出来た!!
皆様。本当にありがとうございました。

965 :Name_Not_Found:02/01/17 20:31 ID:YY8q5iIb
>>963
功罪スレは要らないだろ…それだったらStrict-HTMLスレにしろYO!
http://pc.2ch.net/test/read.cgi/hp/1008380243/l50

966 :Name_Not_Found:02/01/17 21:07 ID:zyTVdM5q
Strictもいらんだろ・・・! 

967 :Name_Not_Found:02/01/17 21:38 ID:2OcKi93P
strictHTML+CSSが理想形だとすると関係なくもない。
けどあっちはかなりディープだし、敢えて貼ることもないんじゃ。

968 : 963:02/01/17 22:39 ID:6OUat5i4
>965
いや,僕に言われましても….

FAQ 的なものを考えてみたけど,
・table のセンタリング
・スクロールバーの色変え
・擬似フレーム
ってところか.やっぱ別になくてもいいか.

969 :Name_Not_Found:02/01/17 22:50 ID:YY8q5iIb
>>966-967
同意。

>>968
FAQは欲しい気がする。

# それと、>>1が長くなりすぎると(l50とかで)読みづらいから、
FAQは>>2-4、関連スレ等は>>5-6あたりに纏めてホスィ。

--次スレ用テンプレ--

Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
質問は内容を吟味して、正しい日本語で。
特定の環境で問題が生じる場合には、ブラウザ・OSのバージョンを明記して下さい。
FAQは>>2-4、関連スレ等は>>5-6あたりにあります。

って感じで。

970 :Name_Not_Found:02/01/17 23:10 ID:bwXMMlTi
Dreamweaver3でCSS指定、NS6.2で確認。でもIE5では全く反映しません。
バックグランドイメージやフォント色など基本的な指定なので、IE5が未対応とは思えませんし、
他人が作ったCSSのWebサイトは問題なく閲覧できます。
特にバックグラウンドイメージはまっさらなWebページを作成し、bodyタグに指定するだけで(他に余計なことしない)も
表示してくれません。

何か原因になりそうなこと、CSSの指定で気を付けることありませんか?
ちなみにMac版です。

971 : :02/01/17 23:19 ID:6OUat5i4
>969
ふむ.そうすると FAQ に入れるべきはなんだろう?
あと「特定の…」の一文,常に環境を書いてもらうようにしたほうがいいと
思うので(特定の環境かどうかわからない場合も多いだろうから)
「OS やブラウザによって結果が異なることがあるので質問の際には OS や
ブラウザのバージョンを明記してください」くらいでどうでしょう?

>970
DW の吐いたCSS 見ないことにはなんとも….
あるいは DW 専用スレッドのほうが答えてくれるかも.
 Dreamweaver教えます♪(その3)
 pc.2ch.net/test/read.cgi/hp/1007610142/


972 :970:02/01/18 00:11 ID:UX9Z+WFq
>>971

<style type="text/css">
<!--
body { background-attachment: fixed; background-color: #000000; background-image: url(file:///〜省略〜.jpg);
background-repeat: no-repeat; background-position: left top}
-->
</style>

で他の部分は新規ファイル状態からいじっていません。
やはりこれだけでもIE5(Mac)ではただ背景が真っ黒になるだけです。

うーん、特に問題あるとは思えないんですけどね。
Netscapeではきちんと見えてるし・・・



973 :Name_Not_Found:02/01/18 00:52 ID:ZJsWxP6D
>>970
うちのMacIE5ではちゃんと見えるけど?
まさかurl(~)の部分、アップした後もfile:///にしてるんじゃないよね?
ていうか相対URIにすれば大丈夫だと思われ。

974 :Name_Not_Found:02/01/18 01:01 ID:z+ySLKFs
FAQに擬似フレームはあった方がいいかも。

975 :Name_Not_Found:02/01/18 02:28 ID:H48SXVEz
あのー、質問したいんですけどレスが950すぎてるので
次スレにしたほうがいいですよね?

976 :Name_Not_Found:02/01/18 03:43 ID:jl+TllFs
【FAQ】
Q.tableをセンタリングするには?
A.下記を読んで下さい。
http://pc.2ch.net/test/read.cgi/hp/1005047493/337-354
http://pc.2ch.net/test/read.cgi/hp/1005047493/359-362
http://pc.2ch.net/test/read.cgi/hp/1005047493/416-449
http://pc.2ch.net/test/read.cgi/hp/1007538322/445-484
http://pc.2ch.net/test/read.cgi/hp/1005047493/583-584
http://tancro.stp-1.com/stylesheet/n6_center.html

977 :Name_Not_Found:02/01/18 06:11 ID:1I5ZDuW3
>>976
これも追加。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic6

978 :Name_Not_Found:02/01/18 06:43 ID:/FD2wE6u
>>976-977
まとめると――
旧来の<center></center>で括る代用としては、

1.<div align="center"></div>で括る。しかしStrictでは非推奨。

2.<div></div>で括ってそのdivに対して、もしくはセンタリングしたい要素の
親要素に対して、text-align:center;を指定する。
IE(互換モード)・NN4で有効だが、しかし"text"-alignなのだから
ブロック要素の中身(インライン・テキスト)だけでなくブロック要素自体をも
整列するこの動作は、仕様書の誤った解釈であった。
Mozilla/NN6にもこの誤った解釈をさせたい場合、text-align:-moz-centerを指定。

3.センタリングしたい要素に、margin-left:auto;margin-right:autoを指定。
Mozilla/NN6・Opera・WinIE6標準準拠モードで有効。これが仕様書通りの正しいやり方。
但しMacIE5ではblockquote要素・ul要素・ol要素はセンタリングされないし、
「margin: 50px auto」みたいに一括指定した場合、table要素は中央寄せされない。
MacIE4.5では、table要素・div要素・ul要素・ol要素・dl要素で左右のマージンを
「auto」にしてもセンタリングされない。

WinIE6以降実装の標準準拠/互換モードについてはDOCTYPE宣言でスイッチする。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic2

979 :Name_Not_Found:02/01/18 07:03 ID:/FD2wE6u
>>971
FAQに段組のやり方の参考サイトを挙げておきたい。
テーブル・レイアウトから卒業するには必須だし。擬似フレームより頻出でしょ。
要はfloatとpositionの利用法ですが。
http://dfj.cool.ne.jp/html/column.html
http://www.skipup.com/~l-_-l/web/
http://homepage.mac.com/csstyler/css-multicol.html
http://www32.tok2.com/home/eyeeye/css001.html
http://www.motchie.com/article/multicolumn.html
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html

980 :Name_Not_Found:02/01/18 10:01 ID:D6XA1Hl6
CSSの書き方で、
例えば、「A.xxxx」と「.xxxx a」は同じですよね?
でも、「.xxxx a」の場合だと、先にページ全体のa要素を指定していたら、
適用されなかったんですけど、「A.xxxx」の場合は大丈夫でした。
なにか違いがあるのでしょうか?
質問の意味がわからなかったらごめんなさい・・。

981 :Name_Not_Found:02/01/18 10:07 ID:D6XA1Hl6
980です。
ちなみにIE6です。

982 : :02/01/18 10:15 ID:WHYBlzZx
>980
>例えば、「A.xxxx」と「.xxxx a」は同じですよね?
違います.
・ a.xxxx : a 要素で xxxx というクラス名をもつもの
・.xxxx a : どんな要素であれ xxxx というクラス名を持つもの(p でも div でも)の中にある a 要素

983 :Name_Not_Found:02/01/18 10:45 ID:D6XA1Hl6
>982
違うんですね・・。ありがとうございます!

でも、どういう時にどういう風に使い分ければいいのかいまいち??です。
もっと勉強します。



984 :Name_Not_Found:02/01/18 11:40 ID:04EZr0wl
疑似フレームの例としてこれどうよ?

例)http://www17.u-page.so-net.ne.jp/qb4/chiharu-/files/frame.html
その方法)http://www17.u-page.so-net.ne.jp/qb4/chiharu-/overflow.html


985 :1000:02/01/18 12:28 ID:8B2Vx6vk
1000

986 :Name_Not_Found:02/01/18 15:40 ID:klCqTlF7
input.hankaku { ime-mode: disabled }
こんな事出来るんだ。便利だなcssは。

987 :Name_Not_Found:02/01/18 15:48 ID:jB8owuLx
>>986
IEのみだけど

988 :Name_Not_Found:02/01/18 17:59 ID:WZmqPTSS
フォントサイズはデセンダからダイアクリティカルまでの距離というcss1と
行間をつめた場合のベースライン間の距離というcss2と2こあっけど
どっちよ?

989 :Name_Not_Found:02/01/18 21:09 ID:ixuuGFk/
ユーザースタイルシートかなにかで
リンクを張ってある画像をすべて border=0
にすることはできますでしょうか?
htmlであらわすと↓のような感じにしたいのですが・・・。

<a href="link.html"><img src="ファイル名.gif border=0"></a>

990 :Name_Not_Found:02/01/18 21:11 ID:iDZms9/9
新スレ作成キボンヌ

991 :Name_Not_Found:02/01/18 21:12 ID:QJf6nF1d
a img { border: 0 none; }

992 :991:02/01/18 21:13 ID:QJf6nF1d
>989へのレスでした

993 :Name_Not_Found:02/01/18 21:13 ID:ixuuGFk/
ありがとうございました♪

994 :1000:02/01/18 21:46 ID:f2w8Z9ar
1000

995 :Name_Not_Found:02/01/18 22:04 ID:Y0mC9zbV
うわ、1000ギリギリじゃん。
というわけで新スレ立てました。

/* CSS、スタイルシート質問スレッド【6】 */
http://pc.2ch.net/test/read.cgi/hp/1011358982/l50


996 :Name_Not_Found:02/01/18 22:11 ID:iDZms9/9
とりあえずさげで1000を狙ってみる

997 :Name_Not_Found:02/01/19 00:05 ID:ZXpTBWBB
記念カキコ

998 :Name_Not_Found:02/01/19 00:06 ID:ZXpTBWBB
なんかID(・∀・)イイ!!

999 :Name_Not_Found:02/01/19 00:06 ID:ZXpTBWBB
ここで去る。誰かどぞ。

1000 :Name_Not_Found:02/01/19 00:13 ID:hBLRIZgG


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

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

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)