/* CSS、スタイルシート質問スレッド【8】 */
1 :
ちょっと早いですが :
02/04/27 13:26 ID:l9maZG/b
2 :
Name_Not_Found :02/04/27 13:26 ID:yzVxWqjB
2
3 :
喫煙者は臭い :02/04/27 13:27 ID:l9maZG/b
4 :
Name_Not_Found :02/04/27 13:27 ID:yzVxWqjB
4
5 :
喫煙者は臭い :02/04/27 13:27 ID:l9maZG/b
6 :
Name_Not_Found :02/04/27 13:27 ID:yzVxWqjB
5
7 :
喫煙者は臭い :02/04/27 13:28 ID:l9maZG/b
うん、早過ぎる。も少し使えるよ。
13 :
Name_Not_Found :02/04/28 10:51 ID:vZwZyUAw
あちらが終わったらこちらにうつりましょう。
>>13 その言葉を書き込んでageる君の精神に乾杯。
15 :
:02/04/28 23:17 ID:ui4RFazZ
スタイルシートを外部ファイルとしてます。 サイトをテーブルで三分割にしていて、左を白、右を黒ってかんじに してるので、リンク色をそれぞれ別にしたいわけです。 全体は下のような感じで指定していて、これを白地に適用してます。 a:link { font-weight: bold; text-decoration:none; color: #003399 } a:visited { font-weight: bold; text-decoration:none; color: #9966CC } 黒地背景は違う色にしたいんだけど、どうしたらいいですかね?
17 :
:02/04/28 23:29 ID:emIkIiY2
>15 本当はまだ前スレッドに書いてほしいんだが,まあ仕方ないわな.誘導する意味もないし. で,idやclassというものを調べてみると幸せになれると思います.
18 :
張り忘れたの? :02/04/29 15:05 ID:BIl9kIIe
19 :
張り忘れたの? :02/04/29 15:06 ID:BIl9kIIe
ごめん、ログが古かった・・・
>>18 をあぼ〜んしといて。
>>19 二つあっても困るもので無し。
こんなことで削除依頼が通る訳なし。
あきらめるとよろし。
「あぼーん」はなくて「あぼ〜ん」。 かちゅ〜しゃとかのやつね。 間違ってageてたし。ゴメソ...
23 :
Name_Not_Found :02/04/30 14:30 ID:Z6wNQe5n
W3C CSS Validatorでのエラーくらいは許されるよね? 警告は直そうかと思うのだが。みなさんのCSSはドゥ??
24 :
Name_Not_Found :02/04/30 14:32 ID:0p87H+Zn
なんでcssで画像とかを入れる場合 相対urlが推奨されるの? あちこちのフォルダで使うなら 絶対URIの方がいいと思うけど まあ/~hoge/count.pngみたいにルートディレクトリから の相対なら同じだけど。
>>24 >まあ/~hoge/count.pngみたいにルートディレクトリから
>の相対なら同じだけど。
逝ってよし
>>24 はstyle属性を使っているに1票。
外部cssファイルにすれ。
27 :
Name_Not_Found :02/04/30 14:59 ID:2xHNhg8r
<html> <head> <title>style sheet sample</title> <style type="text/css"> <!-- .t1 { color : blue; font-size : large; background-color : #cccccc; border-style : double; } --> </style> </head> <body> <table><tr> <td class ="t1"> sample text 1 <table><tr><td> sample text 2 </td></tr></table> </td> </tr></table> </body> </html>
28 :
Name_Not_Found :02/04/30 15:02 ID:2xHNhg8r
>>27 みたいな場合にsample text 1に適用されるスタイルがsample text 2まで継承されない
(IE5,NN4)これって仕様どおりなんですか?
リファレンス本なんかではcolorとかは継承されるスタイルになってるんだけど。
仕様どおりじゃないです。 DOCTYPE switchで仕様どおりの動作に変わります。
そういやさ、クラス名に「_(アンダースコア)」って使えるよね? W3C CSS Validatorでエラーでるよヽ(`Д´)ノ もしかして使えない?
31 :
28 :02/04/30 16:56 ID:2xHNhg8r
>>30 数字・記号は使えるけど、先頭につけちゃダメ。
33 :
Name_Not_Found :02/04/30 17:13 ID:4aalAdMj
34 :
28 :02/04/30 17:27 ID:2xHNhg8r
それも考えたんだけどborderのスタイルも内側のtdに適用されちゃうから 継承してくれたほうがいいんだよね。
35 :
:02/04/30 17:33 ID:uPu0Q114
>>32 そうだよね。先頭にはつけてなかたのだが。
>>35 ありゃ・・・。
書き直す・・・の・・・か・・・。
ま、IE5とMozillaで動くから・・・放置(/o\)
37 :
Name_Not_Found :02/05/01 00:05 ID:LuFxerBH
ul{ list-style : disc; } ulli{ display : inline; } これが上手く表示されません。なぜですか?
ulliなんて要素はないから。
39 :
Name_Not_Found :02/05/01 00:21 ID:LuFxerBH
40 :
Name_Not_Found :02/05/01 00:26 ID:LuFxerBH
display : inline;にするとlist-style : disc;は適用されないんですね?
そうです。 display: list-item でない限りマーカーは表示されない。
どうもありがとう!
43 :
Name_Not_Found :02/05/01 01:15 ID:WCUsHSFj
質問です。 margin-top:0.4em; margin-right:6%; margin-bottom:0.8em; margin-left:6%; こういう風に、「em」と「%」を混在させた指定方法って有りですか?
普通にアリです。
45 :
43 :02/05/01 01:28 ID:WCUsHSFj
46 :
:02/05/01 01:43 ID:aW+wjtuz
(´-`).。oO(
>>46 別にいいじゃん…俺、両方見てるし…)
>>43 background-positionなどキーワードと数値を混在できないものがあるので、その点には注意して欲しい。
外部CSSの利点って何ですか?
>>49 NN4.xでえらい事にならないためのため。
HTML自体のソースを重くするのがやなだけ。
外部の方が多数のHTMLからもを呼べるから。
あとは、メロンアイスを美味しく食べるため。
51 :
:02/05/01 02:07 ID:aW+wjtuz
(´-`).。oO(>47 答える側はそれでいいけど質問する側は…)
>>49 あなたのサイトにはhtmlが何ファイルありますか?
54 :
Name_Not_Found :02/05/01 22:22 ID:5BbDht5+
アンカーの擬似セレクタに設定したCSSルールを、 JavaScriptで変更できますか?
>>54 JSのスレで聞いた方がいいと思いますよ。
私も、以前に同じ質問をしたので(もちろん、JSスレで)、
過去ログにあると思います。
テーブルのひとつのセルに背景画像を指定すると NNではみえないじゃないですか。 これをNN&IE共に同じように見えるようにするのは cssで出来ますか?
57 :
名称未設定 :02/05/02 15:41 ID:y6679WKh
>56 テーブル自体の背景にダミーを指定. っていうかこれはCSSではないけど.
58 :
Name_Not_Found :02/05/02 18:24 ID:PNDx3vtX
文章 画像 文章 大きな画像の両側に文章を回りこませるにはどの様にするのしょうか 文章はそれぞれ見出し、段落が数個ある組み合わせです おながいします
あいう 画像画像画像 えお かきく 画像画像画像 けこ さしす 画像画像画像 せそ にしたいなら無理。 あいう 画像画像画像 こさ えおか 画像画像画像 しす きくけ 画像画像画像 せそ にしたいならfloatを駆使。
60 :
58 :02/05/02 23:50 ID:CoGnXcRW
>>59 レスThanx
今の状況です、tableをやめてCSSにしたいのですが。
<table><tr><td>
<h1>見出し1</h1>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<h1>見出し2</1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</td>
<td>
<img src="honge.png" alt="大きな画像">
</td>
<td>
<h1>見出し3</h1>
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
<h1>見出し4</1>
<p>ddddddddddddddddddddddddddddddddddddddddddd</p>
</td></tr></table>
floatのために、<div>画像</div>にして片側に流すのはできたのですが
両側に流す為には具体的にどのようにしますか?
おながいします
>>60 それぞれの〔見出し+文章〕と画像との関係はどうなってるの?
それが判れば具体的なソースを提示できる(かもしれない)けど。
テーブルの中身をそのまま使うなら
<div>一列目</div>
<div>画像</div>
<div>三列目</div>
として、最初のふたつにfloat: left; と width を指定する。
これだと構造的におかしくなりそう。
62 :
58 :02/05/03 00:22 ID:ZfOSyvf9
Wordなどで言うところのいわゆる2段組みの文章で 洒落た画像を段組の間の仕切り線の役目として物理的に使っています もっと正直に白状すると、実際のページは3段組みで画像仕切り線2本です strictには程遠い画像の使い方なので無理ちゃあ、返す言葉無いです
>>62 そういうのはbackground-imageでやるべきだと思うけど、
それでお望みどおりのレイアウトにするのは難しいかも。
空のdivでも使わない限り。
>>62 画像をbackground-imageにして
画像の幅の分だけpaddingをつければ出来そうな気もする。
<div style="position:absolute;width:200px;">
左段
</div>
<div style="background:...;pading-left:...;width:200px;margin-left:200px>
右段
</div>
ただwidthはIE5.xやIE6互換モードで間違った解釈になってしまうので、
CSSを振り分けないといけないかな。
65 :
58 :02/05/03 18:20 ID:bKg5qcgj
ありがとうございました
66 :
66 :02/05/03 18:33 ID:cIQgPtRh
どういたしまして
67 :
Name_Not_Found :02/05/04 14:27 ID:bveG6V+Y
ageときます
68 :
Name_Not_Found :02/05/04 23:42 ID:buElNTQr
本スレage
69 :
Name_Not_Found :02/05/05 08:25 ID:j7gOlZ5c
elementのhはいくつまで定義できるんでしたっけ?
71 :
Name_Not_Found :02/05/05 20:24 ID:PiykHwmj
リンキングスタイルシートについて教えてください。 記述の順序によって表示のレイアウトが変化するのですが、 記述の順序は関係あるのでしょうか? 例えば .〇〇{ AAA:*******; BBB:*******; CCC:*******; DDD:*******; EEE:*******; } と .〇〇{ BBB:*******; CCC:*******; DDD:*******; EEE:*******; AAA:*******; } で、記述内容は同じで、順序を変えただけですが レイアウトが変わってしまいます。 そういう現象は普通にあるのでしょうか? 私のPCが不安定になっているのかとも思うのですが。 WIN98で、IE5.5、NN6.2使用です。 わかる方、教えて下さい。
>>71 順序は関係ないでしょ。
しいていえばz-indexの重なり方が変わるくらい
>>71 位置指定系のプロパティなどで、その指定同士が競合する場合は
あとから指定されたものが優先されたはずだが、
ソースがないので再現しようもない。よってわからん。
74 :
:02/05/05 20:58 ID:j7gOlZ5c
valign="top"これをインラインで書くとそのように表示されるんですが 外部から定義しようとすると上手くいきません。なぜでしょうか?
77 :
Name_Not_Found :02/05/05 22:05 ID:dFo8Rek1
IEのCSSの初期設定が知りたいのですが?MSのHP探したんですが迷子になりました。 どなたか居場所ご存知の方お願いしますです。
78 :
74 :02/05/05 22:09 ID:j7gOlZ5c
すいません75さん。 76は偽物です。 <td valign="top"> <h1>あいうえお</h1> </td> これだと あいうえお がきちんと↑に表示されます。 tdではなくてh1のにvalign="top"を指定することはできないのでしょうか?
79 :
74 :02/05/05 22:10 ID:j7gOlZ5c
インラインで指定したくないです。
valign属性はHTMLのものであって、CSSにんなモノはない・・・ とお決まりの回答をした上で。 78の説明でもいまいち意味がわかりませんが、 上付にすればいいんですか? hoge.html <html> <body> <table frame="border"><tr><td class="foo"><h1>あいうえお</h1></td></tr></table> </body> </html> hoge.css .foo{ margin-top:0; padding-top:0; } 他にもやり様はあると思うけど。
81 :
Name_Not_Found :02/05/05 22:56 ID:phb9LXZx
HTMLのある部分について、CSSを切った状態の時に表示されないようにする 方法ってあるでしょうか? 逆のことは”display : none;”で出来るのですが。
>>81 content
quotes
background
...
83 :
Name_Not_Found :02/05/06 13:48 ID:QcOYXduP
>>81 その部分の文字色をHTMLではバックグラウンドと同じ、
CSSでは違う色にしておくというのはだめ?
84 :
71 :02/05/06 16:22 ID:X6mws2+v
72さん、23さん、まとめてお礼で失礼します。 ありがとうございました。
範囲選択でもばればれだな…
微妙に違った・・・ゴメソ。 でも前スレ64みたいなのがしたいんだろ?な?な?な(w
ついでに(w
>>82 IDカコイイ!!
CfS4S+td
 ̄  ̄  ̄ ̄ ̄ ̄
CSS+td=テーブルレイアウトvsCSS
んー。HTMLとCSSだけを使うことが前提の場合、HTML側では「消す」ってことができないから 原理的に不可能じゃないのかねぇ?
noscript要素にdisplay:blockなら?
意味ないな。css非対応ブラウザは大概script非対応ブラウザだ。
93 :
Name_Not_Found :02/05/07 01:20 ID:rrohb0Dy
スペースでレイアウトを調整するのは邪道ですか?
95 :
93 :02/05/07 01:37 ID:rrohb0Dy
マ!マジですか! じゃあどうすりゃいいんですか! CSSってむずかしいなー。
96 :
93 :02/05/07 01:38 ID:rrohb0Dy
というか テーブルなら1分でできてしまう事を あーでもないこーでもないと 試行錯誤してレイアウトするなんて あなた達は暇人なんですか?
97 :
Name_Not_Found :02/05/07 01:45 ID:BzhrMlFp
table で1分ならば、margin をつかえば30秒とか。
98 :
Name_Not_Found :02/05/07 01:45 ID:pm49orTL
>>96 俺は頭使わずにHTML書きたいから、自然とCSS。
慣れればテーブルでやるもCSS使うも、かかる時間は同じだと思われ。
無駄な手間かけてる暇があったらサイトの内容を充(以下略)
別に君みたいに時間かからないから。
100 :
:02/05/07 01:46 ID:LEXAairP
>>95 レイアウトに凝るようなページにしなければいい
>96 嫌ならやらなきゃいい. けど,やってみるとわかるけどHTMLでレイアウトなサイトよりも HTML+CSSの方が更新とかリニュとかが楽だと感じている. かかる時間も大して変わらない.っていうかかえって速いけど? CSSってむずかしいなー。 って言ってる時点でこのスレには 来ないほうがいいかと.
102 :
96 :02/05/07 01:56 ID:rrohb0Dy
わ!わぁ〜〜! こんな短時間の間にこんなにレスが! やはりみなさん相当お暇な様ですね☆ 僕もみなさんみたいに時間があればよかったのに・・・ まあ僕もコツコツがんばります!
俺CSS使いだけど、質問スレなんてjsとか初心者スレとか別にここに限らず (その時たまたま)暇人の溜まり場だろ、とか思った。 板違いsage
まあ、CSS使いは迫害されるという現実がある手前しょうがないか。
すみません。 メニューをリストにして横に並べて左右中央に表示したいのですが、 左右中央がどうしてもできません。 どうすればできるのでしょうか。
>96 そりゃCSSのスレに来て「CSS使いはみんな暇人」とか言ってたら いっぱいレス返るって. みんな善意でこのスレのぞいてくれてるのに. とりあえず>96は人としてどうかと思う.
107 :
:02/05/07 02:10 ID:LEXAairP
(´-`).。oO(質問スレは厨を叩いて寄り付かなくする場だろ・・・?)
108 :
:02/05/07 02:12 ID:LEXAairP
>>105 ちょっと意味がわかりにくいのだが、リストってHTMLタグの?
左右中央ってどの位置のことだ??
110 :
108 :02/05/07 02:27 ID:LEXAairP
なぁ〜んだ、釣られちゃったかなぁ?
>>105 滅茶苦茶簡単にしていいなら
ul { text-align: center; }
li { display: inline; }
でいかがでしょうか。
>>113 つづき。
字が小さいと抜かしときながらテメーのサイトの文字は小さくねーのかよと。
小さい文字で絶対指定。お客は帰っちゃうぞ(笑)。 しかも数値による指定はすべて絶対指定だと思いこんでいる。 かなり初歩。勉強不足。教える資格なし。
>108 申しわけありません。 ulが常にウィンドウの中央にあるようにしたいということです…。 >112 ありがとうございます。 それはやってみたんですが、なぜかボーダーがとんでもない位置に 現れてしまったので何かまずいのかなーと…。
117 :
105 :02/05/07 12:39 ID:UX53ztWn
116=105でした
118 :
:02/05/07 12:56 ID:LEXAairP
>>116 ボーダー?なんでリストでボーダーが出てくるんだ?
|-これをページ中央-|
●ああああああああああ
●いいい
|-これをページ中央-|
●ああああああああああ
●いいい
左右中央ってこんな意味で言ってるのか?
119 :
112 :02/05/07 13:21 ID:MUI5q388
| item1 item2 | こんな風になるのがいやということ? ul { margin-left: auto; margin-right: auto; } こうすればIE6とかだったら望みどおりの表示になると思う。 IE5.5以下にも対応させるなら、 margin-left: XX%; margin-right: XX%; と適当な値を左右に指定してやってください。
120 :
Name_Not_Found :02/05/07 14:12 ID:mx945Qj0
全体を画面中央も持ってくるとき、HTMLなら 縦横100%幅のテーブルのなかにいれて、align=centerでいけるんですけど、 CSSで同じことをするには、どのようにすればいいのでしょうか?
>>120 こんだけ。
body {
text-align: center;
}
122 :
120 :02/05/07 15:21 ID:mx945Qj0
縦位置も真ん中にしたいんですが。
>122 融通が利かないなぁ… 左右が margin-left: XX%; margin-right: XX%; で指定できるなら 上下は margin-top: XX%; margin-bottom: XX%; で、出来そうとか考えられないの?
>>123 上下マージンは親要素の横幅を参照するんで上下中央は難しい。
>>122 CSSだけでウィンドウの上下中央にはできない。
が、Windows版IEだけで良いならCSSで
height: 200px;
width: 100px;
position: absolute;
top: expression(document.body.clientHeight/2-100+"px");
left: expression(document.body.clientWidth/2-50+"px");
もしheightが300ならtopの-100の部分を-150というようにheightの半分にして使う。
幅も同様に。
また、もしIE6標準モードならdocument.bodyではなく
document.documentElementにすべし。
ただし、スクリプト有効に設定したWindows版のIE5以降でしか効かないので、
それで困る場合はJavascriptかテーブルでどうぞ。
125 :
Name_Not_Found :02/05/07 19:38 ID:ytYlSKBE
質問です。floatを使ってこんな風に段組風に表示したいのですが ■□□□ ■□□□ ■ブロック要素の幅はpx指定で固定に、 □ブロック要素の幅はウインドウ右端までで、 ウインドウ幅に応じて可変にしたいのですが、どのような指定が望ましいでしょうか。 IE5.5@Win98で実験したところ 黒{width:○○px; float:left;} 白{width:100%;} にしたらキレイにおさまったんですが、 これってほかの環境でも平気なんでしょうか… 白{float:left; width:100%;} としたらwidthの基準値をウインドウ幅にしたらしく□要素は■の下に入っちまいました。 両方「float:left」 を入れてwidthを%指定)にするのが 一般的で安全なようですが、左の要素の幅はできたら変化させたくないので。
126 :
:02/05/07 20:47 ID:OCWAkpqe
>125 白ブロックのwidthを指定しなければ,それで解決しない?
127 :
Name_Not_Found :02/05/07 22:19 ID:rryrhMtn
position;fixed はMacIEで暫定対応でしたっけ? まだ使わないほうが無難ですかねぇ。
うぉ… ○ ; × :
widthは隣にfloatなボックスが有る無いに関わらず親要素が基準になるぞ。 そうならないのはそのブラウザがおかしい。 「CSS 段組み」で検索すべし。
130 :
125 :02/05/07 22:32 ID:9Yw1j596
>126 白ブロックのWidthを指定しないと、ブロック内のテキストとかの量次第で ウインドウの右端に届かないところに白ブロックの端がきちゃうんですよ ■□ | ■□ |こんな風に できたら ■□□| ■□□| こうしたいのです。…テーブルツカウベキ?
131 :
Name_Not_Found :02/05/07 22:33 ID:Az2N5bmu
position:fixedはMacIE5.14で暫定対応と思われ。 まだ詳しく検証してないけど、position:fixed内でa:hoverが効かなくなったりした。 この場合多分visited,activeも効かないと思う。 そのうち検証してみるけど、場合によってはバグ辞典行きかもしれない。 まあ、使わない方が無難ってとこかな。 上手くやればいけると思うんだけど・・・
>131 サンクス。やっぱそうでっか。 擬似クラス周りも不安定ですなぁ…。
>>125 黒 {
width:○○px;
float:left;
}
白 {
margin-left:○○px;
}
って感じでどうだろう。
134 :
125 :02/05/08 00:13 ID:6N9qvuLv
>129 親要素が基準 調べた結果と違ってたのでなんでだろうと質問したのですが、 やはり親要素でなく、隣のfloatを除いた残りの幅を 基準にしたうちのIEがおかしいと見るべきということなのですね。 >133 おお!うまくいきました。ありがとうございます!
135 :
Name_Not_Found :02/05/08 00:15 ID:mVSMEF5a
背景画像のサイズを指定する事ってできないでしょうか。 イメージタグのように。 位置ならbackground-positionで指定できるんですが、 サイズはできないみたいで。
画像画像 あいうえお| 画像画像 あいうえお| をfloatでやった場合、画面サイズを極端に小さくすると 画像画像 | 画像画像 | あいうえお| あいうえお| こんなんなってしまうのですが、これを回避するにはどうすればよいのでしょうか あいうえおの方は幅を固定させずにしたいのですが・・・
>>136 floatを使う限り無理。
縦に並んでもおかしくないようにデザインを考え直すのが肝要。
あ、やっぱり無理ですか。 とりあえず今の設定だと600以下になるとズレ込んでしまいます 練り直してみます、ありがとうございました
悪くても、 画像画像 | あいうえお| 画像画像 | あいうえお| ならfloatでできるし、ずれこんでも支障ないのでは? # それすらいやだって言うならtableスレ行けよウワァーン!!ヽ(`Д´)ノ
140 :
:02/05/08 01:41 ID:fwBiCIPL
画像+テキストで最低確保したい幅を body(か囲ってるブロック要素)の min-width で指定すれば?あるいは上のほうにある margin-left 指定の方法か. #min-width は WinIE 未対応(のはず) #幅固定はあまり嬉しくないかも #つーか幅固定+float って table レイアウトと精神的に同じかも
あー、margin-leftで全解決しました。た、試してから発言すれば良かった・・ お手数かけてしまいました、ありがとうござりますー
>>136 解決したところ悪いが、
floatはウインドウ幅が狭くなったらズレ込ませるためのものだ。
おまえは何のためにfloatを使っているのかと問い(以下略)
143 :
Name_Not_Found :02/05/08 16:08 ID:WZwP/3Op
htmlで <hr size="1"> というのはCSSでなんて書けばいいんでしょうか?
hr { height: 1px; } hrでCSS使うくらいならborderをおすすめする。
145 :
143 :02/05/08 16:25 ID:WZwP/3Op
>>144 サンクスです。
borderでhrと同じようにできるほどスキルもないんで、
それはまたの機会にします。
DWをインストールしようと setupをクリックしたら ファイル圧縮形式が違います って出てインストールできないんですが どういうことでしょうか?
147 :
146 :02/05/08 17:15 ID:ZJbmupap
すいません板違いでした
149 :
Name_Not_Found :02/05/09 09:55 ID:/427VWfJ
150 :
ネットマフィア ◆4mrpMqxg :02/05/09 09:56 ID:/427VWfJ
俺としたことが名前の入れ忘れなんてそうとうビジーだぜ!! これで俺がどれだけビジーかってわかったろ!! さっさとしろよさっさとーーーー!!
岡やん規制知ってのこのこ出てきやがったな
>>149 >ただ考える時間がねえだけだ!1
考える時間は無いけど2ちゃんに書く時間はあるわけだw
上の質問は、
「HTMLの方でdl使うと幸せになれるかも」
と答えておくことにするよ。
> マフィア 反映されないのは ul.giftdate li ですね? ul li { 〜 width: 590px; } この指定が原因で折り返されてるようです。
154 :
Name_Not_Found :02/05/09 20:25 ID:x9DMDkec
CSSを使ってみようと思ってはいるのですが CSS未対応で見たときのそっけなさが、とてもイヤで なかなかふんぎりがつきません。 CSS使用サイトのみなさんは そこのところの対処法はなにかされていますか? 未対応には諦めてもらってるんでしょうか?
>>154 スタイルの適用/非適用はユーザーの権限で為されるものなので
見た目を必要以上に押し付けるのは余り良くないと言う考え。
ブラウザだけがHTMLを読むわけじゃないし。
よって対処法はなし。
157 :
Name_Not_Found :02/05/09 21:14 ID:tH07OeHu
>>154 CSS非対応でそっけないっての感じるのは、結局中身がないからなんです。
中身があればそれはそれで構造美があるもんです。
つーか、本当にちゃんとしたHTML&CSSで書いてれば、CSS非対応ブラウザは
むしろ救済される側なんだけどね。HTMLが簡潔になり、PDAなんかでも結構
いい感じでみれる。
あと、適当に画像をちりばめたり、区切りに hr を入れたり(cssではdisplay:none
すればいい)そういう現実的工夫を入れれば結構なんとかなるもんです。
たまに「CSSでイケてるデザインサイト」をNN3とかで見てみると、結構新鮮
な感じもします。
158 :
Name_Not_Found :02/05/09 21:48 ID:A/DWXQry
ol li タグで左のスペースと数字から文字へのスペースを最小にし、改行しないで表示したいのですがどうか記述を教えてください。
inlineとpaddingもしくはmargin使ってなんとかしろ。 っつーかちょっと考えればわかんだろ?
inline要素は危険とどこかで読みましたがどうでしょう。
「 inline 要素」自体は危険ではない。 display:inline が危険という意味だろうけど。
162 :
161 :02/05/09 22:47 ID:EGsBo12Y
それはともかく、 WinIE4.0 が対応してない以外に何があるんだろう。 WinIE は CSS をオフに出来ないからねえ...。 これ以外にあれば、私も教えて欲しい。
163 :
Name_Not_Found :02/05/09 22:47 ID:TB1ROmrS
win対応機種で CSSを表示させないようにするには どうすればいいのですか? おバカな質問ですみません。
>>159 ol { margin-left:3em; padding:0; }
li { white-space:nowrap; margin:0em; padding:0em; }
としてもどうも数字の両端に広い空白が。
margin-left:3em;を小さくするとIEで数字がみれなくなるし。
>>164 CSS2のマーカーを使うしか手がないような。
マーカーをサポートしているレンダラは今のところないがな。
そもそも何をどうしたいのかがイマイチ理解できないんだが・・。
俺がアホなのか?
1 あひゃひゃひゃひゃひゃ
というのを
1あひゃひゃひゃひゃひゃひゃ
にしたいという事??
>>161 display:inline;ってIE4で効かないの?ソースきぼん。
>>166 IE4はdisplay:noneのみ対応しています。FAQ。
ガ━━(゚Д゚;)━━━ン!!!!!ホントだ・・。 メニュー表示にリストinlineにしてた。まぁストリクトなhtml書いてるから さほど死んではいないだろうけど。なんか鬱だな。
169 :
ネットマフィア ◆4mrpMqxg :02/05/10 04:54 ID:llc7F/HZ
おい!!
>>152 >>153 !!
気づいた!!今さら気づいたぜ!!
今のままでいいってことにな!!
テーブルでいいじゃねえかよ!!
なに考えてたんだ昨日の俺!!
昨日までの俺にグッバイだぜ!!
>154 transitionalでbodyのbgcolorとtextだけ色付けとけば?
┏━━━━━━━━┓ ┏━━━━━━━━┓ ┃┌──────┐┃ ┃┌──────┐┃ ┃└──────┘┃ ┃└──────┘┃ ┃┌─┐┌───┐┃ ┃┌─┐┌───┐┃ ┃└─┘│ │┃ → ┃│ ││ │┃ ┃ └───┘┃ ┃│ ││ │┃ ┃ ┃ ┃└─┘└───┘┃ ┗━━━━━━━━┛ ┗━━━━━━━━┛ ボーダーラインを用いて左図のようなレイアウトを作成したのですが、 このラインを右図のように、ブラウザのクライアント領域いっぱいまで広げたいと思っています。 この場合、どのように指定してやれば良いのでしょうか。ご教授ください。
>>171 padding:bottom;
でも使ってみたら?勿論計算してだけどね。%で。
173 :
171 :02/05/11 02:19 ID:janyy/B4
>>172 ありがとうございます。で、ちょっと試してみたのですが、
下2つの枠は、positionをabsoluteに指定して配置していて、
しかも、中には当然文字列などが入っています。
それなので、フォントサイズを変更されることを想定すると、
ちょっと一般性に欠くのでは、などと思ったのですが、どうでしょう。
何か言葉足らずなところ、解決法などございましたら、お願いします。
174 :
171 :02/05/11 02:25 ID:janyy/B4
追記 現状だとウィンドウサイズ変更にさえ対応できてません(´д`;)
順当な手段では実現不可能だと思うな。 position:fixedで仕様書で提示されている様な 疑似フレームならそれっぽい事出来るんだけど、 そもそもIEが対応していないし。 横書きの場合、tanleと違ってCSSは 「表示領域の縦側」って概念が無いに等しいから。
テーブルから抜け切れてないな。 CSS使うならグリッドレイアウトに拘らないこった。
>>171 <div style="height:100%">
<div style="height:30%">段1</div>
<div style="height:70%">
<div style="position:absolute;width:50%;height:100%;background-color:blue">段2-1</div>
<div style="position:absolute;left:50%;width:50%;height:100%;background-color:yellow">段2-1</div>
</div>
</div>
例えばこんなんではどう?
>>171 上の領域のborder-bottom
右下の領域のborder-left
3つの領域の親要素のborder
じゃ、ダメか?
179 :
178 :02/05/11 10:14 ID:jMfWoJSU
まあ、線を引くのにこだわらない、と言うのも一つの手だと思うが。
180 :
171 :02/05/11 12:24 ID:janyy/B4
何か思ったよりも大変なことになってしまって狼狽。
レスくださった方々、ありがとうございます。
>>177 ┏━━━━━━━━━━━┓
┃段1 ┃
┃ .段2-1==== 段2-1;;;;;;;;;;;;;┃
┃ ┃
〜 〜
いっぱいまで広がってくれず、こんな感じになってしまいました。
>>178 ちょっと、おっしゃることが理解できないのですが、
大きな1領域内に3つ領域を作って、特定の側のボーダーのみ表示すれば良いのでしょうか。
えー、諦めるというのが一番の近道なのは理解しておりますが、
手段に制限されて目的を達せないというのは、ちょっと(´・ω・`)です。
なので、何とかなれば何とかしたいのですが、何分CSSかじりたての者ですので、
そんなヤシにゃ不可能なほど高等テクニックを要するというのであれば、おっしゃってください。
頑張って諦めます。
181 :
178 :02/05/11 12:52 ID:jMfWoJSU
>>180 >大きな1領域内に3つ領域を作って、特定の側のボーダーのみ表示すれば良いのでしょうか。
それでOK
でも、
>>171 を見てたらなんか違う気がしてきたな。
JavaScriptでウィンドウの大きさを取得して、
各領域のwidth,heightを書き換えるのが適当な気がしてきた。
でも、表示する中身がないのに枠だけ広げても
頭悪そうなんで俺はお勧めしない。
182 :
177 :02/05/11 13:05 ID:5DmKyMia
ぬあ?ライン引きたいだけなのか?
>>177 は解りやすいかなとbackground-color:blueと書いたが
これをborder-style:solidに変えたらそれっぽく見えないか?
って言うか数字は適当に変えてね
いや、根本的に間違えてるんだったらごめんなさいだけれども
俺を使ってくれよ。
ver 1.0(MSIE不可 Mozilla表示確認) <div style="position:absolute;top:5%;right:5%;bottom:60%;left:5%;border:solid 0.1em #000"> =上=============================================================================== </div> <div style="position:absolute;top:45%;right:60%;bottom:5%;left:5%;overflow:scroll;border:solid 0.1em #000"> =左下============================================================================= </div> <div style="position:absolute;top:45%;right:10%;bottom:5%;left:45%;overflow:scroll;border:solid 0.1em #000"> =右下============================================================================= </div>
height指定+overflowプロパティでなんとかならんか?
187 :
185 :02/05/11 14:37 ID:2aZ8R797
ちょっと待ってください。今改良しています。
ver 1.1(MSIE6およびMozilla1で表示確認) <div style="position:absolute;top:5%;left:5%;padding:0;padding:0;border:solid 0.1em #000;width:90%;height:35%;overflow:scroll"> =上=============================================================================== </div> <div style="position:absolute;top:45%;left:5%;padding:0;border:solid 0.1em #000;width:40%;height:40%;overflow:scroll"> =左下============================================================================= </div> <div style="position:absolute;top:45%;left:45%;padding:0;border:solid 0.1em #000;width:50%;height:40%;overflow:scroll"> =右下============================================================================= </div> --- しかし、なぜ185がMSIEでうまく表示されないのかは謎だな。
190 :
女陰 :02/05/11 19:35 ID:4MAeLJ1d
CSSを書くときには ジャバスクリプトみたいにコメントタグで囲むのでしょうか?
>>190 そう言われてるけど、コメントしなかったからといって表示してしてしまう
ブラウザはほとんど無いらしいよ。
まあ、囲んどけば安全じゃない?
>>191 XHTMLではコメントするとエラーになります。linkでファイルを指定するのがもっとも安全。XHTML™ Basicでも使える。
193 :
女陰 :02/05/11 19:45 ID:4MAeLJ1d
>>191 &192
ありがとうございました。
CSSファイルを外において指定する事にします。
>>193 192 は解りやすさを優先して「エラー」と言ったのだと思うけど、一応。
正確には XHTML の場合、コメント部分は例外なく注釈として扱われるために
中身が解析されなくなる、ということっす。
ちょっと理由があってソースの全貌が記述出来ないんですが、 <span id="mn' style="position:relative; top:5px; left;10px; height:25px; visibility:visible; z-index:15"> <a href="javascript:void(0);" onmouseover"onMenu(); EnterFlag=false;" onmouseout="offMenu()" onfocus="this.blue()"> <img src="hoge.gif" border="0" width="58" height="58"></a><br> </span> こう記述すると、Netscape6でhoge.gifの上半分が切れて表示されなくなって しまうんですが、回避方法ってありますか?position:relativeをabsoluteに変更 するとNetscape6では表示はちゃんとされるんですが、Netscape4.xで意図した 動作をしてくれないので、出来ればposition:relativeのままで使いたいんですが。
196 :
171 :02/05/11 22:46 ID:janyy/B4
思ったより長く居座ってしまって心苦しいです。
しかし残念ながら、皆様の考えて下さったソースは、
どれも私の考えているものと異なっているように私には見えまして、
そこでようやく、私のほうからの説明が不足している状態だと気付きました。
まず動作確認はIEの6で行っております。
次に、どのような記述をしたかですが、以下です。
<div style="border-style:solid">上</div>
<div style="margin:2% 0px 0px 25%;border-style:solid;position:absolute;width:75%">右</div>
<div style="margin-top:2%;border-style:solid;position:absolute;width:20%">左</div>
この左右のボーダーを縦幅いっぱいに広げたい、ということです。
これらの情報が欠けている状態で、皆様の手を煩わせてしまいまして、申し訳ありません。
なんか
>>181 の言っている事も、もっともな気がしてきたのですが、まだ諦めません。
どうかよろしくお願いします。
width:100%って指定すると変な横スクロールが出現してしまいます。 何がいけないのでしょうか?
指定した要素やその親要素に余計な margin や padding が指定されてるとか。
(´-`).。oO(変じゃない横スクロールってあるのかなぁ)
>>197 何に対してWidthを指定しましたか?
201 :
197 :02/05/12 00:44 ID:UHMdvSHC
margin や paddingを0にしても出るんです。 h1とか、addressとかに指定してます。
h1とかを他の要素で囲んでないか?body直下か? ボックス周りの計算はIEとNNで異なるぞ。 確かこのスレのどっかに説明してるサイトがあったな。
何も… <body> <h1> だけで出ます…。 えと、すいません、もうちょっと自分で調べてみますね。 ちなみにMacIE5です。
妥協で100%を95%にするとか言う事は許されない状況ですか
<h1 style="width:100%">あ</h1> にしたけど何も出ないよ。他の指定が絡んでいるはず。
ちょっとお聞きしたい。 MacIEではfloatにwidth指定をしないと駄目らしいですが、 width:auto;でも良いのですか? emだとブラウザとかで違ってくるのでなかなか難しいものがありまする。
>208 color:#000 と 同:black で検査値通過するってことは、それでもいけんじゃないのかな? ちょっと意味がちがうのか。
>>208 width:autoは結果はUA任せだから
>>208 にとってあまりよろしくない結果になりような予感。
>>208 幅を「明確に」しなくてはならないので auto は不可。
emで特に実害はないと思う。
ところで、 div{ background-color : white } a:hover div{ background-color : black } みたいのがネスケで動かないのは何故なんですかね…。
aの中にdiv入れちゃ駄目よん
…(;゚д゚)…ブロックにリンクは貼るな、と。でもIEだとキビキビ動くんです…。 ボーダーくっつけるとメニューがちょびっと格好良くなるんでつかってるんですが、だめですか。
215 :
Name_Not_Found :02/05/12 18:42 ID:7uQ6zAmI
divにクラスつけて、子要素のaをブロックにしれ。 div.hoge a{ background-color:white; display:block } div.hoge a:lhover{ background-color:black; }
×a:lhover ○a:hover
似たようなもんだよ、aにブロック含めるのもaをブロックにするのも。 違いが出るのはlintだけか(w
どう似てるのか教えてくれ。
>>217 仕様には従っとかないと、ちゃんとした結果が得られないことは多々あるよ。
あー、そっか。displayがあるんだった。ありがとう。やってみるよ。
「仕様に合わせる」だけのために、本来の目的にそぐわない 利用法をすることの方がもっと大問題。 ここはStrictスレじゃないんだろ?俺はStrictスレヲチャーだが。
CSSファイルだけで12kbいったんですけど、 やっぱりCSSファイルの大きさも表示速度に関係ありますよね?
12kbは異常だね。 ソースみてみたい。
>>222 画像やtable同様、落ちてくるまでレンダリングされないか
落ちてきてからされ直すか。キャッシュがなく、positionなどが
多用されている場合、若干重いと感じたことがある。
重いイメージマップよりはましだけどね。
225 :
222 :02/05/12 19:59 ID:o2CxMtoD
あのCSS切り替えスクリプト使いたくて、一つに無理やりまとめたんですが、 やっぱ問題ありですか・・・。
227 :
222 :02/05/12 20:09 ID:o2CxMtoD
>>226 どうもです。たしかにスクリプトを変えればいいだけですね。
ありがとうございました。
228 :
Name_Not_Found :02/05/13 16:33 ID:KbJFwwEg
教えてちゃんですみません。 winxpになってからフォームの中のテキストと パスワードのボックスの大きさが違って表示されるんですが CSSで同じ大きさにすることはできますか。 よろしくお願いします。
>>228 input {
height: 12px;
width: 40px;
font-size: 12px;
}
みたいにheight,width,font-size指定すれば出来ないかな。
# OS関係あるの?
230 :
228 :02/05/13 17:34 ID:KbJFwwEg
>>229 今までのテキストとパスワードのボックスは
デフォルトで同じ高さ・フォントサイズで表示されていたんですが
xpだけパスワードのフォントが大きく表示されて
それに伴って高さも高くなるんです。
>>230 XPというか、XPに入ってるバージョンのIEで、だろ?
まあ、
>>229 に書いてあるプロパティを変更しる。
232 :
228 :02/05/13 17:57 ID:KbJFwwEg
>>229 さんの方法でできました!
ありがとうございます。
>>231 そうですIEで、ですすみません逝ってきます・・・
233 :
播磨屋の文頭 :02/05/13 18:04 ID:klVwzgVO
くだらない質問と思われそうだけど、きいてください。 文頭字下げのために p:first-letter{margin-left:1em;} としてページを作ってみた。 ところが、これが曲者だった。 というのは、p要素の途中で<br>が入ると、次の行は 字下げされない。 というわけで<br>は使わずに1つの文ごとに1つのp要素と して区切る。 これをやると一般的なブラウザでは行間がスカスカなので p {margin:0em;} とする そうすると今度は行間を空けたいときに適切な方法が見当たらない。 HTMLとして正しくても、ブラウザで読みづらいようなら、 そもそもCSSなんか使う意味がない。 対策1:行間を空けるようなところでdivを使う。 つまり div.paragraph {margin-bottom:1em;} として <div class="paragraph"> <p>今日はさくらたんに会えてはにゃーんでした(´▽`)</p> <p>また会えるかなあ</p> </div> <div class="paragraph"> <p>で、話はかわるけど・・・ とする。 こうすると行間の制御はうまくいくが、意味的にはpこそが 段落であり、div.paragraphはおかしな具合になる。 対策2:段落の頭にクラス定義 p.top {margin:1em 0em;} として <p class="top">今日はさくらたんに会えてはにゃーんでした(´▽`)</p> <p>また会えるかなあ</p> <p class="top">で、話はかわるけど・・・ これは構造的にスマートとはいえないだろう。 というわけで、文頭字下げスタイルの合理的な使用法はないでしょうか?
234 :
:02/05/13 18:10 ID:fMecb5ll
>233 text-indent
>>233 何だか大いに勘違いされてるようだけど、
字下げは text-indent です。
p {
text-indent: 1em;
line-height: 1.2; /* 〜1.5*/
margin: 0.5em 0;
}
こんな感じで問題ないと思うけど。
ハイカブリマシタ。ドンクサ。
>233 <P>今日はさくらたんに会えてはにゃーんでした(´▽`)<BR> また会えるかなあ</P> <p>で、話はかわるけど・・・ じゃダメなのか?
こんなことがしたいんじゃないかと思った。 p span { margin-left:1em; } <p> <span>今日はさくらたんに会えてはにゃーんでした(´▽`)</span><br /> <span>また会えるかなあ</span> </p> <p> <span>で、話はかわるけど・・・
239 :
播磨屋の文頭 :02/05/13 18:34 ID:klVwzgVO
あぁ・・・
text-indentって知らなかった、鬱。
さっそくかきなおします>_<
ありがとうございました
>>234-238 first-letterは英字新聞みたいに段落の1文字目を
大きくするときに使うのかなぁ。
>>239 失敬。わらった。
でも、まあ、最初は、どうすりゃいいのか、よくわからんものだから、
仕方ないやーね。
first-letterってちゃんと動くのか?
ああ、すまん。:before :afterと勘違いしてた。無視してくれ。
NN 4.7 で <span id="idx"> に .idx { border-style: solid; border: 1px; border-color: #333333; background-image: url(cssbg.gif); } と属性設定するのですが、どうしてもボーダーと画像の間に僅かな隙間が開いてしまいますが これはモウどうやっても CSS では回避不可能なのでしょうか? 1 日中これで詰まりまくって鬱...
245 :
243 :02/05/14 23:58 ID:6IpN+fJr
li { list-style-image : url(〜)} li.hoge { 略-image : none; 略-type : disc } NN、IEはこれでいけるが…Operaだと<li class=hoge>に <li>のimageが継承されるのはバグなのかねぇ?
>>243 実際に試せないので一言だけ。
border: 1px;→border-width:1px;
はどうよ?
# ただのtypoだったのかな・・・
248 :
244 :02/05/15 03:21 ID:e4LfQZLS
>>245 これに懲りずにいろいろチャレンジしてくれ。
NN4系では、要素に背景色、背景画像を指定しても
要素内にあるテキスト部分にしか反映されないと思います。
パッディングを0pxにしても無理っぽいです。
前に、いろいろ試したけどダメでした。
NN4系は、このほかにも基本的なところでCSSを拒絶するかのような
挙動をするので、かなり厳しいっす。
249 :
Name_Not_Found :02/05/15 11:14 ID:Kj6AXtWO
IEで<select disabled>ってした時に背景色を指定する方法ないでしょうか? disabled指定するとbackground-color:属性が効かなくなって白くなっちゃうんです・・
250 :
Name_Not_Found :02/05/15 11:57 ID:vfBtu263
レベルってバージョンとどう違うのでしょうか? CSSにはレベルがあってバージョンは無いですけど、 DOMはレベル2のバージョン1ってありますよね? レベル1の扱いはどうなるんですか?
version は「版」だと思えばいいよ。 英語版、日本語版、勧告版、WD版、第一版、改訂版、テキスト版、HTML版、etc. 各バージョン間の内容差は大きいこともあるけれど、必ずしもそうではない。 バージョン2の方がバージョン1よりより洗練されて簡素になる、なんてこともざらにある。 一方 level は「水準」。 JIS第1水準漢字と第2水準漢字とか考えるとピンと来るかな。 レベルの場合は1よりも2の方が確実に多くの機能を要求される側面がある。 おおざっぱにかついーかげんに言うとそんな感じ。
252 :
250 :02/05/15 18:44 ID:zIf4cCoG
253 :
Name_Not_Found :02/05/15 20:40 ID:PPEsN6fl
簡単なことを聞くようで申し訳ないのですが ボックスの幅を決めて使っていました。 winのIE、NSともに確認して大丈夫だったんですが macで見ると文字がボックスからはみ出していると言われてしまいました。 これはボックスの幅をmac用に広げなければ 解決しないのでしょうか? テーブルみたいに高さでのびてくれると思っていたのですが。 ちなみにfontサイズ12pxです。
254 :
Name_Not_Found :02/05/15 20:43 ID:PPEsN6fl
あ。ごめんなさい。間違えました。NN6です。
255 :
Name_Not_Found :02/05/15 20:54 ID:FVDabpbF
>これはボックスの幅をmac用に広げなければ >解決しないのでしょうか? 多分そうなんじゃないかなぁ…? 特に意味が無いなら幅固定を止めるのが吉
%で指定したりねぇ。
257 :
まかー :02/05/16 09:22 ID:5RLDHeOs
ブラウザはMacの何で? 聞いている限りではtext-align:justifyの問題に思えるけど。 指定してる?
258 :
253 :02/05/16 20:49 ID:Am8fgE1m
%指定だったら大丈夫でしょうか? 実は教えてくださったかたは知らない人で 通りすがりに「はみ出してる」とのチュウイをうけたのです。 なので何がどうなのかさっぱり。 text-alignの指定はしていないです。 divにmarginとpaddingはとっています。heightはとってないです。 なにが問題なんでしょう?
(´-`).。oO(
>>253 は相対単位と絶対単位の事理解しているのか?…)
261 :
253 :02/05/16 23:30 ID:Q+qp7ZRF
あ、letter-spacingとってます。 それが原因ですか?
263 :
Name_Not_Found :02/05/17 00:48 ID:m6ba9rSU
MENU 本文 プロフィール ああああああああああああああああああ ・・・・・ ああああああああああああああああああ ・・・・・ メールアドレス こう表示させたいんです。 下のソースでは上手く表示できません。 ソース .menu{ margin-top : 30px; margin-left : 200px; position : absolute; } .main{ margin-top : 30px; margin-left : 250px; padding-right : 50px; } .mail{ text-align : center; } 気が狂いそうです、どうにかしてください。
264 :
Name_Not_Found :02/05/17 00:54 ID:m6ba9rSU
.menuのソース間違えました。 .menu{ margin-top : 30px; position : absolute; }
.menuにfloat設定すれば良いのでは? 等と提案してみるテスト。
267 :
263 :02/05/17 03:39 ID:m6ba9rSU
ありがとうございます解決しました。
268 :
Name_Not_Found :02/05/18 00:17 ID:xIDl95mA
すいません。お尋ねしたいことが。 IE5.xあるいは6.0で要素の固定、って可能なんでしょうか。 position: fixed; だとNetscape6.xやMozzilaしか効かないですよね。 調べた限りではheightを調節して擬似的にそれっぽく見せかける ことくらいしか無いかな、という感じなのですが。 どなたか、ご存知の方おられましたらご教授願います。
position:absoluteで書いてjavascriptで位置を変えるしかないのではなかろうか。
270 :
253 :02/05/18 02:27 ID:57J4a3RY
262さん、ありがとうございました。 解決はしなかったけど納得はしました。
別のページにリンクしている画像の上をマウスで通過したときに枠線を変えるようにしようと、 --HTML-- <div class="imgbox"> <a href="***.html"><img src="***.jpg" border="0" width="0" height="0"></a> </div> --CSS-- .imgbox a:link,.imgbox a:visited{ border:solid 1px #FCFCFC; } .imgbox a:hover,.imgbox a:active{ border:solid 1px #00BFFF; } としたんですが、上の線だけ表示されません。 なぜでしょうか?あと、解決策お願いします。
width="0" height="0"は間違いです。本題と関係ないので、気にしないでください。
お騒がせしました。 imgboxにpaddingを加えたら表示されました。
cssファイルって、リロードしても再読み込みしてない気がするんですけど、 なぜですか? 直してうpしなおしても、キャッシュに古いのがあると、そっちを使われて しまうような…。気のせいですか? どうしたら更新が反映されますか?
277 :
275 :02/05/19 02:28 ID:Y1KgJcv1
そうですか?ローカルでも同じなので 「そういうもん?」と思ってたのですが…。
普通はリロードでcssも再読み込みされます。
279 :
275 :02/05/19 03:12 ID:Y1KgJcv1
そうですか…私の気のせいだったのでしょうか。失礼しました。
>>275 mozillaのデフォルトは良くそうなったような...。
今、mozillaがないので、どこをイジったら良いかがわからんけど。
Mozillaだったかはわからんけど、一度tempを空にしないと更新が反映されないのがあったな…。 めんどくさくてテスト環境から抜いちまった。
Opera じゃない?
283 :
268 :02/05/19 15:06 ID:IUXQidZY
>>271 ありがとうございます。
頑張ってみます。
>282 いや、Operaはできる。 このブラウザはリスト周りが変(仕様か?)なの以外、特に問題にあたったことないな。 噂のユーザースタイルシートは、みんなが”堅実”にマークアップしてかないと使い物にならん。 漏れのとこ?…今更むりぽ。。
285 :
Name_Not_Found :02/05/19 16:58 ID:yWoPFthD
仕様書を見て勉強してるんですけど text-shadowのところに >Each shadow effect must specify a shadow offset と書いてあります。 しかし、Value:の部分を見ると none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit となってます。 これだと省略可能に見えるんですが、どうなってるんでしょうか? W3CのValidatorでも色さえ指定してあれば警告はされないようです。
>>285 省略してもinvalidではないが、指定すべきだぞ
なんて曖昧な解釈じゃだめなのか、そうなのか。
287 :
Name_Not_Found :02/05/19 21:42 ID:TeDHonxD
acronymみたいな効果をcssでやるにはどのように記述したらいいのでしょうか? カーソルを上にのせると語句が小さくでるのが、やりたいのですが
>>287 IEなどなら
<span title="ふー">foo</span>
289 :
Name_Not_Found :02/05/19 22:53 ID:75Z/r0FQ
290 :
Name_Not_Found :02/05/20 15:08 ID:UGiMlcMC
letter-spacingで文字幅を設定してるんですが <br><br>みたいな一つ空白をあけるような改行ってできなくなりますよね? 普段は<br>を使った改行は使わないからいいんですが 掲示板だと空白を自動的に<br><br>に変換されるので letter-spacingを使ってると空白が空かなくなります。 letter-spacingを使ったまま<br>による空白をあけたりすることってできるんでしょうか?
letter-spacingと改行がどう関係するのかは謎だが、 line-heightを使うといいことがあるかも。
>>290 WinIEのバグ
letter-spacingを諦めるか
<br>を余分に吐かせるとか。
IE以外で1行余計に開くけど。
>>290 br { letter-spacing: 0 }
で解決しますよ。
294 :
292 :02/05/21 10:03 ID:rnsC6r1v
>>293 そーだったのか。知らなかったよ。ありがd
295 :
Name_Not_Found :02/05/21 19:49 ID:WpxX6BnD
おい、お前ら。フォントファミリーは何をどういう順番で指定してる? 特に日記とかで長文書く場合とか。教えて下さい。
296 :
Name_Not_Found :02/05/21 22:54 ID:92GS30Ip
テーブルを画面の中央に配置するのはどうするんですか? 縦位置も指定したいです。
auto
Mozilla5以降は margin-right:auto; margin-left:auto; IE5以前はtableの外から text-align:center; IE6もどっちかでいけるはず。
サイトで小説を発表してるのですが、スタイルシートをオフにすると <p>の1行あきが大変間抜けな感じです。 回避策はないでしょうか?
>>299 どんな使い方をすれば気になるんだろう。
小説サイトなんだろ? わからん。
301 :
299 :02/05/22 00:02 ID:1B+jKFlx
え?すいません、変なこといいました? ブラウザが勝手に小説を段落ごとに一行あけてくれるので、 小説の体裁に見えなくてトホホってことです…。 普通は一字下げで段落をあらわすので…。
302 :
299 :02/05/22 00:06 ID:1B+jKFlx
全然cssの質問じゃないですね。すいませんでした。
>>301 つうかそのためのスタイルシートだろ。
オフにしたらブラウザデフォルトのスタイルになって当たり前。
そんなに体裁を変えたくないのならpre要素でも使え。
新鮮な質問だなあ。「スタイルシート切ったときの表示がおかしい」て。 デフォルトでスタイルシートつけるビルダーもあるんだろうな最近は…。
305 :
:02/05/22 00:21 ID:ZdNA/19c
>295 指定しない.長文を読ませるなら特に.個々人で見慣れたフォントで読みたいだろうから.
306 :
Name_Not_Found :02/05/22 00:22 ID:IyoSMnaP
テーブルは縦位置を中央に出来ないの?
>>299 スタイルシートオフの場合だと、
行間を広くする指定が利いていないはず(多分)だから、
段落の間で多少空間がないと、全体に文字がびっしり詰まってしまい
文を読む気が失せてしまうはず。
∴間抜けな感じになっても<p>のところで間があいた方がよい。
スタイルシートがオンになっているなら行間が空いているはず(指定出来てるはず)だから
普通の書籍のように、
段落の頭で一字下がるだけで行間は一定なのが気持ちがいい。
>>306 閲覧側の画面解像度なんて知らねぇよ、と仰せられるなら、絶対配置でどうぞ。
>>306 縦も横も中央なんて、窓サイズに依存するWebページでやることじゃない。
水平位置を中央にすると、窓サイズ次第で中身が縦方向に伸縮するでしょう。
そんなんお構いなしで、且つ重くなってもいいならテーブルネストね。
是非やめてほしいけど。
フォントサイズをptにすると 文字サイズ設定でユーザーの好みに かえられるって伺ったんですけど 指定する場合やっぱしptのほうがいいんですか? 今は12pxと14px指定にしてるのですが。
>310 せっかくそんなこと考えているのなら 初めからユーザーの好みを尊重してあげて%指定にして下さい. ちなみにpxもptも絶対指定ですので UAによっては大きさを変えることはできません.
312 :
Name_Not_Found :02/05/22 12:04 ID:GuarefXm
複数フォームのradioボタンの一番左をチェック済みにするのってスタイルシートで作れますか? 例えばradioAグループ、radioBグループがあった場合両方の一番左がチェック済みにしておきたいのです。 タグでの指定は避けたいところなのですが・・・・。
>>312 タグでやってください。何故避けたいのかわからん
いくつかランダム生成するradioフォームがあるためタグだと対応しきれない場合があるのです。
>314 ランダム生成って事はCGIとかでしょ? 簡単にできそうなんだけど.
316 :
Name_Not_Found :02/05/22 16:33 ID:7u5E5pRg
テーブルのカラム毎に、印刷(not表示)で網掛けするにはどうしたらいいのでしょうか? IE5以降のみ対応で構いません。 やったことor情報をご存知の方、よろしくお願いします。 ……ブラウザの印刷機能なんか使うなよな(T_T)
background-image: url(網掛けの画像); はだめなのか?
318 :
316 :02/05/22 17:12 ID:7u5E5pRg
>>317 background-imageって、<TD>に設定できましたっけ? 手持ちの資料では<TABLE>のみなんですけど……
<TD>の中身一つ毎に<TABLE>切って見ようかなぁ(T_T)
320 :
316 :02/05/22 17:27 ID:7u5E5pRg
>>318 自己Resです。
<TD>にbackground-image、設定できました。私の勘違いです(拝)
……が、印刷には出てきません(T_T) 少なくとも印刷プレビューには何も出てきませんでした(T_T)
インターネットのプロパティ→詳細設定→印刷:背景の色とイメージを印刷する
>>320 @media Printは指定してるか?
あと、IEの設定(インターネットオプションの詳細設定)で
「背景の色とイメージを印刷する」のチェック入ってるか?
縦方向は出来ません、って何で素直に言えないんだこのスレの人達は。
324 :
316 :02/05/22 17:44 ID:7u5E5pRg
>>321 難しいこと何にもしなくて、bgcolorで巧くいったっす……(T_T)
……逝って来ますね(;_;)
とりあえずアドバイス多謝(拝)
326 :
Name_Not_Found :02/05/22 18:53 ID:fjEEK/Y0
div要素を段組したいんだけど、N6でおかしな感じになります。 ソース書きますのでどなたかご教授あれ。 <!--html--> <div class="foo"> <h2></h2> <dl><dt></dt><dd></dd></dl> </div> <div class="foo2"> <h2></h2><p></p>・・・<p></p> </div> <--ここまで--> <!--stylesheet--> div.foo{ width : 60%; float : left; margin-left : 1%; margin-right : 1%; } div.foo dt{ font-size : 130%; margin-top : 3%; } div.foo dd{ font-size : 105%; line-height : 170%; } div.foo2{ width : 100%; margin-left : 1%; margin-right : 1%; } div.foo2 p{ margin : 0.3em; padding : 0.3em 0em 0.3em 0em; font-size : 105%; line-height : 170%; }
327 :
Name_Not_Found :02/05/22 18:58 ID:fjEEK/Y0
N6だと何故かh2が100%で横に広がるんですよね。 加えてdiv.fooの上にdiv.main{width : 100%}としたものを指定してるんですが そのmain領域から縦がはみ出してしまいます。 うまい回避方法ないでしょうか。おながいします。
>>326-327 材料が足りん。
とりあえずwidth : 100%やったところのmargin,border,paddingを0に。
329 :
Name_Not_Found :02/05/22 19:26 ID:fjEEK/Y0
足りんかったですか。スマソ。 こんな感じにしたいのです。 ---------------------main領域--------------------- ---------------foo--------- -----------foo2------ <h2></h2> <h2></h2> <dl><dt></dt><dd></dd></dl> <p></p><p></p> ----------------------main終了-------------------
>>329 div.fooとdiv.foo2のwidthの合計が160%
>>330 いや、それはわかってるんですよ。なのでN6用にwidth指定は
変えてるんです。fooを55%、foo2を35%みたいな。
最初はそこだけいじれば済むかと思ったらおかしな事になってるという罠。
バグじゃ・・・ないですよね?
foo2 にmargin-left: 60%
div.foo2にもfloat:left
>>332-333 有り難う御座います。foo2にfloat:left指定する事で位置は決まりました。
が、fooの内容がmain領域からはみ出してしまいます。
IEではきっちりはまるんですが何が原因なんでしょう?
っつーか何でこんなにボックス周りはややこしいんでしょうか。激しく鬱です・・。
335 :
334 :02/05/22 21:46 ID:fjEEK/Y0
何度もスマソ。padding-bottomを設定する事で無理やりなんとかしました。 しかし腑に落ちない。operaで見たら死んでるんだろうなぁ・・。
極力単純にすると <body> <div>…助けて(;´Д`)</div> <div>(´Д`;)ください…</div> <div> 〜以下続く </body> という感じにブロックが並んでます。 で、ブロック間の間隔を空けたいのですが div{margin : 5px} だと親要素からの距離だから駄目ですし。。 何かよい方法はないでしょうか。
>336 div {margin-bottom: 1em;} でいいんじゃない? で、最後のブロックにID振って そのID {margin-bottom :0;}みたいに打ち消す感じで。
あんまし変わりませんでした…。混乱ぎみ…。 ○<div class=見出しっぽいの>○ ○ ○<div class=内容とか>……</div>○ ○<div class=内容とか>……</div>○ ○<div class=内容とか>……</div>○ ○ ○<div class=見出しっぽいの>○ 〜以下続く <div class=内容とか>間の間隔が空かないのです。○部分はいけますが。 ちなみに div.内容{margin : 5px} の指定はNN、Operaでは理想的に表示されてまふ。
インラインフレームみたいに内容がおっぱいおっぱいのときに スクロールするのをdiv要素で div#outline { width:650px; height:400px; overflow:auto;} とつくって a要素 name属性でページ内の特定の場所にジャンプするやつ作って 擬似インラインフレーム DIVをスクロールさせたいんですけど。 <div id="outline"> <ul> <li><a name="shit" id="shit">スカトロ</a> <ol> <li>うんこ</li> <li>うんこ1</li> <li>昨日のウンコ</li> <li>今日のウンコ</li> <li>.......... </ol> </li> </ul> </div> <div class="navi"> <a href="unko.html#shit">うんこへジャンプ</a> </div> とすると。IEだとちゃんとDIV内がスクロールされてジャンプするんですけど、 NNは反応しません。 (OperaはOverflow効いてないので無視) NNでも反応するやり方ってありますか?
しまった、CSSで聞いてしまった。すいません。擦れ違い
すみません。助けてください。 NN4でリサイズするとCSSが無視されてフォントのサイズが でかくなってしまいます。 ただし、このページはフレームを使っている場合のみで、 単独1枚の場合だとリサイズしても大丈夫なのですが。。。 リサイズの度に再読み込みをさせるスクリプトも入れたの ですが、フレームを合体するとダメになってしまいました。 。。。このままだと、しばかれますので。
>>341 NN4は無視しなさい
それがサッポロ一番
>>341 CSSはフォントサイズを固定するものではありません。
指定法によって固定になるIEが馬鹿なの。
344 :
Name_Not_Found :02/05/23 18:52 ID:Gt243kXV
かちゅスキン作ってるのですが、 AA(ブロック要素)[黒]とレス内容(ブロック要素)[白]を 下図のようにしたくて ■□□□ □□□ このようにしてみたんですが、 黒 { width:○○px; float:left; } こんな感じになってしまいます。 ■ □□□ □□□ 黒の高さだけ微妙に右にズレます。 白のwidthを指定すればいいのですが、そうすると なぜか白もfloatになってしまうらしく JavaScriptで白要素内のoffsetTopが利用できなくなります。 テーブルは重くなるので使いたくありません。 float以外にきっちりレイアウトできる方法ありますか?
初めて質問させていただきまス TABLEデザインからCSSに切り換えてまだ間もない若造でス。 現在段組みで手こずっており、色んなHPや本を参考にさせていただきまスて なんとか段組みに成功しまスた。 が、漏レのやり方ではブラウザよっては下に横スクロールバーが出てしまうようです。 漏レの持ってるのはIE5.5、ネスケ6.1、NN4.7、Mozillaですが IE5.5だけ、ちまちまとブラウザの幅を変えていくとスクロールバーが 出たり消えたりするという、けったいな現象がおきてます。 CSSを別ファイル(test.css)にして DIV{ text-align : center; } .gazou{ width : 50%; float : left; } #chuou{ clear : left; } で、HTMLのソースは <DIV class="gazou">画像左上</DIV> <DIV class="gazou">画像右上</DIV> <DIV ID="chuou">画像中央</DIV> <DIV class="gazou">画像左下</DIV> <DIV class="gazou">画像右下</DIV> で、 ┌──┐┌──┐ └──┘└──┘ ┌──┐ └──┘ ┌──┐┌──┐ └──┘└──┘ こんなカンジに表示されるようです。 なぜIE5.5だけ下にスクロールバーが出たり消えたりするのかサッパーリです どなたか解る方教えてくdふぁさい。おねがいします。
346 :
Name_Not_Found :02/05/23 20:49 ID:hY1gK4CT
>>345 表示領域が奇数ピクセルか偶数ピクセルかでバーが出ちゃうんじゃないの?
気にすることもないかと。
347 :
341 :02/05/23 21:09 ID:RDLajreE
>342さん、>343さん、 ありがとうございます。 NN4だとバグがあるので、と説明しても 「お前の勉強不足だから、言い訳すんな」と言われるんですよ。 WEBぜんぜん分からない人達に。 前は、ノートブックは横から見ると真っ暗やから明るい色に 変えろまで言われました。 あ、愚痴ってすいませんでした。ごめん。
>>346 Σ( ̄□ ̄ヅガーン
そんなことだたのカヨ・・・
.gazou で width : 49% ; にしたら回避できまスた
よく考えたらソウダヨネ・・・
マジありがとうございまス。精進します
>>347 世の中にはもっとアホな事を言ってくるヤシがゴマンといるから
ノートブックは横から見ると真っ暗だから云々なんて言われたら
すぐに論理立てて反論して、納得させるように
ならなきゃやっていけないぜ。
>>344 白にmargin-left指定。(そのマージン内に黒が入る)
352 :
344 :02/05/25 00:18 ID:+bQOWfo2
>>351 やってみたんですがやはりズレてしまいます。
<style type="text/css"><!--
.aa {
border: 1 solid gray ;
text-align: center ;
width: 50 ;
float: left ;
}
.res {
border: 1 solid gray ;
margin-bottom: 10 ;
margin-left: 60 ;
}
--></style>
<body>
<div class="aa">∧ ∧<br>(*゚ー゚)</div>
<div class="res">逝<br>っ<br>て<br>よ<br>し</div>
<div class="aa">∧ ∧<br>(,,・д・)</div>
<div class="res">オ<br>マ<br>エ<br>モ<br>ナ<br>ー</div>
float要素の横に配置された文字はmarginと関係なしにズレるようです。
解決策としては.resにwidth: 100% ;を加えるとキッチリ配置されます。
しかしそれをやってしまうと
>>344 に書いたとおり、JavaScriptで白要素内の
offsetTopが利用できなくなるのでできれば避けたいなと。
応用としてfloatさせずに.resのmargin-topを-60くらいにしてみたのですが、
きちんとレイアウトされる代わりにレス数が800とかになるとスクロールがガクガクに
なってしまいます。これもあまり使いたくない・・・
なにかいい方法ないですか?
>>344 .aa {
position:absolute;
left0;
border: 1 solid gray ;
text-align: center ;
width: 50 ;
}
/*他は同じ*/
こんなんでどうよ? 一応お望みの結果にはなると思う。
ただ、positionを使っているからJavaScriptやらスクロールガクガクやら
バージョンごとの互換性やらでさらに問題が出るかもしれんが。
354 :
344 :02/05/25 00:45 ID:+bQOWfo2
>>353 !なんかよさげですね。ちょっくらその方向で作ってみます。
しぃスキンLight 作ってる人だったのか。
>>355 Janesyrup_test用スキンでいつもお世話になっています。
358 :
Name_Not_Found :02/05/25 19:05 ID:AK3Oryzu
body{text-align : center;} にしたら 他の属性にマージン指定しても真ん中になるのかよ! どうなってんだよ!
359 :
Name_Not_Found :02/05/25 19:06 ID:KYP/yMcm
<h1>サイト名</h1> <ul> <li><a href="./index.html">Home</a></li> <li><a href="./infomation.html">Infomation</a></li> <li><a href="./bbs.html">Bbs</a></li> </ul> <h2>なんかの題名</h2> li{ float : left; } って指定すると、<h2>が<li>の横に来てしまうのですが、<h2>が float の影響をまったく受けないように するにはどうしたらいいんでしょうか? サイト名 Home Infomation Bbs なんかの題名 ↑このように表示されてしまうのを サイト名 Home Infomation Bbs なんかの題名 としたいということです。UAはNN6です。 なるべくHTMLの部分を変更せずにCSSのみで実現したいのですが。
>>359 h2にclear:leftでどですか?
>>360 さん
で、出来ました!感激です。というか、気付けよ…私。
ありがとうございました。
362 :
358 :02/05/25 19:15 ID:AK3Oryzu
俺には答えてくれねえのかよ! どうなってんだよ! つーか 真ん中にしたくないやつに floatを指定したら真ん中に表示されなくなったよ! どうなってんだよ!
364 :
358 :02/05/25 19:27 ID:AK3Oryzu
うるせえよ!
365 :
:02/05/25 19:31 ID:ejlCovJB
>364 OSもブラウザもバージョンもソースもないのに答えろと言うほうがむちゃですが.
366 :
358 :02/05/25 19:35 ID:AK3Oryzu
そ、そりゃそうですよね、あははは
>>359 とりあえず Infomation はアップロード前に直しておくことを進言いたします。
368 :
358 :02/05/25 20:19 ID:AK3Oryzu
わははー
ホントだホントだー!
よく見りゃ
>>359 の奴infomationって書いてやんのー!(笑
え?それはお知らせって言いたいのかな?(笑
英語ペラペーラのミーにはなにがなんだかさっぱりわっかりましぇーん!(笑
ネスケ7、…どうよ? なんかmarginがあちこちおかしいんだが…?
知らん。
371 :
Name_Not_Found :02/05/25 20:37 ID:YXvHMcxL
webサイト制作初心者スレから誘導されてきました。 「タグ<FONT>はHTML4.0以降非推奨だから使うなゴルァ(゚Д゚)!! と文法チェッカーに言われます。どのように文字の装飾をすれば良いのですか? 」 と質問したのですが、CSSを使いなさいと言われました。 で、私がやりたいのは見出し<H4>や段落<DIV><P>毎の装飾ではなく、 文中の特定の文字のみに装飾を施したいのですがどのように指定すれば良いのでしょうか? 例えば↑の文章で言えば【見出し】と【段落】という言葉を青字にして、 他はデフォルトにしたいといった感じです。 こんな説明で分かるでしょうか?
>>371 フレーズ要素でマークアップすればいい。
<em>見出し</em>
<em>段落</em>
とかして、
em {
color: blue;
}
<p>通常の段落の一部でも<span class="cool">クールな内容は青。</span></p>
>>371 >>372 の言っているように span でもいいんだけど、
できれば em (強調)や strong (強い強調)に CSS を適用するのが好ましい。
<em>見出し</em> として em {color:blue;} とか。
376 :
371 :02/05/25 21:15 ID:YXvHMcxL
>>373 ,375さん
ありがとうございます!
<em></em>を使うことで文字の色変更ができました(・∀・)
目から鱗です。
>>372 ,374さん
spanはこれから検索して勉強していきます。
>>375 > できれば em (強調)や strong (強い強調)に CSS を
それが文脈的に「強調の意味なら可…とかいうと宗教的になって
しまうので自粛(w
spanってそういう時 - そこが強調とか定義語とかの意味がないとき
- に用います
>>371 さん
>>375 書いてる本人はわかってると思うけど<em>見出し</em>は例として良くない。
見出しに<h*>タグ(*には1から6の数字)ではなく<em>を使う人が出るかもしれないから、
一応訂正。
379 :
359 :02/05/25 21:49 ID:KYP/yMcm
あ、informationですね。英語力のなさが…(涙 でもこれで一つ勉強になったYOありがとYO
380 :
371 :02/05/25 21:57 ID:YXvHMcxL
>>377 ポケットリファレンスにはそこまで詳しく書いてないので勉強になります。
ちゃんとメモしておこうフムフム
>>.380 ばけらとKANZAKIさんのサイト見てね。
>>381 どちらも激しく参考になるけど、KANZAKIさんとこが先の方がいいかも。
あとはもう
>>2-5
切り替えスクリプト使って画像の差し替えってどうやったらいいと思う? 今タイトル画像が<h1><img></h1>って感じなんだけど、<h1>にbgとposition使って 無理やり表示させてみるっていうのはスマートじゃないよね? そもそもこれでやっちゃうと<h1>の中身が無くなっちゃうんだよなぁ。 strict的にはNGじゃん?何か(・∀・)イイ!! 案無い?
384 :
Name_Not_Found :02/05/26 08:31 ID:0xd/LF01
>>383 > <h1>にbgとposition使って
これが一番楽で良いと思うけど…。
<h1>サイト名</h1>とサイト名をきちんと表示させ、画像と被せてデザイン作ればStrict的にはOKでしょ。
ちょと、バリエーションを作るの大変かもしれないけど。
むしろ、もっといい方法があるなら、教えて貰いたい。教えて。というわけでage
<h1><span>サイト名</span></h1>じゃ助長かな・・。 っつーかstrict的にNGだろうしな・・。 ><h1>サイト名</h1>とサイト名をきちんと表示させ、画像と被せてデザイン作れば これがムズイ。
補足。 <div>で囲んで<div><h1></h1></div>なら簡単にできそう。 でもこれって<div>病?(w
俺はh1{display:none;}でタイトル画像を代わりに表示、 ってやってるんだけどstrict的にはNG?
>>387 CSSだしね。HTMLとしてはStrictでも考え的にはNGなのかも。
Strict信者じゃないからなんとも。
>>387 漏れはこうする事にしたYO!信者に聞いてみるか。
<div class="title">
<h1>サイト名</h1>
</div>
div.title{
background : url(hoge.png) no-repeat;
height : ☆px;
}
h1{
display : none;
}
ところでおまいらに基本的な事を聞きたいんだけど、
シートって全部一緒に記述してる?ページごとに記述してhoge.cssに@importしてる?
切り替えやろうとしたらどっちかになると思うんだけどさ。
っつーかどっちが良いんだ?
390 :
Name_Not_Found :02/05/26 16:59 ID:7bpGU8gc
全部一緒が(・∀・)イイ!よ。だって管理が楽だもん。
>>390 重くなんない?@import自体負荷がかかるんだけどさ。
例えばさ、a.htmlの<p>にはこんなスタイルを。b.htmlの<p>にはこれを。
c.htmlにはこれを。ってな感じでいっぱいclassを振り分けるとわけわかんなく
なっちゃったりってない?だったらページごとに記述して一つのファイルに
importした方が管理が楽な感じもする。
と言うかまぁCSS自体ファイル管理を楽にする為の要素も大いにアリだろうから
自分がわかりやすい方を選べば(・∀・)イイ!! のかね。
悩ましい・・・。
392 :
Name_Not_Found :02/05/26 18:02 ID:soRGGWV7
>>391 うちもぜんぶ1枚にまとめてるけど、全部で9kbほどだし、特に重くはない。
CSSの場合、HTML部分を極限までダイエットしてるんだから、少々CSSが肥大化
したところで世間のサイトに比べりゃまだまだ余裕でしょ。
うちにはCPU100MHzでメモリ20Mの超貧弱機もありますが、それでCSSコミューン
方面を徘徊しても軽快です。あ、でも背景画像固定だけはユーザースタイルでキャ
ンセルしてます。
でも同一のシートを長年使い続けてると、役目を終えたのに消し忘れたスタイル
設定とかあるんですよね。そういうのチェックするソフトはほしいかも。
もしかしてTopStyleのプロ版とかそういう機能ありますか?
>>391 全てのHTMLファイルが同じデザインで同じタグ使ってるからCSS自体は3Kb。
まぁ、そこら辺は…あまり変わらないかもしれないけどAir'Hでも大丈夫だった。(キャッシュが時々効いてるけど
>>392-393 うちは10kbだった。さっき過去ログ読んでたら
>>222-227 辺りで
同じような話題が出てたわ。でも12kbで異常か。
やっぱファイルごとにデザイン変えるとサイズ大きくなるんだね。
色彩とかは同じようにしてるんだけど微妙に変化させるだけでもクラス割り
しないといかんしなぁ。情報ありがd。
>>392 TopStyleのプロ版は使ってないからわからない。スマソ。
漏れにはLiteで十分だ(w
100Kbとか表記されたときに `ビットとか思てしまうのは俺だけですか? k=1000 K=1024とある会社がしていましたがソレに気付かなかったのは俺だけですか?
396 :
:02/05/26 22:23 ID:KduQlb0g
a{text-transform:uppercase;} <a href="xxx.html">lllll</a> でも大文字で表示されないんだが・・・
397 :
:02/05/26 22:31 ID:KduQlb0g
すいません。補足すると、 font:120% /120% "arial black";を付け足したら表示されなくなりました
398 :
Name_Not_Found :02/05/26 22:34 ID:dvOwmfmt
マウスを上に乗せた時に、色を変化させるのすCSSで出来るのでしょうか? 出来るのでは、やり方を教えて下さい。
400 :
399 :02/05/26 22:44 ID:7cYlQPVZ
ちなみに、Win IE6.0,Mozilla1.0 RC2,Opera6.01で ちゃんと大文字になることを確認しますた。
401 :
397 :02/05/26 22:52 ID:KduQlb0g
--CSS-- .menubox{ width:180px; background-color:#000000; position:absolute; top:60px; left:5px; z-index:2; text-align:center; } .menuframe div a{ text-transform:uppercase; text-decoration:none; font-size:16px; font-family:"arial black"; } .menuframe div a:link,.menuframe div a:visited{ color:#A52A2A; } .menuframe div a:hover,.menuframe div a:active,.menuframe div a.sel:link,.menuframe div a.sel:visited, .menuframe div a.sel:hover,.menuframe div a.sel:active{ color:#FF4500; } .menuframe div{ margin-top:7px; margin-bottom:7px; } --HTML-- <div class="menubox"> <div class="menuframe"> <div class="menu1"><a href="index.html" class="sel">Home</a></div> <div class="menu1"> <div class="menu2"><a href="link.html" class="sel">Link</a></div> </div> </div> おおまかにこんな感じです
402 :
397 :02/05/26 22:53 ID:KduQlb0g
すいません、 <div class="menu1">が余分にありますが、気にしないでください
403 :
397 :02/05/26 22:54 ID:KduQlb0g
上のならOKなんですが、 font-size:16px; font-family:"arial black"; を font-size:16px /100% "arial black"; のようにまとめると、表示されなくなりました。
>>397 さん
>>403 がtypoでないのなら、元のCSSファイルにtypoがないか
確認してください。
.menuframe div a{
text-transform:uppercase;
text-decoration:none;
font:16px "arial black";
}
↑以外は
>>401 そのままで、
>>400 と同じブラウザで
全てちゃんと大文字になりました。
405 :
:02/05/26 23:23 ID:FoPmI75q
>403 "Arial Black"じゃなく? 上のが大丈夫っていうのは,本当にそのフォントになってる? んー,でも知らないフォント名があっても無視されるだけか… じゃ違うかも,でも一応.
406 :
404 :02/05/26 23:24 ID:7cYlQPVZ
>>404 訂正
font:16px "arial black"; /* これでも表示されるし、*/
↓
font:16px/120% "arial black"; /* これでも任意の値で表示されました */
>>403 16pxと/100%の間のスペースが敗因と思われ。
409 :
397 :02/05/26 23:33 ID:KduQlb0g
>>406 あれ?ちゃんと表示されましたか・・。
じゃあ、他のところのミスかもしれません。いろいろすいません。
というか、 <div class="menu2"><a href="link.html" class="sel">Link</a></div> でなくて、 <ul> <li><a href="link.html" class="sel">Link</a></li> </ul> にしなさい。
411 :
Name_Not_Found :02/05/27 13:21 ID:6CWyG8Q+
とあるサイトの壁紙いいなと思ったんで、頂こうとしたら <META=なんたら>しか書いて無くてどれがバックの画像なのかわからん こういうのって壁紙頂けないのかしら?
412 :
Name_Not_Found :02/05/27 13:30 ID:jHMvGQfl
>411 スタイルシートをみる. っていうかこのスレに書いたくらいなんだからわかってるんじゃないの?
ていうか、IEなら背景に名前を付けて保存って右クリックメニューにあるやん。
名前を付けて背景を保存 ですた(/o\)
>410 CSSじゃないけどさ、厳密には<li>って閉じるのか?
>>416 html4.01までは閉じなくても可。
xhtmlだと閉じなきゃout
418 :
Name_Not_Found :02/05/28 13:38 ID:9E9TffcJ
ページごとにcssを分離しようと思い、こんな風に作ってみました。 <html> <head><metaやらなんやら></head> <body><h1>漏れのホメパゲ</h1></body> </html> -----base.css----- @import 'n6.css' screen, print; @import url("index.css"); body{background-color : 適当な色名; 他にも何か適当に指定} h1{ここにも適当に指定} -----index.css----- index.htmlで使われてるその他のプロパティを適当に記述 例えば body{font-size : x-small;} -----n6.css----- n6用にまた記述例えば body{font-size : small !important;} こうするとieではきちんとスタイルが適用されるんですが、 何故かN6ではbackground-colorだけが効きません。バグですか? 一応n6.cssにbackground-colorを指定すれば解消はするんですが。
419 :
418 :02/05/28 13:53 ID:9E9TffcJ
base.cssのbackground-colorに!important指定でも一応解消はしました。 が、何か変じゃないっすか? n6と書きましたが今見てるのはn7pr1です。
立て続けにスマソ。 h1,h2{color : red;} 若しくは h1{color : red;} h2{color : red;} どっちが良いかね?この場合は簡潔に上だと思うんだけど、複数プロパチ設定 した場合被ってる部分は一緒に記述し、異なる部分はまた別に設定。 ファイル整理をやってて、本来はタグがあってスタイル設定しなくちゃいかんのに スタイルがあってタグを合わせる感じになっちゃって。 頭の中がループしております。
421 :
Name_Not_Found :02/05/29 19:43 ID:f6UKvPAT
質問です。 半角スペースを有効にしたいのですが <span style="white-space : pre;"> 適用されるかな?</span> だとうまくいきません。 どうすればいいんですか?
彼は何を言っているのですか?
メタ文字で書けよ
>>418 再現しないけどなぁ。
もう一度そこに書いてある事だけでやってみて。
427 :
Name_Not_Found :02/05/29 22:12 ID:pYXSyysR
CSS完全対応のホームページ忍者を使いましょう。 もう下らないことで悩むことも無くなりますよ。
428 :
Name_Not_Found :02/05/30 02:10 ID:Ne+eWECE
tableタグ内のalign=centerとかを指定するプロパティってあるんですかね?
429 :
Name_Not_Found :02/05/30 02:11 ID:Ne+eWECE
違った。セル内だ。。。ウトゥ
431 :
Name_Not_Found :02/05/30 06:16 ID:SPYhFtat
>>424 <meta http-equiv="Content-Type" content="ほにゃらら">
これのこと?
今日はじめて知ったこの存在。
わけわかんないからだれか詳しく教えて。
それか詳しく書いてるページ教えて。
&sage;
>431 もはやCSS関係ないから他行って聞いたら?
434 :
431 :02/05/30 06:36 ID:SPYhFtat
つーかなんで教えてくれねえの? さっさと教えてさっさと追い出せよ俺を。
436 :
431 :02/05/30 19:53 ID:SPYhFtat
よく見たらこれ
htmlのテンプレじゃねえかよ
今日の朝の俺いかすぜ
かなりナウいな
つーか
>>424 が悪いんだって
メタ文字で書けよなんて言うから
CSSにとってかわるなにか新しい規格かと思ったよくそ
実体参照と言やよかったんだな。
white-space : pre;はドキュメントタイプを宣言してないと効かないみたいだな。 IE6で実験してみた。
ドキュメントタイプって機能してたのか(;´д`)
>>438-439 DOCTYPEスイッチは知ってるよね。
white-spaceはIE6標準モードでないと正常に機能しません
今やってみたけど、ちゃんと識別してるんだな…。いい加減な数値はじいてみたり、IE利口じゃん。 どーせ読んでねぇんだろーが、このクソブラウザがぁ。くらいにしか思ってなかったよ(´д`;)y-~~ ワルカッタ
442 :
438 :02/05/31 00:12 ID:Bwr26E/T
>>440 DOCTYPEスイッチのこと忘れてたよ。Win版IEには無いものだと思ってたから・・・
443 :
Name_Not_Found :02/05/31 00:33 ID:m6iVgWjM
すみません。もしお手すきでしたら教えて下さい。 テーブルを、垂直方向にページ中央へ表示させるのは可能でしょうか? 縦長のページへ、テーブルをページ中央へ配置させたいのですがうまくゆきません。
>>443 table {
margin-left:n%;
margin:right:n%;
}
あるいは
margin-left:auto;
margin:right:auto;
だったような。
>>443 上のほうにも出てきたと思うけど垂直方向の真ん中に置くならテーブルネストしかないと思う。
446 :
Name_Not_Found :02/05/31 00:45 ID:gQe0NI7V
hr{clear: both;} dt{float: left; width: 100px; border: solid 2px #0f0;} dd{margin-left: 120px; background: #ccc;} というスタイル指定で,以下のようなソースを書きました.(4.01 Strict) <dl> <dt>dt<br>ほげほげ<br>ふがふが</dt> <dd>ddだよーん</dd> </dl> <hr> <dl> <dt>ほげほげ<br>ふがふが</dt> <dd>ddだよーん</dd> </dl> これをWinのMozilla1.0RC3やNN6.2.3で表示させると,hrに指定したclearが 有効にならずにdtの右からhrが表示されてしまいます. これは正しい表示でしょうか?hrはdlを抜けて幅一杯に表示して欲しいのだけど….
とりあえずそのソース、Strictじゃないです。 <br> → <br /> <hr> → <hr /> にして確認してみたら?
>444,445 レスありがとうございました! 444さんが仰ったような感じに指定できないものかと調べていたんですが… やはりテーブルネストしかないようですね。 デザインとページの重さ、どっちを取るかよく考えて作ろうと思います。 お手数おかけしました。
4.01で空要素閉じとはこれ如何に
450 :
447 :02/05/31 01:12 ID:uQTc8CK7
>>447 調べてみたら間違いだった。。。
XHTML1.0 Strictと間違った。
<br>、<hr>でよろし。
bothにする必要がないなら、
leftにして試したみたらどうだろうか。
>>446 Mozが互換モードで動いてると思われる。
DOCTYPE宣言ちゃんと書いてる? 見直してみて
>>446 当方 Win98SE で以下の3つのブラウザ
IE6
Netscape 6.2.1 (Mozilla 0.9.4)
Netscape 7.0 PR1(Mozilla 1.0RC2)
で確認してみましたが、3つとも同じ表示(たぶんお望みの表示)でしたよ。
失礼ですがDOCTYPEの書き方間違ってたりしませんか?
カブタ モウネヨ・・・
454 :
446 :02/05/31 01:27 ID:gQe0NI7V
>450-452
皆様どうもありがとうございます.
とりあえずleftにしたら動いて「んなあほな」と思ってbothに戻したら
なんと,上手くいく….
ただ,ここで挙動不審な点があって,
left→bothにする:1回リロードするとhrが右に行き,2回目以降はclearされる
キャッシュが効いているのかと思ってboth→leftにする:
1回リロードするとhrが右に行き,2回目以降はclearされる.
んー,わけがわからん.
一応,DOCTYPEは以下のとおり(ソースからC&P)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd ">
lintではエラーなし.
bothでもleftでも1回目はclearされず2回目以降はclearって,不可解だ.
display:none; でけすと 音声ブラウザでもそこの部分は読み込めないですか? 視覚的には消したいけど音声的には消したくない 部分があるのですが。
>>455 読むべきだと思うけど、読まない音声ブラウザが存在します。
>>455 @media screen
でdisplay: noneすれば良いけど
多分音声ブラウザは対応してない
>>456 CSS2仕様書には読み上げもしないとあります>display: none
458 :
代走名無し :02/05/31 10:47 ID:BoM0G2ef
>>457 はっきり書いてた? 仕様書読み直しても該当部分探せないけど。
俺も見つけれらなかったけど、
speak プロパティのとこにそれを匂わせるような記述はあった。
>>455 少なくともホームページリーダーは読むはず。
現バージョンでは確かめられないけど
461 :
Name_Not_Found :02/05/31 14:05 ID:Gxg7ZfAM
filterってそんなにこだわってcssで設定する必要ありますか? NNでは未対応だし、画像ソフトでやった方がいいような気がします。
スタイルシートについてお聞きしたいのですが、 ウィンドウの全体の色を指定するにはどうしたら良いでしょうか? スクロールバーは分かるのですが。 よろしかったら教えてください。 海外のエロサイトがやってて驚きました。 ソースを保存すればよかったのですが・・・。 今はもうなくなってました(;´Д`)
>>463 全体の背景色や文字の色の指定方法?
>>7 で紹介されているサイトで勉強してきなさい
ないっぽいですね。 もう一回探してみます。 分かる方居ませんか???
ウインドウの色を、引っ張ってくることは出来るが、 そもそも、CSSではウィンドウの色は変わらんだろう。
>>466 削除依頼見てきてから言え。アフォ
>>467 そうですか。。。どうやってたのかなぁ???
>>466 煽り対象探してすぐ噛みついてくる。粘着ですか。わざわざ参照なんかして(プ
『そんな事』よりやり方しっいるなら教えて下さいよ(w
あ、例の海外エロサイト見つかりました。 チョッとそこのソースで勉強します♪
(´-`).。oO(人間初心には教えない…)
>>462 あらホント。
バージョンアップで改善されたんだ。
でも振り分けが利かないみたいね。微妙。
474 :
Name_Not_Found :02/05/31 19:03 ID:7jrPIGK6
-moz-box-sizingとbox-sizingの違いって何? -mozの方はまだ積極的に使ってはならぬというのは知ったんだが。 box-sizingはMoz非対応?
>>474 非対応といえば非対応なんだろうが、そもそも勧告されてない。
CSS3 box module はまだ草案段階。今後の変更が充分ありうる。
安易な実装・使用には、それなりのリスクを理解していないと
後々また色々な変更に振り回されることになる。
>458 今回は、他のとこはつっこまないとして… DIV{position:relaitive;} を absolute; にしてみれ。 …あのさ、余計なことなんだろうけどさ、もう一度基礎からやった方がいいぞ。
>>477 ありがとうございました。
>…あのさ、余計なことなんだろうけどさ、もう一度基礎からやった方がいいぞ。
ひょっとして、paddingやborder部分のことですか?
でしたら苦情はIBMまで(w
479 :
478 :02/06/01 11:15 ID:pWMB/2/h
昨日、HTMLを採点するサイトで自分のページを採点して見たのですが、 <FONT>は使うな! ってかかれました。 自分ではスタイルシートで書いているつもりなのですが、 スタイルシートで指定して文の一部だけ、変更したいって言う場合は、どうやったら良いのでしょうか?
480 :
479 :02/06/01 11:15 ID:pWMB/2/h
番号間違えました。
482 :
479 :02/06/01 11:34 ID:pWMB/2/h
>>481 ありがとうございました。
それと、みなさんは文字の大きさの単位は何にしていますか?
483 :
:02/06/01 11:39 ID:7giq8dKa
クラスセレクタとIDセレクタって何が違うんですか?
484 :
Name_Not_Found :02/06/01 11:48 ID:vuPG7srv
外部で定義する場合、1つのファイルで指定する方が良いのでしょうか? 001.html(背景:黒/文字:白) 002.html(背景:白/文字:黒) の場合、別々の .cssファイルを作った方が良いのか、セレクタで一つのファイルにまとめた方が良いのでしょうか?
>>482 君の為だけにあれもこれも話を改めてもう一度するのかよ。
やめてくれ。
>>483 同じIDを持つものが複数あってはいけない。クラスの場合ははいくつあっても良い。
>>484 自分の管理のしやすい方で。ただファイルが大きくなりすぎる場合は分けたほうが良い。
488 :
Name_Not_Found :02/06/01 12:34 ID:ibJA+DrI
リストの中のemで囲まれた文字を赤にするには、 li em {color: red} か、 li em.redのどちらがいいですか? li emで、赤い害にすることはないので、 li em {color: red} が良いですか? 皆さんは、クラス名を付けるときに、 気をつけていることはありますか?
* {margin:0px 0px 0px 0px; line-height:1em; font-size:100%;} このように、ブラウザ別の効果をなくそうと思うのですが 皆さんはどうしていますか?
490 :
Name_Not_Found :02/06/01 13:21 ID:N2Lzhafd
<style type="text/css"> <!-- .A{color:#DC143C} --> </style> </head> <body> <div class=".A"> 赤福マンセー </div> ↑のように書いたのですが、".A"が反映されません。 色々試した結果class指定したものだけが反映されないようです。 body{hogehoge}などの様に直接指定してやれば反映します。 どこの記述が間違っているのでしょうか? 厨房な質問で申し訳ないですが教えて下さい。
<div class="A">
492 :
490 :02/06/01 13:31 ID:N2Lzhafd
>>491 さん
即レスありがとうございますた。
こんなミスだとは…回線切って逝ってきます。
WinIEのデフォルトフォントサイズってsmall、Netscapeはmedium。 Macってどうなってる?
>>488 > リストの中のemで囲まれた文字を赤にするには、
> li em {color: red}
> か、
> li em.redのどちらがいいですか?
どちらでもいいじゃん。
複数使わないならli em{ ... }でいいんじゃないの?
> 皆さんは、クラス名を付けるときに、
> 気をつけていることはありますか?
将来更新するときにそのemの部分を青にしたいと思ったとき、
class="red"なのにあおってのは変だし、「そこは何なのか」を考えてクラス名をつけるといいよ。
【例】
.koushin { color:#c00; }
<p>更新したものは<span class="koushin">このように</span>表示されます。</p>
<p>○月×日 <span class="koushin">△△△△</span>を更新</p>
>>494 の追加だけど
なぜその部分の意味を考えるか、というと、スタイルシートの一定の部分を変えるだけで
その目的のぶぶnすべてにそのスタイルが適用できるから。
>>493 デフォルトは medium だよ。
WinIEとMacIE4.5以前とN4は small = デフォルトサイズ だけど、これはバグ。
WinIE6の標準モードでは改善されてるが、
まだキーワードは使うべきではない。
>>496 レスさんくす。
と言う事は全体的に大きくしたり小さくしたりするにはbody {font-size : ☆}
の☆の部分で%指定が望ましいかな?
498 :
497 :02/06/01 14:36 ID:PZiDvDIs
あぁごめん。今の忘れて。放置でおながいします。
499 :
488 :02/06/01 15:40 ID:yFuXFsba
>>494 >>495 ありがとうございます。
とても説明が分かりやすくて、
すんなりと理解が出来ました。
ありがとうございます。
とても嬉しいです。
500 :
Name_Not_Found :02/06/01 19:22 ID:PZiDvDIs
度々質問ごめんなさい。 index.html h1{}って指定はやっぱり邪道ですか? 普通はbodyにidかclassを振るもんなんでしょうか。
index.html h1{} ??? それとbodyは<html>〜</html>内に一箇所しかでてこないんだから IDもclassもいらんでしょう。 何か混乱してるようですがスレの最初のほうに書かれてるお勉強 サイトをもう一度じっくり読んでみることおすすめします。 (って混乱してるのは私?)
>>500 h1にidかclass指定するのがいいんじゃないか?
>>501 いや、相関関係でhtmlは使えるのかなと。
bodyにid振るのは普通にあるでしょ?
>>502 やっぱりそうなりますか。h1位なら一回のclass振り程度で済むから
楽なんだけど、pとか全部に振るのがメンドーなんです。
divで囲ってdiv pにするのがベターかなぁ・・。
きゅッ、救急車ー!
きゅッ、救急車ー!
突然の質問スマソ。 ブラウザを考えて、 <link rel=stylesheet href="css/base.css" type="text/css">←CSS1のみ <link rel=stylesheet src="jss/****.jss" type="text/javascript"> <link rel=stylesheet href="css/****.css" type="text/css" media=all>←CSS2のみ </head> のようにすることって、めんどくさいとか以外で どんなデメリットがあるんでしょうか。
507 :
Name_Not_Found :02/06/01 21:18 ID:O5/pNmlm
>>501 複数ページで同一シートを使い回すとき、bodyにセレクタ振っといたら
あとあと何かと便利です。
それだけでbody.hogeの子要素と、body.ugeの子もいっぺんに識別できるし。
>>506 ネスケ4対策でしょうか?
media=allということは、音声とか印刷もちゃんと考慮したのかと小一時間
問い詰められたときにちゃんと反論できるでしょうか?
できるんならいいですが。
508 :
506 :02/06/01 21:44 ID:ueuXVTky
>>507 な、なるほど・・・。
確かにそこを小一時間問い詰められたらちゃんと反論できないかも。
とすると、media=allではなく、media="screen,tty"くらいにした方が
いいということでしょうか。
等幅くらいなら考慮できていると思うんですが…。
でも等幅の機器ってどういうものを言っているのかわからん…。
>>508 screen, print くらいがオススメ。
実際、印刷時に著しく読みにくくなるサイトは結構あるので
印刷用のスタイルを定義しておく価値はあると思う。
510 :
Name_Not_Found :02/06/01 22:23 ID:EfLUjQml
<body> <table align="center" width="***px"> <tr> <td> ***本文*** </td> </tr> </table> </body> のように、幅***px固定で常にウインドウの中央に来るようにするには どうしたらいいんでしょうか? body{width***px;} で幅は固定できることまではわかりましたが・・・
511 :
510 :02/06/01 22:24 ID:EfLUjQml
「スタイルシートで」幅***px固定で・・・ でした
513 :
510 :02/06/01 23:51 ID:EfLUjQml
>512 ありがとうございます > っていうかCSS使うならテーブルレイアウトはやめれ はい、そのつもりでした。なんか聞き方悪かったかも。
514 :
Name_Not_Found :02/06/01 23:55 ID:sx1GLZ5j
body{text-align : center;} にしてます。 そうするとリストの部分も ・あいうえお ・かきくけこたちつてと こういう風になってしまいます。 これをきちんと ・あいうえお ・かきくけこたちつてと にしたいんです。 どうすればいいですか?
>>514 ul{
text-align:left;
margin-left:auto;
margin-right:auto;
width:50%;
}
かなぁ?他にもっといい方法があるかも。
幅は自分で変更してね。
>>514 ul {margin-left:auto;margin-right:auto;}
かな。
できましたありがとうございます!
margin{auto;}は微妙だよなー。517はIE5以下の事考えてる?
margin{auto} 最新の統計では、まだ、50%強の閲覧者のUAで表示が乱れる。。。。
520 :
517 :02/06/02 01:00 ID:Gf2rfAE0
知りませんでした。
>>520 ulの幅が固定されてもいいなら、
margin-left/rightに同じ値を指定すればIE5でも望み通りの表示になりますよ。
ul { margin-left: 30%; margin-right: 30%; } のように。
ありがとうございます。やってみます!
523 :
Name_Not_Found :02/06/02 13:46 ID:U2r2/Dxd
ページの右下部分の画像だけを固定したい場合は、 なんというスタイルシートを使えばいいですか?
(´-`).。oO(
>>524 ワロタ…過去ログを漁れという事か…)
もう少し親切にレスすると
>>5-7 みろという事だな
只今横スクロールなサイトを作ってるんですが 同ページ内のリンクをアンカー(A NAME="+++")で指定すると 表示位置に微妙なズレが生じてしまいます… スタイルシートでリンク先を常にページの中央部分にする記述などはありますか?
残念ながらCSSのUI操作は御粗末だからなー。 横スクロールにアンカーで表示されるんか?
(´-`).。oO(UI操作されるのもユーザーから見れば大きなお世話だと思うが…)
属性にCSSって適用可能ですか?可能だったら書き方教えて下さい。
>529
A[href] { 〜 } 属性込みで識別。
A[href="
http://hoge.net "] { 〜 } 値まで潜ることも可能。
対応はネスケ6以降のみ。IEじゃ動かないっす。
>530 さんくすこ!
532 :
:02/06/04 03:11 ID:z0k3AEJf
(´-`).。oO(何となく質問と答がかみ合ってない気がする…)
533 :
Name_Not_Found :02/06/04 09:47 ID:tmVtjx7q
a{ display : block; } <table border="1" width="400"> <tr><td><a href="#">AAA</a></td></tr> <tr><td><a href="#">BBB</a></td></tr> </table> AAAはブロックになるのに、BBBはブロックにならず。 いや、なっているようだけどポインタが文字の上でしかリンクに反応しないです。 a要素をブロックにしてセルをクリックしたようにしたいんですけど。
>533 a要素にwidth値設定。
>>533 ブラウザとバージョンは何? AAA は期待通りになるの?
>>533 IEのバグだな。再現条件が良くわからんけど。
2つ目以降のブロックa要素でよくそうなる。
a{width:100%;}でうまくいきました。どうもありがとうございます。
538 :
Name_Not_Found :02/06/05 01:27 ID:LMJ34ZLL
<style type="text/css"> <!-- a:hover{background:"blue"; color:"white"} a:link{text-decoration:none;} --> </style> うっかり間違えて他スレに聞いてしまったんですがスマソ。 ハイパーリンクをクリックするとリンク済みだと下線が出てしまいます。 出ない方法ありますか?
540 :
538 :02/06/05 01:32 ID:LMJ34ZLL
541 :
:02/06/05 01:34 ID:nHI53SP1
>>538 a:visitedとa:activeも使う
a { 〜 } それならもうちょいスマートに書きましょ(;´д`) a:hover { 〜 }
>>542 いや、a要素をページ内リンクのフラグメントとして使ってる場合を
考慮すると、、
a {foo:bar;}
はマズい。
XHTML1.1の場合は、name属性が廃止になってるので、
そんなことは気にしなくても良いが。
544 :
Name_Not_Found :02/06/05 18:46 ID:hIE4FrBn
ここの人達ってどのブラウザを基準にCSS書いてるの? 今一番CCS2に従順なのってやっぱMozilla?
>>544 どのブラウザで見ても同じになるように努力してるものと思われる。
Mozilla ベースで作って、あとで個別にバグ対策。
何が?
使用するプロパティやボックスの計算法の 基準はIEに置かざるを得ないけど、 支障のない範囲でIE未対応のプロパティも使ってる。 fixed とか :after 擬似要素とか 当然だけどN4だけは別シートで。早くこういうの止めたい
549 :
Name_Not_Found :02/06/05 20:16 ID:uiFUafkV
> 当然だけどN4だけは別シートで。早くこういうの止めたい 禿同。とりあえずボックス周りのレンダリングだけでも共通化できれば楽なのに。
>>544 MozillaとOperaではそれなりに表示されるけど
Win IE6では全く意図したように表示されないページばかり作ってます
IEで崩れるのはやっぱ痛いよ。IEベースのタブブラウザとか使うっしょ?
みんな困ってるブラウザによる違い。Best1はボックス周りのレンダリング。 何でこうも別々なのか。開発者を激しく恨むね。
>>544 Mozilla/Opera でそれなりに意図通りに、
IE/NN4 で閲覧に支障が無い程度に。
dreamcast ps2 対策はどうしてますか?
今だ!555番ゲットォォォォ!!  ̄ ̄ ̄ ̄ ̄∨ ̄ ̄ ̄ ̄ ̄ ̄ ∧∧ ∧∧ ドドドドドド・・・・ (゚Д゚ ,,) (゚Д゚ ,,) ∧∧ (´´ ⊂_⊂V⊂ ⊂ )⊂(゚Д゚ ,,)_/(´´ Y /⊃ | .L⊃∧∧∪ _⊃(´⌒(´ ドカ ∪∧∧J⊂(x _x⊂ノ(´⌒(´ (´´ ドカ ⊂(゚Д゚⊂⌒`つ≡≡≡(´⌒;;;≡≡≡ ズザ・・・
556 :
Name_Not_Found :02/06/06 16:21 ID:3txO4IkF
>>554 まずドリームキャストは全く CSS に対応していないから、
対処のしようが無い。
どうしてもっていったところで、ありきたりだけど、
CGI か何かで別ページに飛ばすか、Strict にマークアップして、
デフォルトスタイルシートで我慢させるかのどちらか。
んで、問題なのは PS2 なんだけど、
PS2 の CSS サポート状況を誰も知らないんだよね。
CS S関連の色々なところを見てても、話題にすらなってないし。
見栄えなんておまけなんだから無くてもいいっしょ。 DCはパス。
そうそうDCっつったってブラウザは昔のNetscapeだし
559 :
Name_Not_Found :02/06/06 20:10 ID:RtEzzrNf
うちのサイト、アクセス解析みたらDC, PS2とも 何人か来てるみたいだけど、完全に無視してまーす。 別にいいよね?(W
>>559 お前の信用にかかわることなんて興味ないしね!
562 :
Name_Not_Found :02/06/06 22:43 ID:aaaozZLq
tr {border:1px solid #000000;} では、テーブルに線は出ませんがなぜですか?
563 :
510 :02/06/06 22:49 ID:cdjNT2bw
tableで{line-height:130%}を有効にするにはどうしたらいいんでしょうか? tr{line-height:130%} td{line-height:130%} では確か無理でした・・・
*{line-height:130%;} で駄目だったら かならず <td><p>ほにゃらら</p></td> こんな感じで書くようにして td p{line-height:130%;} とか
566 :
Name_Not_Found :02/06/07 02:07 ID:a8rXoWKK
text-decoration:none 等の指定をbodyの中身の一部分だけに使うことはできますか?
>562 tr にはボーダーとか、そういうのは存在しません。 >566 span{ text-decoration : underline } 文書中の<span>この部分だけ下線付き</span>にしたいのか、 p { text-decoration : underline } span{ text-decoration : none } <p>それとも<span>ここだけ下線なし</span>にしたいのか良くわからんが。</p> てゆうか別にあれだぞ。span を推奨する訳じゃないからな。
568 :
566 :02/06/07 02:36 ID:a8rXoWKK
>>567 表の中でやりたいんですがうまくいきません。
表の中では特別な記述が必要なのでしょうか?
>562 多分、こんな線を引きたいのでは? ┌─────────┐ │モナー ギコ シイ │ ├─────────┤ │モナー ギコ ゾヌ │ ├─────────┤ │モナー ギコ ゾヌ │ └─────────┘ table{ border:1px solid blue; border-collapse: collapse; } td{ border-bottom:1px solid blue; margin:0; padding:0.2em 0.4em; } モナー ギコ シイ ───────── モナー ギコ ゾヌ ───────── モナー ギコ ゾヌ ───────── table{border-collapse: collapse;} td{ border-bottom:1px solid blue; margin:0; padding:0.2em 0.4em; } >566 tableでも有効になる。 継承と言う意味を良く理解していないと思われ。 例) .line{text-decoration:none;} <td><a href="xx.html"><span class="line">ジャンプ</span></a></td>○ <td class="line"><a href="xx.html">ジャンプ</a></td>×
すまん、誰か簡単に説明してくれ。 link要素内で指定する@mediaとCSSファイル内でしていする@mediaは 何がどう違うんだい? どっかに詳しく説明してくれてるサイトって無い?
571 :
:02/06/07 06:49 ID:PZW9+KNB
>>570 解析処理する相手が違う。
link 要素の media 属性は HTML パーザに対する指定。
これで提供される情報は、例えばリンクされたスタイルシートに
リクエストを出すかどうかの判定等に使える。
一方 CSS の @media 規則は CSS パーザに対する指定。
CSS 中の個々の規則がどのメディアに向けたものであるのかを記述するもの。
HTML の type 属性と HTTP の Content-Type ヘッダの関係に似てるかも。
>>565 N6 と IE6 を逆に書いているような。単なる書き写し間違いっぽい?
>>562 ,
>>567 border-collapse:collapseであれば、trにも
borderは出せます。仕様的には。IEは出ないけど。
>>566 ,
親にunderline等が指定されていれば、
子がそれをnoneで消すことは出来ない。
って、そういう意味じゃない?
>>569 >.line{text-decoration:none;}
><td><a href="xx.html"><span class="line">ジャンプ</span></a></td>○
これではaのunderlineは消えません。aでnoneにしないと。
>>572 説明ありがとう。link要素内でscreen,print等と書いた場合は例えばN4なら
ファイルを読みこみに行かないような感じで、CSSファイル内でscreen,printと
書いた場合はファイルは読みこみに行くけど読めない、みたいな感じで宜しいよね?
ちょっと今ブラウザ振り分けで悩んでます。知恵を拝借したい。
比較的バグが多いWinIE4とMacIE4.5にa.css、まぁそれなりなWinIE5.x以上には
b.css、Mozzilaまんせー気味なMacIE5.xとN6.x(N7)にはc.cssを振り分けたい。
<link rel="default.css" media="screen,print">
default.cssの中身
@import url(a.css);
@import url("b.css");
@import url("c.css") screen,print;
しかしこれだとb.cssをIE4が読み込んじゃうという罠。何か良い案ないっすか?
おながいします。
スマソ、自己レス。 b.cssを@media screen{body{}}こんな感じで書けばオッケー??
「NNはスタイルシート反映されないから、素でいいや」と思って放置してたら NC4.7で見たら半端に反映されていて、dlで並べた「画像とその説明」が 全部一箇所に重なってしまいました。 どうしたら改善できますか?
「素でいい」なら @import で弾く。
580 :
Name_Not_Found :02/06/07 18:13 ID:7ETHGSIM
すいません他サイトで聞いてみたのですが お答えがもらえずここに来ました。 幅800のノートPCを使用しています。 margin-left:100pxのボックスを作った場合 そのボックスの幅は単純計算で(800-100)700pxですよね? それは1024サイズPCで見られた場合でも700pxで 見られるのでしょうか?それとも(1024-100)924pxになるのでしょうか? ボックスのwidthを指定していない場合です。 単純な質問で申し訳ありませんが、大型画面を持っていないため おわかりのかた、教えていただけませんか。 よろしくお願いします。 それとdivでボックスつくっちゃう場合って テーブルみたいに幅と高さは必ず入れないといけないんですか?
>>580 逆にウインドウを小さくしてみて、700pxの幅かどうか確認して御覧。
582 :
580 :02/06/07 19:14 ID:RVXczXCm
あ、すいません。700っていうのは単純な例で。 幅指定しなかったら800ブラウザの右端に揃ってイイカンジ とか思ってたんですけど、最大ブラウザだとやっぱし大きくなっちゃうわけですかね? そういう簡単なコトが単一ブラウザしかないもんで わからないんです。
583 :
581 :02/06/07 19:42 ID:QZRr2cUD
いやだから、一度小さなウインドウに併せて作って、 そこからウインドウを大きくして御覧。それと同じ。
>>582 ディスプレイの大きさと解像度は別に一致しない罠。
21インチで800x600もいれば15インチで1600x1200だってありうる。
高解像度ディスプレイでブラウザを最大化していればそれなりの結果になるけど
それが大きいかどうかはディスプレイの大きさ次第。
>>580 初心者スレでも似たような事聞いてた人?向こうで答えは出てるんだけど…
他のウインドゥサイズでも自分と同じ様に見せたいのなら幅指定しないと
ウインドゥサイズ次第で幅は変わってしまうよ。
587 :
580 :02/06/07 21:55 ID:5aLXELkN
そういうものなんですね。ほんと単純なことで 親切にしていただき、ありがとうございました。 >586さん。見たけれどそれは違うです。 自分のは別サイトで聞いちゃいました。単純すぎたからかシカトでした(藁
588 :
Name_Not_Found :02/06/08 02:00 ID:2CEHaJG0
CSSとHTMLで違う色を指定した場合、 いつもCSSで指定した方の色が優先されるのですか? それともIEだけ?
「そこで指定されている値を適用する デフォルトスタイルシートが適用されている」 と解釈するか、 「style属性と同じ」 と解釈するかで違って来るな…… 確か、MozillaもIEと同じだったと思うけど。
591 :
:02/06/08 15:34 ID:ErWXIpXL
592 :
589 :02/06/08 19:27 ID:wJpPqz0q
>>591 紹介ページは難しくて理解不能でした。
とにかくCSS優先なんですね。さんくす。
>>590 IE5.5とネスケ4.7とオペラで動作確認してから公開することにします。
ありがと。
593 :
Name_Not_Found :02/06/08 21:10 ID:GJFrkihi
pxよりemで指定してる人の方が多いのはなぜ?
594 :
Name_Not_Found :02/06/08 21:12 ID:GJFrkihi
あーなんて言ったらいいのかなー 隙間っていうか空白っていうか それみんなemでやってるよね。なんでかなって思った。
emだと文字サイズとのバランス計算が直感的にできるからでは? 少なくとも漏れはそう。 微調整にはpx単位でやってるが。
>>595 単に、絶対指定と相対指定な問題じゃないかと。
% と em ならば、また話は変わるけど。
597 :
Name_Not_Found :02/06/09 03:31 ID:pDMj/JOG
テーブルボーダーに色を付ける場合に、 このテーブルにはこの色、こっちのテーブルには別の色、 という感じで個別に色を設定する事はできないものでしょうか。 .classや.spanでも試してみましたが、うまくいかず困っています。
>.classや.spanでも試してみましたが 根本的なところで間違いを犯しているにおいが。
>>597 > .classや.spanでも試してみましたが、
笑ってやるから、もっと具体的に教えなさい。
(´-`).。oO(
>>597 <table style="border: solid red">)
601 :
Name_Not_Found :02/06/09 13:15 ID:kwmACU7v
スタイルシートでテーブルの bordercolorlight や bordercolordark を指定すること ってできないんですか???
>>597 table.blueline{border-collapse:collapse; border:1px solid blue;}
.blueline th{border-collapse:collapse; border:1px solid blue; padding:xx; margin:xx;}
.blueline td{border-collapse:collapse; border:1px solid blue; padding:xx; margin:xx;}
ex)
<table class="blueline">
<tr><td>xxx</td></tr></table>
後は工夫しれ。
603 :
602 :02/06/09 15:40 ID:q309f32w
↑td,thのborder-collapse設定は要らないは、、(鬱
>601 bordercolorlight → border-top-color : 〜 ; border-left-color : 〜 ; bordercolordark → border-right-color : 〜 ; border-bottom-color : 〜 ; です( ´∀`)
605 :
601 :02/06/09 21:02 ID:sjMWboil
>>604 え、やっぱそれなん? 持ってる本に書いてあった。
その通りにやったんだけど、期待通りの表示にならなくて・・・
border-right-colorって書いてみても全然変わらないし。
やっぱりborder-top-colorだったのか・・・
どこか書き方が悪かったのかもしれない。もう1回試してみます。
さんくす。
あ、でも長くなるんで、ボーダーの設定はまとめた方がよろしいかと。 おもむろにコピペして、いろいろいじってみませう。 td{ 以下の、上の行がlight部分。下の行がdark部分。 <html><head> <style type=text/css> td{ border-top : 6px solid #e8e8e8; border-left : 6px solid #e8e8e8; border-right : 6px solid silver; border-bottom : 6px solid silver} </style> </head><body> <table><tr><td>(゚∀゚)</td><td>(゚∀゚)</td></tr> <tr><td>(゚∀゚)</td><td>(゚∀゚)</td></tr></table> </body> </html>
border-width: 6px; border-style: solid; border-color: #e8e8e8 silver silver #e8e8e8; こっちのがスマートよ
border: 6px solid; border-color: #e8e8e8 silver silver #e8e8e8; これでもいいかも
609 :
Name_Not_Found :02/06/10 20:42 ID:CaAZ4QBg
* {color:#000000; font:normal normal normal 100%/1.3em Courier New,monospace;} のようにするのは良くないですか? *は全ての意味だから、 画像にも適応されることになる。それはおかしいので、 これも使うのはいけないですか?
>>565 ご指摘ありがとうございます。
早速修正入れておきました。
ああ、あんなミスしてたとは激しく鬱だ・・・。
>>609 いけなくはないでしょう。
画像の場合は、適用できる指定だけが適用されるはず。それでもいいなら。
ちなみに、Courier Newではなく"Courier New"(要引用符)ですね。
>>609 画像の場合だと、代替テキストに適用されたりする実装もあるでしょうな。
613 :
446 :02/06/11 14:34 ID:8+rnzS0n
随分昔の話だけど事後報告.(>446-454) hr{display: block;} と明示的に指定することで,必ず hrに指定した clearが 有効になるようになりました.指定しなくても ・違うページを見てからブラウザのボタンで戻る とやっても(なぜか)clearされましたが,これは謎. NN6やMozillaでは hrのデフォルトスタイルが blockじゃないってこと?それも変だけど. まあ,とにかく,解決方法は上記のとおりです.
614 :
Name_Not_Found :02/06/11 20:49 ID:Aq12drt/
スクロールするときに文字などは普通にスクロールされ、背景はその半分の速度でスクロールされる みたいなものあるわけないですか? わかりやすくいうと文字と背景に距離観を持たせるみたいな
615 :
Name_Not_Found :02/06/11 21:35 ID:4udHEyfU
>>614 あー、それいいねぇ。欲しいわ(笑)
JavaScriptでスタイルを制御すればできるかもしれんけどCSSには(もちろん)ない。
>>614 同時にinsetやoutsetのborder-topとborder-bottomの太さが変わったりするのですね。
いやあ、すごいすごい。
>>614 Purpleを書いた時、欲しくて欲しくてたまりませんでした、そういう効果。
618 :
Name_Not_Found :02/06/12 01:41 ID:4AXwdI3I
>>614 それはイイ!
あったら使うわ絶対。
スクロール重くなるかもしれんが使う。
自分でscript書きなよ… 割と簡単に出来るよ。 クソ重いけど。
620 :
Name_Not_Found :02/06/12 17:02 ID:eTcnE7Tk
プログラムのコードとかで文頭のインデントはちゃんとpreしたいけど 画面の右からはみ出る部分は改行したいっていう場合はどうすればいいの?
621 :
Name_Not_Found :02/06/12 17:05 ID:znHPOktN
>>620 width:100%; を指定、でよいのでは。
>>619 CSSで簡単にできるということが重要なのです。
>>620 padding-left と font-family: monospace でも使え。
624 :
Name_Not_Found :02/06/12 17:28 ID:eTcnE7Tk
width:100%; はやってみたけどうまくいかなった。 padding-leftってプログラムみたいなインデントはムリでしょ? ↓こんなの int main(int argc) { if (argc < 3) { exit; } else { ... } }
>>620 うーんと、これではだめかな?
<style type="text/css">
pre{
overflow:auto;
width:200px;
height:200px;
}
</style>
折り返しは無理だが、あるサイズにおさめることなら…
>>625 macIEでpreがまるごと消える罠。
627 :
620 :02/06/12 19:42 ID:eTcnE7Tk
>>625 とりあえず印刷時に情報が欠けるのを避けたいのですよね。
あと画面上でも横スクロールバーが出ないほうがベターという感じで。
予め行を短くするか +<br>とかしかないのかなー。
>>627 ふと名案を思いついた。
テキストボックスを使ってみれば?
630 :
Name_Not_Found :02/06/12 20:31 ID:RGMe687m
CSSを書く場合行頭の#はMozillaでもコメントアウトとして無視されたのですが IEでは読まれてしまいました。コメントアウトするにはどうすればいいのでしょうか?
/*激しくガイシュツ*/
632 :
620 :02/06/12 21:07 ID:PlmA6j9W
<nobr>っていうか<wbr>は<pre>の中だと無効みたいだけど。 <textarea>はたしかにインデントは崩れなくて改行もしてくれるのか。 これにwdith:100%を指定するということかな。 意味的にどうかという気もするけど、、
634 :
633 :02/06/12 22:03 ID:9ouMBA2q
>633 貴方、根本的に間違えてますよ(w
根本はるみ
根本はるみの母です(略
638 :
Name_Not_Found :02/06/13 03:15 ID:KY9OjjfK
<style type="text/css"> <!-- .fs24 { font-size: 24pt; } --> </style> を、貼り付けるとclass=".fs24"で指定した部分は文字サイズ変更できますよね。 全体を変更変更したい場合。.fs24の部分は何と書けば全体のサイズの固定が できるのでしょうか? 初心者しつもんですいません
>>638 body { font-size: 24pt }
イインジャネーノ? ってかでかすぎルンジャネーノ?
640 :
Name_Not_Found :02/06/13 03:24 ID:KY9OjjfK
ありがとうございます。がんばってみます
641 :
Name_Not_Found :02/06/13 03:34 ID:jOEPxdb2
HTML→ <address>フッタ</address> CSS→ address { text-align:right; margin-right:5px } このフッタをCSSで、 ・ウィンドウがページに対して短くて縦スクロールバーが表示されるようなのときは、 普通にページの一番最後。 ・ウィンドウがページより大きくて下に余白が出る場合はウィンドウ自体の右下に。 (見た目的には address { position:absolute; bottom:5px; right:5px } みたいな感じ。) にすることって可能ですか?
>>641 CSSだけでは無理。
そもそも、bottom:5px の参照する所が実装によって、
文書要素の高さだったり、ウィンドウの高さだったりするので。
JavaScript + DOM + CSSなら出来ないこともない気がする。
DOMってホントに標準になるんすか?(;´Д`) CSSプロパティ使って動かせるのはすごく便利なんだけど、…IEだけじゃなぁ。 いわゆるクロスブラウザ仕様とか、もういやぽ。。
>>643 MicrosoftのDOMのことですか?
W3CのDOMでstyle属性値を変えるのなら
IE5以上とNetscape6/7なら同じscriptで動く。
DOM2CSSだとIEが対応してないので
結局2通り書くはめになるけど、
Operaは今の所ごく一部しかCSSプロパティは変えられないけど
対応する予定ではあるみたい。
645 :
643 :02/06/13 16:38 ID:tvlKv0bv
>644 あー… fuction eve1(){hoge,style.〜CSS部〜;} <span id=hoge onmouseover=eve1()>(;´Д`)混乱ぎみ </span> みたいのが使えるようになる訳じゃないんですか…。 IDでアクセスして、スタイルプロパティをいじるっていう。…あんま難しいのはむりぽ。。
>>645 こんな感じではだめ?
fuction eve1(node){
node.style.color="#FFFFFF";
node.style.backgroundColor="#000000";
}
<span id="hoge" onmouseover="eve1(this)">(;´Д`)混乱ぎみ </span>
>>645 >fuction eve1(){hoge,style.〜CSS部〜;}
これなら
fuction eve1(){document.getElementById("hoge").style.〜CSS部〜;}
こうするだけ。ただ、NetscapeはIEほど文法ミスに甘くないです。
いっせーのーで!あげ!
649 :
Name_Not_Found :02/06/13 19:33 ID:g8EBR4wy
CSSとJavaSvriptを組み合わせた使い方を具体的に解説しているサイトなどはありますでしょうか? あったらおせーてたもれ
650 :
643 :02/06/13 20:03 ID:vqGYB1+5
あ、なんかわかりそうな勢い。仕様書読めそうな気がしてきたんで、 ちと総本山に行ってきますです。答えてくれた人、サンクス。 鬱違…。× fuction → ○ function
651 :
:02/06/13 20:32 ID:g/Au5FYq
CSSの、閲覧者側から見たメリット・デメリットて何ですか?
652 :
Name_Not_Found :02/06/13 20:44 ID:2tj0fCLS
テーブルタグを使わずにCSSだけでこういう風にするのってどうすればよいでしょうか? 文字 画像 文字 文字 つまり <table><tr><td width=50% align=left> 文字<br> 文字<br> 文字 </td><td width=50% valign=top> <img src=lll.jpg> </td></tr></table> これをCSSだけでできないでしょうか?
653 :
TOPEAK ◆WebC8aC2 :02/06/13 20:54 ID:j9VB0gRa
position:absolute をつかうのかなあ?
>>652 <div style="float:left;">
文字<br>
文字<br>
文字
</div>
<img src="lll.jpg">
655 :
652 :02/06/13 21:38 ID:2tj0fCLS
>>654 ありがとうございます!できました。
あと文字と画像の幅を調節するにはどうすればよいでしょうか?
何度も申し訳ございません。
656 :
Name_Not_Found :02/06/13 21:39 ID:2tj0fCLS
<div>にwidthで指定したらできました。 お手数をかけました。
>>651 最大のメリットはやっぱりユーザスタイルシートでしょう。
そういうこと訊いてるんじゃない?
>>651 メリット… なんだろうな?
デメリットは小さな字に文字固定しているサイトがある
659 :
641 :02/06/13 23:51 ID:jOEPxdb2
>>642 やはり、CSSだけではムリですか。ありがとうございます。
たしかにbottom:5pxってブラウザによって解釈違いますね。
Netscapeだとウィンドウの高さを参照してくれるのですが、
IEだと場合によって違う。
ホントはどっちが正しいのだろう。そういう問題じゃない?
>>651 テーブルデザインのHTMLに比べて
ソースが読みやすい事がメリットと感じるよ。
万一今使っているUAで読み難い場合もCSS切れば
読めるようになる。
テーブルデザイン+CSSの場合は泣く。
661 :
651 :02/06/14 00:55 ID:BGoU23Q/
>>660 ソースが読みやすいって制作側のメリットですよね?
制作側にはメリットいっぱいあって(一発変換とか)利用価値大アリなんだけど、
サイトみる側のメリットって? ブラウザ環境によっては対応してないとかで
結局、テーブルに戻ってしまう
662 :
660 :02/06/14 01:09 ID:CT+rSXIQ
>>661 いや、質問の通りに閲覧者側のメリットのつもりで答えたよ。
ソースで解かり難ければ、昔制作をしなかった頃の自分の話で、
ブラウザ上でコピペしようとした時、テーブルデザインだとブラウザ上では
一見読みやすかったのにコピーしたら順番ぐちゃぐちゃで
腹立った事がたくさんあったのを覚えているよ。
背景色と文字色の関係などで読み難い時、よくコピペしてた、その頃の話。
>>660 の書き込みで重要なのは
>テーブルデザインのHTMLに比べて
>ソースが読みやすい事がメリットと感じるよ。
の部分ではなく
>万一今使っているUAで読み難い場合もCSS切れば
>読めるようになる。
の部分だと思う。
内容と装飾が乖離していることがCSSの一番のメリット。
StrictなHTMLであれば閲覧者がユーザースタイルシートなどで
自分の見やすい環境で見ることができるようになる。
Head間に記述したCSSがネスケで表示確認すると 反映されていないのだが、これは対応してない。という事かな? もしかして、一個一個タグに書いてやらなければイケナイ!? <LINK REL=STYLESHEET ・・・・・ も、不発に終ってしまったし。(鬱 Win Me + NN 6.2 という環境に問題があるのだろうか。 ご存知の方、教えて頂けますか
665 :
Name_Not_Found :02/06/14 09:20 ID:z2Ucwtof
ソースしめさないと誰も答えられないのではないか
666 :
663 :02/06/14 09:45 ID:2iSueXLo
>>664 一応適当にソースを・・・
<style type="text/css"><!-- /* コメントタグも一応 */
div{ width : 400px ; height : 100px}
div font{ color : #FFFFFF ; font-size : 14px }div.div1{ background-image:url('*.gif') }
#div{ padding-left : 20px } /* divばっかしは愛嬌で */
--></style>
</head><body>
<div class="div1" id="div"><font>・・・・・
>>663 で言いたかったのは、IE5.5やOpera6.01では思い通りにいくが、
ネスケだけは無視されてしまう。という事です。
で、ソースは上のように問題ないと思われ。
そーなると、問題が何処にあるのだろうか、という質問です。
(直接タグに書いたものは反映されてます。)
667 :
666 :02/06/14 09:47 ID:2iSueXLo
間違えますた 663→664 664→665 全部+1ですた
668 :
Name_Not_Found :02/06/14 10:08 ID:z2Ucwtof
height以外はちゃんとスタイル適用されてるけど。 なにがしたいの。
669 :
Name_Not_Found :02/06/14 10:17 ID:z2Ucwtof
あ、6.2か。どっちにしても適用はされてるけど。
670 :
Name_Not_Found :02/06/14 14:28 ID:kNhnN/P7
既出でしたらすみません 背景を2色に分ける方法ってあるのでしょうか? 全体が#EEEで、右から200pxだけ#CCFという感じにしたいのですが…
671 :
Name_Not_Found :02/06/14 14:35 ID:84vErs6P
どっちでもいいけど…(´д`;)y-~ 背景色が#EEE。#CCFで塗りつぶした、幅200pxの画像を縦方向リピート…。とかですか?
673 :
Name_Not_Found :02/06/14 15:30 ID:1z35iD/g
>>672 今200*1pxの#CCF塗りつぶしをの縦リピートしているのですが
微妙に色が違うのです
で、画像無しで何とかできないかなーと
>673 背景に関わるプロパティには、今のところ、そういうのはないですねぇ。 巨大ブロック + z-index、とかは論外だし。 色が微妙に違うとのことですが…、それはブラウザによる発色の違いじゃないですかね? 他の理由を思いつかないんですが。。
675 :
Name_Not_Found :02/06/14 16:48 ID:LEYlc6PW
質問させて頂きます IE6とネスケ6で「相対位置」で指定したオブジェクトの位置が変わってしまいます どのようにしたら統一できるでしょうか? お教え下さい。
676 :
:02/06/14 17:39 ID:6cqx7Rl1
質問!! スタイルシートで表を半透明にしてみたのですが、表の中の文字まで透明になっちまいます。 表の中の文字だけ半透明を効かなくすることはできますか? 初心者過ぎな質問だったらスンマヘン(;´д`)
678 :
Name_Not_Found :02/06/14 20:15 ID:YcaR/8K7
http://www.michealyoung.com/ こちらのサイトのように上と下をマークしたようなレイアウトにしたいのですが、
さっぱりやり方が分かりません。
フレームとテーブルタグを使ったこういうレイアウトはよく見ますが、
上のサイトのようにCSSだけでやってみたいです。
ソースを見て自分のサイトでやってみたんですが、下の方がうまくできません。
どなたかお分かりになる方宜しくお願いします。
>677 IEのフィルターですか? あれはたしか”範囲”に対して効果を付けていたような気がするので、無理では…。 普段は使わないので自信無いですが。 >678 3秒しか見てないけど、下のは div{ position : absolute; bottom : 0px; color : ...etc} ではないのかと。
680 :
Name_Not_Found :02/06/14 23:09 ID:fcRnCdEI
下のはここあたりがポイントでしょ↓。 if(document.all){ aHeight = document.body.clientHeight; (略) else{ aHeight = innerHeight; (略) document.getElementById('IDfooterBar').style.top = aHeight - 20; (略) <div id="IDfooterBar" class="headerBar">Thanks for visiting MichealYoung.com © T. Micheal Young, 2001</div>
a img:link{}なんて設定できないですよね・・? アンカー要素内のイメージにa:link等で設定したスタイルが効いちゃって困ってます。
682 :
660 :02/06/15 02:00 ID:hUdYXttA
オペラは import@ 使えないのかよ…。次期版は対応するんだろうか。
超鬱。 @import
686 :
660 :02/06/15 06:08 ID:EPb3xOy0
>>677 Alphaじゃなくて、
AlphaImageLoaderかGradientを使えば背景だけ透明。
688 :
Name_Not_Found :02/06/15 12:00 ID:flMTNJto
フォントを相対的に設定して、それをテーブルタグに適用する場合、 テーブルが入れ子になるとどんどんサイズが小さくなります。 相対サイズなのであたりまえなのですが、サイズを一定に出来てなおかつ 相対サイズにする良い方法は無いものでしょうか?
>688 それぞれに適用 #table1 {font-size:80%} #table2 {font-size:100%}
>>689 ありがとうございます。
アフォすぎでした、私。もっと精進いたします。
>>687 ウオオォォォォ!!できた!!!
マジ助かりました!ありがとうございます!!
テーブルレイアウトがなぜだめなのか教えてくれYO!
693 :
Name_Not_Found :02/06/15 15:01 ID:BWocJCM2
別にダメでもないよ
全部読み込むまで表示されない、ってのを考慮していれば可 Strict的にはダメなんだろうけどさ
>686 テスト用に別の組んでみたらできた。なんだろな…。 import用ファイルの中身はこれだけ。 @import url("hoge.css"); hoge.cssの中身は、全て body class で各ページに振り分け。 @import通さないと普通に動くから、記述上の問題ではなさそうなんだよな。 ページが大量にあるし、 CSS置き換え時のために、この構造は崩したくないところ。
>>696 試してないから分からないけど、
>url("hoge.css");
これが原因では?
url(hoge.css);
にしてみそ
>697 駄目だった。 それであきらめて、今サーバに上げたんだけど、、そっちじゃ動いてやがるよ(´Д`) このサイト用のファイルだけ、ローカル環境でのみ動かないということらしい。 なんじゃそりゃ…。
>>698 Operaは設定によってはCSSが更新されたのを
気がつかないこともあるらしい。
設定>履歴とキャッシュ>サイト更新のチェック
あたりの設定を見直すとよいかも。
700 :
699 :02/06/15 23:46 ID:Cf06ARz8
> Operaは設定によってはCSSが更新されたのを CSSというか、それに限らず外部ファイルだったかも。
Geckoでもそんな事起きるよね、確か。
702 :
Topeak :02/06/16 09:07 ID:vmQ9Ew2t
あるページの中に 別のファイルを取り込むことってできるのでしょうか.
CSSじゃないけどね
どう考えてもスクロールバーが要らないページを作っているので、 CSSでブラウザ右のスクロールバーを消したいと思いました。 html {height : 100% ; overflow : hidden} body {height : 100% ; overflow : hidden} 試しにこうやったらIEでは上手くいったのですが、他のブラウザで消えないことがあるそうです。 最も互換性の高い指定方法があったら、お教えください。
705 :
Name_Not_Found :02/06/16 10:19 ID:tepzIN6H
すいませんあげ忘れました。
>>704-705 こらこら、スクロール・バー消すなって。
要る・要らないは閲覧者側で判断することだよ。
時々スクロールバーを背景色に近い色にしてつかみづらくしてるサイトも見るナ。
あれ、困るんだよね。
>>704 小さいウインドゥで見るときのこと考えてるか?
スクロールバーが要らないページなんて普通は無いぞ。
なんか完全ストリクトで書くと猫も杓子も同じデザインになるな。 どっかstrictで書いてるとこで斬新なのないの?
>>708 何となく判るが、そういうのは大抵見やすくて使いやすい。
ユーザとしては奇抜なデザインよりそっちを重視してほしいところ
710 :
Name_Not_Found :02/06/16 17:13 ID:1Tyw0IqR
pre の中に長い行があるとき、Mozilla とか Opera だとボックスから はみ出てしまいますが、IE だと中のテキストに合わせてボックスが伸びますよね? Mozilla とか Opera でもボックスから中身がはみ出ないように CSS で指定するには どうしたらいいんでしょう? できるだけ strict な解決方法を教えて下さい。 (いまいちだった解決方法) 1. overflow: auto (pre の box 毎にスクロールバーがついてうっとうしかった) 2. min-width (漢字/英数幅比が 2/1 とは限らないので em での指定が困難)
711 :
Name_Not_Found :02/06/16 17:29 ID:IhuYbbTW
>>710 完璧な解決方法
1.呪われたpreタグを使わない。
2.CGIでテキストを加工して使う。
3.加工済みのテキストを使う。
ああああ1!
あっはーん
test
ウホッ?
716 :
lo :02/06/16 17:40 ID:pIY0AsNv
ppppp
717 :
710 :02/06/16 19:16 ID:1Tyw0IqR
>>711 回答ありがとうございます。pre は呪われていたのですか。なら仕方がないですね。
それはそうと 2, 3 の加工というのがわかりませんでした。
どのように加工するという話なのでしょうか?
>>717 半角空白を に置き換え
タブ文字を 4個か8個に置き換え
改行を<br>に置き換え
最後にCSSでのフォントファミリ、または<tt>タグで等幅フォントに指定。
これで「自動改行するpre」みたいな表示になるはず。
>>717 半角空白を&nbsp;に置き換え
タブ文字を&nbsp;4個か8個に置き換え
改行を<br>に置き換え
最後にCSSでのフォントファミリ、または<tt>タグで等幅フォントに指定。
これで「自動改行するpre」みたいな表示になるはず。
…欝だ氏んでこよう。
720 :
710 :02/06/16 20:25 ID:1Tyw0IqR
>>719 なるほど。そういうのは思いつかなかったです。ありがとう。
pre{white-space:normal} じゃだめなん? 確かめていないから、どうなるかわからないけど。
ページ内で | | コンテンツのタイトル |_____________________________________________________ と、こんなカンジに表示させたいため、 以下のようなスタイルシートを記述したのですが、うまく左と下の線が表示されません。 どこがいけないのか、教えて下さいませ。 <style type="text/css"> <!-- body{ background : #FFFFFF; margin-left : 160px; margin-top : 80px; } .title{ font-size : 16px padding : 2px; line-height : 2.0em; width : 400px; border-under : 1px solid; border-left : 1px solid; margin-top : 40px; margin-left : 20px; } --> </style>
>722 ……。 × border-under → ○ border-bottom …でどうよ。 >699 それも無理だった。てゆうか常にチェックする設定になってたし…。 upして表示チェックかよ。めんどくせー(゚д゚)
>>722 関係ないけど
.titleをh1にしてみては?
たいてい見出しなわけだし。
#折れのIME誤変換麦価してくれるな・・・
#ほら、「麦価」なんて出してくるし。
#「ばっか」やろう>IME
>>723 、
>>724 ありがとうございました。
ただ、どうも変わらないようです・・・。
もしかして背景白なのに、色指定していないのがいけないんでしょうか??
>>725 border-bottom: solid 1px;
か
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
のどちらかでできますよ。
727 :
722 :02/06/16 23:22 ID:gmTZgN03
>>726 両方試してみましたが、どうも変化が見られません・・・。
やっぱり背景が白だから?ってのは関係あるんでしょうか?
色の付け方を、もしよろしかったら教えていただけないでしょうか?
>>727 私のところは、Mozilla 1.0ですけど、表示されましたよ?
HTMLの方のソースもあげた方がいいかも…
あと、確認しているブラウザも
>色の付け方
border-bottom: solid 1px black;
もしくは
border-bottom-color: black;
指定してない場合は、文字の色と同じです。
729 :
722 :02/06/16 23:42 ID:gmTZgN03
>>728 あ、出来ました。ありがとうございました。
念のため確認ブラウザはIE5.0でした。(Mozillaとかって良く分からないんです・・・ごめんなさい)
丁寧にありがとうございました。
730 :
Name_Not_Found :02/06/17 17:07 ID:UrOGYjBG
文字サイズを固定する方法を教えてください。 pxやptで固定できると本に書いてあったのに 固定できません。ブラウザの文字サイズ変えると 変わってしまいます。MacのIE5とネスケ6です。 <FONT style="font-size:9px">固定したい</FONT> WindowsのIEならこれで固定されるのに……??? ネスケのCSS対応は最悪にひどいというのは 噂に聞いていましたが、 MacのIEもCSSにちゃんと対応してないのでしょうか?
731 :
Name_Not_Found :02/06/17 17:10 ID:Bpa8Xevr
>>730 ホームページ制作王ならCSSにも完全準拠。
体験版は無料だ。今すぐダウンロード急げ!
文字固定が流行っているのだろうか・・・
>>730 固定されていようが何だろうが俺は大きい文字で見たいんだっ!
って言う人が多いんだよ。
>>730 画像にするか、紙に印刷したものを閲覧者に郵送する。
>>734 どこだったか、Operaなら画像の拡大縮小も可能だと聞いたような
ので、紙媒体だけか…
736 :
Name_Not_Found :02/06/17 17:31 ID:Bpa8Xevr
結局、誰も制作王にはかなわんようだな。
739 :
730 :02/06/17 18:38 ID:GHH1emHr
人が真剣に悩んでるってのに…なんなんだ 言われなくたって、もうこねーよ! 答えられないなら黙ってろ!
答えられるけど黙ります。
>>730 …あのな、スタイルシートってのは文字サイズを固定とか
そういうアフォな事しないためにあるようなもんなんだよ。
どうしてもイヤなら「絶対にフォントサイズを厨にして!!!」とかトップに書いとけ。
わかったら勉強して出直しておいで。
742 :
Name_Not_Found :02/06/17 19:54 ID:rP5dIEFR
クロスブラウザによる違いを詳しく説明してるサイトってないの?
743 :
Name_Not_Found :02/06/17 19:57 ID:Ybp6Isfl
>>742 ホームページ制作王を導入しましょう。
制作王に聞けば、何でも親切に教えてくれますよ。
9pxなんて読めねーよ。
746 :
Name_Not_Found :02/06/18 14:35 ID:XN7f8ixt
リンクを設定した文字にCSSで a:link a:hover などでスタイルを定義するさいに、一つのページの中で2つ以上の パターンを使うにはどうしたらいいのでしょうか。
747 :
Name_Not_Found :02/06/18 14:46 ID:XN7f8ixt
できました、ごめんなさい。 a:linkの後でもクラス指定ってできたんですね。試行錯誤を怠りました。
IE4で、いわゆるタブメニューを実現するにはどうすればいいでしょうか。 ulをlist-style-type:noneしたり、liをdisplay:inlineしたり、spanを駆使して 作ってみたのですが、IE4ではうまく表示してくれませんでした…。 泣く泣くメニュー部分と表示部分をtableにして、margin:0とかやってみたのですが、 なぜか隙間が空いてしまいます。 どなたかお助けください…。
>>747 後はダメだ、前だ
○a.class:link
×a:link.class
シェアの大きいブラウザが文法に甘すぎるだけです。
>>749 クライアント・イメージマップとかいうやつですね。
めんどくさそうなので、今まで使ったことがなく、思いつきませんでした。
目から鱗が落ちた思いです。さすが超最強上級者様。ありがとうございます。
#イメージマップをTABLEでレイアウトしただけのページとか想像してしまいました。
#FLASH onlyなページとどちらがウザイでしょうかね。余談。
752 :
660 :02/06/19 00:33 ID:u5HyCeJm
>>748 IE4は知らんけどさ、
margin にマイナス値を設定するか、
position: relative を使うんじゃないの。
>>750 ○a.class:link
×a:link.class
これ、間違って覚えてた。なんでだろ。
スタイルシート数枚を早速直しました。
スタイルシートは1枚、2枚と数えるのかぁ(メモメモ
>>752 margin にマイナス!!正直、盲点でした。
目から鱗が落ちた思いです。さすが660様。ありがとうございます。
画像ツールを何一つ習得していないことに気付き、途方に暮れている
ところでした。
で、やってみたのですが、IE4以外だと下のtableが上のtableに重なって
表示されてしまいます。
#以下code
<div class="tabMenu">
<table class="layout">
<tbody>
<tr>
<td><div class="selected">選択項目</div></td>
<td><div><a href="hoge.html">項目</div></td>
</tr>
</tbody>
</table>
</div>
<div class="tabcontents">
<form action="hoge.html">
<table class="layout">
<tbody>
<tr>
<td>中略</td>
</tr>
</tbody>
</table>
</form>
</div>
#以上code
tableを囲っているdivにz-indexを指定してみましたが、変わりません。
なぜだろう…。(IE4だとなぜかそのままで問題ないのですが)
div内の全ての要素にz-index指定が必要ってことはありませんよね?
#<table class="layout">へのつっこみはしない方向で。
ポジショニングされていない要素にz-indexは適用されません。
>>756 タブメニューのdivにposition:relativeとz-indexを指定すると、IE4、IE6、Opera6、
NN7ともにうまく表示されました。
しかし、IE4でdiv内のanchorに反応してくれなくなる罠が…。
とりあえず、下のdivをposition:relative,z-index:-1してみたところ、反応してくれました。
下のdiv内のanchorもちゃんと反応してくれます。
上のdivではdivを入れ子にしていることが何か関係あるのかもしれません。
今更IE4でのCSS対応状況を追求しても仕方がないのでこれまでにしますが、なんだか
よく分からない仕様です。
ちなみにNN7ではz-index:-1にすると、何も表示されなくなりました…。
z-indexに関して最もCSSの仕様に忠実なのはどのブラウザなのでしょうね。
ともかく、IEでは希望通りできました。ありがとうございました。
#
>>755 のコードでanchorが閉じていない件は修正しました。
すみません質問です。 現在、テキスト折り返しの副作用で苦しんでいます。 ブラウザ(IE)は、長い文書を自動的に折り返してくれます。 でも、いちいち単語の区切りで折り返してくれやがるので、 ブラウザのサイズによっては、ボックスの横幅が狂ってしまいます。 単語の区切りではなく、表示できるぎりぎりまで表示した後に 折り返すように指定する方法をご教授ください。お願いします。
760 :
Name_Not_Found :02/06/19 19:57 ID:73pJf9Rk
>>750 ○a.class:link
×a:link.class
これってどういう意味?
CSSで
a:link{color : black;}
.class{color : red;}
こうやって書くのは×ってこと??
.class{color : red;}
a:link{color : black;}
こう書くのが正しいってこと??
教えて下さい、おながいします。
761 :
Name_Not_Found :02/06/19 20:00 ID:Zlp8IKDt
○a.class:link { color:black;} ×a:link.class { color:black;} ということです
>>757 >ちなみにNN7ではz-index:-1にすると、何も表示されなくなりました…。
それ過去ログ既出。Mozillaの解釈が正しい(らしい)。
以下をシートに書くべし。
body {position:relative; z-index:0;}/*NS6.1以降のz-index負値対策*/
>>762 >body {position:relative; z-index:0;}/*NS6.1以降のz-index負値対策*/
これすると、今度はIE4で表示されなくなりました。(どうなってんだー)
今回はデータバインドなどIE独自の機能も使ってイントラネット環境(Win95,IE4)向け
に作っているので、他UAへの対応よりもIE4を優先しなければならないのです。
一応、Strict HTML推進派を自称する私としては、なるべく仕様に従ってエレガントに
仕上げたいところなのですが…。
でも、ひとつ賢く(?)なりました。ありがとうございます。
>76 大変だな。。。 どうしてIE5.0台にしないんだろう?セキュの危うさも同じような物だし、IE4.xxの方が重いのに。。。 と言っても、会社のホーシンと言う、不条理の世界か.....。(-人-;)ナム
IE6.0でテーブルをセンタリングしようとした場合、 HTML4.01なら margin-left:auto; margin-right:auto; でばっちりうまくいくのに、どうしてXHTML1.0だとだめなのでしょう? ネスケの6.0ならちゃんとセンタリングしてくれるのですが・・・。
>>766 XML宣言をINVALIDなDOCTYPE宣言と見なし、後方互換モードになるからです。
IEの次期版では選択子を網羅して欲しぃね´д`) 擬似クラスも頼むよビル。
>>758 word-break : break-all;
IE5.0以降のみ、これでイけると思われ。
770 :
Name_Not_Found :02/06/20 21:59 ID:dKM5XO3D
<table>タグを使わずに<table>的なレイアウトにしたいです. float属性だとOPERAでバグってしまいます. ほかに何か方法はありますか?
771 :
Name_Not_Found :02/06/20 22:35 ID:BGXpScBV
素直にテーブル使えばいいよ
772 :
Name_Not_Found :02/06/20 22:43 ID:dKM5XO3D
ですなあ
>>772 Operaのfloatは問題なかったと思うけど。
バグって何?
774 :
Name_Not_Found :02/06/20 23:32 ID:dKM5XO3D
バグというか 幅を指定しないとブロックの右側に大きく 余白がとられてしまうのです.
>>774 置換要素以外をfloatするときは幅が必須。
Operaが悪いわけではない。
776 :
766 :02/06/20 23:46 ID:KAt/Z5k3
>>767 ありがとうございます!
そっか、ダメなのですか・・・鬱鬱鬱(´д`;)
777 :
Name_Not_Found :02/06/20 23:46 ID:dKM5XO3D
仕様上はそうなんだけどさああ なんだかなー
background-image : url("")でpositionはleftでもrightでも良いんだけど、 repeat-yにするとたまにブレない?
780 :
Name_Not_Found :02/06/21 01:54 ID:ZWj+XazC
>>779 ぶれるって?
background-position:left top;
こういう風にしてtopとかbottomとかも指定すれば大丈夫じゃない?
こういうことじゃなくて?
>>780 いや、縦にズラーッと画像を敷きたいのね。
で、上みたいな指定すると画像が被るっていうのかな?たまにおかしくなるのよ。
ちなみに当方Win98SE-IE5.5。確かMacIE5だか4だかでもそういう指摘
されたわ、昔。
783 :
Name_Not_Found :02/06/21 13:55 ID:Myrz29ya
たとえば <table width="100%" border="1"> <tr> <td style="width:5em;"> でんぱこ </td> <td> あいうえおかきくけこ<br> さしすせそたちつてとなにぬねのあああああああああああ<br> はま </td> </tr> </table> みたいなレイアウトにしたいのです.
>>783 左側だけfloat、右側は(必要なら)margin-leftで左に流れないようにする。
なぜか,下にスクロールバーがついてしまう・・
>>785 テストしてみたけどN7PR1/IE5.5/Opera6.03(Windows)ではスクロールバー出ないよ。
他で余計な事してない?
bodyのmargin属性をはずしたら でなくなりました.なぜだろう...
>>787 body {
width: 100%;
margin: 1em;
}
とか書いてたらスクロールバー出るぞ。
789 :
Name_Not_Found :02/06/21 22:50 ID:ZWj+XazC
<ul> <li>1111</li> <li>2222</li> </ul> このようにした時に左側に余白がないようにしたいと思い、 CSSでul{margin:0px 0px 0px 0px;}、 li{display:inline;} としたのですが、IE5.5では大丈夫なのにNN6で見ると余白が できてしまいます。 どなたか対処法をお願い致します。
>>789 ulのpaddingを詰めたらどうでしょ?
791 :
Name_Not_Found :02/06/21 22:58 ID:ZWj+XazC
792 :
Name_Not_Found :02/06/22 01:16 ID:nh1BruDY
かなり厨な質問なんですが テーブルの枠を破線表示するには どうしたらいいのでしょうか? よろしくお願いします。
793 :
Name_Not_Found :02/06/22 01:27 ID:S/CANa3j
CSSの中で、指定したいタグ (例として<BLOCKQUOTE>) を2箇所に違う設定 で使いたい時があるのですが、どうすればいいのでしょうか? ここの<BLOCKQUOTE>のfont-sizeは100%で、こっちの<BLOCKQUOTE> はfont-sizeは90% とかにしたいのです。
>>794 ありがとう。それで検索してみまふ。
またよろしくお願いします
>792 table { border-style: dashed } 古めのブラウザでは動かないらしい。
798 :
Name_Not_Found :02/06/22 13:05 ID:Pa7KrQ2C
>>798 A:hover{background:red;}
800ゲ・・・・・・・・・!?  ̄ ̄ ̄ ̄ ̄∨ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ∧∧ (´⌒(´ Σ(゚Д゚;) ∩∩ (´⌒;;;≡≡≡ ⊆⊂´ ̄ ソ (´⌒(´⌒;;  ̄ ̄ ̄ ズザザザザーーーーーッ 800ゲトー!! (・∀・ )≡≡≡≡≡≡≡≡≡≡≡≡
801 :
Name_Not_Found :02/06/22 16:54 ID:4+Tc/UXu
{ float:left }で横並びにした2つの<div>のベースラインを揃えたいのですが、 どうしたらよいでせう?
802 :
Name_Not_Found :02/06/22 20:32 ID:6hh5WsQV
body {background:#ffffff;}としているのに、 h1を使う場合、h1 {color:#ff0000; background:#ffffff;} などとしないといけないのですか?
>>802 しておいたほうがベターではあります。
例えばユーザスタイルで
body{ background: #ff0000; }
とやられても読めるように。
俺はいちいちやってないけど
>>801 width指定をすればいいんじゃねーの?
806 :
Name_Not_Found :02/06/22 21:17 ID:INxmlxQc
質問ですが、
>>805 で偉そうにいって申し訳ないのですが、
CSSをつかって<input type="text"〜 に全角が使えなくしていたり、
4文字までしか入力できなくすることがしたいので、
ソースクレ(・∀・)クレ!!じゃなかった、お願いします。
#前にどこかのサイトを見たような気がするのですが・・・
CSSでは無理かも。現状ではJavaScriptを使うのが早道。
808 :
Name_Not_Found :02/06/22 21:26 ID:INxmlxQc
独自タグかもしれませんが、
MaxLengthなんてものを見つけました。CSSではないけれど。
ということで
>>806 の前の>全角が<に全力を尽くして調べてきます。
809 :
Name_Not_Found :02/06/22 21:35 ID:d+FwjCpe
タグというか属性でしょ あとCGIに使うフォームの話なら、 クライアント側で文字数制限とかしてもCGIの方でのチェックもちゃんと必要。
810 :
Name_Not_Found :02/06/22 22:28 ID:PxmzUU39
>>806 ほれ。ただしIE5以上のみ有効
ime-mode:disabled;
811 :
Name_Not_Found :02/06/22 23:06 ID:EBVLQzft
>>809-810 ありがとう。
>>809 ずばり!
自作CGIなんです。
もちろん対策はしてありますけど、
「これはおかしいぞ」なんてメールの対策に、、、と思ったわけで。
>>810 ありがとう
812 :
Name_Not_Found :02/06/23 00:09 ID:ntswtj3x
HTMLによる<center>や<div align=left>が非推奨になって、CSSによる記述が 推奨されると聞いたんですが、HTMLでセンタリングするのは止めた方がいいのですか? CSSにするべき?
814 :
Name_Not_Found :02/06/23 00:28 ID:ntswtj3x
>>813 そうっすか…。
ああ、書き直さないと…。
CSSって全く理解されてないよな
>>812 だいたいそれを言うなら
「デザインは全てCSSにするべき」
だぞ。
fontや bgcolor なんか使ってないよな?
817 :
812 :02/06/23 00:36 ID:ntswtj3x
818 :
801 :02/06/23 00:59 ID:kp6weGST
>>805 えっと、いまいち意味が分からないのですが。
別にfloat自体はできてるんです。
ただ、そうした場合上下は上のラインに合わさるじゃないですか。
それを下のラインにそろえたい。
両方1行だけなんだけど文字サイズが違うんで。
819 :
Name_Not_Found :02/06/23 01:40 ID:jvUGw7Q5
820 :
Name_Not_Found :02/06/23 01:47 ID:PeBfqx6p
俺
>>783 とは別人だけど
>>784 margin-left指定したら今度は下に流れるんだけど
回避できない?
>>821 え!?もしかしてサイト内にあったんですか?
windowsのサイトだから公開してないと思い込んでました(w
これから見てみます
すみませんでした
823 :
821 :02/06/23 02:37 ID:4+K9z6v7
>>822 いや、CSSもJavaScriptもASCIIファイルだから
全部見られるって意味だよ。
「どうぞ使って下さい」って形で公開しているわけではないが、
見るのはすぐ出来るだろ。
他で探したら、似たものがたくさんあっても全く同じ物が見付かる
可能性は薄い。
>>823 あああ、そういう意味だったんですね
ますますすみません
825 :
820 :02/06/23 02:58 ID:PeBfqx6p
なるほど 右にwidthをpxで指定したらダメなんだな。(text-align : right;すると可能だったけど意味無いし) なんだかんだでやっぱりテーブルは必須だよなぁ
>>801 2つのdivをdivで囲んで、そのdivのborderを見せる。
じゃダメなのか?
>>825 右のwidthを指定するんだったら右もfloatすればいいのに。
それでウインドウが狭い時に下に流れるのが気になるなら、
流れてもマトモに見えるようにデザインすればいい話。
このスレじゃベースラインの意味が通る奴はいないのか。
>>805 意味不明
>>826 線引くって思ってやがる(w
829 :
Name_Not_Found :02/06/23 03:31 ID:zTztoit6
dt {clear: left; float: left; width: 2em; font-size: 200%;} <dl> <dt>A</dt><dd>a</dd> <dt>B</dt><dd>b</dd> <dt>C</dt><dd>c</dd> <dt>D</dt><dd>d</dd> </dl> ってやったらdtとddが横並びすると思ったんです。 IEだと見事そうなったんですが、Mozillaだと横並びじゃなくて、 ddだけ上に詰まっちゃうんですよ。 A a b B c d C D IE ? or Mozilla ? どっちが正しいんですか? Mozilla でも横並びさせるにはどうすればいいんですか?
>>829 とりあえずddにheight指定(200%)してやれば高さは整う
>>828 態度が急変したな、別人か?パッディングの指定もできんようなカスは死ね、と言いたいが。
>>830 そう、
>>828 は別人。オレじゃねぇっつの。
でもやつの言ってることにはちょいと同感。
paddingでなんとかなるんすか?
でもそうするとフォントサイズ変えられたときとかにズレませんか?
もしできるのならご指導願いたい。
832 :
828 :02/06/23 14:52 ID:ugCJ4u3q
padding-topを計算して設定しろってるんだろな。
>>830 は。
折り返しがあった時にベースラインがずれるんじゃないのかい。
833 :
らむ :02/06/23 16:36 ID:+xAn2Jzo
壁紙をひとつだけ表示したいんだけど。 方法教えてくださいな。 画像名は「kabe.jpg」っていうんス。 よろしこ!!
834 :
:02/06/23 17:04 ID:Dou7b+wV
>801 適当なboxで囲んで,その中で position: absolute; bottom: 0 にでもしとけば? (floatじゃなくなるけど)
>833 background-repeat: no-repeat; 一度だけ表示。 真中に表示したい、とかいう場合は background-position-x background-position-y で縦横の位置を指定。でもIEでしか動かず。
background-positionがあるだろ…
超鬱。 background-position: center; 数値もok! 縦横指定も可能だヽ(`Д´)ノ ゴルァ!! background-position: 50% 20%;
838 :
Name_Not_Found :02/06/23 19:55 ID:OYEYcrQE
839 :
:02/06/23 19:59 ID:OFuvH/v0
>>838 Osaka指定ってことは、まっく屋さんですかね。
(ウィンドウズ使ったことがないのかな。)
NEWS系ではデザインが一番見やすいと思うんだけど。
日経が一番DQNでしょ。
(中に入るといきなり大きなフラッシュの広告が
ニュースの文字上に現れたり。。。もうバカかと。1時間くらい問い詰めたくなる)
>>828 ページメディアの用語使って喜んでるDQN。
いや、ベースラインくらいは普通に使わないか?
842 :
Name_Not_Found :02/06/23 21:58 ID:LIMkGn5S
ベースラインってなに?
>839 WinにOsakaフォント入れてから気づいたけど、Osakaフォント指定してる サイトって結構多い・・・
844 :
Name_Not_Found :02/06/23 22:44 ID:cPfGNH2y
border−collapseの初期値がcollapseになってるけど、 実際はseparateじゃないですか? なんか、意味がわかりません。
>>844 didplayの初期値はinlineだけど、
p要素はdidplay:block;として表示していますね。
CSSの初期値とブラウザのデフォルトスタイルは別って事だと思います。
846 :
845 :02/06/23 22:54 ID:Q4vV8p9B
> didplay displayのまちがいです。
>>843 WEBの世界だとアクセスのデータから分析すると、
Macが2割以下しかいないのに、わざわざWINに
Osakaフォント入れるのもどうかと。。。マジ思う。
848 :
844 :02/06/23 23:16 ID:C/1Ga+F3
>>845 あーなるほど、わかりやすい回答ありがとうございます。
849 :
Name_Not_Found :02/06/24 03:11 ID:kVXApnO0
スクロールバーに色を付けるのはこれでいいのでしょうか? <style type="text/css"> BODY { SCROLLBAR-BASE-COLOR: #FFFFCC; SCROLLBAR-ARROW-COLOR: #FF9933; } </style> 他サイトのソース見て自サイトでも試して見ましたが どうにもうまく行きません。
>849 scrollbar-track-color: color; scrollbar-face-color: color; scrollbar-shadow-color: color; scrollbar-darkshadow-color: color; scrollbar-highlight-color: color; scrollbar-3dlight-color: color; scrollbar-arrow-color: color; こんな物に色付けてないで早く寝ろ!
851 :
Name_Not_Found :02/06/24 04:05 ID:JJRQEUhA
>>851 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
標準モードだとbody要素にスクロールバーの装飾しても適用されないよ。
html,body {scrollbar-base-color:color;}でうまくいく。
CSS文法的には間違ってるみたいだけどね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
互換モードはbody要素でOK。
body {scroll...............}
854 :
828 :02/06/24 07:36 ID:Kft5ocgB
>>801 を見た時、いい質問だなと思ってさ。自分も知りたい。わくわく。
それが
>>805 だろ。???..... がっかりさ。
そしたら
>>818 。やった! これなら誰でも理解できるぜ! またわくわく。
それなのになんだよ。
>>826 もう駄目だと思ってさ。
だから828で加勢したんだよ。邪魔したね
>>831 >>830 は駄目。雨漏りのしてる所に穴のあいたバケツを置くようなもの。
ちなみに
>>830 の上の答えも同じ。穴のあいたバケツ。
>>829 の質問への答えも期待してるんだけどな…。
>>834 はいいかも。時間がなくてまだ試してないけど。やってみるよ。
サンクス。
>>801 はどう思う?
ところでページメディアってなに?
>>840
855 :
Name_Not_Found :02/06/24 09:16 ID:L5r0Q4Qz
>>801 <div style="border:1px solid red;float:left;width:30%;">
<p style="margin-top:0;font-size:1.5em;">ほげ</p>
</div>
<div style="border:1px solid blue;float:left;width:30%;">
<p style="margin-top:0.67em;font-size:0.9em;">はげ</p>
</div>
右ブロック内pのmargin-top = (左ブロック内pの高さ(マージン含む) - 自身のフォントサイズ) / 自身のフォントサイズ
>>801 もしかしたらline-heightを調整すればいいだけだったりして。
ついでにvertical-align。
858 :
801 :02/06/24 19:38 ID:AGOi94i1
はぅ、なんか話がややこしくなってる気が・・・。スミマセン。
今夜、も少し考えてみます。
駄目そうなら
>>855 が考えてくれたみたく(サンクス)ちまちま計算してやるか。
>>834 ,854
それやるとなぜか親のdiv無視してウィンドウのbottomに合わさってしまう。
でも考え方としてはそれが一番だよな。
オレの書き方がいけないのか?
>>840 ベースラインはwebでも使う。
むしろオレはそのページメディアの用語知識なんぞ皆無だ。
>>854 いやいやかまわんよ。
そう、paddingとかmarginとかじゃなくてもっと根本的にできたらいいなと思ったのだが。
ページメディアは紙媒体ってことだと思われ。
>>857 vertical-alignはブロック要素じゃなくてインライン要素用。
それが出来たらとっくにやってるよ。
長くなってスマソ。
859 :
855 :02/06/24 19:55 ID:KWStPB0C
>>854 穴の空いたバケツをJavaScriptで鬱いでみたよ
駄菓子菓子base-line揃えではなくpの下端揃えという罠
その上スクリプトはてきとー
<head>
<script type="text/javascript">
function setTop() {
var pp1 = document.getElementById('p1');
var pp2 = document.getElementById('p2');
var hh = pp1.offsetHeight - pp2.offsetHeight;
if(hh < 0) {
pp1.style.marginTop = Math.abs(hh) + 'px';
}
else {
pp2.style.marginTop = hh + 'px';
}
}
</script>
<style type="text/css">
#d1 { border : 1px solid red; float : left; width : 30%; }
#d2 { border : 1px solid blue; float : left; width : 30%; }
#p1 { font-size : 1.5em; }
#p2 { padding-top : 0.67em; font-size : 0.9em; }
</style>
</head>
<body onload="setTop()">
<div id="d1">
<p id="p1">なんとなく長いテキストその1</p>
</div>
<div id="d2">
<p id="p2">なんとなく長いテキストその2</p>
</div>
</body>
860 :
828 :02/06/24 21:33 ID:aSLhOh4f
>>855 説明が丁寧で好感が持てます。
ただ、
>>831 >>832 で言うように、
フォントサイズを変えられた時と
行の折り返しがあった時は、考慮外ですね。
もっとも
>>818 によると1行だそうですが、
私の方は折り返しも考慮されたものを求めています。
そして855さんは更にもう1案考えていただいたんですね。
>>859 私JavaScriptがあまり読めないので、コピペして表示させる
までしかまだ出来ないのですが、なかなかいいですよ。
>>856 ちょっとよく分からないのですが、
margin-top や padding-top を計算して
設定する案と似ているわけですよね。
そうそう。
>>834 あの後、試しましたよ。うまくいきました。
フォントサイズの変更や行の折り返しにも対応していますね。
ただ問題は私が position:absolute をほとんど使わないので
この場合だけにそれを使うのは難しいことです。
まあ、これは好みですよね。使える人はそれでよさそう。
(つづく)
861 :
828 :02/06/24 21:34 ID:aSLhOh4f
>>857 親要素のベースラインに下端揃えで
子のブロック要素を複数並べたいというのは
以前からの私の希望で、その時 vertical-align も
考慮したのですが、vertical-align は、
インライン要素にしか使えないというので
その時は諦めていました。
でも、せっかくの御提案ですから改めて考えてみました。
そうしたら出来ましたよ。
<div>
<p style="border:1px solid red;display:inline;font-size:150%">ほげ</p>
<p style="border:1px solid blue;display:inline;font-size:90%;vertical-align:bottom">はげ</p>
</div>
ブロック要素に display:inline を使うのが不本意ですが、
表示はまあまあ私の方の希望通りです。
フォントサイズの変更には対応しています。
折り返しは対応しているうちに入らないかも…。
仕切っちゃって御免なさいね。
>>801 気に入ってくれたかなあ。
862 :
855 :02/06/24 22:09 ID:KWStPB0C
>>861 ブロック要素を display : inline にしようが
どう表示しようがなんも問題ないしょ
ただブラウザはdisplayの値を無視してもかまわんとなってるので
そうされてもしかたないってだけで
フォントサイズも変更されようが
相対指定なんだからこれまた問題ないしょ
それより
>>861 のように
p {display : inline; }
ってしておいて
<div>
<p>ほげほげほげほげほげぼけほげほげほげほげほげほげ</p>
<p>はげはげはげはげはげはげはげはげはげはげはげはげ</p>
</div>
とかそれこそどこかで折り返しが発生する場合どうなるさ?
親要素の下端で子を揃えたいってな意図とは
全然違う表示になると思うのだが
863 :
801 :02/06/24 23:33 ID:EK1kHpod
>>860 え、position:absolute出来ました!?
うーん、なんでウチだと出来ないんだろ??
ま、まさかマクだからとかじゃあ。
standardモードですよね?
僕はpositionそれなりに好きなんで、できるんならこれが一番なのですが。
そうか、出来たのか・・・。
864 :
855 :02/06/25 00:07 ID:9knFDtIg
>>863 親要素「も」absoluteにするなり
親にabsoluteなdivをいっちょかみさせるなりした上で
子をposition : absolute; bottom : 0;すればできると思う
駄菓子菓子その親はabsoluteな子しか持たなければ高さを失うはずなので
absoluteな子はたぶん先行する要素と重なり合うだけ
あるいは子にabsoluteじゃない要素ももたせていたとしたら
それとも重なり合うだけなんじゃないの
もうためしてないけどさ
865 :
Name_Not_Found :02/06/25 00:27 ID:4bvQc+Q6
フォントGeorgia 指定しようと思っています。すべてのPCに入ってますか?
解決しました入ってるらしいです。
867 :
Name_Not_Found :02/06/25 01:54 ID:nWxaeICJ
winのネットスケープの4.73でhead内でスタイルを指定したり、 スタイルシートのファイルをべつに読み込んだりしたいんだけど、 全然反映されません。 タグの中に直接埋め込むと反映するのだけれど、、 どなたかそのへんの事情に詳しい方はいませんか?
868 :
Name_Not_Found :02/06/25 02:43 ID:p0/fGm+c
メニュー項目のリンクにカーソルを合わせると、下のほうにその解説の文章が出るように CSSをつかってやってるサイトを昔見たのですが、見失ってしまいました。 このスレかイケてるデザインスレで見かけたはずだったと思って読み直したのですが 見つけきれません。(黒っぽい背景の英語圏のサイトだったかと・・・) そのサイト、もしくはそのやり方あるいはそうやってるサイトをご存知の方、教えてください。
>>868 俺も知りたいです。
<a href="unko.html" title="ここはウンコ好きが集まるサイトです。65歳未満の方の入室はお断りしています。65歳以上で責任の持てる方、どうしてもウンコを食べたい方は入室してください。">世界最強ウンコ臭</a>
title属性じゃないやつでしょ?
へこへこと書いていたら既に答えが <html> <head> <style> <!-- a:hover { background: #fff; } a:link span { display:none; } a:hover span { display:block; position:absolute; bottom: 1em; left: 1em; text-decoration: none; } --> </style> </head> <body> <a href="unko.html" class="contents">世界最強ウンコ臭<span>ここはウンコ好きが集まるサイトです。65歳未満の方の入室はお断りしています。65歳以上で責任の持てる方、どうしてもウンコを食べたい方は入室してください。</span></a> </body> </html>
872 :
871 :02/06/25 04:17 ID:aS24liv4
(´-`).。oO(class="contents"使って無いし…)
なんか見てるとさ、ここで聞くよりまずはCSSを1から勉強した方が いいんじゃないかと思う人ばかりなんだけど・・。 記述の意味を理解できていないのにココに貼られたソース コピペってもしょうがないよ。
874 :
868 :02/06/25 05:32 ID:p0/fGm+c
>>870 ソレダ!! ありがとうー
>>871 わかりやすいです
なるほどそういうことなわけですね
ありがとう
>>871 おっぱい、さすが!
a:link,:visited span {
display:none;
}
にしたほうがいいね。>871試してみたけど
勉強になりますた
877 :
855 :02/06/25 10:58 ID:SH0GVEUT
>>876 まぁいいんじゃないの?
答えたくなけりゃ答えなければいいだけなんだし
とか言いながら、今回は自分では考えたこともないものだったんで
興味わいてしゃしゃりでてきたけど、これでいったん去るつもり
で、前に出した例だけど
<div style="border:1px solid red;float:left;width:5em;">
<p style="margin-top:0;font-size:1.5em;">ほげ</p>
</div>
<div style="border:1px solid blue;float:left;width:5em;">
<p style="margin-top:0.67em;font-size:0.9em;">はげ</p>
</div>
と親のdivのwidthを%じゃなくてemで指定すればいいだけじゃん
ってことに今さっき気づいたす
親と子のサイズの比率は一定になるので
折り返しを発生させたくなければこのdivのwidthを調整するなり
子のfont-sizeを調整しとけばよろし
下揃えにするためにmargin-topなりpadding-topを算出するのは一緒
逆に自分の環境で折り返されていれば
他の環境でも折り返しが発生するはず
ただこの方法だとウィンドウ幅によっては
float自体が発生しないことは当然あるけどね
あと中身のテキストが頻繁に入れ替わるような場合だと
そもそもこんなやり方は意味亡い
んじゃね
>>762 >それ過去ログ既出。Mozillaの解釈が正しい(らしい)。
逆だろ。z-index:-1で消えるならMozillaのバグ。
880 :
Name_Not_Found :02/06/25 20:52 ID:7LvTXjlX
Operaってbody{ margin:0px;}にしても間が空いちゃうんですね。 なにか方法ってないのでしょうか? あとmedia="all"とmedia="screen"の違いとかが良く分からないのですが、 どこか詳しく書いてあるサイトないでしょうか?
881 :
権兵衛 :02/06/25 21:09 ID:h94d+wjP
>>880 HTML4.01の勧告を読む。6.13辺りに、詳しく書いてあった。
883 :
Name_Not_Found :02/06/25 21:36 ID:7LvTXjlX
>>881 NN4.*で外部スタイルシートを使いたくなかったのでmedia="all"にしてたんですが、
サイトによってはmedia="screen"などにしてるので
なぜかなーと思い質問しまいた。
今拝見して理解できました。ありがとうございました。
>>882 できました。ありがとうございます。
884 :
Name_Not_Found :02/06/25 21:57 ID:+MfbfArd
operaですが padding:0pxにしても 右側があいてしまいますねえ(スクロールバーの文かな?) frameを使わないでスクロールバーを常に表示させる設定にはできるのでしょうか?
すみません、どなたか知っている方がいらっしゃったら教えて下さい。 背景色をフレームのように色分け出来るCSSってありませんでしたか? 例えば黒・白・黒のように・・・。 以前何処かで見掛けたのですが記述方法を忘れてしまい 探しても解らなかったもので・・・。
886 :
:02/06/26 01:54 ID:buTWVD7e
>885 body{background: black;} #hoge{background: white;} <body> <p>ここは黒背景</p> <p id="hoge">ここは白背景</p> <p>再び黒背景</p> </body> こういうこと?じゃなさそうだが,何を期待しているのかイマイチわからん.
DOCTYPE宣言について質問です スタイルシートが表示されない人が来る事も想定してFONT要素なども使った ページの場合、宣言をHTML 4.0 Transitional//ENとしてもいいのでしょうか?
>>887 HTML4.0 Transitionalの文法に合致しているなら。
あと、4.0は4.01によって上書きされています。
書くなら4.01 Transitionalでね。
>>886 説明が下手でごめんなさい・・・。
P単位ではなくてBODY単位での色分けの事です。
891 :
Name_Not_Found :02/06/26 15:28 ID:0lXyW2e0
bodyは1ページに1つだけだよ もっと勉強しよう
body{margin:0px; padding:0px;} にしてdivで背景色色分けしてみたら?
893 :
Name_Not_Found :02/06/26 16:02 ID:fluaGbMQ
Mozillaで見たときだけなぜか横スクロールバーが少し出てくるんです。 <h1> <ul> <li></li> <li></li> </ul> <p></p> <p id="hoge"></p> こういう感じなのですが、Mozillaで見ると<h1>の背景色の部分だけど横スクロールしても 100%表示されているのに大して<p id="hoge">の部分と<ul>の部分は 横スクロールすると右側に少し間が空いています。 なので問題は<h1>だと思うのですが、どなたかお分かりなる方いらっしゃるでしょうか?
894 :
:02/06/26 16:03 ID:l/qirXpC
背景画像をrepeatさせるとか
895 :
Name_Not_Found :02/06/26 16:04 ID:fluaGbMQ
<ul>の右側の空いた部分は直りました。 が、やはりMozillaだと横スクロールバーが出てしまいます。
<h1>は閉じてるのか?
897 :
Name_Not_Found :02/06/26 16:28 ID:fluaGbMQ
閉じてます。すみません書き忘れました。 どうやら<h1>の文字をpaddingで左幅を少し空けてるのですが、 その分が横スクロールバーで動くみたいな感じになってます。
<table cellpadding="2" cellspacing="0" bordercolor="#ffffff" bordercolordark="#ffffff" bordercolorlight="#000000" border="1"> これをCSSにするにはどうしたらいいですか? また、このテーブルをドキュメントの真ん中に持っていきたいのですが bodyにmarginやpaddingでautoにしてみましたが 真ん中に寄りませんでした教えてください。
899 :
Name_Not_Found :02/06/26 17:26 ID:7NVR2bAS
age忘れました
900 :
Name_Not_Found :02/06/26 19:14 ID:sQEWpZKQ
XMLファイルでIDセレクターが無視されるのは Mozillaがおかしいのでしょうか? IEなら無視されずにばっちりなんですが。 でも、ここ見てると、大抵おかしいのはIEって気がしますし…
>>898 td, th {padding: 2px}
table {border-spacing: 2px}/* ←IEが未対応 */
table, td, th {border: solid 1px; border-color: #000000 #ffffff #ffffff #000000}
左右の真ん中という意味ならガイシュツ。
上下の真ん中という意味ならCSSでは無理。
あと、paddingにautoという値は無い。
903 :
898 :02/06/26 20:53 ID:eOSHRGdh
>>901 ありがとうございます。
まじ、お中元をお送りしたいところです。
過去ログ漁りに逝って来ます。
904 :
893 :02/06/26 21:41 ID:fluaGbMQ
>>902 h1{
padding:1.2em 0em 0.5em 0.5em;
color:#ffffff;
width:100%;
margin:0px;
background-color:#666666;
background-image:url("style.gif");
}
ul{
padding:0em 0.2em 0em 0.5em;
margin:0px;
width:100%;
}
すべてのpaddingを0emにすると横スクロールがなくなるので
やはりpaddingに問題があると思います。
宜しくお願いします。
やっぱりwidthが100%か、そこだな
906 :
893 :02/06/26 22:33 ID:fluaGbMQ
>>905 直りました!
本当にありがとうございます。やっぱこのスレの人達はすごいですね。
907 :
Name_Not_Found :02/06/26 22:43 ID:scdJgFBY
<HTML lang="ja"> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <P>あいうえお</P> </BODY> </HTML> もじらだとなぜか文字がばぐります。なぜなんでしょうか?
エンコーディング指定すれっつーかスレ違いなので回線切って(
エンコーディング指定ですね。何ともなく分かりました。明日調べます。 すれ違いでしたが、ここに訪れたのは初めてなのでスマソ。
・list-style-type ・list-style-image について質問。これって、予め用意されたマークと画像しか指定できないのカナ? 例えば、♥ とかユーザー指定はできない?
>>910 > ユーザー指定
って、サイトに訪れた人が、ってことですか?
>>912 li {
list-style-type: none;
}
li:before {
display: marker;
content: "\002764";
}
914 :
887 :02/06/26 23:57 ID:nd+3ymb4
>>889 ありがとう、活用させてもらいます。
遅レスでスマソ。
>>913 サンクス。content か。う〜む…(・∀・)
>>906 しかしIEの互換モードだとpadding分長さが足りなくなるとかいう罠。
917 :
Name_Not_Found :02/06/27 00:49 ID:96LXYzEN
dl 要素を使って表みたいに表示させるには、どうしたら良いですか?
>>900 そうか?
XULでなら効くけど。
>>919 IEだと
<dl compact>
<dt>定義語</dt>
<dd style="margin-left:好きなだけ">説明</dd>
</dl>
Operaなら
dt{display:compact}
Mozillaなら
フロートとか絶対配置とか
>>900 その属性がDTDでIDとして定義されてないとか?
922 :
919 :02/06/27 15:59 ID:BTrL5Frr
>>920 ブラウザは主に、Mozilla です。
float でやってみると、dd の中身が複数行になった時に dt の下まで行ってしまいました。
position の方を使って次のようにやってみると、望む結果になりました。
ありがとうございました。
dl dt
{
margin : 0;
padding : 0;
}
dl dd
{
position : relative;
left : 3em; /* 適当 */
top : -1em; /* 適当 */
margin : 0;
padding : 0;
}
923 :
921 :02/06/27 16:58 ID:QTsMKjZ/
924 :
921 :02/06/27 17:00 ID:QTsMKjZ/
あぁ……よく見たら
>>902 で既に答えが出てますね。
鬱。
925 :
900 :02/06/27 18:31 ID:83NcNm9j
みなさんありがとう。 DTD付けたらIDセレクター効きました。
926 :
Name_Not_Found :02/06/28 01:17 ID:hEF4Tw4L
すいません質問ですが font faceタグってCSSではどう書けばいいのですか?
>>926 font-family: "MS Pゴシック",sans-serif;
930 :
Name_Not_Found :02/06/28 01:25 ID:hEF4Tw4L
>>927 すいませんそれを参照しようとしましたがどのURLも開きませんでした
931 :
Name_Not_Found :02/06/28 01:27 ID:hEF4Tw4L
すいません開かなかった理由が判りました 直接コピーすればよかったんですね すいませんでした
ポインタを上にのせるだけで画像が切り替わるってのはcssじゃできないのでしょうか
>>932 画像の切り替えは無理。JavaScriptでないと。
質問はageた方がよいよ。(´∀` )ノ
>>932 :hoverでそれっぽいことが出来そうな気がしないでもないが、
JavaScriptを使った方が無難(´ー`)
935 :
初心者 :02/06/28 12:01 ID:Qdc/ubaV
雑誌などでクラスセレクタは使わないほうがいいと いろいろなところに書いてあるのを見るのですが、 使わないほうが本当にいいのですか? 使う問題点があれば教えてもらいたいです。
936 :
:02/06/28 12:49 ID:???
>935 多分,言わんとしていることは div や span 濫用への警鐘だと思うけど. そんなことが書いてある「いろいろなところ」や「雑誌」を教えてもらいたいです.
937 :
初心者 :02/06/28 13:02 ID:Qdc/ubaV
>>936 ソーテックからでているスーパーリファレンスには非推奨。
で、Golive5および6のヘルプには
>文書の視覚的な構造化にはクラスを使用しないでください。
と書かれているので気になりました。
あと、ちょっと今探せなかったんだけど雑誌にもそう書いてあるのがありました。
CSSのクラスセレクタが非対応なブラウザはあるのでしょうか?
ソーテックハゲシク非推奨。
939 :
WEB製作のできる人には、より大きなチャンスだと思います。 :02/06/28 13:10 ID:XDKFaoGM
中谷彰弘著、自分で考える人が成功するという書籍は、
流れるように読めてしまうものですが、
軽いようで重要かつよいものの視点の得られる本だと思います。
自由な考えは、自由な生活から生まれる面もあると思います。
自由を得るためにも、夢の実現にとっても、
よいネットワークビジネスは素晴らしいシステムだと思います。
かつ、よいグループならば、
よき人間関係を実現できる可能性の高いものだと思います。
私たちの参加しているネットワークビジネスは 在庫をもつ必要がなく、
製造メーカーの製品を直接広めるものです。
船井幸雄著、個の力が未来を変える、というMLMについての書籍を読んで
もその可能性は確かに感じます。
私の参加しているグループは、製造会社の製品をHPとメールという媒体も活用して、
低価格、高品質なよき製品を広めようという集まりです。
WEB製作のできる人には、より大きなチャンスだと思います。
実際、有名な大会社AT&T、GM、マスターカードなども採用しだしています。
興味のある人には、ぜひ参加して一緒にやってみましょう。
以下のホームページでの説明も御覧ください。
http://ailove22.fc2web.com/lpd/index.html
>>937 そんなブラウザはないと言っていい。しかしクラス非推奨とは急進的だなあ。
942 :
初心者 :02/06/28 14:22 ID:Qdc/ubaV
>937 じゃあ、クラスはつかってもいいってことなんですね。 よかった〜。 Macのネスケ4は対応しているのかな? 僕のサイトじゃうまく表示できないです。 使わないと最近の(最近でもないけど) フォントサイズのブラウザ推奨のフォントサイズに 惑わされてレイアウトがたがたですよね。
943 :
初心者 :02/06/28 14:39 ID:Qdc/ubaV
GoLive5のクラスでの指定は、 ネスケ4でうまく表示されないのですが、 これはバグとかでしょうか? なにか解決策あるようなら教えてください。 (共にMacを使用中)
>>943 NN4って一般的にいって、
スタイルシートの実装が怪しいような気がするんですけど。
NN4はスタイルシート読み込まないようにしてる。
Netscape4の表示にスタイルを正しく反映させることはあきらめて むしろスタイルを読み込ませない工夫をする方がいい。
正直、divとspan以外ほとんど使ってない奴は挙手( ´Д`)/
948 :
945 :02/06/28 15:49 ID:???
>>947 はーい( ´Д`)/
ろくに使ってないです(w
951 :
初心に戻れ :02/06/28 23:56 ID:gUhlydC7
>Netscape4の表示にスタイルを正しく反映させることはあきらめて >むしろスタイルを読み込ませない工夫をする方がいい。 この方法でなんか簡単な方法とかあるんですか?
954 :
初心に戻れ :02/06/29 00:32 ID:kQ5bZ6Mg
>>953 ほんとうにありがとうございます。
次のスレもいいスレになりますように。
>>952 あとインポって素敵ですね。
@import url(hoge.css);とか @import url("hoge.css"); これの使い方がいまいち良く分からないんですが、 どこか分かりやすく解説してあるサイトしりませんでしょうか?
>>955 zspcとか三日坊主++の部屋
あ、三日坊主++の部屋って何で閉鎖したん?誰か知らない??
950逃亡ですか?(w
埋めるか?
Mozilla 1.0 で img を使うと下に隙間が開くんですが、
どうしたら無くせるでしょうか?
>>955 ただ読み込むだけなんじゃないんですか?
<wbr> と同じようなことは、どうやるんですか?
961 :
960 :02/06/29 05:54 ID:???
float の対象になる要素の幅の明示って、width : auto; じゃダメ?
>>962 画像のように内在寸法をもつ要素ならautoで良し。
そうでないならダメ。
964 :
:02/06/29 15:24 ID:???
そろそろ次スレのテンプレなど…
965 :
1/4 :02/06/29 16:40 ID:???
966 :
2/4 :02/06/29 16:41 ID:???
967 :
3/4 :02/06/29 16:41 ID:???
968 :
4/4 :02/06/29 16:41 ID:???
969 :
補足 :02/06/29 16:51 ID:???
>>967 CSS1仕様書はこちらの方がいいかと。
※最後のスラッシュをつけていなかった。
CSS2の方と合わせたかったらつけておいて。>立てる人
>>968 「三日坊主++の部屋」は閉鎖したようなので削除。
「三日坊主++の部屋」..................。 寂しいYO.....(T-T).............。グス
>>969 しかし、CSS1もCSS2も仕様書ではスラッシュ付けていない罠。
立ててきてイイですか?
973 :
Name_Not_Found :02/06/29 19:29 ID:04DFEzoN
既出でしたらすみません。 a:hover に background-color や border を指定して、アンカーにポインタを 重ねたときだけ背景色や枠線が表示されるようにしようとすると、 IE6(たしか5.5も)で見たとき、ポインタをアンカーに重ねた際に、 そのアンカーを含むブロック全体の位置が微妙にずれるんですが、 原因はなんなんでしょう。 N6では大丈夫なので、IEのバグかと思うのですが、よそのサイトを 見てると、IEでも大丈夫な場合が多いので……
977 :
976 :02/07/01 01:02 ID:???
すいません、誤爆でした。
質問です。 <style type="text/css"> <!-- body {background-image:back.jpg;background-repeat:repeat-y;} --> </style> は正しく打たれているのでしょうか? IE5.xでは、背景画像が縦のみにRepeatされるんですが、 NN4.7だと、縦横全てにRepeatされるんですが・・・。
>>978 background-image:url(back.jpg);
梅〜
梅〜