/* CSS、スタイルシート質問スレッド【6】 */
1 :
Name_Not_Found :
02/01/18 22:03 ID:Y0mC9zbV
4 :
Name_Not_Found :02/01/18 22:07 ID:Y0mC9zbV
5 :
Name_Not_Found :02/01/18 22:08 ID:Y0mC9zbV
移行完了age
6 :
Name_Not_Found :02/01/18 22:08 ID:xU12HbsP
フォントサイズってどこからどこまでのサイズなのか教えてくださいまし
7 :
:02/01/18 22:29 ID:XxCwpG0a
>1 お疲れー,ありがと.FAQ は次回以降への課題ということで.
9 :
Name_Not_Found :02/01/18 23:34 ID:ixuuGFk/
ユーザースタイルシートを使って javascriptの 雪を降らせる みたいなの(画像が落ちてくるやつ) とマウスストーカー(マウスカーソルの後ろになんかついてくるやつ) をやめさせたいのですがどう指定すればよいでしょうか?
10 :
Name_Not_Found :02/01/18 23:42 ID:04EZr0wl
>1 スレ立てさんくすこ。 >9 script { diaplay: none; } これってダメなんかな?未テスト
displayの間違い。鬱氏。
14 :
Name_Not_Found :02/01/18 23:55 ID:ixuuGFk/
ありがとう!!! 関係ないと思うけどgifアニメが止まっちゃったんだけどこれのせい?
ブラウザのJavaScriptをOFFにするのが一番手っ取り早い。
16 :
Name_Not_Found :02/01/18 23:56 ID:ixuuGFk/
display にしたら動きました。 すみません(汗
17 :
11・12 :02/01/19 00:18 ID:ZXpTBWBB
>16 オイラも間違えてスマソ。 ま、15さんのが一番だけど。
18 :
6 :02/01/19 00:45 ID:gXWauxnw
いやフォントサイズってのはどの部分のサイズを言っているでしょうかってことで。 ダイアクリティカルからデセンドラインまでとか ilne-height:1のときのベースラインからベースラインまでの距離とか 色々聞くので。・・・。
正直フォントサイズは%指定だろ。 利用者が不便になってもいいなら絶対指定したらいいのかな。
>>19 「実線を設定する場合 when set solid」ってなんだか意味不明だな。
もしかしてborder-style:solid;を指定した場合ってこと? よくワカラン……。
22 :
21 :02/01/19 03:46 ID:d/ODFTaL
某ページで見たのですが div{line-height:1; font-size:1in;}としたなら <div> xxxxxxxxxxxxxxxxxxxxxxxx<br> xxxxxxxxxxxxxxxxxxxxxxxx</div> 1行目のxの下を通る線(ベースライン)と2行目のxの下端をかすめる ラインの距離は1インチっていう理解でいい訳でしょうか? 行間をつめた場合のベースライン間をフォントサイズとするということは・・
>>11 なるほどと思ったけど、それでscript由来の画像を殺せるのって挙動してはおかしいよね?
そもそも script, style, title {display:none;} ってのはブラウザのデフォルトスタイルのはずだと思うんだけど。
25 :
24 :02/01/19 07:13 ID:/qccmIqP
×挙動しては ○挙動としては ウトゥ。
>>23 理論上はその理解でいい筈です。あとはご自分で実験してみればハッキリするでせう。
あと、「某ページ」とはいづこなりや。
27 :
Name_Not_Found :02/01/19 14:38 ID:zH+N3tY8
初心者で申し訳ないのですが アンカー指定で visited より hover active を優先するようにするように するのは不可能でしょうか?
29 :
Name_Not_Found :02/01/19 15:27 ID:zH+N3tY8
>>28-27 どちらとも試したんですがだめなんです・・・
いろいろ試したんですが・・・
32 :
Name_Not_Found :02/01/19 16:45 ID:Ly31s40c
掲示板で使用するCSSについて質問です。 textarea,input{ .input {border-color: #FFFFFF; border-top: 1 solid #FFFFFF; border-left: 1 solid #FFFFFF; border-bottom: 1 solid #FFFFFF; border-right: 1 solid #FFFFFF; background-color: #000000; color: #333333;} 上の記述だと、名前や書き込み欄などの投稿部分以外に、チェックボックスにも反映されてしまいます。 チェックボックスには別の設定をしたいのですが、可能でしょうか?
34 :
Name_Not_Found :02/01/19 17:09 ID:Eq8B3GJl
昨日も教えていただいたのですがもう少し教えてもらいたいことがあるので質問させてください。 ユーザースタイルーシートで以下のことを禁止したいのですがどう記述すればよいでしょうか? マウスカーソルの形状を変更する ステータスバー関連 フェードイン・フェードアウト(っていうのかな?入るときや出るときのうざいやつ) よろしくおねがいします。
36 :
Name_Not_Found :02/01/19 17:27 ID:Eq8B3GJl
ユーザー・ジャバスクリプト ユーザー・スタイルシート 共にどう記述すればよいのでしょうか? Proxomitronは普段から使用しているので分かります。
>>34 というわけだからブラウザのほうでJavaScript切っちゃいなさい。
わざわざリンク貼ってくれてんだから自分で調べて来いよ・・・
39 :
35 :02/01/19 17:31 ID:S+PeKIBX
>>36 ともかく
>>35 のリンク先は読んでいただけましたか。
具体的な記述はそこのソースから学べるかと存じます。
(ところで番号でいいから名前を記入して下さい。IDだけで同定するのは面倒です。)
40 :
34 :02/01/19 17:34 ID:Eq8B3GJl
>>34 です。
スタイルーシート、ジャバスクリプトは、ほぼ無知なので・・・
でもがんばってみます!!ありがとうございました。
41 :
32 :02/01/19 18:29 ID:Ly31s40c
>>33 なるほど。。。やってみます。ありがとう!!
42 :
Name_Not_Found :02/01/19 20:33 ID:oVlck3wk
43 :
Name_Not_Found :02/01/19 22:07 ID:CTUGrpIO
すいません 画像配置はどう指定するんでしょうか? <p align="top"><IMG SRC="img/1.gif" BORDER="0" onMouseOver="this.src='img/2.gif'" onMouseOut="this.src='img/1.gif'"><p> 今はこんな感じだ!
44 :
禿しくさげ :02/01/19 22:10 ID:aakFZ+WG
>>43 borderは非推奨要素です。乱用はやめましょう。。。としか漏れには言えない
45 :
Name_Not_Found :02/01/19 22:41 ID:CTUGrpIO
BORDER="0" を抜かせばいいんでしょうか?
>>43 >画像配置はどう指定するんでしょうか?
何の画像をどう配置したいの?
>今はこんな感じだ!
どんな感じ? その上のソースが何なの?
質問の意図が全く不明。CSSが何かは知ってる?
……て、初心者スレとマルチだし。
>>43 質問の仕方からして全く調べていないように思えるんだが。
「今はこんな感じだ!」って言われても、何をしたいのかよく分からない。
CSSの position,top,left 等を使って画像の置く位置を調節したいのか?
後ろの方の<p>は閉じてな。タグの大文字小文字も統一して欲しい。
48 :
Name_Not_Found :02/01/19 22:52 ID:psXS74On
全体のbackground-colorが指定できません Netscape 6.2のマカーです。 <meta http-equiv="Content-Style-Type" content="text/css"> <html> <haed> <title>逝ってよし</title> <style type="text/css"> body {background-color: "#999999";} </style> <body> 逝ってよし </body> </html> これじゃダメですか。
ガ━━━━(゚Д゚;)━━━━ン 被った。殆ど同じ内容だし。鬱氏
>>48 body {background-color: "#999999";}
↓
body {background-color:#999999;}
50さま ソッコー解決しました。ありがとうございます。
正直、スタイルシートむずすぎ
HTMLチェックしたら、−256点「がんばりましょう」だった
がんばろうっと
だから、
>>50 もがんばってくれ
54 :
Name_Not_Found :02/01/19 23:35 ID:6yjrTJ7q
55 :
Name_Not_Found :02/01/19 23:42 ID:6x8bm0PV
>>54 table内に列の数に見合ったcol要素を入れて、そいつにCSSでwidthを指定してはどうですか?
56 :
Name_Not_Found :02/01/19 23:50 ID:jBcl6QZs
>>54 各セルに幅100pxのスペーサーを入れては?
57 :
Name_Not_Found :02/01/19 23:54 ID:6yjrTJ7q
>>55 .col1 { width=100pt }
<table>
<colgroup>
<col class=col1>
<col class=col1>
</colgroup>
</table>;
ということでしょうか?
早速やってみます。
colというのは初耳でした。
ありがとうございます。
58 :
Name_Not_Found :02/01/19 23:57 ID:6yjrTJ7q
>>56 スペーサーGIFってやつですか?
なるほど、そーゆーやり方もあるんですね。
参考になります。
>>57 CSSの記述法がおかしい。書き間違いだと思うけど。
誤 .col1 { width=100pt }
正 .col1 { width: 100pt; }
あと、属性値もクォートで囲ったほうが良い。
class=col1 → class="col1"
それと、width="100"の100は100ptではないよ。100px。
60 :
54 :02/01/20 00:06 ID:3E2s9wwq
>>59 あ、ごめんなさい。
cssは単純に記述ミスです。
まだこの書き方に慣れない・・・
属性値はクォート入れるんですか。
参考にしたところが入れてなかったんでこれでいいのかと思ってました。
62 :
54 :02/01/20 00:37 ID:3E2s9wwq
>>54 td{width:100pt;}ではダメなのか? <col>は未対応のブラウザも多い。
特定のtdだけに幅を指定したいならtd.foo{width:100pt;}
64 :
兄 :02/01/20 11:44 ID:9Mglqrsa
スレ違いかもしれませんが、皆さんのお知恵拝借させてください。 IEでWebページを印刷するときに、右端のテキストが折り返されずに はみ出て、印刷できないことがありますよね? あれはどうやったら解決できるのですか?
>>64 CSSで解決するのなら、具体的なHTMLソースも出してくれなくては。
でも、CSSに頼らずとも、印刷プレビューを見ながら
ファイル→ページ設定で印刷する用紙のサイズと向きを変更したり
表示→文字のサイズを小さくしたりするとかで、大抵解決する気がするけど。
>>64 印刷専用のスタイルシートを用意して
bodyの幅をwidth:で固定するとか……
A4に固定するくらいなら、あまり文句も来ない(?)
デフォルトで、テキストを折り返すようにするのがベストなんだけどね。
67 :
兄 :02/01/20 13:51 ID:9Mglqrsa
皆さん、親切に回答ありがとうございます。
>>66 >印刷専用のスタイルシートを用意して
>bodyの幅をwidth:で固定するとか……
>A4に固定するくらいなら、あまり文句も来ない(?)
>デフォルトで、テキストを折り返すようにするのがベストなんだけどね。
具体的にはどうやったら出来るのですか?
超初心者でスミマセン。
>>67 印刷専用のスタイルシート print.css をインポートしておく
@import "print.css" print;
この方法は一例
中身
body {
width: ここの値指定は試行錯誤で決める;
}
bodyが無理なら文書全体をdivで囲んでね。
70 :
68 :02/01/20 14:45 ID:ZhqVLHPc
ごめん。 検索しろよ〜と検索結果のURL出すつもりで検索したら ちょうどいい書式があったのでコピペしてしまいました。 よく考えたら自分も使わない書式だった
>>68-70 一番ややこしくないのは
<link rel="stylesheet" type="text/css" href="print.css" media="print">
ではないかと。
72 :
26 :02/01/20 16:05 ID:hb5jbT+8
73 :
兄 :02/01/21 01:39 ID:RPfM3E+S
74 :
Name_Not_Found :02/01/21 08:41 ID:YkP/fPKJ
初心者用スレッドに投稿したんですが、
こちらに移るように言われたので改めて投稿します。
--
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/ の
>>302 で、OperaでCSSが効かないようにするために、
”外部CSSを設定するlink要素のmedia属性に、複数のメディアを指定”する方法が
挙げられてますが、これってNN4でも同じ目的に使えますよね?
手軽なので、新しいサイトにこの方法を採用したいんですが、
僕の見たところ、@importでCSSバグ対策してる方が多いように思います。
これには何か理由があるんでしょうか?
>>74 私は、よくある@importによるNN4除けは、@importだけしか記述されてない
空ファイルを作りがちなので、あまり真っ当な気がしません。
<link 〜 media="all">の方がまともなやり方だと思ってます。
しかし、screen(webページ)以外の媒体を試したこともないのに
media="all"だのmedia="print,screen"だのと指定することを
躊躇する人もいらっしゃるみたいです。
その辺は好きずきかもしれません。みなさんはいかがですか。
NN4用の記述を残してあるから気にならない。 というか、こういうケースでの真っ当さにはあまりこだわらない。 もともと実装が真っ当じゃないことが原因なんだから。
>>76 >NN4用の記述を残してあるから
それでも、ネスケ4ときたら何がバグるかわからない乱れぶりですから、
残して置いても無事な記述を見分けるのも大変ではありませんか。
それに@importはシートの先頭に書くから、importしたIE・NN6用記述は
その後につづくNN4向け記述に上書きされてしまって難儀することも。
それ位ならネスケ4向けには全く別のシートを書いた方が楽な気が。
で、そのネスケ4用シートはJavaScriptでブラウザ判別して適用させる。
どうせネスケ4はJavaScriptオフだとスタイルシートも無効になるのだし。
>>74 別にNN4.xよけだけのために@importを使ってるわけじゃないと思うが。
むしろCSS使い始めのころ、使い回ししやすいようにファイルを分割したら
NN4.xでスタイルが無効になってぶち切れた経験もある。
79 :
Name_Not_Found :02/01/21 12:39 ID:oibyZ9Hf
MacのDW3でCSS作成したんですが、IE5ではきちんと見れるのに、NS6.2ではなんか余計なものが表示されてしまいます。 | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| | | |____________| |←ここが何故かはみ出てしまいます。 <style type="text/css"> <!-- .unnamed1 { border: 1px #CCCCCC solid; border-color: #CCCCCC #CCCCCC} --> </style> </head> <body bgcolor="#FFFFFF"> <br> <table width="78%" border="0" height="203" cellpadding="0" cellspacing="0" class="unnamed1"> <tr> <td> <p> </p> </td> </tr> </table> <span class="unnamed1"></span> 何かおかしいところはありますでしょうか?
確認しないで書くけど、<span>がいけないんじゃねーの? <span>に中身を入れてもそうなるのでしか?
81 :
Name_Not_Found :02/01/21 14:07 ID:6K/x1IDg
>>79 はみ出している部分は<span>のborder。
Netscape6の解釈は間違ってはいない。とおもう。
空<span>の解釈次第ではないかと。
82 :
Name_Not_Found :02/01/21 16:50 ID:Ozwn2KKN
1行テキスト入力フォームで入力内容を右詰にすることはできないのでしょうか? <INPUT style="{text-align:right}" type="text" name="F1"> これだとWin+IE5.5では期待通りの表示になるが、Mac+IE5.0ではうまくいきません。 どなたか助けてください。
83 :
Name_Not_Found :02/01/21 16:52 ID:yfs3P/04
ブランケットを外せばいいのでは。 <INPUT style="{text-align:right}" type="text" name="F1"> ↓ <INPUT style="text-align: right" type="text" name="F1">
84 :
82 :02/01/21 16:57 ID:Ozwn2KKN
回答ありがとうございます。 ブランケットをはずしましたが、だめでした。
85 :
:02/01/21 17:08 ID:bbbEZzFr
本題とまったく関係ないけど blanket は「毛布」ね () parenthesis {} brace [] bracket
本文とまったく関係ないけど
>>85 のID何か凄いね
87 :
Name_Not_Found :02/01/21 18:12 ID:skKUvolD
すみません。 ばけらさんのとことかで調べたのですがわからなかったので 質問させて下さい。 liにクラス指定してdisplay : inline としているのですが、 liの数が多くなって1行に入りきらなくなると折り返して表示されます。 その、折り返されるときにウィンドウ幅によっては一つのliの途中で折り返されてしまい 読みにくくなってしまいます。 liの途中で折り返ししないように指定するにはどうしたらいいでしょうか。 現状: あいうえお かきくけこ さし すせそ 理想: あいうえお かきくけこ さしすせそ
88 :
Name_Not_Found :02/01/21 18:22 ID:YkOyi2ME
>>87 li{
display : inline;
white-space : nowrap;
}
IE6、Geckoではいけました。
古いIEだとダメだったと思う。
>>87 li要素に含まれる最大文字数でwidthをem固定したれ。
90 :
89 :02/01/21 18:24 ID:BE6rYyu+
ナンパかよ
92 :
87 :02/01/21 18:40 ID:skKUvolD
>>88-89 素早いレスありがとうございます。
ところが今試したところ、当方のMozillaではどちらの方法でも
やはり途中で折り返されてしまいます。
IE5.5はオッケーなんですが・・・
う〜ん、どうしよう。
width: 50%; とか書いてみたら?
94 :
Name_Not_Found :02/01/21 20:41 ID:cthLBUY8
NN4.x対策、@importとmedia複数指定ならば、どちらの表示が速いでしょうか?
全てのブラウザに読み込ませるcommon.css(4kb)と、
NNに読み込ませたくない部分だけを取り出したno-nn.css(1kb)を作って、
「all.css」の冒頭に@importを書いてno-nn.cssを呼び出すと、
IEでの表示がかなり遅くなりました。
そこで
>>74 のように、「no-nn.css」にmediaを複数指定してみました。
IEで観ても、前者よりは軽いような気がしました。
みなさんの経験上ではどちらが軽いと感じますでしょうか?
なんとかJavaScriptナシでNN4.x対策したいと願うJS音痴でした。
ガイシュツでしたらごめんなさいです。検索できなかったスレがあるです。
95 :
87 :02/01/21 21:23 ID:ir6H5qxK
回答して下さった方、ありがとうございました。 とりあえずblockのままfloatにすることで回避することにします。
96 :
Name_Not_Found :02/01/21 21:52 ID:ir6H5qxK
IE3は外部CSSが複数指定されている場合最後しか読み込まない というのを利用してIEを除外するようにしているのですが、 外部CSSとhtmlに直に書いたCSSが両方存在する場合はどのようになるか ご存知の方いらっしゃいますか?
97 :
79 :02/01/21 21:55 ID:oibyZ9Hf
>>80 ,81
ありがとうございます。確かにspanが原因でした。作り直したら上手くいきました。
98 :
79 :02/01/21 22:34 ID:oibyZ9Hf
CSSで背景画像を指定するとどうも上手くブラウザで表示できません。 CSS>タグの再定義>bodyタグ>背景固定 リピートなし、上・左固定 でMacのIE5で背景画像が反映されません。 NS6.2はOKです。DWは3.0.2のMac版です。 <style type="text/css"> <!-- body { background-attachment: fixed; background-color: #000000; background-image: url(file:///2nd%20movement/Sites/www/ファイル名); background-repeat: no-repeat; background-position: left top} --> </style> とDWがCSSを作成するんですが、このままだとNS6.2だけしか表示できず、file:///のスラッシュを一つにすると両方で表示されます。 普通に画像ファイルを挿入するときは、///で大丈夫なのに、何故でしょう? DWが作成するCSSに問題があるのでしょうか?
IE3を使ってるヤツは見た事ないが、 基本的にHTMLに書いたほうが優先される。 style="〜"はstyle要素より優先 !important使ってなければね。
>98 ・・・。 そのままうpしたらアンタ以外は誰も見れない
>>98 説明するのも面倒だが、とりあえずurlを相対パスにしれ。
102 :
94=102 :02/01/21 23:15 ID:hNtA6p1W
>>94 「all.css」の冒頭に→「common.css」の冒頭に
スレ汚しすみませぬ。
テーブルのボディとセルと行にline-height指定して 全体囲いたいんですが環境によっては崩れませんか?
104 :
96 :02/01/21 23:48 ID:ir6H5qxK
>>99 ありがとうございます。
確かにイマドキIE3使っている人はいなさそうですね。
デザインと手間の都合上、外部CSSとhtmlに書くのを併用したいので
今のまま逝っちゃいます。
自分で確認できれば一番いいんですが。
複数バージョン併用できるようにしてくれよ・・・>M$
105 :
Name_Not_Found :02/01/22 11:11 ID:yqFutROm
<span style="text-decoration : underline"> で下線の色を変えるにはどうしたら良いですか。
>>105 下線はテキストと同色になる定めです。
border-bottom:1px solid red;にしませう。(redの所はお好みの色値を指定)
但しWinIEは5.5以降でないとインライン要素へのボックス指定が効きません。
108 :
Name_Not_Found :02/01/22 20:22 ID:at4el/fW
<table arign="*">をCSSで記述すればどうなりますか。あえてcenterにする場合は? position: hoge; または float: fuga; の用に記述するような気がする のですが、どうでしょう?
>>108 arignなんてモノは無い。alignだ。
あり〜ん
112 :
名無しさん@お腹いっぱい。 :02/01/22 21:38 ID:ucN5t7Tx
.section { position: relative; margin: 3em; } .navi { position: absolute; top: 0px; right: 0px; } <div class="section"> <h1>hello</h1> <p>no more money</p> <p class="navi">back</p> </div> みたいにしてたんですけど、.navi が div ではなく window の右端にいってしまいます。 .section に width を設定すると良いって言われたんですけど、 margin: 3em を生かした width 設定ってどうしたらいいんでしょう。 width: 100% - 3em * 2 的な設定がしたいわけなんですが...
113 :
Name_Not_Found :02/01/22 21:41 ID:koIC5fow
スタイルシートの一部を無視したいんですけど。 背景をスタイルシートでサイト全体一括指定してるとき 一枚のページだけほかの背景にしたいときとか。スタイルシート読み込んじゃったらあとで <body bgcolor="#000000">てやってもスタイルシート優先らしくて。でもフォント指定とかあるからスタイルシート呼ばないわけにはいかないし。 おしえてください。 あとこの板にもものすごい勢いスレあるといいなあ。
>>112 .navi {
position: absolute;
top: 0px;
left: 0px;
}
スマソ、誤爆。逝って来る(;´Д`)
>113 HTMLに直接スタイルを書くと優先される。
>112 bodyにpadding: 3em;を設定しておくのはダメ?
118 :
名無しさん@お腹いっぱい。 :02/01/22 21:47 ID:ucN5t7Tx
全体用の generic.css と、たとえばサイトの入口用の cover.css とか用意して、 generic.css: body { background-image: url(mono.png); } ... (その他一般的設定) ... cover.css: body { background-image: url(cover.png); } ... (入口特有の設定) ... で、入口の html で両方読み込ませればいいんじゃ? ようするに、無視 or 変更したい部分は上書きすればよろし。
>>113 classかid指定すれば良いっしょ。
120 :
113 :02/01/22 21:48 ID:koIC5fow
121 :
名無しさん@お腹いっぱい。 :02/01/22 21:51 ID:ucN5t7Tx
>>117 うーん、
<div class="section">..</div> が一番外側にくるとは限らないんで、
margin が確実に 3em になるとは限らないんです。
container 相対になってないと使いまわしが効かない...
まったく。IE のおばかーーーー!!
width: auto で許せやあああ
position: absolute なときって、width 指定しないと駄目ってのは
仕様でしたっけ。
122 :
113 :02/01/22 21:51 ID:koIC5fow
>>119 あ、そういう手もあるねさんきゅ!
だれか
すごい勢いスレ立ててよぅ
123 :
:02/01/22 21:56 ID:bcRy7bcj
>121 根本的解決にならないけど .navi{text-align: right;} じゃだめなんだっけ? 試してないからとんでもないこと言ってるかもしれない.
>>122 この板は分業が進んでるからなぁ。
全部のスレが正常に機能すれば「すごい勢い」スレは不必要かも。
それがあると初心者スレの存在意義が。。。
とマジメに考えてみる実験。
>121 単にright: 10%;とかじゃダメ? IE5.5以下、IE6互換モードならwidth: 100%で桶。 NN6にも適用させたいなら HTML * { box-sizing: border-box; -moz-box-sizing: border-box; } を書く。ボックスのサイズをボーダーのサイズまでにさせてくれる。 オイラ的には前者がお薦め。
126 :
Name_Not_Found :02/01/22 22:13 ID:ucN5t7Tx
>>123 ありがとうです。
.navi {
text-align: right;
top: 0px;
left: 0px;
width: 100%;
}
ってかんじですか。
結構いいかんじ。
しかし、.navi 要素を div の 20% ぐらいに収めたいときに破綻してしまいます。
h1 {
margin: 0px;
padding: 1em 20% 1em 1em;
}
.navi {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
}
って感じにして、h1 と .navi が被らないようにしたいんですよ。
127 :
Name_Not_Found :02/01/22 22:14 ID:ucN5t7Tx
>>125 今手元で IE を試せる環境にないのですが、
width 指定無し = width: 100% って認識でいいんでしょうか?
だとしたらブラボーです。感謝!
128 :
Name_Not_Found :02/01/22 22:21 ID:ucN5t7Tx
>>127 げふん。もじらで試したら、きっちり 100% の大きさにひきのばして
くれました。
-moz-box-sizing はもちろん指定してます。
margin 分引いてくれるわけじゃないんだから、それもそうかっていえばそれまでですが...
width 指定無しで正しく動かない IE が悪いっていいたいんですけど、
この動作が正式仕様なんでしょうかねぇ..
サイズの簡単な足し算とか引き算、サポートされないかなぁ...
>>128 IE5 on Solaris で実験したら、こっちは width: 100% で動きましたが...
-moz-box-sizing だけじゃ同じ動作にならんのかなぁ。
もじらは width: 100% にしてから margin つけてて、
IE は margin つけてから 100% にしてるってかんじ。
130 :
Name_Not_Found :02/01/22 23:03 ID:Gy3sjF6y
java scriptでブラウザの振り分けをしてそれぞれの外部cssを読み込ませる方法で、 classの指定をしたものはちゃんと表示されるんですが、 BODYやTD、TABLEに指定するやつ、 BODY,TABLE,TD{font-size:10px;}のようなやつが うまく効いてくれないのですが、 どうしてでしょうか?
131 :
Name_Not_Found :02/01/23 00:49 ID:IhK/Htmy
table を使わないで、まったく同じレイアウトを css で指定ってできるの? つうか xhtml1.1 では table って使っていいの? table が叩かれている気がするんだけど・・・。
テーブルがレイアウトの基本、って発想から脱却するこった。
135 :
Name_Not_Found :02/01/23 01:17 ID:LvWp85ME
>>134 しかし、テーブル的なレイアウト方法自体は間違ってないことに注意。
table 要素をレイアウトに使う事が問題なだけね。
むしろ、float とか駆使して擬似 multi column とかやってる現状は
間違ってると思うんだが。しかも完全じゃないし。
>>131 現在の実装状況じゃあ無理です。
しばらくは、table というよりグリッド配置的なレイアウトは
控えるのがよろしいかと。
136 :
Name_Not_Found :02/01/23 01:18 ID:P5954It3
ガイシュツだと思うんですけど、全部のスレが見られない(ない、とか 言われた!)ので質問します。 ブラウザのスクロールバーの色を変えるCSSですが、IE5.0では使えない のでしょうか。つけてみたら全然反映されないのです。普通のバーのまま。 body { scrollbar-base-color: #996600; scrollbar-track-color: #996600; scrollbar-face-color: #996600; scrollbar-shadow-color: #996600; scrollbar-darkshadow-color: #996600; scrollbar-highlight-color: #996600; scrollbar-3dlight-color: #996600; scrollbar-arrow-color: #996600; } こんなのなんですが。何がいけないのでしょうか。
>>136 IEが対応してないだけ。バージョンアップしろ。
138 :
136 :02/01/23 01:41 ID:lzymvaGt
うあ、IE5.5以上でないと駄目だったのか(汗)
駄目だ汎用性がない(何)。
IEはバグりすぎてバージョンアップするのが怖いっす・・・。
アップするごとにひどくなるから。
>>137 教えてくださってサンクス(TT)
139 :
131 :02/01/23 01:59 ID:IhK/Htmy
140 :
Name_Not_Found :02/01/23 04:39 ID:Lq5Lx5Ky
当方、IE6.0を使っているんですが 均等割付 text-align:justify; text-justify:distribute-all-lines; が効きません。これってIE6の仕様ですか? ちなみに、クラス指定してDIVとSPANで試してみました。 両方ともダメなんですが…何か良い方法、ありましたら ご教授お願いいたします。
141 :
Name_Not_Found :02/01/23 05:43 ID:Fo7ZlTmC
ありとあらゆる文字をフォントも大きさも同じにしたいんですが、どうすればいいのでしょうか? スタイル(太字とか)はそのまま表示したいです。
142 :
Name_Not_Found :02/01/23 05:48 ID:LvWp85ME
>>141 * {
font-size: 100%;
}
とか。
143 :
Name_Not_Found :02/01/23 09:55 ID:KeIHY6H9
>>140 うちのIE6ではちゃんと効きますが。
divにwidthも指定して試験してみたら?
tableの悪用を助長するスレですか。 それとも時代を逆行するスレですか。
146 :
131 :02/01/23 17:53 ID:IhK/Htmy
>>145 そして最後に display: table に導く野心に満ちたスレだと思いたい。
148 :
Name_Not_Found :02/01/23 19:45 ID:c1ntYgvG
first-letterはIE6では効かないのですか?試したけど無理でした
149 :
:02/01/23 19:49 ID:29orLYJW
150 :
:02/01/23 19:52 ID:29orLYJW
>130 誰も答えてくれないんじゃなくて情報が少なすぎるだけだと思うよ. その css を普通に(スクリプト)使わずに読み込めば適用されるんだよね? だとしたら JavaScript の問題だろうからそっちのスレでソースと一緒に聞いてみれば? 配布されてるんなら配布元に聞くとか.
151 :
Name_Not_Found :02/01/23 20:03 ID:c1ntYgvG
>>149 どうやっても反映されません....
CSSの方はh1のclassにtitleという名前をつけて
body{
background-image:url(gray-wev.jpg);
background-color:#FFFFFF;
color:#000000;
}
h1.title{
font-family:"Lucida Console";
font-size:250%;
font-weight:normal;
background-color:transparent;
color:#555555;
}
h1:first-letter{
background-color:transparent;
color:#FF3300;
}
としてるんですが....
h1.title:first-letterとしてみては?
>>151 h1:first-letterの優先度がh1.titleに負けてるからじゃない。
152の言う通り、h1.title:first-letterとでもしてみ。
>>152 ダメでした....仕様なんですかね
spanで囲もうかな
h1:first-letter { スペース入れたら?
156 :
141 :02/01/23 20:33 ID:Fo7ZlTmC
* { font-family:MS Pゴシック; font-size: 14.pt; } このようにしてもすべての文字には反映されませんでした。 もっと設定が必要なんですか?
157 :
149 :02/01/23 20:34 ID:29orLYJW
>155 148 じゃないけど,それだとうまくいくね.バグか? Moz097, NN621, Opera6 はスペースなしでも大丈夫.
>>156 font-family:"MS Pゴシック";にしたら?
フォント名にスペースを含む場合は""で括る、“MS P”は全角にする。
159 :
148 :02/01/23 20:44 ID:c1ntYgvG
>>155 アレ?スペース入れたら効きました....もしやスペースは
必ず入れるんですか?とにかくありがとうございます!
>>156 * { font-size: 14.pt; }
* { font-family:MS Pゴシック; }
こうしれ。逆だったかもしれんけど。
>>156 MS P
のSとPの間のスペースは半角だったりする。
ややこしい名前つけるなM$
14.ptって、この「.」は何?
165 :
160 :02/01/23 20:58 ID:1ZKb/DOb
ガ━━━━(゚Д゚;)━━━━ン 鬱出汁脳・・・
ワイルドカード使えないのね、知らんかったYO!
169 :
Name_Not_Found :02/01/23 22:23 ID:1oTEhhFI
結局のところex=1/2emでOK?
>>169 フォントによって異なります。
ちなみに仮名や漢字にexの概念はありません。
171 :
141 :02/01/23 23:05 ID:Fo7ZlTmC
みなさんご指摘ありがとうございます。
やっているうちに混乱してきたので画像を持ってきました。分かりやすく態と目立つフォントにしました。
http://sakots.pekori.jp/imgboard/imgs/img20020123230045.png * { font-family:"MS P明朝"; font-size:14pt; }
で、設定したのですが<font size=-1>に設定されている文が明朝にはなりますが大きく(14ptに)なりません。
なぜでしょうか?
何も書いていませんでしたが、自分のHP用ではなくIE6のユーザースタイルシートを作っています。
最終的には文字の大きさを三段階の大14pt 中12pt 小10ptに固定したいとと思っているのですが、もっと問題が出てきそうですかね?
このサイズとこのサイズに設定されている場合は14ptにこっちで固定、といったことを考えているのですが。
14ptを元に-1になってるだけ
>171 !importantを使えばいい。
>>170 169ではないが
p{font:18pt "Times New Roman",Times,serif; }
な場合、あるパソではTimes New Roman、ほかのパソでは
Times、そこでexが変わってしまうとして、したら環境毎に
exがかわるのですか?
h1〜h6ってNNじゃwidth指定できないの?
>>175 borderを指定すればできる。NN4だよね?
>>174 そのとおり。
font-size-adjustを解釈するUAはまだ出ていないはず
178 :
174 :02/01/24 04:39 ID:bDPAtZVs
>>177 しかし変わらなかった・・。
HG正解書体-proでもTimesでも同じだった。
どっかのページで検証してたなー
どこだったかな・ちょっと調べてみる。
179 :
Name_Not_Found :02/01/24 11:50 ID:/m4H1m1x
<input type="text" maxlength="10"> 全角だったら10文字まで、半角だったら20文字まで(=20byte)って cssで設定できますか?
cssは見栄えを制御するもんだっつーの!
181 :
Name_Not_Found :02/01/24 12:17 ID:/m4H1m1x
>>180 じゃどうして日本語入力モードとか弄れるんだよ。あ?言ってみろ。
少なくとも全角か半角かを判別するのはCSSの仕事じゃないと思われ。
184 :
代走名無し :02/01/24 16:47 ID:AjoNjs8M
<li>によるリストを書いたとき自然にできる左側の余白を 狭くしたいのですが、 絶対位置指定だと左上に全ての行が固まってしまい、 相対位置指定やマージンだと効かないみたいなのですが、 どうしたらいいですか?
185 :
Name_Not_Found :02/01/24 16:58 ID:ZTjAkQ3P
>>184 ULとLIのmarginとpaddingを全部0にしたら詰まると思うぞ。
ちなみにIEとNNでそれらの初期値が違うようなので注意
187 :
141 :02/01/24 19:11 ID:9zf8cjqS
たびたびすみません。 基本的に文字は14ptで表示するとして(これは出来ました)、「font size=-1」と設定されている部分だけは12ptにしたい場合はどうすればいいのでしょうか?
1から作りなおしてclassでも指定しれ
>>187 font[fontsize="-1"]{font-size:12pt;}
やめておいた方がいいと思うけどね。
>>162 をきちんと読んだ方が。
>189 × font[fontsize="-1"] ○ font[size="-1"]
193 :
189 :02/01/25 00:17 ID:c/n3x9yV
>>190 あ、ほんとだ、ごめそ。
>>191 Σ( ̄△ ̄;)ウカーリ
ところでIE6って属性セレクタ効くの?
>>193 効きません、全く。
未だにCSS1レベル……いい加減対応してくれよ(泣)。
195 :
141 :02/01/25 03:17 ID:vSXYiuqj
あら、もしかして>187はIE6では出来ないという結論が出てしまいました? 必死になっていろいろ試してました。 みなさんいろいろ有り難うございました。 では寝よっと。
196 :
Name_Not_Found :02/01/25 06:30 ID:E6FFdATS
marginで余白の幅を固定することはできますが、 表示される幅を固定することはできないのでしょうか。
197 :
Name_Not_Found :02/01/25 06:35 ID:95j98WT7
<textarea>で、書き込みができなくするように設定したいんですが、どうすればいいでしょうか? ime-modeは見つけたんですが。
>>196 何ですと? もしかしてwidthのこと?
>>197 それはHTMLで。readonly属性を書き加える。
<textarea readonly>〜</textarea>
(XHTMLの場合は <textarea readonly="readonly"> )
199 :
:02/01/25 07:03 ID:5zCrAqUm
>195 Proximitron でできないかな,と思った.
201 :
Name_Not_Found :02/01/25 10:17 ID:jVqujuLX
>>199 やってます。
読みにくい要因をおみとろんであぼーんして、
さらに仕上げにユーザースタイル。これ最強。
184です。 text-indent : で値をマイナスにすることで自己解決してしまいました。 自分のあまりのへタレさにsage。
>>202 無茶するな。
liでなくてul,olをセレクタにすべし。
204 :
Name_Not_Found :02/01/25 18:03 ID:Y+pXLNOc
>>204 dt {clear:both;float:left; width:49%;}
dd {float:left; width:49%; text-align:right;}
206 :
Name_Not_Found :02/01/25 18:23 ID:Y+pXLNOc
>>205 ありがとうございます。しかし、うまくいかないです。
同じ部分を書き換えてみましたが禿しくバグったような表示になってしまうです。
207 :
Name_Not_Found :02/01/25 18:30 ID:Y+pXLNOc
こんな感じです。 <div><dl> <a href="zonu://res/?no=<PLAINNUMBER>" class="face"><div class="o">∧ ∧<br>(*゚ー゚)</div><PLAINNUMBER></a> 『 <NAME> 』</b> <MAIL><dt>DATE:<DATE><dd><MESSAGE></dl></div>
訂正 dd {float:right; 以下同} あと、204のソースはHTML Lintにかけてごらん。 <dl>直下は<dt><dd>しか許されないし、<dt>の次に<dd>が来るのが順番。
>>207 そのソースが良くわかんないんだけど、
div{ position: relative; }
dd { position: absolute; top: *px; right: *px; }
これじゃ駄目かな。pxんところは適当な数値を入れて。
ところでそのスキンは個人使用?
211 :
Name_Not_Found :02/01/25 18:53 ID:Y+pXLNOc
dt {clear:both;float:left; width:49%;}
dd {float:right; width:49%; text-align:right;}
で、
>>207 でよろしいんでしょうか。。ぅぅ。うまくいかんです。
素人考えですが、<dt>だけ変えればよいかと思ったのですが。
> <dl>直下は<dt><dd>しか許されないし、<dt>の次に<dd>が来るのが順番。
そのようですね。先ほど調べてたら、そう書いてありました。
>>210 204は他の方が作られたのですが、それを改造して使うつもりです。
>>209 逝ってきます。。
>>213 HTMLソースが無茶苦茶だとCSSもうまく指定できないって。
ソース書き直したの出してごらん。そしたらfloatによる配置を編み出してやるからさ。
┌──────────────────────┐ │┌──┐名前 sage 日付 ID │ ││ しぃ│ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ │ │└──┘本文 │ │ │ └──────────────────────┘ こうしたいのか? ソースから書き直したほうがいい。 <dl> <dt>NO(しぃ)</dt> <dt>名前</dt> <dt>日付・ID</dt> <dd>本文</dd> </dl> ちょっと乱暴だけど、例えばこうすればどうにでもなる。Class振って。
風呂上りにちょっと書いてみた。 <!-- NewRes.htm --> <dl> <dt class="number"><a href="aaa">∧ ∧<br>(,,・д・)<br>1</a></dt> <dt class="name">名前 sage</dt> <dt class="date">日付 ID</dt> <dd>本文</dd> </dl> <!-- Res.htm --> <dl> <dt class="number"><a href="bbb">∧ ∧<br>(*゚ー゚)<br>2</a></dt> <dt class="name">名前 sage</dt> <dt class="date">日付 ID</dt> <dd>本文</dd> </dl>
dl{ padding:5px; border:1px solid black; clear:left; } dt.number{ width:50px; float:left; border:1px solid black; } dt.name{ width:50%; float:left; padding-left:10px; } dt.date{ text-align:right; } dd{ border-top:1px solid black; margin-left:60px; padding:10px; }
218 :
204 :02/01/25 21:39 ID:Y+pXLNOc
>>214 aの中のdivをspanに書き換えてみたのですが、あんまりうまくいきませんでした。
>>215 少しいじってみましたが、配置的には問題なさそうです。
後は、元の装飾に戻すだけ。。。
>>218 アンカーの中にdivを入れたのか?(w
220 :
204 :02/01/25 21:50 ID:Y+pXLNOc
いや、他の人が作ったskinの元々が<a><div>のようになっていたので、 214さんの指摘の通り、なおしてみたのです。
spanの中にdivでも同じ事だと思うぞ。
222 :
204 :02/01/25 21:56 ID:Y+pXLNOc
うう。<a><span></span></a>のようにしたのですが。。
スマソ、漏れ読察力ないな。 んでも、それならアンカーにclass指定した方が良いと思うんだが。
質問です。 見出し要素などに二重にCSSを指定したい場合、DIVを使いますよね。 このとき、 <h1><div>〜</div></h1> <div><h1>〜</h1></div> のどちらが"正しい"のでしょうか?それとも変わりはないのでしょうか?
225 :
Name_Not_Found :02/01/25 22:57 ID:ddTo/Nd2
HEADとTITLEだと <HEAD><TITLE></TITLE></HEAD> ってのは決まってるけど、 それはどっちでも良いんじゃないのか?
>>224 h1-h6 の中にブロック要素は入らないだろ。
<h1><div>〜</div></h1> はどう考えても ×。
<BASE target="_top">と指定しているのですが、 IDやクラスの中の<A>タグに関してだけ違うtarget指定をしたいのです。 用途はリンクページです。 _topを使う部分が多いのですが、 部分的にスタイルシートで違う指定をして↑のようにしたいのです。 スタイルシートで可能でしょうか、 分かる方がいましたら教えてください。
228 :
215 :02/01/25 23:10 ID:4N11oU2C
229 :
Name_Not_Found :02/01/25 23:11 ID:ddTo/Nd2
230 :
229 :02/01/25 23:14 ID:ddTo/Nd2
231 :
227 :02/01/25 23:44 ID:+//ixaSA
>>228 ,
>>229-230 ありがとうございます。
もしかしたらできるんじゃないか?
とか、できたらいいなぁとは思っていたんですが、無理ですか…
CSSでリンクに関してという話は聞かないですからね。
黙って普通に<A 〜 target="">使います (〜゜ー゜)〜
232 :
227 :02/01/25 23:47 ID:+//ixaSA
すみません。 A A:link A:hover A:active A:visitedを忘れてました。 targetに関しての話です。
233 :
229 :02/01/25 23:56 ID:ddTo/Nd2
>>232 多分その説明じゃ誰も理解できないと思いますよ。
もう少し詳しく丁寧にどうぞ。
234 :
224 :02/01/26 00:02 ID:7we8b0Y+
>>226 ,
>>228 ありがとうございます。
今までブロック要素の中にはいつもブロック要素を入れて良いものだと
勘違いしてました…
235 :
227 :02/01/26 00:22 ID:xlNEBvOu
リンクのバナーがたくさん貼ってあるページで、 ほとんどが<〜 target="_top">になるので、 <BASE target="_top">を<HEAD>内に書いていたんです。 だけどページ内に何箇所か<〜 target="_blank">にしたいところがあって、 部分的にCSSでその辺を変えられないかな、と。 具体的には6箇所なんですが。 もしCSSでできるのであれば、6箇所全部に_blankと書く必要がなくなるのでは? と思い質問してます。 その6箇所は同じところにかたまっているので、 <DIV id(class)="">その6箇所</DIV> ってやれそうな気がするのですが… 説明が下手ですみません。
>>235 CSSってのは飽くまで見た目を制御するもの。
上でも言ったとおり、無理です。
ひとつひとつにtarget="_blank"書いてくださいな。
237 :
:02/01/26 00:28 ID:0jboh3+n
>235 とにかく CSS で target の指定はできません. どちらかとういうと ID を振って JavaScript のお話になるのかな.
239 :
Name_Not_Found :02/01/26 17:29 ID:7G2vM+df
Winユーザーです。パソコンショップのMacIEで自サイトを見たら、表示が崩れてました。 いま、ソースを抽出すると下記の通り。 .center {text-align:center;}/*IE向け*/ .center, {text-align:-moz-center; margin-right:auto;margin-left:auto;}/*N6向け*/ <ul class="center"> <li><p>…………</p> <ul><li>…………</li></ul> </li> </ul> これでWindowsではIE6・NN6.2・Opera6とも問題なく、センタリングします。 しかしMacIEでは文字列だけは中央寄せにはなるものの、なぜかリストマーカーが 文字列左端から離れて画面左端に表示されます。 これをMacIEでも文字列の左隣にリストマーカーを表示させ、且つ li要素全体は中央寄せとするにはどう指定すればいいのですか。
240 :
Name_Not_Found :02/01/26 20:48 ID:Kj95GnhG
position: absolute; left: 0em; ってやったら、親要素を飛びこしてブラウザの左まで飛んでっちゃいました。 これって仕様なんですか? 親要素には position: relative を設定してます。
>240 親要素にもtop: 0; left: 0;とか書いてみては? 子要素にもtop: 0;とか。
242 :
Name_Not_Found :02/01/26 21:46 ID:Kj95GnhG
>>241 だめでした。top は認識するのに何故!?
243 :
Name_Not_Found :02/01/26 22:07 ID:Kj95GnhG
fieldset 要素みたいな表示を CSS で実現するにはどうしたらいいんでしょう?
>>243 それそのものを再現するプロパティはなかった筈。
<div>
<h2>かdjふぁkldfjjj</hn>
</div>
div{ position: relative; }
h2{ position: absolute; top: -*px; left: *px; background: #***; }
とかやればできるかな?
245 :
244 :02/01/26 23:16 ID:QiFFzouz
divにborder指定し忘れた。
246 :
244 :02/01/26 23:19 ID:QiFFzouz
しかもh2の閉じタグがhnになってる。
247 :
Name_Not_Found :02/01/26 23:25 ID:Kj95GnhG
>>244 left プロパティがいかれぽんちなので
absolute は使えないかと....
248 :
244 :02/01/27 00:08 ID:Wd3vrbN1
>>247 基本的にはイカレチムポってことはないよ。>left
大体の場合記述がおかしい。
>>240 はそれだけじゃ原因が判らない。普通は効く筈。
良かったら周辺のソースをスタイルと一緒に晒してみて。
あとブラウザのバージョン。
249 :
Name_Not_Found :02/01/27 00:20 ID:R73bzZLe
>>248 >>112 あたりので。
IE 5.0 です。
5.5 でも同じだったかも。
width: 100% を .section に足すと
Mozilla 0.9.7 で表示がいかれます。
width: auto は効果無し。
.navi に width: 20% とか書いても同じです。
まだイカレポンチ呼ばわりするにははやすぎた?
250 :
244 :02/01/27 00:42 ID:Wd3vrbN1
>>249 >>112 はrightだからまた別の話になっちゃうんだよね。
rightをleftに置き換えると正常に効くし。
自分はrightで困ったことはあってもleftで困ったことってないんだけどな…。
親要素にwidthを指定するなら、
width: expression('100%'); /*WinIEの独自拡張*/
とすれば一応解決はする。
ただし、IE6の標準モードだとおかしくなるので、
DOCTYPE宣言は互換モードになるものである必要がある。
その点で現実的ではないかも。
251 :
239 :02/01/27 00:42 ID:/D8caGhg
>>239 でした質問はどうもご回答が得られないみたいですので、
せめてMacIEのCSSバグについて、まとめたページがあったらご示教下さいませんか。
検索したけど見つけられません……。
>>250 了解。
訂正します。right はイカレポンチ!
なんか非常にがっかりです。
はーあ。
253 :
244 :02/01/27 00:53 ID:Wd3vrbN1
>>251 =239
マーカーが離れてしまうということは、
ul要素にマージンが効かず、
li要素の内容だけがセンタリングされてるんだと思う。
MacIE5.0では、
・blockquote、ul、ol要素にmargin: auto; が効かない
・text-align: centerでブロック要素のセンタリングはできない
からそうなるんだと。
ulをdivで囲ってみては?
255 :
Name_Not_Found :02/01/27 03:43 ID:/lPEWY9m
すみません。初歩的な質問なのですが… htmlのテーブル内に配置したテキストを CSSで指定したサイズにしたいのですが MacのNetscape Communicator 4.7 ではまったく機能していません。 これって、ブラウザ側の問題ですか?
256 :
Name_Not_Found :02/01/27 05:13 ID:7NMldKr9
>>255 Yes
強引にやるなら、テーブル内のテキストにspanタグとかで直接スタイル指定
するといい。文法違反だけどね。
257 :
256 :02/01/27 05:16 ID:7NMldKr9
補足スマソ NN4.7ではスタイル指定して閉じても時々影響が残ることがある。 この時は閉じるタグをいくつか書くとしっかり閉じることができるかも。 ってか、6.2を薦める(w
いまだNN4.Xを使ってる人が結構いるが頭に来る。あんなクサレブラウザを使うな
260 :
Name_Not_Found :02/01/27 06:30 ID:R73bzZLe
>>250 >>112 なんですけど、手元の IE 5.0 だと right を left に置き換えて実験してみたら
ちゃんと動きませんでしたが....
あいかわらず、.section からとびでます。
5.5 だと違うんだろか...
left または right が正しく動いてる事例ってどこか無いでしょうか?
>>253 >ulをdivで囲ってみては?
ご教示有り難うございます。結果報告致しますと――
先の
>>239 のソースで出したulをdivで括り、<div class="center">としました。
ちなみにスタイル指定は
.center{text-align:center;}
.center{text-align:-moz-center; margin-right:auto;margin-left:auto;}
Macは持ってないのですぐ確認できませんが、WinIE6とOperaでは以前通りうまくゆきます。
しかし今度はNN6.2が、MacIEで<ul class="center">としたのと同じ症状を呈します。
即ち、liの文字列は中央寄せしてくれても、リストマーカーは画面左端に置き去り。
但しMacと若干異なり、liを入れ子にした場合、ネストしたli要素のマーカーは
ちゃんとセンタリングされたそのli要素のすぐ左隣に配置されてます。
これはBugzilla.jpにでも提出した方がいいんですかね?
ともあれ、あちら(MacIE)を立てればこちら(NN6.2)が立たずで、困りました。
どちらかのユーザーに目をつぶっていただくほか解決案はないものですか。
263 :
Name_Not_Found :02/01/27 09:32 ID:WBRJJTTu
>>262 #mainBody で width: 100% を指定してるので IE では上手く表示されるんですが...
<style> #mainBody { margin: 3em; } </style>
で、Mozilla でおかしくなります。
横スクロールバーが出てしまう。
width を計算してから、margin を付けてるのかな?
どっちが仕様的には正しいんでしょ。
Mozilla だけ width 指定が無視されるようにでもするしかないのかな。
余談だけど、layout.css みてて、
かなーり悲観的な気持になりました。
こんなにこまごまと UA 対策しなきゃいけないのか...
265 :
Name_Not_Found :02/01/27 11:39 ID:71BfOtGJ
classとidの違いって何なんでしょうか? いろいろ検索してみたのですが、分かりにくくて……。 こういう質問はやはりHTMLのほうなのでしょうか?
>263 オレのサイトでは親要素に position: relative; top: 0; left: 0; 子要素に position: absolute: bottom: 1px; right: 10px; という指定でしっかり効いてるけど。 >265 classは大雑把な分類。 人間で言うと男か女か。 idは個別的なもの。 人間で言うと山田花子、山下達郎とか。 ちなみにidは同ページに同じidは1つまで。
267 :
261 :02/01/27 13:23 ID:7I8tj6PC
たびたびすみません。
>>261 で書いたNN6.2での不具合は、
<li><p>……</p><p>……</p></li>だったのを、<li>……<br>……</li>にすると
生じなくなりました。
NN6では<li></li>内にブロック要素を入れると、否応なくwidth:100%になるんですね。
それはそれで尤もな気もしますが、融通が効かないので釈然としない気も……。
li要素内にブロック要素を包含しつつ、猶且つマーカーごとセンタリングさせる手があれば
いいのですけど――無理なのかなあ。
269 :
Name_Not_Found :02/01/27 23:09 ID:STnnfo9q
テーブルセルの中の背景にCSSで画像を置きたいのですが <head>内にbackground-imageでクラスを作っておいて 問題のセルに<td class="hoge">で指定しても問題ないのでしょうか?
>>267 ボックスモデルを考えると、どちらかといえば
マーカーごとセンタリングされてしまうことの方が
仕様的にはバグっぽいように思えます。
現状の CSS では内容に合わせてボックスの幅を伸縮するような指定が
出来ないので、適当なサイズで width 指定して
margin:auto; とするしかないんじゃないかと思います。
>>271 まあMozilla/NN6の方が規格には厳密なんだろね。
list-style-position:insideにして<li><p>〜〜〜</p></li>と書くと
マーカーの次で改行されてliの内容と一行ズレるのも、ボックスモデルに忠実な故かと。
でも、不便ですな。リストマーカーに関しては、IE6やOperaの仕様の方がよいと感じる。
逆に、NN6と違って融通の効く表示をしてくれるIEやOperaは、
ボックスモデルでなければ一体どんなデフォルト・スタイルを設定してるのか。
もしそれがCSSで指定できるスタイルならば、NN6にも適用させたいところだ。
>>270 なんか他のPCで見たら表示されなくて・・・
ブラウザは大丈夫ですよ
274 :
Name_Not_Found :02/01/28 21:10 ID:4V/RbK4G
-moz-opacity -moz-box-sizing 以外にもMozilla独自の拡張があったら教えてYO!
276 :
Name_Not_Found :02/01/28 21:17 ID:fmAc9MMD
埋もれage
埋もれてなかったsage
280 :
Name_Not_Found :02/01/28 22:59 ID:v0Ap056o
<style type="text/css"> <!-- a:link { color: #0000ff; text-decoration: underline} a:visited { color: #0000ff; text-decoration: underline} a:active { background-color: #ffffcc; color: #ff0000 ; text-decoration: none} a:hover { background-color: #ffffcc; color: #ff0000 ; text-decoration: none} --> </style> と、リンクの色を指定するパターンを、同じhtmlページ内で2種類使えるんでしょうか? 具体的には、上記のパターンと、 a:link { color: #ffffff; text-decoration: underline} a:visited { color: #ffffff; text-decoration: underline} a:active { color: #ffffff ; text-decoration: none} a:hover { color: #ffffff ; text-decoration: none} というパターンを使いたいのですが。
281 :
:02/01/28 23:06 ID:QQNiwM+3
>280 class で分ければ万事問題なし.
282 :
281 :02/01/28 23:07 ID:QQNiwM+3
>281 補足 同じページ内でリンクパターンが複数あると見るほうが混乱するかも しれないのであまりお勧めはしない.
>>280 セレクタを使い分ければ何種類でも使える。
例えばulの中のリンクだけ別のスタイルを適用したい場合、
ul a:link{ 〜 }
(以下略)
とする。
あとは
>>281 の言うようにclassを使っても良い
>>282 まあ背景色との兼ね合いもあるだろうから。
まぁ、メニュー部と地の文とで分けるくらいなら問題ないんじゃないの。
285 :
281 :02/01/28 23:16 ID:QQNiwM+3
うむ,僕の考えが浅かった.ごめん.
286 :
280 :02/01/28 23:21 ID:v0Ap056o
>>281 classの使い方を散々調べて、単純なことはできるようになったんですが、
自分が一番したい
>>280 のことができないんです。
.test { color:#ffffff; text-decoration : none }
として、<a href="xxx.html" class="test">としても思ってるのと違うし。
>>282 バックの色が違うところにリンクを置きたいのです。
わかり辛いでしょうかねぇ。
a:link.test { color: #ffffff; text-decoration: underline}
a:hover { color: red; } a.hogehoge:hover { color: green; } こうすればいいということ。 a:hover { color: red; } ul a:hover { color: green; } こういうこともできる。
a:hover.test2 { color: #ffffff; background:#000000; font-size:xx-large;underline overline line-through; text-decoration: none;}
290 :
274 :02/01/28 23:36 ID:mOnJ4TGl
参考になりました。
291 :
280 :02/01/28 23:42 ID:v0Ap056o
292 :
Name_Not_Found :02/01/29 16:16 ID:FpLj8eXj
あんま関係ないけどTopStyleってやつ C:\Program Files\Bradbury\TopStyle2.5\user\elements.dat をいじれば要素増やせるんだ。初めて知った
TopStyleって窓使いの憂鬱と相性悪い? いっしょに使うと落ちまくるんで消したわ。
294 :
280 :02/01/29 16:40 ID:KR4sA2/L
>>280 から、
>>287 >>288 >>289 と教えていただき、
>>291 と解決したかに思えたのですが、
ネスケでこの技は効かないんでしょうか?
a:link { color: #0000ff }
a:link.test { color: #ffffff }
と一番シンプルな形で試したところ、IEでは期待どおりなのですが
NN(4.5)では最初に指定した色で表示されてしまうんです。
あきらめるしかないんでしょうか。
>>294 a.test:link もだめだった?
296 :
:02/01/29 17:14 ID:uSMZ7m8D
>295 WinNN4.7 ならそれでうまくいくね. ところで >294 さんが本当にやりたいのは <div class="another"> <p><a ...>foo</a></p> <p><a ...>bar</a></p> </div> で .another a{color: black;} とかそういう方向じゃないのかなあと思った.
297 :
294 :02/01/29 17:33 ID:KR4sA2/L
>>295 見事にできました! ありがとうございます。
ってことは・・・
NN4.7だったのか、使ってるの。
>>296 勉強不足で違いがわかりません。ごめんなさい。
でも、ここで教えてもらった方法で期待通りの表示はできるようになりました。
バックが白のページで、基本的なリンク表示パターンを一つ、
同ページ内でバックの色が違う場所では別のパターンを、としたかったのです。
たぶん僕の使ってる単語がおかしかったりして、混乱させてしまってましたら
ごめんなさい。
>>297 296じゃないけど、
その違う背景色を設定したブロック要素の中のAタグの話だから
文脈セレクタが使えるな、という指摘でしょ。
299 :
294 :02/01/29 19:00 ID:KR4sA2/L
>>298 わかりやすい説明ありがとうございます。
おかげさまで理解することができました。
CSSは勉強し始めたところなので、
今のところは
>>295 でいってみます。
300 :
Name_Not_Found :02/01/29 23:10 ID:3nQvp5ou
.htaccess を使って UA 毎のスタイルシート切り変えをしてる人っていないのかな。
floatで画像の右側にテキストを書くと、 その文の長さによって下のマージンがおかしい。 たまに上のボックスと下のボックスがくっついたりする。 これどう?
はいはーい質問! <img src="a.gif" style="float:left;"> <div>aa</div> ってありですか? floatの後にボックス要素もってくると、NN6とかちゃんとしない気がします。
306 :
301 :02/01/30 02:03 ID:X+fmQZZD
>>305 過去ログ見逃してたようですんません。
でも、ありがとございました。
floatってマジ信用できん…。
>>306 いや、そのスレ「Netscape6.1の評価」だから。埋もれてるし。
疲れた…ブラウザ自体が違うならまだしも,ブラウザの マイナーバージョンが違うだけでCSSの動作が変わってくる… テーブルごちゃで全ページのデザイン固めるのはアレだし. (デザインとデータを分離させたいので論外) CGIでデータだけ読み込ませてテーブルに突っ込むのも, サーバ負荷を考えると非現実的. はぁ…オラ,もう疲れたよ.
309 :
Name_Not_Found :02/01/30 04:02 ID:VHzX0pWb
>>308 君だけじゃない。みんなそう思ってる。
何も知らずに font 要素とか使ってた厨のころは幸せだったなぁ。
でももう知ってしまったから後戻りは出来ないね。
310 :
Name_Not_Found :02/01/30 09:23 ID:k4wa4W5J
a:visited{ color : blue; } a:hover{ color : red; } ってやると、リンクの上にマウスやってもredにならないです。
311 :
Name_Not_Found :02/01/30 11:53 ID:5NGyl/Pr
body要素にmargin:0を指定してもN4.xだときかないので body{ margin:0;top:0px;left:0px;position:absolute} にしたら効くようになったのですが、これってまずいやりかたですか?
312 :
Name_Not_Found :02/01/30 13:23 ID:k4wa4W5J
age
>>311 今手元に N4 が無いのでちょっと自信無いですが
margin だけでなく padding: 0 も指定してみては?
>>310 なりますけど? ブラウザ名とバージョンは? 何か他に変な指定入れてない?
315 :
Name_Not_Found :02/01/30 14:34 ID:g8HAFXaH
前に fj かどこかで見たような気もするんですが、 css が有効な時だけ画像を表示するってのはどうやったらいいんでしょう? css が無効な時にはテキストを表示させたいのですが... できれば、無駄な要素(空 span とか)は入れたくないです。
>>313 margin:0;padding:0だけでは駄目だったんです。で、positionとtop,leftを
追加したらN4でも寄せることが出来たんだけれど、なんだか気持ち悪くて、
こんなスタイル定義は仕様書的にOKなのかと思いまして。
>>315 background-imageとvisibility:hiddenの組合せでなんとかならないか。
>>316 別に間違ったスタイル指定ではない。
但し絶対位置指定(position:absolute;)には弊害もあるのでご用心。
絶対位置指定の弊害って? 気になる...
321 :
Name_Not_Found :02/01/30 19:20 ID:uA6+AeNb
スクロールが重くなったりとか。 あとは、バグの温床だってあたり? 詳しくないので..
>>320 環境によって位置が微妙に異なる、とかかな?
ついでに質問。
addressにmarginを指定しても無視される時ない?
paddingだと大丈夫なんだけど。
誰か教えてくだせぇ。
ポジション指定のright bottomはオペラじゃ厳しい。 つか全然ダメだった。 >322 普通に効くけど? marginは確か他の要素に指定したのと被るんじゃなかったっけ?
325 :
322 :02/01/31 12:24 ID:rU0zq/xI
>>323 Opera6だが、positioningのrightやbottomも一応有効ですよ。
「全然ダメ」ってことはない。
つまんない質問ですいません。 cssでイケてるスレッドで紹介されたサイトを順番に見ていたんですが、 どうしてみんなオタクのかほりがするんですか? ・サイト持ち→多かれ少なかれオタク ・2ちゃねら→多かれ少なかれオタク ・css使い→多かれ少なかれオタク 正解はどれですか?まじれすお願いします。 というか ・cssを使用する→オタクだとばれる ・cssを使用する→2ちゃねらだとばれる はありえますか?我ながら馬鹿っぽい質問で恐縮ですがまじれすお願いします。
どうやったらそんなに視野が狭くなるのか。 2ちゃんねるばっかり見てるせいだぞ。
スイマセン。
330 :
Name_Not_Found :02/01/31 15:24 ID:V7wHe22B
確かに、ライトユーザで CSS ばりばり、HTML は Strict なんて人は少ないね。 それに、コンピュータおたくは通常2、3種類の他ジャンルのおたくを兼ねてるものです。
class名がomaemonaとかitteyosiとかだと2ちゃんねらーだとバレるが, そりゃCSSの問題っーより,使ってる人間がアレなだけだ. 個人的に,お洒落なページ作るためにCSS使うというのより, データとスタイルの完全なる分離を目論み,CSSを使ってるという ページのほうがCoolだと思う. そういうページのHTMLって綺麗なんだわ,タグ少なくてデータが詰まってる.
332 :
Name_Not_Found :02/01/31 16:28 ID:V7wHe22B
>>331 これこそはってサイト、紹介してくれると嬉しい。
CSS の為に HTML を書く、的なとこばっかり見てしまったので
このままでは間違った方向に進んでしまいそうです。
>>332 のざきタンのとこはどうよ?
至る所でガイシュツなのでURLは略。
334 :
323 :02/01/31 19:16 ID:8/GSyzbz
>326 ホント? じゃぁ、ある条件下でのバグかなぁ? 親要素に position: relative; top: 0; left: 0; を指定して、 子要素に position: absolute: bottom: 5px; right: 10px; を指定。 子要素にはボーダーも指定したんだが、 そのボーダーが何故かウインドウ縦幅100%と解釈されてた感じ。 >331 オイラはindex以外、全ページに同じスタイルを 指定してるからリニューアルとか簡単っていう理由が大きいかも。 # リニューアルよりサイト更新しろってのは置いといて
335 :
Name_Not_Found :02/01/31 19:31 ID:V7wHe22B
>>334 リニューアルって、
サイトの内容を見なおして、構成を変えてみるとか obsolete な情報を隔離するとか
そういうのも含まない?
>>333 言葉 seek でしたっけ?
336 :
Name_Not_Found :02/01/31 22:41 ID:up+A9UQw
質問です。 border: solid 1px #000; border-bottom: solid 2px #000; っていう指定は別に問題ないですよね?
>>336 無いと言えば無いしあると言えばある。
border-top:solid 1px #000;
border-right:solid 1px #000;
border-bottom:solid 1px #000;
border-left:solid 1px #000;
border-bottom: solid 2px #000;
という記述と同じなので、W3Cのバリデータでは
「border-bottomが重複指定されている」という警告が出る。
もっとも、単に注意程度の意味の警告なので、
放って置いても問題はないといえばない。
>>337 なるほど。ありがとうございます。
やはり、重複は警告モノなんですね。
>>336 かぶった分はより詳細な指定が優先と決まってるからそれで正しいぞ。
>>338 まあ、気が付かないうちに重複しちゃってることがないよう
注意してくれてるだけなんでしょう。きっと。
341 :
Name_Not_Found :02/02/01 02:12 ID:T8pMeCCd
>>341 body {background-image:URL(ここに指定)}
343 :
341 :02/02/01 02:17 ID:T8pMeCCd
>>342 画像を使わないでスタイルシートでグラデーションを
だすにはどうしたらよいのでしょうか。
言葉が足りなくてすみませんでした。
344 :
341 :02/02/01 02:21 ID:T8pMeCCd
341に書いたURLのグラデーションは全画面表示にしないと 両脇に色がついてるのが見えません。 ウィンドウの大きさが変わっても、 両脇にちゃんとグラデーションが表示されるようにすることは スタールシートを用いれば可能なのでしょうか。
IEのフィルタは 指定できるのは2色だけだし、 フォーカス位置も指定できないし、 なんか物足りない。 透明度が付くのは面白いかな。
348 :
Name_Not_Found :02/02/01 13:49 ID:hUQit9Td
ul li{list-style-image: url(off.gif);}
ul li:hover{list-style-image: url(on.gif);}
ってやって、
カーソルが乗ってるリスト項目のマークを変えるのは有効なんでしょうか。
過去ログ探したら
http://mentai.2ch.net/hp/kako/974/974934062.html の387に
>CSS2では:hover, :active, :focusは汎用疑似クラス
とあるし、仕様上は問題ないみたいですが、
IE5.5 や NN6 では意図したようにマークが変わってくれません。
UAの問題なのかな。
349 :
Name_Not_Found :02/02/01 15:36 ID:6enpe3L2
>>348 NN6ならば、th:hoverでbackgroubd-colorを変化させる位はできたけどね。
実装はまだまだ。当分はJavaScript頼りです。
IEが実装する ↓ そのバージョンが普及する 最低限こうならないと最新の技術は使えんからね。 気が遠くなる。 何でM$は以下略
352 :
Name_Not_Found :02/02/01 22:00 ID:CCMtWePs
cssつかったら,普段ウィンドウの幅に合わせて改行されていた文字が だらーっと右のほうへ流れていってしまいます. どうしたら改行してくれますか.
353 :
Name_Not_Found :02/02/01 22:07 ID:/g/XcVm7
>>352 まずはそのタグ晒せや。それだけじゃ内容つかめん。
>>352 どんな CSS を書いたのか提示すべし。
box-sizing系か?何か多いよね。 width: 100%とかではみ出してるとこ。
>>352 あと、そのだらっと流れるブラウザの名前とバージョンも忘れず書けや。
>332 逝けてるサイトスレなどの、「企業系」参照。 厨なデザイナーばかりでもないことがわかる。 >339 あとから指定されたものが上書きするのは仕様、というのもあり。 >352 Operaでの頻出事項。。。
>>351 いえてる。
NN4 とか使ってる人が未だにいることを考えると
今判明したバグっとはこれからしばらくの間付き合っていかなきゃいけないってのもある。
はぁ..
CSS(おまけにxhtml),始めました. 楽しいですね.当方ヲタクなもんで(w
361 :
Name_Not_Found :02/02/02 01:08 ID:eRLtVKZm
CSSで<tt></tt>の効果を生み出すにはどうしたら良いのでしょうか?
>360 オイラも今日からxhtmlをやってみた。 どんどんヲタ臭くなるオイラ(;´Д`) >361 SPAN要素にfont-familyで等角フォントファミリー名を指定してみては?
ごめ。被った。
見ていると時々自分のブラウザでスタイルシートが反映されないサイトが あるんですが、なぜでしょうか?馬鹿な質問だったらすみません。 MacでIE5です。
367 :
361 :02/02/02 01:48 ID:eRLtVKZm
368 :
360 :02/02/02 02:19 ID:nr1fxsuE
まじで面白いっす〜
特に,NN4とIEとOperaとMozillaで基本的に同じように表示された時(w
MacIE5も試したいんだけど,うちのお客さん,マカー1%未満なんだよね…
>>365 >自分のブラウザでスタイルシートが反映されないサイト
は常にあります.…ヘタレUAとヘタレWeb製作者ある限り.
私のとこみたいに,MacIE5の動作確認ができないところも
あるだろうしね〜.ヘタレでスマソ.
でも,MacIE5非対応の要素は使ってないつもりです.
MacIE5ってCSS対応は(比較的)しっかりしてるみたいだしね.
369 :
Name_Not_Found :02/02/02 02:20 ID:iluXJ6ZN
>98 相対パスを使うといいかと。 質問ですが、 スタイルシートを使ってリンク画像の線を消すのはどうすればいいんでしょう? <a href=""><img src=""></a> ←こんな時
img { border-width: 0px; }
IMG {border: none} これではあかんかな?
オレはこうやってる。 A IMG { border-style: none; }
A IMG{border:0px none; color:#ffffff;} /*NN4はborder:0px none;だけだとアンカー内畫像の線が消せない*/ /*colorは背景色と同色にする*/
>>371-373 このスレで言っても仕方ないことだが
CSSではNN4.xでborderが消えないんじゃなかったかな?(;´Д`)
376 :
Name_Not_Found :02/02/02 03:54 ID:INTEbK4A
ものすごくおそるおそるおたずねします。 div二つ入れ子にして、それぞれborderを (外側のdiv)「右と下だけ」、(内側のdiv)「左と下だけ」 という風に指定したのですが、内側のdivをたくさん入れると 中身のテキストが段々左に広がっていってしまうのです。 こういう変なborderの指定の仕方はだめなのでしょうか? div.hoge { border: (右と下だけ指定); } div.hage { border: (左と下だけ指定); } <div class="hoge"> <div class="hage">テキスト</div> <div class="hage">テキスト</div> ・ ・ </div> という感じなんです(あの、borderは もちろんもっと詳しく指定してますが、 全部書くと「長い」と怒られそうなので、 こんな書き方をしてしまいました)。 ブラウザは、IE5.5SP2です。ネットスケープ6.1で見ると まったく問題ないのですが。
378 :
377 :02/02/02 04:06 ID:4J7cHPEm
379 :
376 :02/02/02 04:13 ID:INTEbK4A
(一回へたれ回線切れてID変わってますが376です) あ、ありがとうございますっ。 こんな時間なのに、8分しか待たなかった・・・(涙) バグなのかな?とも考えたのですが、ネスケでオケーなのに IEでだめなんて???と打ち消していたんです。 (cssのバグはネスケがひどいと勝手に思い込んでいました。 ネスケ6以上のバージョンはかなりよいのですね) これですっきりしました。それでは、バグスレに逝ってきます。
380 :
Name_Not_Found :02/02/02 05:07 ID:M8sJQjH7
クラスという概念が理解できない… 変数?
383 :
Name_Not_Found :02/02/02 06:39 ID:M8sJQjH7
>>381 クラスとIDって何が違うんだろう?
そのページ見たけど,一緒の意味に見える…俺って文目?
class がバナナだとすると、 id は俺の名前がマジックで書いてあるバナナ。
classは「文学部」「理学部」みたいなカテゴライズ。 同じclassを複数の要素に指定できる。 idは「学生番号」みたいなもの。一つの文書でidが重複してはいけない。 <p class="本文" id="一つ目の段落">ほげほげ</p> <p class="本文" id="二つ目の段落">ほげほげ</p> <p class="註釈" id="三つ目の段落">ほげほげ</p> # class/idは普通英数字ね。
>>383 同一ページ内に同じ id が二つ以上あってはいけない。
387 :
383 :02/02/02 07:19 ID:M8sJQjH7
つまり,クラス名を与えると,そのクラスに対して纏めて指示を送れる.
学校のクラスと一緒で,さながらページの作者は先生になったようなもんか.
IDは,そのまんま,囚人番号ようなもので,同じIDがあってはいけない.
なるへそ.んじゃ,
>>385 さんの例のようにIDとclassを
両方当てた物は,どっちが優先されるんでしょうか.
id。迷うようなケースではセレクタの詳細度が高くなっているはず。 CSS勧告の翻訳でも探して読んだら。
<dl>で擬似テーブルできたー! ソースが3割減ったよ。
390 :
365 :02/02/02 14:58 ID:D5qRiSD9
366-366様 ありがとうございました!
366-368様でした。逝ってきます…
392 :
Name_Not_Found :02/02/02 15:35 ID:1dskkyJa
>>389 それやりたいんですが出来ないんです。
</TR>をどう「変換」すればいいのでしょうか?
(次の行に移るにはどうすればいいかってことです)
>>392 floatでやるならこんな感じ。
dt{
clear:both;/*前にdtが出現してる場合、そのfloatを解除。*/
float:left; width:5em;/*floatはwidth必須*/
}
dd {
margin:0 0 0 5.5em;/*dtの幅+α分だけ左マージンを取る*/
padding:0;
}
395 :
権兵衛 :02/02/02 19:24 ID:xejigtTN
>>394 うげげ!
こんなにあるの?
自分のサイトで段組テンプレート作成しようと思って、
オペラやネットスケープ4でいちいち確認しながら、作っていた私って一体。
>>393 ,
>>394 一応floatの基本は分かってるんですが、最近どこかで、
<dd>だか<li>を9個並べて、3×3の「テーブル」作っているとこを見たんですよ。
4個目と7個目にclass指定している気配もなかったんで、どうやって折り返してんだろう?
と思いまして。
でもIEの履歴探ってみたけど見あたらない…勘違いかもしれませんsage
398 :
Name_Not_Found :02/02/02 19:55 ID:Wkc9kSsm
>>397 dlにwidthを指定して、ddの幅をその3分の1(-α)とすればいいのでは?
399 :
Name_Not_Found :02/02/02 20:01 ID:Wkc9kSsm
>>398 見事に出来ました。ありがとうございます。
でも、IE5と6のwidthの違い?もありますし、ちょっとしたことでずれそうなのが少しコワイです…
>400 NN6で見てズレてなかったらIE6でも桶なんじゃない?
403 :
Name_Not_Found :02/02/03 04:39 ID:siMy/mwv
<select>タグにborderとか背景画像ってCSSで設定できないんでしょうか? <input type=text...タグでは、できたのですが・・・。 よろしくお願い致します。
>>403 NC4を排除したいのですね…<selectに背景画像
>>403 selectそのものよりはoptionに指定した方がいいんじゃないかな。
セレクトボックスの中身についてはそれで表示を変えられるよ。
ボタンの方は現段階では無理。
406 :
Name_Not_Found :02/02/03 07:48 ID:zCNEL3X8
#menu{ width:200px; height:200px; text-align:left; } この中のテキスト(これ自体じゃない)を、ど真ん中に入れたいのですが テキストの左寄せはできても垂直方向の調整ができません。 要は<TD valign="middle" align="left">のようなテキスト配置に したいのですが…どうすればいいのでしょう
>>406 高さ指定して垂直位置を真ん中に、
っていうのはテーブルのセルでないと無理です。
なので、以下のスタイルを加えます。
display: table-cell;
vertical-align: middle;
もちろんIEでは無理です。MozとOperaではOK。
408 :
407 :02/02/03 08:05 ID:zLpPqKwh
409 :
406 :02/02/03 08:07 ID:zCNEL3X8
やはりテーブル使わないとムリなのですか。 早速やってみます。ありがとうございます でもIEでムリなら、この見栄えにするためには他の方法を考えたほうがいいんだろうな…
>>408 何を聞きたいの?
書いてある以上の事は誰にも言えないよ。
>これ本当に効くんですか?
って、ZSPCに書いてある通りだよ。
>>406 可能。ヒントは#menuの中にブロック要素を作り、margin-?を??%とかに指定。
#menu自体の位置を配置したいのならpositionを使うべし。中央よせはどこに
指定すればいいのかは考えてみて。
>>408 text-align:justify;があると、MacIE5.xでえらいことになるので、
>>366 のバグを逆用して
@media all {
p {text-align:justify;}
}
などとして頂けると助かります。はい。
>>410 試してみて効かなかったので伺ったんですが…。
Mozillaに限った場合、↓で均等割付されますか?
h1{
text-align: justify;
}
>>413 どうも。でもjustifyを使うつもりはないんです。
>>414 「使うつもりはない」のなら、ナゼ尋ねるの?
でもMozilla/NN6に限っても、text-align: justify;は英文なら有効ですよ。
h1みたいな短いものでなくて、数行にわたる文章(p)で試してごらん。
H1でも、よく見るとword-spacingが増やされるのがわかる。
>>414 Mozillaは
日本語でも半角スペースとかが混じってると
無理やり両端揃えにされて
とんでもないことになるぞ。
>>416 うちのサイトでは、日本語の文章に学術用語の原語を入れるので
英字・半角スペースも屡々混じるけど、別に「とんでもないこと」には
ならないが……。
どんな場合にどんな不具合がtext-align: justify;によって生じるのか、
後学のため、ご教示下さいませんか。
一行に半角スペースが一つだけあったりすると、 スペースの左側は左揃えに、右側は右揃えになって、 長い英単語とかの影響で、その行の文字数が少ない場合に そのスペースが大きく広がってしまうとか、そういうこと? それなら経験あるけど、別にとんでもないというほどの ものでもないような。
419 :
Name_Not_Found :02/02/03 19:29 ID:zy2YmQsZ
tableを作るときにひとつのセルでtr,tdとも最低50ptは欲しい、 ただし、内容がはみだしそうになったらtrの設定を優先したいというときには どのようにすれば良いでしょうか?
>>419 trへのwidth指定? は確か仕様上は無効のはず。
tr、tdとも50ptってのはよく解らんが、
min-width、max-widthってプロパティはあるよ。
N6/Mozillaしか対応してないけど。
IEでもやろうと思うと、やっぱりスペーサーGIFみたいな要素を
用意しなきゃいけないかな。
421 :
419 :02/02/03 21:54 ID:kl7V/1DD
>>420 ごめんなさい、書き方が悪かったです。
今は
<tr style="height:50pt">
<td style="width:50pt">
いろいろ
</td>
</tr>
という指定をしています。
この中で、セルの内容がはみだす場合にはheghtを優先という設定をしたいのですが。
できれば、IE5.5or6で対応しているほうが望ましいです。
423 :
419 :02/02/03 22:40 ID:kl7V/1DD
>>422 overflowプロパティはあえて使うならvisibleなのですが、
「制限を無視して」の中の「無視する制限」の内容を
明示的に指定したいのです。
具体的には
┌──┬──┬──┐
│●●│ │● │
│● │ │ │
├──┼──┼──┤
│●●│●●│ │
│ │●●│ │
└──┴──┴──┘
という表で●が5つ以上になったら
┌──┬───┬──┐
│●●│ │● │
│● │ │ │
├──┼───┼──┤
│●●│●●●│ │
│ │●● │ │
└──┴───┴──┘
のように、縦ではなく、横幅を広げろということを
明示的に示す方法はないのかということです。
そのまま印刷もできるようにしなくてはいけないので、
スクロールバーを使うことはできません。
424 :
419 :02/02/03 22:41 ID:kl7V/1DD
うわ、ずれた(--;
>>423 >縦ではなく、横幅を広げろということを
IE独自拡張のoverflow-xプロパティを使用すればできない?
出なきゃ、いっそエクセルでやるとか。
426 :
Name_Not_Found :02/02/04 00:02 ID:2Af18DMw
@importの前に@charsetを記述しても良いのでせうか? @charset "コード指定" @import "hogehoge.css" 某リファレンス本で@importは、全ての規則の一番最初に書かなければ いけないとかって呼んだのだけれど。 iCabの現行バージョンだと@importの前に@charset規則が書かれている と@importのスタイルを読み込まないらしいのですが、構文的に間違って いればやめた方がよいかな?と思いまして。
@charsetはあらゆる文字の前に(つまりファイル先頭に)書かなければなりません。 @importは、あらゆる規則集合(セレクタと宣言ブロックの対)の前に書かなければなりません。
body { (略) font-family: ほにゃらら; (略) } については可ですか?不可ですか? 当方NN4〜Mozzila、IE5〜6対応キボンヌ。 試行の結果、ネスケ系・Opera6不可、IE問題なし。 プロパティはfontにしたほうがよいんですかね〜?
430 :
Name_Not_Found :02/02/04 01:19 ID:VvJFDbjv
sageてしまいました・・・ 当方のミスが判明、NN6以降、Opera6ならおけーでした 禿しくスレ違いですが、ついでに。 NN4.78で、設定以外のFontを表示させたい場合はどうしたらいいんでしょうか? 「ドキュメント指定のを使用」にチェックしてるんですが、悉く無視されます。 鬱です。。。
NN4.Xはフォント指定出来ませんよ。悪しからず。
"Osaka"は効くんだよな。でも"Osaka-等幅"は効かないと。
なるべくMS (P)ゴシック→Osakaの順で指定してほしい。 Win用Osakaを入れてるんだが、 これは7ptと9pt以外きれいに表示できない。 pxで言うと10pxと12pxかな?
>>435 例えば毎日新聞やHotWiredJapanはOsaka優先になってるみたい。
まぁWin用Osakaがあって、しかもそういう不具合があるって知ってる人は少ないだろうから仕方ないんだけど、これ読んで心当たりのある人は、直してもらえると助かる。
「お、気が利いてるね」と思う。
ちなみに、確かMSはMac用のMSゴシックを公式に配ってるはずなので、(それがまともにコンバートされてるとすれば、)逆のパターン(MacでMSゴシック優先させると汚くなる)はないと思う。
スレ違いでごめんなさい。
ただ、マカー的にはMSゴシックよりOsakaの方が好きなわけで。 わがままを言わせて貰えば、ブラウザではOsakaを使わないという人は フォントの名前を変えてしまえば良いと思うのだが。(Winでもできますよね?) でも、他のアプリとの連繋が悪くなるかな。 そうやって閲覧者側が対処してくれていることに期待してはいけないのだろうか…。 むー。葛藤。
Mac買ったらMSゴシックついてくるの?
>>439 じゃあWinにOsaka入れてる人よりMacにMSゴシック入ってる人の方が多いわけか・・・。
だったら迷わずOsaka優先にすべきだな。素直にフォント名変えるか。ファイル名変えるだけでいいのかな?(マカーじゃないけどOsaka好きですよ。
>>437 )
あとフォント名指定もOsaka, MSゴシックの順に書き換えます。Osakaを先に指定してるデザイナーは実は気が利いてたんだなあ。
それにしても既にOsakaが入ってるMacにわざわざMSゴシックみたいなみっともないものを忍ばせるなんて、ウィルスみたいだ。
とても勉強になりました。みなさんありがとう。
441 :
419 :02/02/04 15:24 ID:jji+/YcB
>>419 です。
>>425 を読んで
<tr style="height:50pt">
<td style="width:50pt; overflow-x:visible">
いろいろ
</td>
</tr>
としてみたのですが、やはりwidthの設定が優先されてしまいます。
overflow-yをhiddenにして隠れてしまうのは都合が悪く、印刷も前提としているので
スクロールにすることもできません。
また、PHPと連携させて内容を出力しているのでExcelデータにするのも不可能です。
注文が多くてすみませんが、誰かわかる方、どのように設定すればいいかお願いします。
理想の設定内容は
・widthは「50pt以上」でheightは「50pt固定」
・IE5以上で動作
です。
公開は前提としていないのでWin-IE以外のブラウザは対象外でかまいません。
442 :
:02/02/04 16:16 ID:ZM6VXdmg
>441 そこまで面倒なら php 側で処理するほうがずっと楽だと思った.
>>441 高さが固定ならtdに直接50pt指定でいいだろ。
「CSSで」やろうと思えばmin-widthしかない。
どうしてもクライアントサイドで処理出来ないのなら
あとはJavaScriptから幅を算出して連係させるぐらいだな。
444 :
443 :02/02/04 19:33 ID:fDbMIeMD
>処理出来ない →処理したい
445 :
Name_Not_Found :02/02/05 01:52 ID:Ix5CYk0q
Q要素を使用すると、前後を " " で括るブラウザがありますよね。
あれがイヤなので、スタイルシートで引用符を自動生成しない風に制禦したいのです。
q {quotes:none;}
q:before {content:no-open-quote;}
q:after {content:no-close-quote;}
q:before,q:after{content:"";}
上記の指定によってNN6やOpera(いづれもWin)では無事消せましたが、
MacIE5では未対応らしく、依然、" " が<q>〜</q>の前後に附いてきます。
これを何とか止めさせたいのですが、方法はありますか。
CSSで無理だったらJavaScriptでも結構です。
消せないのならせめて和文らしく 「 」 にするか 、
ヒゲの向きがちゃんとした“ ” にしたいのですが……。
一応、下記の過去ログは読みました。
「Q要素:インライン引用文のマークアップについて」
http://pc.2ch.net/hp/kako/1002/10027/1002750163.html
しつもーん。 うちのノートパソコン(バイオ君)with、IE5.0だと、 filter指定すると何にも見えなくなっちゃいます。 CSS解説サイトなどのfilterのサンプルもまったく見られません。 ちょうど、visibility:hidden;を指定された感じです。 なんで?
447 :
Name_Not_Found :02/02/05 09:53 ID:EFB8ESnu
質問です。 <DIV>とかのボックスを、emでwidth指定しました。 んで、そのボックスに文字が入ってるんだけど、 ブラウザで文字の大きさを大きくすると、 IE5.5ではその文字の大きさに合わせてボックスも大きくなるんだけど、 N6ではボックスの大きさはそのままです。 こちらとしてはボックスも大きくなってほしい (そのためのem指定)んだけど、 何とかする方法ないでしょうか。 また、仕様としては、どっちのが正しいんでしょう? てか、なんか勘違いとかしてるのかな。 情報下さい〜。
>>445 どうしてもこだわるなら、Qを使わず、
<span class="quote">などとするしかないかも。
>>446 以前にもそんな人がいたけど、原因は判らずじまいだったと思う。
IEバージョンアップしてみたらどうか。
>>447 その辺はブラウザ任せで、仕様書では言及されてない(と思う)。
強いて言えばIEの方が正しいと思うけど。
min-widthなんかを上手く使ってどうにかならないかと思ったけど、
自分のとこではどうにもならなかった。
>>447 >こちらとしてはボックスも大きくなってほしい(そのためのem指定)
全く同感。これは、IEの方が正しい(はず)。
ただNN6でも「表示→テキストサイズ」ではご指摘通りダメだけど
「編集→設定→表示→フォント→サイズ」で文字の大きさを変更するなら反映される。
まあBugzillaでも行って投票するしかないのかなあ。
450 :
447 :02/02/05 11:35 ID:EFB8ESnu
>>448 >>449 お答えありがとうございますです。
んー、どうしようもない、のかぁ。
>>449 さんの方法は、閲覧者にはお願いできないしなぁ。
でも、自分とこだけおかしいんじゃないようなので、
ヘンな安心感。
しばらく裏技ないか考えてみます。
(ムリそうだけど)
452 :
445 :02/02/05 11:45 ID:Cqj5xvBx
>>448 >どうしてもこだわるなら、Qを使わず、
><span class="quote">などとするしかないかも。
それしかないのですか。
引用符をつけるのならJavaScriptでも可能なのに、消すのはできないなんて……。
打つ手が無いのでしたら止むを得ん、q要素は使用しないことにします。
(くそう、MacIEの馬鹿チンめ!)
453 :
449 :02/02/05 11:56 ID:VO4MaGmF
>>451 そこにありましたか。一票出して(Vote for this bug)きました。
改善してくれるといいナ。
>>452 変にこだわるよりMacIEを黙殺した方がHTML的にも建設的だと思うが。
455 :
Name_Not_Found :02/02/05 14:21 ID:gPz3vE6T
Mozilla 0.9.8 あげ
>>452 個人的には引用符つけてくれるだけ
MacIE のが WinIE よか万倍マシだと思うのですが。
ちゃんと引用文だということが判るので黙殺しても問題ないと思います。
458 :
456 :02/02/05 15:26 ID:89zxuFs0
Mozilla0.9.8レポート。 インライン要素へのbackground-positionが効かなくなったみたい。 a要素に使ってるので直さないと。
459 :
Name_Not_Found :02/02/05 15:36 ID:YpbjChVU
460 :
◆mISTWFek :02/02/05 16:26 ID:Zaqo12Nh
恐らくガイシュツだと思うんですが、 ポインタをリンクの上に乗せた時にテキストを帰ると言うのは可能でしょうか?
461 :
◆mISTWFek :02/02/05 16:35 ID:Zaqo12Nh
>>460 そういうのは CSS じゃなく JavaScript で。
>>462 あ、そうなんですか…有り難う御座います。
>>460 <a href="#ahya"><span class="base">(・∀・)</span><span class="pop">あひゃ</span></a>
span.pop { display:none }
a:hover span.base { display:none }
a:hover span.pop { display:inline }
ってテクニックはあるけど、こう言う疑似クラスに
レイアウト変更を強要する様な指定は
仕様書的には無視されても文句が言えないのと
ブラウザにはちょっと負担がかかる。
ターゲットだと思う環境でちゃんと動くならそれでもいいよ。
465 :
Name_Not_Found :02/02/05 17:26 ID:dvD0jIc+
BODYとかにfont-familyとか指定するのって意味あるんですか? 自分はいつもBODY以下の要素ごとに指定するから....
466 :
452 :02/02/05 17:28 ID:2+CNtaTa
>>457 引用符をつけるならつけるでいいのですが、それなら後方互換性も考慮して、
それを消すこともできる形式で提供してくれないと不満ですね。
それに和文の引用符には" "ではなくやはり「 」が相応しい。
>>458 >インライン要素へのbackground-positionが効かなく
それって仕様書には忠実なの?
いったん実装しておきながら取り止めってのは釈然としないなあ。
Mozillaは以前にも:hover擬似クラスをアンカー以外の要素でも対応してたのに
止めた前歴がありますね。なんか理由でもあるんですかね?
font-familyは継承するので、主立った要素に共通のフォントを指定する場合は bodyに指定するだけで済む。従って楽。
468 :
Name_Not_Found :02/02/05 17:39 ID:dvD0jIc+
>>467 あ、そういうことですか。
body要素にArialなんかのよく使われてるfont名を指定して
見出しなんかは別なfontを指定して、p(には指定しない)
なんかの本文の部分はbodyに指定したfontが影響する....ってことですか
>>466 インライン要素へのbackground-positionについては
仕様どおり。
インライン要素の背景画像は、
どこを基点に画像を配置するかも実装依存。
仕様がいいかげんだから混乱するんだ。
>>466 :hover は現状(0.9.7)でもタイプセレクタなら A 要素以外で通るよ。
クラスセレクタ/IDセレクタがこける。
バグってほら、再発するものじゃん。
>>470 するとMozillaでは、a:hober{color:red;}とか指定すると、
href属性の無い<a name="id">〜</a>にも反応してしまったりするんですか?
472 :
Name_Not_Found :02/02/05 18:45 ID:QUW1SQNu
>>471 試してないが、そうなるんじゃないか? ってか、それがCSS2の仕様では。
href属性付きのa要素だけに適用したいんだったら、そういう時は
a[href]:hover { color: red }
か
a:link:hover { color: red }
かな。
>>471 するよ。仕様的にもそうだし。(でも何か反応する範囲が変だな…)
なのでa[href]:hoverの方が本来は好ましいと思う。
でも漏れはaに必ずhref書いてるので妥協してる。
余り関係ないけど、XML+CSSの文書をMozで表示させるといろいろ発見があって面白い。
475 :
471 :02/02/05 18:53 ID:zwY54FV+
>>472 >試してないが、そうなるんじゃないか?
NN6.0ではなりましたが、NN6.1(6.01だったかな?)からはなりません。
わざわざ仕様通りの実装を取り止めたわけです。
で、最新のMozillaではまた戻したのかn、と。
476 :
472 :02/02/05 18:56 ID:QUW1SQNu
ちょっと違うんだけど、iモードはリンクにフォーカスを移したときに bodyのalinkを使うんだよね。 この場合、CSSに置き換えるとa:activeもa:focusもあんまり違いが無い。 だから仕様書がはっきり記述しないのは最もだと思うけど、 少なくとも@media screenに限って言えばやっぱり実装が混乱している。 制作者側としては、やっぱりはっきりさせて欲しい訳で。 もっと詳細に規定されているCSS3 Screenみたいのは検討されているのかな?
>>478 でも
・ボックスが入れ子になっている場合、重なり合っている場合
・ボックスの内容がはみ出している場合
みたいなケースについて何も記述が無い。
"当該要素が生成したボックス" てのも内容辺だかパディング辺だか解らない。
これを「定めない」と言われたら、
「ウチの実装ではこれを :hover として判定しません」でもいいわけじゃん。
忠実に実装するには困った仕様だと思うよ。
>>458 >Mozilla0.9.8レポート。
>インライン要素へのbackground-positionが効かなくなったみたい。
これってデマ?
自分は現在確認のためダウンロード中。
483 :
458 :02/02/06 08:01 ID:3b/7yDoB
>>481 え、デマじゃないですよ。自サイトで確認したので。
より仕様に忠実になったってことでしょう。
ただ、background-positionが無効になるだけならいいんですが、
a要素に背景画像を指定した場合、画像自体が表示されなくなります。
マウスでテキスト周辺に色々と干渉してみると表示されたり。
これはバグじゃないかと…。
自分で試してみました。 バージョンは Mozilla 0.9.8 (Build ID:2002020406)。 結果。aへの background-position: bottom; は有効でした。 (NUSSのスタイルで確認)
>>483 とても単純な例で試しても表示されませんか?
>>484 複数の行ボックスに分断される可能性があるインライン要素への
background-position: bottom;
のレンダリングって、どんなのが「有効」と言えるんですかね。
# それこそ未定義なんだが一般的な反応として Mozilla のは OK なんだろうか?
centerは有効みたいだが。
487 :
458 :02/02/06 13:38 ID:wpzGHhob
>>484-485 そんな筈ぁない、と思って色々試してみたっす。
その結果、全く原因不明なのですが、
自分が -position: bottom 用に使っていた画像のみ、
うまくポジショニングされないという事実が判明しました。
幅10、高さ13のPNG画像です(Fireworks製)。
これを使うと
>>483 のような現象が起きます。
その他の画像では有効でした。
もうちょっと調べてみます。誤報発射してホントスマソ。
488 :
481 :02/02/06 14:22 ID:Tw7q96LV
>>485 改行なしのインラインボックスを想定して
その状態に合わせて背景を配置し、
その後、改行部分でボックスをぶった切って折り返す
というような形が理想と言えば理想。
489 :
Name_Not_Found :02/02/06 17:13 ID:YrEi3qYX
max-widthとかmin-widthの 使い道がわからんのですが、 (・∀・)イイ!使い方はありませか
>>489 例えば
<style type="text/css"><!--
p.max {width: 50%;max-width: 200px;border: 1px solid black;}
p.non {width: 50%;border: 1px solid black;}
p.min {width: 50%;min-width: 600px;border: 1px solid black;}
--></style>
<body>
<p class="max">い</p>
<p class="non">ろ</p>
<p class="min">は</p>
</body>
ブラウザのウィンドウ幅を変えてみるとボックス幅の
上限と下限が決められていることがわかるかと。
これが「イイ!」のかどうかはわからないけど。
※ボーダーをつけているのは見た目をわかりやすくするため。
>>490 なるほどwidthと組み合わせると
実用性がでてくるんですね。thanx。
492 :
419 :02/02/06 18:22 ID:KjoDE+wk
激しく遅レスで申し訳ありませんが、419です。
結局可能な全ての要素にwidth,height指定+overflow-x指定で処理しました。
たまにうまくいきます。
答えてくださった皆さん、どうもです。
>>489 俺はIEに対応してなかったので使わなかったけど、
PHPとかCGIと組み合わせて使うにはとても便利だと思う。
要は、要素の中身が可変の場合。
>>490 みたいな使い方もできるのかと、感心。
floatさせたい要素の幅をmin/max-widthで指定するのは可なの? 仕様書は一応読んだけどよく分からん……widthで固定(?)しなきゃダメ?
494 :
Name_Not_Found :02/02/06 21:46 ID:aSgI6ZXX
absoluteやfixedはポジショニングされた最も近い親要素を基準にしますよね? これはどうしようもないですか? 親要素をポジショニングしつつ、 ある子要素は爺要素に対して絶対配置したいんですが。
UL要素やDL要素使ってて思ったんですがあのデフォルトでついてる marginなんかもきちんとCSSで指定した方が良いですか?あとpとか..
>>495 あまり神経質になっても徒労に帰すると思うけど
より多くの人に同じスタイルを使ってもらいたいなら、その方がいいだろうね。
>>493 それ、私もやってます。邪道ですが、widthで指定しなくても済む所の気休めに。
>>495 私はブラウザのデフォルト・スタイルが気に入らないので指定してますが、
別に不都合が無いならわざわざ指定するに及ばないのでは。
>>497 でもIEとmozillaでデフォルトスタイルが違うので
しっかり指定するに越した事はないと思われ
>>497 float に min(max)-width って、邪道なの? 問題ないように思えるんだけど。
「爺要素」って言うんだ…知らなかった
え?造語じゃないの??
婆要素じゃ駄目?
なら兄弟要素や従兄(いとこ)要素や叔父要素もアリですな。 (HTMLの世界は単性生殖ってことで)
兄弟とか子孫って言葉は仕様書にも出てくる。
普通は爺じゃなくて祖先って言うわな。 一番上だけ根っていうけど。
>>505 爺婆要素は親要素の親要素(二コ上)ってことでしょ。
>>506 だろうとは思うけど。
494 が言ってるのはそもそもコンテナブロックの話だから
その時点で既に「親要素」 じゃ無いんだよね。
>>494 て優香、 position:fixed の基準(コンテナブロック)は閲覧領域だぞ。
たしかにどの要素に対して相対とか指定出来た方が嬉しいかも。 なんか今の CSS ってやっぱり中途半端だぁ。
509 :
494 :02/02/07 11:56 ID:gyVhbUpe
>>507 ああああああああ
そうでした。absoluteだけでした。
やっぱりムリですよね。もう少し融通利くと助かるんですけど。。。
回線切ってホウ酸団子喰って死にます。
510 :
495 :02/02/07 14:40 ID:twvd0njW
511 :
Name_Not_Found :02/02/07 17:59 ID:TDDFZyFB
ul.center, .center li { margin-left:auto;margin-right:auto; text-align:center } これだとMacIEでは、li要素の中身だけはセンタリングされるものの、 リストマークが中央にゆかず、画面左端に居坐ったままです。 WinIEやNetscape 6やOpera 6ではli要素の内容幅に合せてリストマーカーも センタリングされたテキストのすぐ左隣に配置されるのですが。 MacIEに対してはどんな指定をしてやればいいのですか。
513 :
Name_Not_Found :02/02/07 18:52 ID:y1LsosB6
あああ かかか 「あああ」を左端に、「かかか」を右端にしたいんですがIE5とN6で同じようになりません。 text-alignで位置を指定して、width:49%ってやってます。 教えて下さい。
514 :
:02/02/07 19:15 ID:eYRrN+bK
>513 float
515 :
Name_Not_Found :02/02/07 19:31 ID:y1LsosB6
>513 IE6とN6.21で確認済。 <style type="text/css"><!-- div.box{ border:1px #666666 solid; background-color:#3366cc; margin:0 5px; padding:0; } div.left{text-align:left; float:left; width: 50%; color:#ffffff; } div.right{ text-align:right; color:#ffffff; } --></style> <body> <div class="box"><div class="left">あああ</div> <div class="right">かかか</div></div> </body>
517 :
513=515 :02/02/07 22:05 ID:RLjYDzve
>>516 すごい、イメージ通りです!
ありがとうございました。
sage忘れ宇津氏
519 :
511 :02/02/07 22:47 ID:DA1gBSbV
>>512 そのログ、検討済みです。
しかしMacIEへの対処法としては、ulをdivで括れって手しか出てません。
既に試したのですが、やはりMacIEだけはリストマークが中央寄せにならないので
お訊ねする次第です。
520 :
マカー :02/02/07 22:51 ID:m9Lt2BiC
>>511 悪いが、解決策は無い。
もともとlist-style-positionの位置は厳密には定められてないから。
insideにしても、インライン要素の様に扱われるか、
それともfloatの様に扱われるかはわからない。
521 :
511 :02/02/07 23:00 ID:DA1gBSbV
>>520 ああ、list-style-positionでinsideにするって手があったんだ。
まあ「厳密には定められてない」にしても、ひとまづ、MacIEでは
どう表示されるのか、できましたらご示教いただけませんか。
(Macはたまに他人のを借りてみるだけなので)
Winの方は自分でチェックします。
522 :
Name_Not_Found :02/02/07 23:27 ID:3v6guWrv
523 :
520 :02/02/07 23:29 ID:m9Lt2BiC
>>521 widthは指定しているの?
MacIEは、普通のブロックでもfloatでも
widthがautoの時はmarginを0にして
結果的には画面幅目一杯になる。
524 :
522 :02/02/07 23:29 ID:3v6guWrv
訂正: div.leftの後に出現する要素に → div.rightの後に出現する要素に
>>523 それはli要素でも同様のレンダリングをするってことですね?
list-style-position:insideと指定しても、なのですか。
width指定はしてません。指定したら、その幅に満たないテキストが内容の場合、
やはりリストマーカーはテキストから離れた位置に表示されるわけですし。
ううん、仕様書には違反してないのかもしれないけど、
MacIEだけが任意幅でリストマーカーも含めたセンタリングができないのは
困りました……。
526 :
マカー :02/02/07 23:42 ID:m9Lt2BiC
>>525 いやね、MacIEはリストマーカーを含めなくても
普通のブロック/リストアイテム要素には「内容幅」って概念が無いの。
あるのは置換要素(imgとか)とtableだけ。
CSSの仕様はそもそもブラウザの負担を減らす為に
いちいち文字列の幅を計算しなくてもいい様にって
思想もあるからね。
cssは使ったことがないのでどう書いたらいいのかわからないのですが、 tableのtdの中に英語の文章を入れたときに、単語の途中で改行してほしくないのです。 ただ単語の定義がIEと微妙に違っていて、例えば「-ABC」は一つの単語として 扱ってほしいのです。なにも指定しないときには「-」と「ABC」の間で 改行されてしまいます。 そこで、 <style type="text/css"> .nobr { white-space: nowrap } </style> <table><tr> <td>mona</td> <td><span class = "nobr">I</span> <span class = "nobr">am</span> <span class = "nobr">mona.</span></td> </tr></table> のように書いたのですが、これだとたしかに、spanでかこったところは 改行されないのですが、なぜかブラウザの幅によっては単語が 消えてしまうことがあるのです。 ブラウザの幅をちょっと広げたり、縮めたりすると表示されるようになるのですが、 全ての単語を正しく表示する方法はあるのでしょうか? <td><nobr>I<wbr>am<wbr>mona.</nobr></td> とした場合にも同様の現象がおこります。 ブラウザはIE5.5と6.0で現象がおこります。 自分でも書きかたがスマートでないと思うのですが、 こういう場合はどういうふうに書くのがいいのでしょうか?
書き忘れてました。 消える単語は、ブラウザの一番右、もしくは改行されて次行の先頭に くるべき単語が消えてしまいます。 全ての改行直前の単語が消えるわけではなく、 微妙に単語の長さがブラウザの幅とマッチしたものが消えるようです。
530 :
Name_Not_Found :02/02/08 09:35 ID:LvL2k4uF
>>528-529 ちなみに半角スペースを実体参照で と書けば、そこも改行されなくなるよ。
531 :
Name_Not_Found :02/02/08 10:28 ID:moPhF9lC
word-break:keep-all; で、だめ?
>>530 スペースで改行して欲しいのですが……
>>531 だめでした、普通の英単語と同じで「-」で改行されてしまいました。
「-」は英単語の結びとして解釈されるからじゃないかな? 本とかでも行末から次の行へ単語が途切れてる場合、 「-」を間に挟むでしょ? 残念だが諦めた方がいいと思うよ。
>>533 その理屈はわかってるんですが、
やっぱり改行禁止を利用すると単語が消えてしまうIEが痛すぎるのか……
536 :
Name_Not_Found :02/02/09 16:01 ID:ktsaP3nH
どなたかご存知でしたらお願いします。。 既出でしたらスイマセン。 NN4.xx で、div の中に背景画像を表示させる方法が分かりません。 #c2 { position:absolute; top:300px; left:250px; width:200px; height:100x; clip:rect(0,200px,100px,0); background: url(xxx.gif); layer-background: url(xxx.gif); } を試したのですが駄目でした。。。 id 指定したdiv の中に何か書き込めば、 background: url(../../../img/bk_test02.gif);の指定が有効になり背景画像が表示されるのですが、何も書かない状態では表示されません。 layer-background:url(xx.gif);と言うのは駄目なのでしょうか? 何か方法が有りましたらよろしくお願いします。
>>536 layer-backgroundなんてプロパティは存在しませんが。
background-imageに限らず、NN4はCSS対応はひどいバグだらけなのは有名で、
あんな腐れブラウザをまともに相手にするだけ骨折り損な気もします。
NN4に対してCSSを適用させるなら、効いたら儲けものい位に見ておけばいかがかと。
でなきゃ、いっそNN4独自のJavaScript Style Sheetでスタイル指定するか。
http://www.zspc.com/stylesheets/index.html
>>536 NN4でブロック要素に対するbackgroundプロパティが効かないときは、
その要素にborderも同時に指定するとうまくゆくことがあります。
枠線を出したくないときはborder:1px none;と指定するよい。
539 :
536 :02/02/09 16:42 ID:ktsaP3nH
>>537 layer-background-image:url(xx.gif);
で表示で来ました。。。逝って来ます。。
参考のWebありがとうございます。
これからJavaScriptと挌闘します。。。(鬱。
>>538 layer-background-image:url(xx.gif);で背景画像を表示させた場合は、
border:1px none; を記述すると逆に背景画像が消えてしまいました。
分け分からん。。。
魔界に沈みそうだ。。。(鬱。
clip:rect(0, width, height, 0)もlayer-background-colorも layer-background-imageも、NN4だけの独自拡張プロパティですね。 滅びゆくブラウザ相手に独自拡張で対処してやっても消耗するだけではないかなあ。
>540 clipは正式に加わってるんでは?
542 :
Name_Not_Found :02/02/10 21:33 ID:ha8cn2TK
下がりすぎです。
<div>にheight:100%を指定しているのですが、 この値を@importで呼び出しているN6/Opera用のシートで 無効にすることはできませんか? ご存知の方いらっしゃいましたら、回答お願いします。
545 :
Name_Not_Found :02/02/11 06:56 ID:uTZKHlgA
↑質問なのにsageてしまった。。。
546 :
:02/02/11 10:37 ID:f2dG/8yc
>544 div{height:auto !important;} じゃだめ?
547 :
Name_Not_Found :02/02/11 10:38 ID:sP7Lr7T0
ul { list-style-type :decimal-leading-zero;} で、 <ul> <li>○○○</li> <li>△△△</li> <li>□□□</li> </ul> と書いて、私の予想では 01.○○○ 02.△△△ 03.□□□ と出ると思っていたのに実際は 1.○○○ 2.△△△ 3.□□□ と出てしまうのです。 どうやらCSSが適用されていないみたいなんです。 何故なのでしょうか。 ちなみに確認はWin+IE6で行いました。
548 :
:02/02/11 10:43 ID:f2dG/8yc
549 :
547 :02/02/11 10:48 ID:sP7Lr7T0
>>548 質問する前に確認するべきでしたね・・・
どうもありがとうございました
h1:after { content: attr(title); } で h1 要素の title 属性値を文字列として精製して、 なおかつ position: absolute; top: 50px; left: 100px; みたいなカンジで絶対位置指定をしてやると Opera(6.01)では効くのですが Mozilla(0.9.8)ではシカトされてしまいます。 どっちの解釈が正しいのでしょうか。
551 :
Name_Not_Found :02/02/11 16:38 ID:QaNFIZNB
CSS用のエディタでおすすめのものはありませんか? Topstyle Lite 使ってみたけど、ホイールが利かなかったり フォーカスがどっかいっちゃったりで使いづらいっす…。
552 :
◆csohISSc :02/02/11 16:47 ID:/jC1TSjm
>>550 Mozがおかしいと思うね。
marginの負の値で代用できる気もします。
>>550 自動生成要素はポジショニング不可。
Mozillaのが正しい。
>>550 自動生成要素はポジショニング不可。
Mozillaのが正しい。
すまん。やっちまった。
557 :
Name_Not_Found :02/02/11 22:27 ID:ibA3sIpc
td{ width:80%; } がIE6で反映されないんですがなぜですか? マックではオケーだったんだけど…。
>>557 反映されますが?
もっと詳しい状況(適用させるソース、その他のスタイル指定)を出して
くれなきゃ返答できませんよ。
559 :
Name_Not_Found :02/02/11 22:46 ID:CEqeaAX2
CSSを使って<div></div>をセンタリングしたいのですが、 検索してみても方法が分かりません。 もしあれば教えていただければ嬉しいです。 よろしくお願いします。
560 :
557 :02/02/11 23:01 ID:ibA3sIpc
以下にソースを記します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="test.css" type="text/css"> <title></title> </head> <body> <table border="0" cellpadding="3" cellspacing="0"> <tr> <td class="aaa"> </td> </tr> </table> test.cssでは .aaa{ text-align: left; width: 80%; } と設定しております。 ながながとソース書いてしまって申し訳ないですが なにかおかしな部分があればご教授お願いしマッス!
>>559 それFAQ。過去ログに出てます。
>>560 tdの中身は何もナシ、なのですか? それではwidth指定が効かないのも無理ないかも。
562 :
557 :02/02/11 23:10 ID:ibA3sIpc
あ、いえ当然中身ありです。 すみません、省略してました。 文章を書いてます。 divにするとオッケーなんですが、構成上tableの中に文章を 持ってきたいのです。 ちょっと自分でもいろいろ試してみます。が、お気付きの点があれば ご教授しる。
>560 んな無茶な。tableごとmarginでセンタリングするならともかく。tdかよ!
>>562 何に対して80%の幅にしたいのですか。
もしtd一つだけのtableをウィンドウ幅の80%にしたいのなら、
tdではなくtableにwidth:80%;を適用さすべきです。
td{width:80%}は親要素、即ちtable全体に対する80%ですから、
他にtd要素があるのか、その内容幅(文字の量)などで変動します。
565 :
557 :02/02/11 23:17 ID:ibA3sIpc
>563 はら、やはしダメですか? tdの中に文章を入れるのは邪道? ていうか、間違ってる?
>>560 kanari suteki da...
568 :
557 :02/02/11 23:24 ID:ibA3sIpc
>564さん、ありがとうございます。 ふむ。なるほどですね。 ウィンドウ幅に対してのwidthならtableに指定するのが正しいと。 でもtdで指定する幅がtable全体に対するものだとすると もしやtable width="100%"にすれば、今のソースのままでイメージどおりに 表示されるのでは…!(間違ってるかどうかは別として。) とおもってやってみたけどダメでした。残念。
>>568 width="100%"のtable内のtdに対してwidth:80%を指定したならば、
残り20%は他のtd要素が占めるべきことになります。
他のtdが無くてtd.aaaひとつだけのtableを書く位なら、divを使ってはいかが。
570 :
557 :02/02/11 23:35 ID:ibA3sIpc
>569 あー、そういうことですか。 結構厳しいんですね。 ご進言どおりdivを使います。 いろいろとありがとうございました。 とても詳しい方がいらっしゃって助かりました。 それではまた。
>結構厳しいんですね。 初歩的な算術だよ、ワトソン君。
200pxなら200pxの幅を持たせたブロック要素内で、テキストを 左右両端揃で均等割付にしたいのですが……。 <h1 align="center">メインタイトル</h1> WinIEでは h1 {width:200px; text-align:justify; text-justify:distribute-all-lines;} と指定すればよし。テキストの長さが200pxに満たない場合、幅一杯になるまで字間を拡げてくれる。 これを、NN6でも同様に表示させるにはどうしたらよいのですか。 どうもMozilla/NN6では欧文は単語間を拡げてjustifyするけれど、和文では text-align:justify;はtext-align:leftにされるみたいなんです(#)。 何かうまく同様の効果をもたらす手段があれば、ご教示下さい。 あと、MacIEではどう見えるのかしらん。 #(CSS2では「適合ユーザエージェントは、'justify'という値を、当該要素の デフォルトの書字方向に従って'left'あるいは'right'として扱ってもよい。 そのことは不適合を意味しない。」とありますが)
>>572 NN6では無理無理。
MacIEでは日本語だと、ぐっちゃぐちゃ。
574 :
Name_Not_Found :02/02/12 14:41 ID:/GjEFjGE
壁紙を <BODY bgproperties="FIXED"> にした上で、右寄せにすることってできますか?
575 :
574 :02/02/12 14:50 ID:/GjEFjGE
すみません、解決しました。
576 :
Name_Not_Found :02/02/12 16:16 ID:tBdiFohN
はじめまして。 CSSでできるのか分からないのですが 初心者ですが宜しくお願いします。 今回質問させて頂きたいのは テーブルごとに背景画像を設定できるのかという事です。 背景でなくても絵の上に文章を書けたり その上にまた絵を置いたり出来ればいいのですが・・・ 宜しくお願いします!
578 :
577 :02/02/12 16:27 ID:v8OZeE4Y
脱字失敬。 background-image“プ”ロパティ“で”できます。
579 :
576 :02/02/12 16:45 ID:tBdiFohN
>577 ありがとうございます! 頑張ってやってみます! たすかりましたぁ!
580 :
Name_Not_Found :02/02/12 18:35 ID:6EqwGOH1
スクロールバーの色を勝手に変えられてうざいので、 ユーザースタイルシートで変えられないようにしようと思うのですが、 スクロールバー関連のプロパティって一括指定できないのでしょうか? それと、色指定を無効にする場合の値って何になりますか?
>>580 あれは確か初期値が無い。
空文字列じゃダメ? 試してないけど。
空文字列でダメなら、システム色を指定するとか。
一括指定は、
scrollbar-base-color
だけど個別指定が優先された記憶がある。
!important で優先できるかもしれない。
これも試してないけど。
582 :
Name_Not_Found :02/02/12 20:30 ID:YoIauf1i
背景を左寄せで幅100px高さ100%(リピートせずに)にしたいのですが、 どうすれば良いのでしょうか? background-attachment: fixed; background-image: url(img/back.jpg); background-repeat: no-repeat; background-position: left top; width:100px; height:100%; にしてみたのですが何か根本的に間違ってるのでしょうか... 577さんが紹介してくれてるサイトに行ってみたのですが載ってなかった...
583 :
あ゛ :02/02/12 20:37 ID:ybULbiFX
CGIのゲストブックのスクロールバーの色を変えたいのですが CGIファイルの中にスタイルシートを入れる方法を教えてください。
>582 背景の高さ・幅は指定出来ないと思うよ。 >583 CGIが吐き出すヘッダ部分に書きなさいな。
585 :
582 :02/02/12 20:45 ID:YoIauf1i
>>584 そうですか...他の方法考えてみます(汗
586 :
Name_Not_Found :02/02/13 00:34 ID:E1ADfFIz
IE5以降とネスケ6.xはOKで、ネスケの4.x以前を、 スタイルシートOFFで閲覧させる方法はありますか? すみませんが、教えてください。
587 :
Name_Not_Found :02/02/13 00:43 ID:J9QBSoQ+
589 :
586 :02/02/13 00:53 ID:E1ADfFIz
>587&588 ありがとうございます。 参考にさせていただきます。
>>581 ありがとうございます。
試しにTransparent(値にはないやつ)を指定したら、勝手に変わらなく
なりました。
一括指定については面倒だけれど一つ一つのプロパティに対して
値Transparentに!importantを付けて設定します。
そういえば、TopStyleのStyle InspectorってIEやmoz専用のプロパティを
設定したりすることもできるんですねぇ。
591 :
東京Y嬢 :02/02/13 14:59 ID:EI9qgjpe
知っている方、教えてくださいませ。 英語版のサイトを制作する場合、文字コードは何にするのがいいのでしょうか。 特に中国とか韓国からのアクセスが多いので、その辺で よく使われているコードを使用するのがいいのかしら? 文字化けしない方法があったら教えてくださいませ。
CSSの欠点ってなんだろう? いまいち思いつかない。
594 :
東京Y嬢 :02/02/13 16:30 ID:EI9qgjpe
早速のご返答ありがとうございます。 文字コードって、そのままHTMLのヘッダー部分に打っても 大丈夫ですよね? ってここのスレで聞いてはいけないのかもしれませんが...。
>>593 利点は裏返せばそのまま欠点になる。
環境ごとに(NN4.x, IE5.x, etc.)適切な表示にできる←→全ての環境で「同じ表示」にはできない
とかね。
>>593 言語仕様的な欠点ではないけれども、
CSS1 と CSS2 の間にも若干の仕様変更があるし
今後も大きな仕様変更がないとは言い切れないのに
CSS レベルを指定する手段がどこにもないこと。
>>595 >>596 レスありがとう。
なるほど…
いまいち古いの使ってる蔵のサイトで躊躇してたり。
デザイナーも微妙なカンジ。うーむ。
>>595 >環境ごとに(NN4.x, IE5.x, etc.)適切な表示にできる
が利点で、
>全ての環境で「同じ表示」にはできない
が欠点?
違うだろ。それとも漏れの誤読でしょうか?
>>598 正確には?ってことかも。
「全く同じ」には出来ないってことかも。
日本語のフォントを2種類使えるのも利点なのかな?
テキストスタイルをまとめて管理するのは楽だし、
HTML以上にオーサリング能力はあるし。
オレは好きだー。
>>599 汎用性を重視して未定義にしている部分が意外と多いことも利点かつ欠点。
どっちの挙動が正しいの?というときに、どっちも間違いでないことがある。
601 :
Name_Not_Found :02/02/13 18:22 ID:wZHeOUSJ
っていうか、現存する全ての実装がバグ持ちで正しく解釈してくれず、 使ってると時々胃がきりきりと痛んでくるってのが 最大の欠点じゃないかね。
>>601 CSS1 勧告からはや5年、CSS2 勧告から4年弱、でこの有様なんだから
頭痛いよなー確かに。
CSSにはXSLTのような真似はできない。動的な指定を行えるのは :hover :active :focus くらいだし。 まあ、あれはスタイルシートと言うよりスクリプトの仕事のような気もするけど。
>>601-603 デザイナーの本音に聞こえるのは何故ですか?
でも、XSLTだと旧ブラウザーが…頭いてぇっすね。
>>603 XSLT はさすがに CSS とは用途が違うだろー。
動的な指定は XSLT だって出来ないよ?
Macintoshユーザーの方にお訊ねします。 outlineプロパティーって、MacIEだけが対応ですよね。 どんな風に見えるものなんですか。その初期値は(特にoutline-color)は? 下手に指定されると癇に障りますか? a:focus {outline:none;}としても別に不都合ありませんか?
>a:focus {outline:none;}としても別に不都合ありませんか? 試したら、激しく不都合でした。focusがどこ行ったのか分からなくなる。 aにoutlineを指定するのは止めた方が無難です。全く効果が無いようですし。 outline-color の初期値は border-color と同様、color プロパティの値を継承します。 inputなんかに指定される分には問題ないと思います。
>>607 >>a:focus {outline:none;}としても別に不都合ありませんか?
>試したら、激しく不都合でした。focusがどこ行ったのか分からなくなる。
ううむ、そんな不都合が。
a:activeでbackground-colorを指定してあっても、分からなくなりますか?
(当然、a:focusの記述の順はその後です。)
なんか以前、パソコンショップのMacIEで黒地のページでリンクにfocus当てると
ヘンな緑色の枠線が出たことがあって、あれがoutlineなのかなと思ってたのですが……。
初期値がborder-colorと同様なら問題ありませんね。
>a:activeでbackground-colorを指定してあっても、分からなくなりますか? 駄目ですね。というか、outlineを指定されている時点でfocusの枠線が出なくなるようです。 で、そもそもaに対するoutlineの指定は効果がありません。 a {outline:solid red thin;} みたいにやっても全く線は現れません。 なので、無理っぽいです。
610 :
Name_Not_Found :02/02/14 16:50 ID:YvfQL3FI
フォントサイズを固定したいのですが、何度貼ってもうまくいきません。 ソフトはビルダー2001です。
611 :
610 :02/02/14 16:59 ID:YvfQL3FI
文章の一部ではなく、ページ全体の文字を10ptにしたいのです。
>>610 フォントサイズの絶対指定は止めといた方がいいよ。FAQなかったっけ?
むー、なんかgoliveとは相性悪いって噂が・・・ 余計なタグと衝突すんのか?
英文でなんか書いてあった。 CSSの元サイトに。
>goliveとは相性悪いって噂が・・・ goliveがCSSを正しく解釈できないってこと? CSSは「仕様」なんで、相性もクソもないと思うけど? >余計なタグと衝突すんのか? 「余計なタグ」って何? >CSSの元サイトに。 「CSSの元サイト」って何? CSS勧告のことか?
関係無いけど、ウッソ ◆mCVsUsSoさんに質問してもいい?
>>606 outline-colorの初期値はinvertじゃ。
でもoutline関係を何も指定しない場合はシステム標準の枠になる。
619 :
Name_Not_Found :02/02/14 18:43 ID:+y4hhzV+
どうも上手くいきません。 なにか間違いがあるでしょうか? body{background:red} 自分ではページ全体を赤色に指定しているはず。
>>620 問題ないと思うけど。ブラウザのバグじゃないの?
>619 オイラもそーゆー風にカラネームで指定したらムリな時があった。 #f00としてみては?
622 :
608 :02/02/14 19:08 ID:DBlDwush
>>609 outlineプロパティーは、:focus擬似クラスでしか効かないってことですね。
でもa:activeでbackground-color(背景色)を指定しておけば、
outlineは枠線だけなのだから、どこにフォーカスが当ってるか(正確にはどこがアクティヴか)は
背景色によってわかるはずと思ったんですが。
outlineを指定するとa:activeの背景色まで継承されなくなるのですか?
MacIEの仕様ってWinIEとはだいぶ異なるんですねえ。
>>618 「システム標準の枠」とは? Macのシステムを知らないのでわかりません……。
623 :
Name_Not_Found :02/02/14 19:30 ID:Ne6rno3z
スクロールバーの色を指定する方法は知ってるんですけど、 サイズは指定できないんですか?
>>622 >outlineプロパティーは、:focus擬似クラスでしか効かないってことですね。
そんなことはないよ。
でも、macIEではoutlineはブロック要素か置換要素にしか
効かない。
で、a要素にはデフォルトでフォーカス当たったときに
outlineが出るようになってるが、文書作成者がa要素に
outlineを指定することは出来ない。指定するとデフォルトの
outlineが消えるだけ。
backgroundが継承されなくなるってことは無いと思うが?
デフォルトのアウトラインが消えるとわかりにくいってことでは?
625 :
Name_Not_Found :02/02/14 20:17 ID:D28Ei1Pq
質問! <P>タグに、display:list-item; って指定したら、 N6では普通に<LI>使ったみたいに表示されるんだけど、 IE6だとなぜか、行の少し下にリストアイテムが表示されちゃうんですよ。 あああああああああ ○ ちょっと大げさだけど(まるまる一行分、ってほどじゃない)こんな感じ。 さらに文章が2行以上になると、 あああああああ いいいいいいい うううううううう ○ という感じになってしまいます。 これってバグ? 直す方法とかご存知の方いらっしゃったら教えてタモレ。 ちなみに<UL><LI></UL>でやればちゃんと頭のところに行くんだけど、 これから全部直すの大変だよ・・・。
627 :
626 :02/02/14 20:55 ID:jrfiMLJR
628 :
Name_Not_Found :02/02/14 21:02 ID:Ne6rno3z
>>625 p {display:list-item;margin-left:1em;}
<p>IE6で実験してみたがちゃんと表示されたぞ。なんか他にヘンな指定してませんか。</p>
<p>それと、display:list-item;はIE5.5以前では未対応なのは承知の上かい?</p>
630 :
625 :02/02/14 21:24 ID:D28Ei1Pq
すいません、 ちょっと下にずれてたのは、paddingの指定が原因でした。 ただ、リストアイテムが一番下の行に並んでしまうのは相変わらず・・・。 あああ いいい ○ ううう 今こんな感じ。これはしょうがないのかなぁ。
CC/PP に期待してるんだけど、駄目かな?
632 :
625 :02/02/14 21:31 ID:D28Ei1Pq
あ、「ううう」の行だけずれた。打つ。
>>629 検証ありがとうです。
レス見ないで書き込んじゃいました。
ホントだ。他のところでおかしくなってるみたいですね。
見直してみます。ありがとう!
モテないみなさまへ
お・だ・ま・り!
あーたなんかノンケよりもバイのあたしの方がモテて困りますわ。それにピアノや作曲やってると、女の子が自然に集まってくるのよね。
今から飲みに出かけるのよ。あーたみたいなモテないノンケと一緒にしないでほしいわ。ですから、チョコレートの山で困ってますのよ。
私は逃げも隠れもしません。文句があったらいつでもいらっしゃい。あたしの住所電話番号は下記よ。逃げも隠れもしませんからいらっしゃいな。
〒760-0004 香川県高松市西宝町2-9-10 B-1-102
Tel.Fax. 087(861)4349 携帯電話.090-7570-3124
ホームページURL;
http://www.geocities.co.jp/MusicHall/5933/ Eメールアドレス;
[email protected]
634 :
Name_Not_Found :02/02/14 21:50 ID:ucL/h5cf
>634 放置の方向でおながいします。
擬似フレームを使かった場合、必ず背景画像は固定表示になるのでしょうか。 スクロールさせたときに背景が固定表示されないように設定したいのですが、 今の所ソースは下記のようになってます。 .header{ position:absolute; filter:Alpha(opacity=70);} .main{ position:absolute; top:0px; left:0; width:100%; height:100%; overflow:auto;} よろしくお願いします。
>>636 そのシートでは、背景画像、指定しとれへんやんけ。
それにそのシートを適用させるHTMLはどないなっとんねん。
そっちのソースも抄出してくれんか。
>>636 擬似フレームで、固定されてるのはbodyと.headerなんでしょ?
だったら固定されない方(.main)にbackground-imageを指定すればいいんでないかい。
>>639 さん
まだ微妙に解決してない点もありますが、なんとか出来そうです。
これからいろいろと調べてみます。ご指摘ありがとうございました。
641 :
CSS初心者 :02/02/15 15:11 ID:YnMPFACu
CSSを使って作ったボックスの中心に複数の画像を配置して、 また、その画像の間が空かないように配置したいのです。 どのようにしたら良いのでしょうか? 教えていただけないでしょうか?
>>641 一つのボックスに複数の背景画像を指定したいの?
それとも、一つのボックス内に複数の img 要素を配置したいの?
前者だったら、現状の CSS では無理。
643 :
CSS初心者 :02/02/15 17:27 ID:YnMPFACu
一つのボックス内に複数の img 要素を配置したいののです。
>>641 質問の仕方が悪いよ……。
どんな風にどんな順番で何個配置したいのか、
それを言ってくれなきゃ指示しようがない。なるべく具体的にソースも出して。
まあmarginとかpositionプロパティーについて勉強したら解決するよ、きっと。
自分でやってみてごらん。それでも駄目だったらその結果を出して添削して貰ったらいい。
横に36文字で改行するようにしようとして p {width:36em;} としてみたのですが、横幅が短いときに横スクロールバーが出てしまいます。 そこで p { if ( 36em>100% ) { {width:100%;} else {width:36em;} } こういうのは無理っぽいけど・・・ 都合よく条件分けする方法は何かありますか?
>>645 max-width: 100%;
width: 36em;
多分IEは未対応。
647 :
Name_Not_Found :02/02/16 03:48 ID:CtSrdggt
そういえば、emとexは実質的にちがうんですか?
>>643 まずはただimg並べてみたら。んで、問題が出たら具体的な質問すれば。
>>647 M ←この高さが1em。
x ←この高さが1ex。
全然違うっす。
650 :
CSS初心者 :02/02/16 11:48 ID:xEYNl/5z
言い方がわかりにくくて申し訳有りません。 具体的にはスワップするイメージを4つ使っているナビゲーションバーの イメージの中央揃えをテーブルではなく、CSSを使って行いたいと考えています よろしくお願いいたします。
653 :
Name_Not_Found :02/02/16 15:10 ID:ilB3kLG0
HTML 4.01 Strict だと <table style="width:100%; height:100%;"> <tr><td style=" text-align:right; vertical-allign:middle;"> <a href="main.htm"> <img src="image/top.gif" width="140" height="80" alt="Enter" style="border:0px;"> </a> </td></tr> </table> で画像が右端には表示されるんですが、上下が真中にならないんですがどこが悪いのかわかりません。 どうしたらいいでしょうか? Transitionalなら正常に表示されるのですが…。 IE6,Mozilla0.9.6(Milestone)どちらもだめでした。Opera6だけ意図した通り表示可能でした。
>>653 body,html {height:100%}
を入れてみれ。
あと、tableがbody直下でないならtableの親要素にも
height:100%を。
ただそれでもMacIEでは無理。
hpビルダーのftpソフトでcssファイルを転送すると 改行のところが豆腐になってしまうの なおせないっすかねえ? ftpが悪いんでしょうか?
657 :
Name_Not_Found :02/02/16 18:14 ID:y1prFcCK
疲れた…各ブラウザでfloatの実装が違いすぎる…
658 :
Name_Not_Found :02/02/16 19:14 ID:EDreyffe
659 :
645 :02/02/17 00:52 ID:atVyOyvo
>>646 ありがとうございました。
IE未対応なのは痛いですが工夫してみます。
divでpadding-bottomを0以外にすると、 ページの下に行く程どんどん左にdiv内が寄っていくのですが、 どのように解決できますか? (IE6 でこうなります)
662 :
660 :02/02/17 23:00 ID:WzH8CyCt
663 :
660 :02/02/17 23:04 ID:WzH8CyCt
IE のバージョンは、6.0.2600.0000.xpclient.010817-1148 です。 Mozilla 0.9.8 だと正常に見えます。
>660 たしかborderと一緒に使うとダメだったような…。 自分のとこもそうなって、今はpaddingを消して対処してます。 でも未確認。っていうか、忘れてしまいました。
665 :
Name_Not_Found :02/02/18 08:46 ID:dPe9nKey
<div id="navigation"> <ul> <li><a href="./index.html">index</a></li> <li><a href="./about.html">about</a></li> <li><a href="./text.html">text</a></li> </ul> </div> みたいにマークアップしたメニューなんですが、この3つの項目を横一列に並べたいのです。 IE6ですと div#navigation{ background : #eeeeee; } li{ float : left; } これでDIV内にも収まりつつ、良い感じに横に並んでくれるのですが NN6ですと(mozilla)DIVからはみ出してしまいます。 リストを横に並べる最適なCSSの指定はどうしたら良いのでしょうか?
>>660 borderをつける。
線が見えるのがいやなら、背景と同じ色で。
背景が画像の場合は諦める。
>>665 li{ display:inline; } ではダメ?
668 :
Name_Not_Found :02/02/18 09:45 ID:H3r3oiQp
スタイルシートにこだわらずに、テーブルで表示してみたら?
669 :
Name_Not_Found :02/02/18 11:06 ID:Guxrfily
<style type="text/css"> <!-- body { background-image: url("../gpv_r_c1.jpg"); background-repeat: no-repeat; } --> </style> で背景画像を指定して、JavaScriptでこの背景を変えたいのですが JavaScriptでbackground-imageをあらわすプロパティを知ってる方 おしえてください。
>>669 すれ違いでス。
でもそれって、
url(n)
とかにして、JSでnに代入、とかにするんじゃないの?
JSは詳しくないんで見当はずれだったらごめん。
>>666 >NN6ですと(mozilla)DIVからはみ出してしまいます。
それが正しい表示です。IEの解釈が誤りです。
仕様によれば、元来floatは通常フローではありません。
floatはpostion:absolute等と同様に通常フロー要素に対して配置に関する影響を
及ぼさないのです。唯一の例外はclearされると、その部分までを通常フロー扱い
としてそれ以降の通常フロー要素の配置を行うことです。
似た問題は
>>515-516 既出、対策としては
>>522-524 をご覧あれ。
具体的には、下記の通りにすればよいかと。
.clear{clear:both;}
<div id="navigation">
<ul>
<li><a href="./index.html">index</a></li>
<li><a href="./about.html">about</a></li>
<li><a href="./text.html">text</a></li>
</ul>
<br class="clear">
</div>
猶、floatさせる要素にはwidth指定が必須です。その点もご修正あれ。
673 :
672 :02/02/18 13:45 ID:h1DNeS39
おお〜。いるじゃん、ちゃんとしたヤツ。
675 :
Name_Not_Found :02/02/18 15:18 ID:4tecrdx5
>>672 その br 個人的に好きになれない。
漏れは <hr /> を invisible にして入れるようにしてるよ。
でもまあひとそれぞれか。
677 :
665 :02/02/18 19:05 ID:dPe9nKey
みなさん、ありがとうございます。早速試してみます。 やっぱりIEがクソなんですね。(いや、仕様書をきちんと読んでない私がクソか) もっと勉強しなくちゃ…。
678 :
Name_Not_Found :02/02/20 14:54 ID:p1QW3l5R
IE5で以下のようにすると fieldset にも form に指定した margin が適用され ます。NN6では正常に表示されました。IE5のバグでしょうか? form { margin: 10em; } <form> <fieldset> <legend>hoge</legend> <input type="text" value="なんでmarginが20em?" /> </fieldset> </form>
>>678 IE6 でも再現できた。とてーもバグに思われる。
おかしいのは fieldset の margin ではなくて input の margin。
input が fieldset 直下にあって、かつ
行ボックス内で input に先行する文字がないときに
なぜか input が form の margin を継承する。
バグ辞典逝きだなーこれ。
680 :
678 :02/02/21 01:56 ID:rT5Xdwle
検証ありがとう。バグ辞典に書いといたわ。 でも、回避方法が楽なのであまり深刻なバグではないね。
681 :
Name_Not_Found :02/02/21 12:46 ID:G1mE7pOl
fieldset 要素と legend 要素の IE/Mozilla におけるレンダリングって どう考えても CSS2 ボックスモデルで説明つかないような気がするんだけど どんな風に考えたらいいの?
>>681 legendにposition:relative;top:かmargin-top:でマイナス値を指定すればいいだけでは。
では、fieldsetのborderがとぎれてるのは、どう説明するの?
では、 fieldset の margin-top の計算ってどうするのが正しいの? 先行するボックス下辺とかコンテナブロック上辺と fieldset の border 上辺の距離のはずだと思うんだけど IE も Mozilla も legend の上辺との距離になるみたいなんだ。 fieldset に背景色つけてみると Mozilla だと fieldset の border 辺内部だけ色をつけるんだけど IE は border 上辺をはみ出して legend の高さまで色がつく。
bodyに背景画像使うと legendの背景には何も無いことがわかるんだけど…
>>686 以前、たしかWinIE5.5で、指定するスタイルによっては
<legend>に<fieldset>のborderがかぶさって<del>みたいに表示されたことがあった。。
いまちょっとIE6でやったけど再現できない……。
688 :
Name_Not_Found :02/02/23 01:52 ID:aV8o4Hyu
divにborderを1pxに設定してるんですが、 operaなんかで見ると枠線が出ないです。 div{border: 1px solid;} div.main{text-align: center;} などとやって、htmlには <div class="main"> 本文</div> などとやっているのですが…。 IEでは普通に表示されます。
>>688 ちょっとやってみたら表示されたけど。
つか border-color が指定されてない場合ってどーゆー色になるんだっっけ。
とりあえず色も明示的に宣言してみてくださいに一票。
691 :
Name_Not_Found :02/02/23 02:19 ID:aV8o4Hyu
>>689-690 IEだとカラー指定しないでも普通に出てた上、class="main"じゃない部分はoperaでも枠線が出ていたので試していませんでした…。
全て指定したらうまく表示できました。
どうも、ありがとうございました。
693 :
Name_Not_Found :02/02/23 03:13 ID:uiJY0XLb
スタイルシート、CSSを勉強しはじめたばかりの初心者です。 自分で調べてみたのですが、どうしてもわかりません。 (多分、あまりにも初心者的な質問だからどこにも書いてないのかも・・・。) 教えていただきたいのは、テーブルについてなのですが 今までは、FrontPageでこんな風に作成してました。↓ <div align="center"> <center> <table border="1" width="62%" height="139"> <tr> <td width="100%" height="45"> <p align="center"><font face="MS UI Gothic" size="4" color="#FF0000"><b>タイトル</b></font></td> </tr> <tr> <td width="100%" height="94"><font face="MS UI Gothic" size="3" color="#0000FF">本文を</font> <p><font face="MS UI Gothic" size="3" color="#0000FF">ここに表示します。</font></td> </tr> </table> </center> </div> 使用するフォントは、テーブル内では常に同じフォントで 場所によってフォントサイズやカラーが違っている、というソースです。 「本文をここに表示します。」部分の文章が長くなると 延々と同じ設定が記述されてしまうので これをCSSファイルを作成してそこにスタイルとして設定したいのです。 板違いの質問になってしまうかもしれませんが CSSファイルにどのように記述するのか、またソース内では テーブルの設定はこのままでいいのか、設定したスタイルは どのように適用するのか、どれか1つでも構いませんので どなたか教えてください。
695 :
693 :02/02/23 03:24 ID:uiJY0XLb
694様、ありがとうございます。 早速教えていただいたサイトで勉強してきます。 こんな初心者にレスつけてくださいまして、 ホントにありがとうございます。
>>693 を書き直したもの。一例ですから、他にもやり方はあります。
.centering {text-align:center}/*IE5.5以前で中央揃*/
.centering table {
text-align:left;
margin-left:auto; margin-right:auto;
border:1px solid #000;
width:62%;
height:139px;
}
th,td {
font-family:"MS UI Gothic",sans-serif;
color:#0000ff;
}
.A {
height:45px;
font-size:120%;
}
.B {
height:94px;
font-size:100%;
}
<div class="centering">
<table>
<tr>
<th class="A">タイトル</th>
</tr>
<tr>
<td class="B">本文を
<p>ここに表示します。</p></td>
</tr>
</table>
</div>
しかしここは お洒落なスレだな。
色々調べてやってみたのですが、どうしても分からないものがあるので質問させて頂きます。 CSSを使い、同じ行の中に右寄せのモノと左寄せのモノを作ることは可能でしょうか? ブロック要素をtext-alignをつかってどちらかだけに寄せる方法は分かるのですが、 1行で表示させる方法が分かりません。 今までは、例えば <table><tr><td bgcolor="#000000"> <table widh="500" border="0" cellspacing="0"><tr> <td width="30%" align="left" bgcolor="#FFFFFF">左寄せ</td> <td width="40%" align="center" bgcolor="#FFFFFF">センター</td> <td width="30%" align="right" bgcolor="#FFFFFF">右寄せ</td></tr></table> </td></tr></table> というようにテーブルでやってました。(cellspacingなどは一部省略しました) テーブルが二重なのはsolidな枠線が欲しかったというだけで、これのCSSでのやり方は分かります。 これと同じ様な表現をテーブルを使わずに表示する方法はあるのでしょうか? もし枠線をつけなければ出来るというのであれば、それだけでも教えていただけると幸いです。 既出でしたらスミマセン。
699 :
698 :02/02/23 09:00 ID:CPupEWgp
しまった。 右寄せと左寄せなら過去ログに似たものがありましたね(汗。 そうじゃなくてセンターも含めたものが出来れば知りたいんです。
>>699 基本的にはこんな感じか?
<div style="width:500px;border: 2px solid #000;">
<div style="width:30%; float:left; width:30%">左寄せ</div>
<div style="width:30%; float:right; width:30%">右寄せ</div>
<div style="width:40%; margin:auto;">センター</div>
</div>
>>698 これでどう?
.style1 { border:solid 2px #0000ff; text-align:center;}
.left { float:left;width: 30%; text-alibn:left;}
.right { float:right;width: 30%; text-align:right;}
<div class="style1">
<SPAN class="left">float:left</SPAN>
<SPAN class="right">float:right</SPAN>
center
</div>
>>698 もう一品。
--CSS--
.box {border: 1px solid #000000;width: 500px;}
.left {text-align: left;float: left;width: 30%;}
.center {text-align: center;float: left;width: 40%;}
.right {text-align: right;float: left;width: 30%;}
.clear {clear: left;}
--BODY--
<div class="box">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
<br class="clear"></div>
<div class="yakimeshi"> <p>炒ってよし</p> </div> <div>下の<p>に,classやidを与えずスタイルを指示したいのです. .yakimeshi { <p> { TEXT-INDENT : 1em} } では駄目でした. .yakimeshi <p> { TEXT-INDENT : 1em} でも駄目でした. どうすればいいんだー
705 :
698 :02/02/24 01:12 ID:frvYL3A1
>>700-702 ありがとうございました。
floatを2重に使うのは盲点でした。
もともとfloatってなんか画像に使うイメージが強くて。
大変勉強になりました。
ホント良スレです。
706 :
Name_Not_Found :02/02/24 15:35 ID:lC9WbcPc
お聞きしたいのですが タグに直接書き込む形で リンクの文字のアンダーバーが付かないようにしたいのですが どなたか教えていただけないでしょうか? 宜しくお願いします。
>>706 <a href="hoge.html" style="text-decoration:none;">hoge</a>
基本から勉強した方が宜しいかと。
それと、下線のないリンクはウザイです。
沢山のページがあって h3は、中央、 h3のid="xxx"は、右 にする場合。 <h3 id="1"> <h3 id="xxx"> としないといけませんか? <h3>は、中央で、<h3 id="xxx">は、右にできませんか?
できますよ h3{text-align:center} h3#xxx{text-align:right}
>>710 >>711 ありがとうございます。できました。
しかし、
---------------------------------
h3 {margin-left:3%;
color:#008000;
background-color:transparent;}
h3#right {text-align:80%;}
---------------------------------
にすることはできませんか?
ならないのです。
714 :
706 :02/02/24 16:10 ID:lC9WbcPc
>707,>708 ありがとうございました! 勉強し直してきます。 下線のないのはうざいのですかぁ。 ではやめときます。
>>715 ありがとうございました。
トップページのメニューの右寄せができました。
717 :
716 :02/02/24 16:20 ID:5aZ5P0PN
idの先頭に数字はつかえないよ
719 :
Name_Not_Found :02/02/25 14:33 ID:cYaSCCzZ
外部ファイルをなるべく少なめにして、 class指定等で複数のページで使いまわしするのと、 各ページごとに外部ファイル作成するのって どっちが効率的なんでしょう。 class指定多くなって偶に訳分からん時があるんですよ(苦 皆さんはどうされてます?
>>719 固有なclassとおもったら、CSSファイルを新しく作成。
使い回しは、あとで泣きを見る。
うちは切り替え使ってるから1スタイルにつき1ファイル。 確かに混乱する時もあるけど、書き方次第で何とかなる。 分けるのはいいけどやり過ぎは禁物と思う。
722 :
720 :02/02/25 16:12 ID:3p0dTuB5
分けるほど特殊なclassは、切り替えに反応させるべきかどうか。 きっと、その文書でしか使わないclassなんだ。 少し汎用性あるやつなら、メインにぶち込むかも。コメントつきで。
<address></address> で囲った中は、IEでは、斜体で表示されますが、 これは、ブラウザによって違うので、私は、 address {font-style:normal;} して、違うブラウザでは、太字になるかもしれないので、 font-weight:normal;にしようと思います。 ブラウザが勝手にデザインするのを解除できる 方法はありますか? いちいちfont-weight:normal; font-style:normal;してると大変ですから。 こういうのは、ブラウザごとに表示が違って良いのでしょうか?
>>723 >ブラウザが勝手にデザインするのを解除できる方法はありますか?
一々上書きする以外の方法はありません。そのためのカスケーディングですし。
ブラウザのデフォルトスタイルっていうのは、ユーザスタイルと同様に考えて下さい。
ユーザに見易いように指定されているのがデフォルトなのですから、
その意味では無闇に変更するべきではないでしょう。
もっとも、ユーザが !important を使っていれば変更のしようもないのですが。
でもまあ、それと解るスタイルに変更する分にはいいと思います。
a {cursor:n-resize;} とか a {text-decoration:none;} とかいった
代表的なウザイ変更をしない限りは。
a {text-decoration:none;} なんか流行ってるよねこれ。 取り敢えずヘッダに書いてあることが異様に多い。 あと、フォントサイズは小にしろとか。してられっかっつーの。
>>723 * { font-style:normal; }
これでいいのかな。
>>725 激同
あと、ネタバレは.bareを表示させるなとか。面倒だ。
728 :
Name_Not_Found :02/02/26 00:36 ID:0pEWC6G0
>> 715 h3#right {margin-left:80%;} この場合はクラスだろう。 right が一意か? クラスとIDの区別がついとらん初心者多くない?
クラスでもrightとかイヤだ
俺のクラス、男ばっかりでイヤだ
.class730 { voice: male; /* 案性ブラウザ用のCSSってどんなだか知らない(;´Д`) */ }
732 :
731 :02/02/26 02:18 ID:ayqXqkhi
/* s/案性/音声/ 鬱だぁ */
>>728 709を見ると1ページで何回も使うことを考えてるっぽいし、ここはクラスだね。
734 :
エンベーディング? :02/02/26 06:30 ID:228uiM0y
下らない質問ですいません。 Embedding Style SheetのEmbeddingって何て読むんですか?
ペッティング
英語を勉強しる!
>>734 "bed"には動詞として「埋まる」の意がある。emがついて他動詞化。「埋める」。
さらにingがついて動名詞化。「埋めこみ」。"bed"は読めるよな。
リンクの下線消しは、わかりやすくさえしてくれれば構わないけど、 CSS理解してないくせに「下線消しはこれをコピペして」とかいう 自称”ホムペ”講座はうっとおしい。 スレ外れスマソ
デフォルトだとリンクの下線が文字にひっつきすぎってんで、 text-decoration:none;にして代りにborder-bottomを指定してあるサイト、 あるよね(「某方面」とか)。 でもあれ、IE5以前だとインライン要素へのborder指定は効かないから どこがリンクだか全然わからなくなるはず。 ユーザビリティが考慮されてないんだな。
>>739 某方面的には、
「そんな中途半端な実装にcssを解釈させないで下さい。」
と言うことではないかと思われ。
デフォルトスタイルなら問題無いわけだし。
>>739 NN4を見捨てるのと同じぐらい、どうでもいいシェア。
742 :
Name_Not_Found :02/02/26 12:18 ID:jgirTvav
質問です。 IE5.5環境とIE6.0環境では、 div#contents { background-color: #ffffff; width: 120px; border-top: 1px solid #008000; border-right: 1px solid #008000; border-bottom: 1px solid #008000; border-left: 20px solid #008000; } による見え方が違うんでしょうか? ボックス自体の幅が変わりますか?
>>742 適切なDOCTYPE宣言をすると変わる。
(とも言い切れないんだっけ?xml 宣言がどうとかっていうのあったよね?)
とにかく、DOCTYPE宣言を書かないでおけばどちらでも一緒。
書かないことの是非はともかくとして。
「こういう時は絶対にclass名ではなく、id名を付けなければならない」 という明確な基準はあるのでしょうか?
745 :
:02/02/26 15:34 ID:qw/DBVW0
>744 リンクのアンカーにしたい時
>>745-746 あ…スレ違いでしたか、申し訳ないです…。
回答どうもありがとうございます。
748 :
742 :02/02/26 20:36 ID:jgirTvav
亀レスすいません。 回答ありがとうございます。 かなり、参考になりました。
749 :
742 :02/02/26 21:10 ID:jgirTvav
適切なDOCTYPE宣言していたんで、 ちょっと外してみたんですけど、 IE6.0、IE5.5ともに同じ表示になりうまくいきました。 ただ、DOCTYPE宣言はずしても、 Operaでは意味ないんですね。。。 適切なDOCTYPE宣言していたときのIE6.0と同じような感じでした。
>>749 そもそも、ボックスの幅に関してだけ言えば、
Opera の方が正しい解釈をしているわけで。
751 :
742 :02/02/26 21:40 ID:jgirTvav
>>750 そうですよね。
やはり、適切な宣言で組みなおします。
いろいろ、ありがとうございました。
>>751 でも、IE5.5が無視出来る環境なのか...。
ちょっと羨ましい。
>>747 746は俺なんだけど、向こうは向こうで、
classを振る事自体が間違いとか言われそうかなぁ。
とはいえ、CSS的にはセレクタとして使えりゃ何でも良くて、
ぶっちゃけた話、class="red"も構わない訳だし...。
753 :
_ :02/02/27 00:03 ID:mg70UJuA
スタイルシートを学ぶにあたってお勧めのページを教えてください。 ちなみに、今はとほほを見ています。
>>752 結局、無視できずに試行錯誤(未熟なんで)したけど、
ムリだった。。。
無理やりしようと思えば出来たんだけど、
サイトのバランスが崩れるのがちょっと痛かったんでやめました。
760 :
757 :02/02/27 03:30 ID:C4k46kHX
761 :
_ :02/02/27 11:03 ID:rHlgSRQ1
昨夜質問した「スタイルシートを学ぶにあたってお勧めのページを教えてください。」 というのは、それぞれ個人的にいいなと思っているサイトを教えてという意味です。 逆に、邪道はここだ、とか。
オレの日本語もかなり荒れてる。 ぞんぶんに見てくれ。
764 :
_ :02/02/27 11:47 ID:rHlgSRQ1
??意味がわかりません。 個人的に特定のページを勧めるのはいけないことなのでしょうか?
解説サイトの論評するスレッドじゃない。
767 :
764 :02/02/27 12:02 ID:rHlgSRQ1
どこ行っても一緒ってこと?それとも自分で探せってこと?
じゃあここはどういう質問ならOKなの?
「解説サイトの論評するスレッドじゃない」なら
>>1 にそう書いておくべきだろ。
>>764 お前2ch初心者?分かっててやってるっぽいけどな。
スレッドレイプ野郎。
一応マジレス。 >764さん、>2-4は読んだのかと小一時間(以下略) あそこが良い、ここが良いなんて人それぞれだしな。 ちなみに私はこのスレが一押しだがな。 ああネタならマジレスしてカコワルイけど良いや。
771 :
764 :02/02/27 13:52 ID:rHlgSRQ1
一応断っておくが、スレ荒らしでもネタでもない。
「自分で
>>2-4 を見て探せ。ここはそこまで親切なスレじゃない」ってこと
なら最初から一言そう言ってくれればこっちも納得する。
それに、ただ一概に「教えてクン」だと思わないでほしい。こっちだってな
るべく効率的に情報を手に入れたい、だから敢えて
>>2-4 を見る前にここで
質問をした。
違う言い方をすれば、おれは「とほほでも十分な知識を得られるか?」という
ことを聞きたかっただけ。
772 :
Name_Not_Found :02/02/27 13:57 ID:HsbvIwKg
効率的に情報を手にいれたければ聞く前にそのくらい調べる。
773 :
764 :02/02/27 14:04 ID:rHlgSRQ1
そんなもんお前にわかるか。 事情は人によって違うだろうが。 だから、こういう無益なやりとりがスレ荒らしになってんじゃないのかよ!! ストレートに言えやくそ!!!!ぶっ殺すぞ!!!! まじでこのスレ荒らすぞこら!!!!!!!
>ストレートに言え 帰れ
775 :
Name_Not_Found :02/02/27 14:21 ID:HsbvIwKg
春だねぇ。
花粉症の季節です。 荒氏の季節です。 どうでも良いが>775sageろや。
>>773 あ?殺してみろよ?
取りあえず携帯番号を晒せ。
春一番かな♪ ワラタよw
rHlgSRQ1=杉花粉
春一番が吹いているみたいですけど宜しいでしょうか? クラスセレクタと普通のセレクタ(?)を .myclass, h1{background-color: red} などと指定しても良いのでしょうか?
784 :
:02/02/27 18:54 ID:288dZoGj
>783 何の問題もありません.
>>784 すばやいレスありがとうございます。助かりました。
基本的な事がどうも最近あやふやでして…。
駄質問してしまい申し訳ないです。
さわやかなやり取りだね。 清々しいよ。 春はこうありたいよな。 sage
787 :
764 :02/02/27 21:04 ID:3ycIdVxM
自殺する
ガンバ♪
790 :
Name_Not_Found :02/02/28 00:43 ID:KbM2sFsV
CSSでのコメントは /* 〜 */ ですが // 〜 は使えないのですか?
791 :
790 :02/02/28 00:45 ID:KbM2sFsV
あ、 使えたらURL書くときとか困りますね…
そういえば head 要素内で CSS を使う時に、コメントの 終わりを //--> でくくっているのをときどき見かける気が。 たぶん JavaScript との混同なんだろうけど。
拡張子がstyleのstyleファイルって簡単に使えるものでしょうか? win98なのですが。このファイルは英文サイトを日本語化するためのもの らしいのです。
794 :
Name_Not_Found :02/02/28 06:17 ID:0CDEglN0
line-heightを使うのととpaddingを使うのでは どう違うんですか?
>>794 とっても違うんだが・・・
どんなケースで同じように使えるのか今すぐに浮かばない・・(教えろ)
796 :
Name_Not_Found :02/02/28 06:29 ID:0CDEglN0
borderの大きさを変えるのにつかってるんですが 違いがわかりません・・・
>>796 見出しとか短いテキストなのね。2行にすりゃ一目瞭然だけど
あと、テキスト上下の空きは確かにline-heightでも調整できるかも知んない
けど、左右の空きは調整できないだろう?(センタリングしてそうだな)
まあ、普通にpadding使っとけば。
でも、枠の大きさを変えるっていうなら、当該属性にwidthとheightだよな。
あー朝の文章って素敵。。。
798 :
Name_Not_Found :02/02/28 07:01 ID:0CDEglN0
>>797 なんとなく分かりました!ありがとうございます。
799 :
Name_Not_Found :02/02/28 11:13 ID:rJSxu6g3
width: 30%-4px って指定ができたら(・∀・)イイ!と思いませんか?
>>793 ネタですか?そんなモノないっすよ。(^.^)
>>799 paddingでナントカするしかないかな?
ところで
margin
┏━━━━━━━━━━━┓
┃ padding ┃
┃ ┌───────┐ ┃
┃ | | ┃
┃ | 中身 | ┃
┃ | | ┃
┃ └───────┘ ┃←border
┃ ┃
┗━━━━━━━━━━━┛
"width"ってどこからどこまでの幅ですか?
802 :
799 :02/02/28 15:41 ID:rJSxu6g3
>>801 仕様ではpadding辺の幅ですよね。
一部実装はborder辺だったりするけど。
で、mozillaは-moz-box-sizeng:border-boxとか言って
独自拡張でborder辺サイズの設定やってたりするけど、
プロパティ増やすより、式での記述ができたほうが(・∀・)スッキリ!
と思ったんですが。
>仕様ではpadding辺の幅ですよね。 中身の幅だよ。パディングも含まない。
IE5.5以下とIE6互換モードじゃボーダーまでだけどねん。
content + padding + border ね……IE、逝ってよし。
807 :
Name_Not_Found :02/02/28 20:29 ID:ncKnknQ3
初歩的な質問ですみません。 CSSでフォントサイズをpx指定した場合、 ブラウザでのフォントサイズの変更が 不可になると記憶していたのですが MacのIE5.0では、ブラウザのフォントサイズ変更が有効になってしまいます。 こういうものなのでしょうか。 ちなみにNN4.7では、フォントは指定通りで固定になっています。
808 :
Name_Not_Found :02/02/28 20:44 ID:UuKyHggl
>>807 Netscape6もフォントサイズ変更が有効です。解釈の違いによるものだと思います。
私も質問があるのですが、
テーブルでレイアウトをするのは止めてCSSのポジショニングで代替しよう、
とはよく聞くけど、ポジショニングで"フッタ"を実現するにはどうすればいいかよくわかりません。
たとえばマイクロソフトのサイト(
http://www.microsoft.com/ )で言うなら
一番下にある「Contact Us 」とか「©2002 Microsoft〜」と書いてある部分です。
ポジショニングでそれを実現しているサイトなんかあれば参考に教えてください。
809 :
Name_Not_Found :02/02/28 20:51 ID:sKH/ZJgY
>>799 はい。前々からすごーくそう思ってます。
IE だと独自仕様で値の計算が出来るみたいだけど。
あれ正式採用してくれないかなぁ。
810 :
バイク犬 :02/02/28 22:03 ID:Ct4MpaYq
.style01 { font-size: 10pt;} のスタイルを設定してテーブルのTDに適用してるんですが <td class="style01"> Win NN4.6jaでプリントする際に、そのセルが縦一杯に拡がって 行ごとに改ページしてしまうことになってます。 よくある会社推奨ブラウザがNN4.6jaというクライアントなので どうにか回避せねばならぬのですが、お知恵お借りしたいです。 NN4.61enしか手に入らなかったのですが、現象は再現できないのです…
811 :
Name_Not_Found :02/02/28 22:22 ID:onVzBYhZ
>>808 position: fixed;
を使うと可能だけど、IEでは不可能。
>>808 >>811 はて? 別にポジションなんて必要ない。
ただのブロック・ボックスで十分では?
813 :
808 :02/02/28 23:51 ID:UuKyHggl
(´-`).。oO(何がうまくいかないんだろう?)
>814 (´-`).。oO(多分厨なんだよ・・・)
>>814-815 画面下に貼りつけようと思うと大変じゃないかな。
(´-`).。oO(その考えが厨なんだけどな…)
まぁ <body> <p>ほげほげ</p> <div id="footer"> <p>ふがふが</p> </div> </body> みたいにbody要素の子要素が少なければ 小細工しないと画面下にはフッタが来ないだろうな。
でも、MSのサイトってTABLEレイアウトだから
結局そうなるんだけどな(
>>817 )
>>808 フッタになる要素(自分はaddressをそう使ってる)は必ずページの最後に書く、という俺ルールを定めておいて
ポジショニングを使わず通常の整形だけでフッタ的に表示する、というのでは駄目なの?
820 :
Name_Not_Found :02/03/01 03:24 ID:b4Wkj/5w
CSSだけでテーブルのふつうに表枠を表示するのはどうやるのかな? 1ドットだけでマスの線を書くという意味 どうもセルがそれぞれの枠をかいてしまうので となり合うセルとは2重になってしまうよね 確かに上下左右個々に有り無しはわかるが これをすべてのセルに使いわけるわけ? そんなわけないよな 楽のがあるはずだが・・・属性でないと無理? IE専用でいいす
table {border-style:none;} background-color:#ff0000;
>>820 こんなのがあったYO
<TABLE border=5 cellspacing=0 cellpadding=10 style="border-collapse:collapse;">
<TR><TD>お</TD><TD>ま</TD></TR>
<TR><TD>え</TD><TD>も</TD></TR>
<TR><TD>な</TD><TD>ー</TD></TR>
</TABLE>
IE5
デフォルトはseparate
823 :
Name_Not_Found :02/03/01 03:50 ID:o/uor07R
>>822 border-collapse:collapse;
って、手持ちのmozilla0.9.6でダメなのは確認したんだけど、
Operaとかmozillaの0.9.7以降には利く?
824 :
820 :02/03/01 04:57 ID:b4Wkj/5w
わちきは CSSは共通スタイルとしてHTMLとは別にリンクファイルにしてるの クラスで定義して、タグのほうでなるべく属性使わないようにしてるんだけど といいとして、TABLEはいろいろやってみるんす、面どいが(ワラ いかんせん InterDev6.0はサポートが古い 肝心なとこは 手書きだ またQなんだけど スクロールバーの色つけスタイルの定義するのは <HTML>と<BODY>どっちが正式? できれからどっちでもいいか(ワラ
ttp://www.inter-cool.net/~phantasm/wdzone/ 例えばこのサイトの上部(下の部分もかな)で使われている
ナビゲーションバーはどうすれば実装できるのでしょうか?
サイトによっては左に固定されていたりしてフレームのかわりに
使えそうなので是非導入してみたいのです。
ソースをそのままコピーすれば動いたのですが、
自分で必要だと思う所を書いても動きません・・・。
結局どういう記述をすれば良いのか分かりませんでした。
position: absolute; だけだと違うようで・・・。
positon:fixed; じゃないかな。 これ流行りそうだねえ。
828 :
Name_Not_Found :02/03/01 07:04 ID:+CiESJiT
同じページ内でリンクの色を変えることは可能ですか?
>828 クラス振ったりセレクタ変えなさい
831 :
826 :02/03/01 08:06 ID:kSIdLggF
試行錯誤してみたのですが div を二つ重ねると実現されたり
width height top right 等を指定すると動いたり、結局何が重要なのか分かりませんでした。
>>827 , 830
レス有難う御座います。
position: fixed; は IE6 で動かないみたいなのです。
そのように書いて動けば一番スッキリしますね。
z-index は盲点でした。色々試してみたいと思います。
position: fixed; を理解しないブラウザはナビゲーションバー使用不可能にしておいて
とりあえず position: fixed; で放置しておいてブラウザの対応待つとします・・・。
>>823 Mozillaでどーしても再現したいときは
table{
border-spacing:0;
border-left:1px solid;
border-top:1px solid}
td,th{
border-bottom:1px solid;
border-right:1px solid}
とか。
834 :
833 :02/03/01 10:00 ID:cNMKSLGE
836 :
Name_Not_Found :02/03/01 10:17 ID:zjLSxBX9
>>825 IE6の標準モードではHTML要素に指定する。
>>832 俺それで「疑似border-collapse:collapse;」やってる。
837 :
826 :02/03/01 10:22 ID:kSIdLggF
>>833 「擬似フレーム」で既出でしたか……。
overflow には気がつかなかったです。ありがとうございました。
839 :
Name_Not_Found :02/03/01 15:04 ID:kllZ2sWu
MacIEってなんかヘンですね。 自分のサイトをパソコンショップのマックで見たら、 リンク・アンカーを並べた部分にカーソルを乗せると、 テキストがガクガク動き出して、レイアウトのし直しをやり、表示が崩れます。 これを止めさせるにはa:linkやa:hoverにどんなCSS指定をしてやればいいですか。 ソースは下記のごとし。WinIE6、Netscape6.21、Opera6では全然問題ナシ。 .navbar a:link, .navbar a:visited { font-weight:lighter; color:#fff; background:#000; text-decoration:none; border-bottom:1px solid #fff; } .navbar a:hover {color:#fff;/*Opera對策+*/ border:none;/*IEに要る*/ text-decoration:underline overline; font-weight:bold; } <table WIDTH="100%" title="navigation bar" summary="navigation bar"> <tr> <th NOWRAP>サイト・タイトル</th> <td><a href="index.html" title="entrance">表紙</a>/<a href="sitemap.htm" title="sitemap/Table Of Contents">目次</a>/<a href="preamble.htm" title="はじめに">はじめに</a>▼<a href="./directory1/index.html">第一章</a>/<a href="./directory2/index.html">第二章</a>/<a href="./directory3/index.html">第三章</a>/<a href="./data/index.html" title="data room">資料室</a>▼<a href="./notes/index.html" title="Notes">補註</a>▼<a href="reference/bibliography.htm" title="bibliography">参考文献</a>/<a href="reference/search.htm" title="search indexes/サイト内檢索">索引</a>/<a href="history/logbook.htm" title="What's New?/update log">更新履歴</a>/<a href="link1.htm" title="links">リンク集</a>▼<a href="profile.htm" title="profile">編者紹介</a>/<a href="visitors.htm">ゲストブック</a>/<a href="mailto:〜" title="電子メール">お便り</a> </td> </tr> </table>
>>839 まずはborderの太さをそろえる。marginやpaddingでの調整も必要かも。
あとは、Macだとfont-weightが変わると高さが変わるのかも知れない。
>>840 >まずはborderの太さをそろえる。
「そろえる」と申されましてもa:hoverにはborderが無いのですが……。
border:1px solid #000/*background-colorと同色*/;にしろってことですか?
それでもなぜborderの所為でMacIEだけがあんな挙動不審になるのかわかりません。
>marginやpaddingでの調整も必要かも。
インライン要素であるa要素にmarginやpaddingを適用できるものなのですか。
>>841 >「そろえる」と申されましてもa:hoverにはborderが無いのですが……。
つーか、無いから、ポイントした時にレンダリングしなおす羽目になってるんですが。
>border:1px solid #000/*background-colorと同色*/;にしろってことですか?
そんな感じでいいと思う。
>インライン要素であるa要素にmarginやpaddingを適用できるものなのですか。
何の問題もありません。
ただし、Netscape の 4.x はインライン要素に、
margin だのなんだのを指定すると、ブロック要素とみなしてしまって、
妙な表示になるので注意。
すみません、marginやpaddingはインライン要素にも適用可能でしたね。 仕様書見たら、適用できないのはwidthでした。 しかし特に指定してないmarginやpaddingの調整がナゼ必要になるのか、 調整するならどんな指定をすべきか、これもわかりません。 font-weightを変化させることでリンク文字列の長さ(幅)も変るのが原因ですかね? それにしてもWindowsの各ブラウザでは問題ナシなのに、なぜMacIEだけが――と 疑問は残ります。もしかしてMacIEってレンダリング能力低い?
844 :
Name_Not_Found :02/03/01 17:32 ID:zjLSxBX9
>>843 WinIE6だけど、ガクガク動いたよ。
ただ、2行目にまでは波及しなかったけど。
845 :
843 :02/03/01 17:36 ID:h+Fx9o+Q
>>844 MacIEだと、2行が3行になったり、また2行になったりして、
その間、右寄せになったり左寄せになったりもして、
もうホント、動画にして見せたい位にヘンな動きだったんですよ。
>843氏 どうしてもというなら position: relative; top: 0; left: 0; とか記述してみては?
>>846 Windowsユーザーの大半はMacに触れる機会が無いよね。
だから、指摘されたみたいな修正を試みたところで、
それで問題が解消したのか確認できないのが辛い所だね。
> もしかしてMacIEってレンダリング能力低い? お前みたいな酷いソースを書く人間に言われたくない。 CSS に関して MacIE 5.x は相当正確な対応をする(無論バグもあるけど)。 border-bottom-width が 1px から 0px になったら ボックスの高さが変化するんだから、ガクガク動くのは当然。 「2行が3行になったり、また2行になったり」というのも、 a 要素の位置が動的に変化したせいで a:hover になったり a:link になったりを繰り返したからだろ。
>>848 何を感情的になってるのやら。
この
>>839 の問題はWinのIEやN6では生じないんだから、
それに較べたらMacIEに難があるのは明らかでしょ。
むろん「a 要素の位置が動的に変化」するのは指定通りにしても、
MacIEみたいにひどいことにはならない。
>>849 844 :Name_Not_Found :02/03/01 17:32 ID:zjLSxBX9
>>843 WinIE6だけど、ガクガク動いたよ。
852 :
846 :02/03/01 22:11 ID:Rrx+Pwo7
オイラ、文盲だろうか? 煽られてる?
853 :
MacIEスレの1 :02/03/01 22:19 ID:iIYFkeKp
>>839 > MacIEってなんかヘンですね。
そうですねぇ。なんか不可解なレンダリングをする事があります。
全般的には(・∀・)イイ!と思ってるんですが。
さて、壮観な文字流れ込みバグ(?)は、私もよく見かけるものであります。
回避方法は、font-weightをいじらない事くらいでしょうか…。
もうひとつ考えついたんですけど、
HTMLにまで踏み込むのでベストな策ではないと思います。
------
li { display:inline;}
------
<td>
<ul>
<li><a href="index.html" title="entrance">表紙</a> /</li>
<li><a href="sitemap.htm" title="sitemap/Table Of Contents">目次</a> /</li>
(中略)
</ul>
</td>
------
……と思っていたら、
>>846 さんの方法でOKでした。ありがとうございます!
>>852 文盲……って? 何に対して? 意味ワカラン。
855 :
853 :02/03/01 22:23 ID:iIYFkeKp
すんません、訂正です…。
>>846 さんの方法(position: relative;top: 0;left: 0;)では、
状況によっては、流れだしちゃう場合もあるようです。
>>853 「MacIEスレ」ってどこにありますか。参考に覗いてみたいので。
857 :
853 :02/03/01 22:31 ID:iIYFkeKp
858 :
846 :02/03/02 01:32 ID:s1DQfBEg
>854氏 いや、847氏が 「それじゃ、マクには意味ねーよ。 マクIEのバグも覚えとけ。」って事かと深読みしました。 つか、855氏は現にムリだと言ってるし(ウツ
859 :
847 :02/03/02 03:05 ID:eUXOzENW
>>858 そんなつもりはさらさらなかった。私もWinnerだし。
深読みしすぎ。
860 :
846 :02/03/02 03:22 ID:s1DQfBEg
>847氏 ゴメンね。ウイナーってカコイイな。 その呼び方初めて知ったよ。
「W3C CSS 検証サービス」(
http://jigsaw.w3.org/css-validator/ )で
自サイトのスタイルシートをチェックしたら、下記の通り、エラーが警告されました。
「次のプロパティが正しくありません : cursorプロパティ cursor はメディア print, screen には存在しません : help 」
たしかにlink要素で<link 〜 media="screen,print">としてるんですが……。
で、仕様書を見たら、cursorプロパティが対応するメディア・グループはvisualです。
visual(視覚メディア)にはscreen,printどちらも該当するはずです。
なんでエラーになるのか、どこを直せばよいのか、わかりません。
どうかご教示下さい。
結局、MacIEのアンカー文字列流れ込みのバグ除けのために、 @media all { } でfont-weight指定を括っておきました。 またMacに触れる機会があったら直ったかどうか確認します。 いつの日かMacIEのバグが修正されたら@mediaは外します。 以上、ご報告まで。
>>861 私も、「W3C CSS 検証サービス」を試してみましたが、
@media screen {
body {
cursor: default;
}
}
は、警告が一つ出ましたが、
@media print {
body {
cursor: default;
}
}
は、エラーでした。
どうやら、printがダメみたいですね。
理由は分かりませんでした。
865 :
Namae_Not_Found :02/03/02 20:01 ID:sciF+8OO
z-indexは正の整数だけしか使えないのでしょうか? Mozillaで負の値を入れるとその要素が消えてしまいます。
866 :
861 :02/03/02 20:05 ID:xurOUTXL
>>863-864 どうも有り難う。わざわざcursorだけシートを分けるってのも馬鹿馬鹿しいので、
この際、エラーは気にしないことにして目を瞑ります。
868 :
864 :02/03/02 21:05 ID:37epYwKA
>>866 いやいや、cursor 指定のある部分だけを
@media screen {
}
で括れば問題ないので、そうした方が良いと思いますよ。
>>863 さんの記述のようにして下さい。
869 :
Namae_Not_Found :02/03/02 21:05 ID:sciF+8OO
body{position:relative;top:0;left:0;z-index:0;} こうすればいいんですね。ありがとうございました。あとでやってみます。 (でもW3C的にはどっちが正しいの?Operaも負の値OKだったのに。)
870 :
Name_Not_Found :02/03/02 21:09 ID:1+BLFBX4
>>868 ところが
>>861 みたいに<link 〜 media="screen,print">でリンクした外部シート内で
@media screen { }で括ると、MacIEはもちろん、Operaでも
括った部分の指定が無視されるって罠があります。
871 :
Name_Not_Found :02/03/02 21:19 ID:CI3Q3z6d
>>869 IEやOperaだと、デフォルトでbodyのz-indexは"auto"で
Mozillaでは"0"ってわけでしょ
>>870 というか、ぶっちゃけカーソルなんかデフォルトにしておいてくれと。
*[title] {cursor:help;} a[href]:hover {cursor:pointer !important;}
この他はウザイ以外の感想持たないし…。
IE5.01なのですが、body {font-style:normal;}としても、 <address></address>の中は斜体になっています。 address {font-style:normal;} にすると、斜体が解除されるのですが、 なぜbodyに入れると斜体は解除されないのでしょうか?
>>872 dfn {cursor:help;}はどう?
>>873 それはaddressのデフォルト・スタイルがfont-style:italic;だから。
解除したいなら全称セレクタを使って、html * {font-style:normal;}でどう?
>>873 ありがとうございます。html * {font-style:normal;}
でなりました。全称セレクタですか。もう少し調べてみます。
勉強になります。ありがとうございます。
876 :
873 :02/03/02 22:15 ID:lMNM37e4
>>874 > dfn {cursor:help;}はどう?
<dfn>hoge</dfn> に help 出されても困るYO!
<dfn title="..">hoge</dfn> は *[title] に含まれるので。念のため。
あ、でもスクリプトやら :hover やら使えば色々できそうか…。それなら可。
878 :
Name_Not_Found :02/03/03 00:41 ID:VX5EJD4M
http://www.ne.jp/asahi/anarchy/saluton/index.html 上のページなんですが、floatで左右に配置してる部分が、
MacIEだとうまくゆかないんです。下記の部分です。
<h3 class="leftcol">Links</h3>
<div class="rightcol">
<p class="honbun"><a href="./links.htm">リンク</a>はご自由にどうぞ。</p>
</div>
このソースのh3.leftcolのすぐ右に、水平にdiv.rightcolが来るべきなのに、
一行分下がった位置にdiv.rightcolが配置されて段差ができるのです。
問題となるCSS指定を抽出すると下記の通り。
h3.leftcol {float:left; width:33%;}
.rightcol {float:right; width:63%;}
なにがいけないんですかね?
WinIE、N6、Opera6ではこれでちゃんと水平に並んで配置されます。
奇妙なことに、h3.rightcolとdiv.rightcolの組を更に<div> </div>で括ると
意図通りに段差無しに横並びになるらしいのです(手元にMac無いので伝聞)。
MacIEのバグですか? それともどこか改良すべき点がありますか?
879 :
Name_Not_Found :02/03/03 12:30 ID:kOb8+ZVG
>>878 とりあえずh3に margin-top: 0px; を指定すると段差が消えます。
880 :
878 :02/03/03 14:06 ID:W5kqhVAm
>>881 ??? それが何なのですか?
margin:5px 0; と一緒ですよね?
>>882 881じゃないが、数値には必ず単位が必要だよ。
症状と関係あるかどうかは試してないから知らないけど。
>>883 >数値には必ず単位が必要
いえ、しかし「0」は例外的に単位省略可なはず。
0emも0%も0pxも同じことだからです。
>>882 =
>>884 が正しい。値が 0 の時には単位は省略可能。
ただ、単位が省略されると正しく認識できないバグのある UA が
存在するっていう可能性は否定できないが。
>>881 はその意味?
# MacIE 5.x は問題なかったと思うけどね。それについては。
886 :
Name_Not_Found :02/03/03 20:22 ID:inTHDO0K
同一ページで「link,visited,active,hover」 それぞれの色を2種類指定したいんですが、 そんなことって出来ますか?? 例えば、 a:link{color:#FFFFFF;} a:link{color:#000000;} を一つのページで使い分けたいんですが。
何度も出た質問だね。 セレクタを工夫すれば出来る。 クラス振るとかね。
>>886 class 指定する。基礎。例えば
<a href="../hoge.html" class="inner">hoge</a>
<a href="
http://hoge.com " class="outer">hogehoge</a>
で、a.inner:link {..} a.outer:link {...} という感じ。
あるいは、ナビゲーションの部分だけ色を変えたいなら
<ul class="navi">
<li><a href="/">hoge</a></li>
<li><a href="./">hogehoge</a></li>
</ul>
で .navi a:link {..} とするとか。
ただし、一つのサイト内ではできるだけリンクの色遣いは
統一した方が良い。バラバラにしてしまうと、閲覧者を混乱させるだけ。
889 :
886 :02/03/03 20:35 ID:inTHDO0K
クラス振ってみてみたけど駄目だったんで駄目かと思ってました・・・ そっか手段はあるんすね。 調べてもう一度やってみます。
890 :
886 :02/03/03 20:40 ID:inTHDO0K
>>888 一部テーブルのセル背景色を指定したところにリンクがあるので、
そこだけリンク色の視認性が落ちちゃって困っていたんですよ。
どうもありがとうございました。
さっそくやってみます。
以前全称セレクタに付いて教えていただいたのですが、 調べてみると、「* 全称セレクタ すべての要素にマッチする 」 ということなのですが、それなら、body {}は、* {}に置き換えた方がいいのでしょうか?
>>891 本当に全ての要素にマッチさせたいなら換えた方がいいだろね。
>>891 全称セレクタと継承の違いを理解しておきましょう。
>>891 body {background:url(hoge);} と * {background:url(hoge);} を
両方試してみれ。全然違うから。
>>894 > * {background:url(hoge);}
おっかねー(わら
body, h1, h2, h3, p, ul, li, dl, dt, dd,.......address{ font-size: 90%; } と、 * { font-size: 90%; } も全然違うので注意。
初心者向けPC雑誌で 「CSS対応が一番なのはIE。 NN6はIEと同じようには表示できないので対応度は低い。」 とかって書いてない? わかってない奴が記事なんか書いてんじゃねーよ。とか思った。
>897 たぶん、filterとかscroll-barの話 してるんでしょうね(w 詩ねや!>その雑誌編集者
>>899 "width"の話だったらもっと転す。
N6.0 の話だったら頃すの3秒待ってやる。
902 :
:02/03/04 16:54 ID:E6wA1BvG
>897 具体的にどの雑誌?
903 :
Name_Not_Found :02/03/04 17:28 ID:y36ImMTJ
CSS使ってる人は、font-sizeから、画像一つ一つのwidth・heightまで全部 CSSで指定してるのでしょうか? プロが作ったのを見たらそうだったのですが、すごーくめんどくさそうです。 自分のソースは、font-sizeやmarginなんかはCSSですが、画像のwidthなどは HTMLです。こういうのはダメなんでしょうか?
>>903 画像のwidth/heightはHTMLレベルで指定すべきだと思う。
もっともISO-HTMLでは画像にwidth/heightは指定できないが。
>>903 imgのwidth、height属性は特に非推奨とか言うこともなかったはず。
906 :
Name_Not_Found :02/03/04 18:17 ID:sZ1h9aQc
>>903 全ての、UAがCSSに対応しているわけではないので、
width, height属性で指定した方が無難でしょう。
>903-905 Strictスレ住人じゃなけりゃ普通に問題なし
>>907 Strictとか関係無しに
width/height属性を指定してないサイトは
画像読み込み→再レンダリングを繰り返されるから
読みづらくて困る。
909 :
908 :02/03/04 18:41 ID:X/GZaV7J
>>907 流れを見ると、俺のレスはおかしい気がする。
ということで無視してください。
いまだにあるんだよなwidth/height指定してないサイト。とスレ違いな嘆き。
俺はサムネイルとかの全部同じ大きさの画像がたくさんある場合は DIV.img IMG {width:XX; height:XX;} とかやって、そうじゃないときはHTMLで個別にwidth/height指定しているよ。 やり方として正しいかどうかはよく知らんが。
サイズの違う埋め込み画像をベタベタ貼ってる場合だと、 CSSで指定するのは非現実的かね。 もっともCSS使いなら埋め込み画像ベタベタ貼らないだろうけど。 バナーとサムネイルくらい?
>>913 ごめん・・・思いっきりCSS使ってるっていうかStrictスレ住人だけど
画像使いまくってるよ・・・
916 :
903 :02/03/05 01:58 ID:PDt6Hq7I
みなさんどうも。 そうか、別に全部CSSじゃなくてもいいんですね。 さっきいろいろソース見てたら、スタイルシートはリンクだけ指定 というところもけっこうありました。
>>916 paddingを使えるようになると、デザインの幅ひろがるよ。
好きなのだけ取り込むといいっす。
>>916 > リンクだけ指定
ヘッダの中に decoration:none とか a:hover とかでしょ。
あの人たちは多分コピペなんであんまり参考にはなんないけどね。
>>918 同意
スタイルシートだということもわかってないとおもわれ・・・
920 :
初心者スレのほうが良かったかな? :02/03/05 10:26 ID:yBPE8gb8
今まで全くスタイルシートを使わないでサイトを作っていたのですが スタイルシートを使ってサイトを作っているある人のソースを見たら 整然として綺麗なので、いいな〜と思い、 自分もスタイルシートを勉強したくなりました。 ところで、私は、超初心者向けのHTMLレファレンス本を持っているのですが その本には <P STYLE="color:#FF0000">オマエモナー</p> などの基本的なことは 載ってるんですが、その本だけ見ると 「別に『<font color="#FF0000">オマエモナー</FONT>』でも いいじゃん。」 というような気になってしまって勉強の気がそがれます。 スタイルシートを使う時は、<!-- -->をコメントを書く時に使えないので、 コメントを書くときは/*〜〜〜〜/を使う、というのも2chと派生スレを見て 知りました。(私が持ってる本には載ってなかった) 難しくなくて、でも幅広く深く載っているような そういうスタイルシートについての記述が詳しいサイトや本で 何かおすすめな所はありますか?
>>920 >超初心者向けのHTMLレファレンス本
まずはそれを捨てることから始めましょう。
>スタイルシートについての記述が詳しいサイトや本
はっきり言って難しい。
単にCSSを使ったサイトを作りたいのか
W3C信者と揶揄されても問題ない位にCSSを使いたいのかによって薦める本も違ってくる。
まぁ、上記の話は別にしても
詳解HTML&スタイルシート辞典(著:岡蔵龍一)は
リファレンス系では役に立つと思う。
922 :
Name_Not_Found :02/03/05 11:16 ID:PC9D1/l7
925 :
920 :02/03/05 13:26 ID:quDs3VE6
>923 (゚Д゚)!? 921〜922は親切に教えてくれたんだと思ってお礼の書き込みを しようと思ったんだけど、騙してるの??? とりあえず、2chで評判の良い「詳解HTML&スタイルシート辞典(著:岡蔵龍一)」 を「アマゾン」で注文しました。
926 :
921 :02/03/05 13:41 ID:gHeWIJ+h
>>925 騙すというより個人の考え方の違い。
>>920 が進む方向によっては正しくもあり間違いでもあり。
俺はいいと思うよ。
>>925 要は、「正しい書き方」に命を懸けようと思ってるのか、
「見た目が良く、メンテナンスしやすい書き方」をしようと思ってるのか、ってこと。
<font color="#FF0000">がいけない理由としては
前者の場合には
「HTMLの本来の意味から外れているからCSSを使え」
後者の場合には
「後で変更するのが楽だからCSSを使え」となる。
929 :
920 :02/03/05 14:16 ID:quDs3VE6
レスありがとうございました。 私がこれから作ろうとしているサイトは、 箇条書きの文章中心の、あるテーマに関しての説明サイトで 全ページレイアウトや色がそろってる〜みたいにしようと思ってるので どっちの理由(文法命、メンテ命)でも当てはまるから、 本も注文したことあだし、勉強をかねてスタイルシートを使って 作ってみようと思います。 ちなみに今まで作ったことあるサイトは、 自分のヘタレ漫画絵や、自分のヘタレ素材や、駄文を、自分で晒すという 「文法・論理構造」など最初から破綻してる自己満足サイトで、 ネスケで見たら「白地に黒い字だけのサイト」になるのもイヤだし 私が「HTMLのソースが綺麗なのってカッコイイ!」みたいな考えになったのは最近だし 自分の持ってる本にはスタイルシートのことは本全体のページ数の7%しか載ってないし 〜〜という理由で、 スタイルシートに心がひかれるようになったのは本当に最近のことでした。
930 :
Name_Not_Found :02/03/05 20:58 ID:BQlL5IIc
http://monar.dive.to/ ここのサイトでタイトル部に「filter」っていうプロパティ使ってますよね?
買った本にはそういうのなかったので使ってみたいのですが、
このプロパティの値については全く知らないので解説お願いします。
932 :
Name_Not_Found :02/03/05 21:07 ID:BQlL5IIc
filter: progid:DXImageTransform.Microsoft.Alpha(...) とかいう長ったらしい書き方してるとこを見つけたんだけど、 filter: alpha(...) とどう違うの?
935 :
933 :02/03/06 17:05 ID:SwRDY/v8
936 :
920 :02/03/06 23:37 ID:lAK1fvfN
スタイルシートをきちんと勉強しようと思ったら 本当に今持ってる初心者向けのHTMLレファレンス本が全然役にたたん〜〜〜 おしゃれ系(?)のサイトで常識になっている 「リンクの下線を消す技(スタイルシート使用)」ですら 持ってる本には載ってなかった…(゚Д゚) というわけで、921さんの言うとおり、アマゾンで注文中の本が届いたら 超初心者向けHTML本はビッダーズ(ヤフオクから移行中)で売ります。
「厨房サイトで常識」と言ってくれ。
css1完全対応だったとか。
939 :
Name_Not_Found :02/03/07 11:46 ID:6qSo57Mx
CSSを使って<hr />を画像に置換することは可能でしょうか?
>>939 hr関係ねーだろが。細い画像作ってそれはめ込んでろ
>>939 hr {
visibility: hidden;
background-image: url("url");
}
で、どうよ?(未確認)
942 :
Name_Not_Found :02/03/07 13:22 ID:6Aovzz73
| | | | トテテテテ・・・ | ∧∧ 三 | (゚Д゚ ) 二 ≡ | ⊂⊂ ヽ 三 = = | `@@ ー 二 | | サッ |)彡 | | | | |、∧ |Д゚) ジー 999ゲットイイカナ…? ⊂) | / |´
ゲットォォォォ!!  ̄ ̄ ̄ ̄ ̄∨ ̄ ̄ ̄ i ̄ ̄i i1000i i i ii ̄ ̄ ∧∧ ii ∧∧ ⊂(+Д+⊂⌒`つ≡≡≡ ⊂(^Д^⊂⌒`つ≡≡≡≡≡≡ ∧∧ ⊂(+Д+⊂⌒`つ≡≡≡  ̄ ̄ ズザーーーーーッ
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。