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

【過去ログ】
　http://natto.2ch.net/test/read.cgi?bbs=hp&key=992992981

【CSSと特に関係ない初心者質問はこっちで】
・☆　Webサイト 初心者用スレッドver9　☆
　http://natto.2ch.net/test/read.cgi?bbs=hp&key=995867650

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

【仕様書】
・CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
　http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
　http://www.y-adagio.com/public/standards/tr_css2/toc.html

【その他資料など】
・W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・三日坊主＋＋の部屋
　http://east.portland.ne.jp/~sigekazu/

お疲れ様です。新スレおめでとう！

おめでとう。
これからもスタイルシートをよろしく！

祝辞はいいから質問しろｺﾞﾙｧ(ﾟДﾟ)

つーか早速下がってんぞ(´ﾟДﾟ｀)

そんなに質問が欲しいかｺﾙｧ!(ﾟдﾟ)
じゃあ、何で１は>>2へのリンクを貼らなかったんだｺﾙｧ...

お、新スレおめでとう。
とりあえず、質問待ちあげ。

CSSは某音楽グループと関係あるのでしょうか。

>>9
ねーよ

まだ駆け出しだけど、CSSに凝れば凝るほど画像の使い方が
難しくなってくるなぁ。特にbackgroundの。

NN4.xに対応させるのに疲れました。
もうシカトだな、こりゃ。

>>12
対応できるんスか？

CSS3と言えば、opacityがヤパーリ気になります。

>>13
できます，もちろん，ある程度は．

>>14
僕は multicol（だっけ？）が．

>>12
ある程度ってどの程度ですか？配置はテーブルですよね。
僕もやろうと苦労したんですけど徒労でした。

すたいるしーと　って何ですか？

>>17
「スタイルのいい人」のことです。

俺もopacity気になるな。
あとmoz-border-radiusはCSSには正式に取り入れられないんだろうか?

opacity は UA 側での描画作業が大変そうだ。
今でさえ背景固定程度でヒイヒイ言っているくらいなのに。

確かにクライアントのレンダリングプログラムが面倒になりそうだし
重くなりそうだな。

>>20
でもIEはビジュアルフィルタで既に実装できてるから、
IE・Netscapeの2強で使えるならそれで良いんじゃないかな。

そういやそうだな。
IEはフィルタとしてなら4からサポートしてたっけかな?
正式にopacityに対応してくれるのはいつになるんだろう?

CSS、スタイルシート雑談スレッドになってます。

次スレはタイトルから質問を外してみるか。

だね。「質問」は抜いてもいいと思う。

だ、誰かたすけてください・・・！
先日IEを5.0から5.5にバージョンアップした時代遅れの私なのですが
filterが全く機能しなくなってしまって・・・
CSS tipsなどを紹介してくださっているどのサイトにいっても
fliterがかかっているはずのテキストや画像がそのままなんです。
透過のfliterが気にいっていたのですごくショックです（涙
これはIE5.5だからなんでしょうか？
それとも私のパソコンがおかしいのでしょうか？

ちなみにCSSは TABLE.1{ filter:Alpha(opacity=60);} というふうに定義して
tableタグ内でclassを使って呼び出しています。

もし何か情報をお持ちの片がいらっしゃったら
どうか教えてやってください。<(_ _)>

>>27
私も以前5.5なのにフィルターが使えていなかったのですが、
インストールの項目でIEを選んで修復にすると
直りました。
一回試してみて下さい。

>>28さん、レスありがとうございます。
インストールの項目ということは、再インストールということでしょうか？

>>28
コントロールパネル-アプリケーションの追加と削除 の[インストールと削除]

どっちかっちゅうと5.5のせいというよりかは、
＞TABLE.1{ filter:Alpha(opacity=60);}
の.1の方ががあやしいと思うんだが。

セレクタ名はアルファベットで始まり，アルファベット，数字，ハイフンのみで構成される，とある．
http://www.kanzaki.com/docs/html/htminfo17.html#selector-chars

丁寧に教えてくれた方、有難う＆すみません、
「インストールと削除」でIE修復しても直りませんでした。とほ。
こんなことなら5.5にするんじゃなかった・・・鬱
IE5.5をアンインストールして5.0入れるのってやっぱりまずいです？
あ、そろそろスレ違いかな；

>>31-32
えと、紛らわしい書き方しちゃったのですが
自分の作ったHTMLでのフィルターだけでなく
どのサイトにいってもフィルターが機能しないのです。
でも数字から始まったら駄目なんですね。
ひとつ賢くなりました。有難う御座います〜

結局IE5.0に戻しました。
直ったけど原因が未だに不明だわ（涙
みなさま、すみませんでした。ぺこ。

てか、こんな時間になにやってるのだ、わたしは・・・

前スレッドより下がってるのであげ

もう少しあげ

ここで聞いたら良いのかしら。
geckoエンジンって何ですか。

>>37
月光仮面の乗っているバイクのエンジンのことです。

mozila,netscapeの画像レンダリングエンジン
cssには関係ないものと

>>39(38)
そうですか、ありがとう。
なんかの本でN6にはGeckoエンジンが付いてるから
CSSを正常に表示ウンヌンと書いていた様に思ったんですがね。
月光仮面のソレには愛想笑いで対処。

Geckoは画像だけじゃなく全ての表示のレンダリングに関係している。

参考：
http://home.netscape.com/ja/browsers/gecko/summary.html

失礼、表示だけに限らないね

>>41
なるほど、リンク先見て理解しました、ありがと。

読み方「ゲッコ」でいいの？
人前で「ゲッコがさー」とか言っても恥かかないのかな？
つーか、総じてスレ違いによりスマソ。

>>38
ワラ

>>43
「ゲッコー」　※月光からとったという話も

>>43
(　´_ゝ`)ﾉ⌒http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=Gecko&sw=0

>>45
それも「忍者部隊月光」だぞー。古いだろー。

質問です、がいしゅつだったらすいません、よろしくお願いします。
どこのサイトか失念してしまったのですが、クリックして別ページに飛ぶ時
段々滲んで画面が変わる（夢の中のように）のを見たのですがこれってCSSですか？
私はJAVAもJavaScriptもActive Xもオフなのでこれぐらいしか思いつかないです。
ちなみに全ページで起こったのでFlash等でもないと思います。

>>48
このようなものを使っていると思われ。
12の部分を色々変えると変化の仕方が変わる。
<META http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=12)">

>>48様
おお！！これです！！いきなりわかってもらえて感動です。
厨房なんでよくわからないんですがCSSじゃないっぽいですね…HTMLかな？
さっそく使ってみたいと思います。
重くなってウザがられるかな…（涙

>>49様
喜びの余り御礼言い忘れました。
しかもあげてる上に番号も違うし…自分に御礼って…本当にすいません。
この度はありがとうございました。

body内のfontの一括設定
カレットやテキストエリア内のfontの一括設定
の仕方教えて下さい

>>19
CSS3 module: box model で検討はされてるよ。どうなるやら。
http://www.w3.org/TR/2001/WD-css3-box-20010726/#border-radius

>>52
bodyに直接fontを指定すればそのままカスケーディングされて
全ての文字に適用される筈。
bodyの子孫全てにと言う意味で明示したければ
子孫セレクタと全称セレクタを組み合わせて

body, body * { font: *** }

と記述する。

が、「カレットやテキストエリア内」が何なのか良く分からん。
スマソ

>>52
もしかして「カレットやテキストエリア内」て
input, textarea{ font: *** }
つーことだろうか？

>>54
ありがとうございました
>>55
はいそうです

テーブルをセンター寄せして中に文章書いたみたくしたいんですけど、
左右のマージンをオートにするのって、なんかダメだって
言われたんですけど、じゃあどうしたら良いのでしょうか。

うーん、言えば
<TABLE WIDTH="200" ALIGN="CENTER">〜</TABLE>
こんなのがしたいんですけど。

>>57
body {
text-align;center;
}

table {
width:200px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

でどう？

>>58さん
あ、普通にテーブル使ってたのをやめようと思って。
<DIV>でなんとか…。

>>57
DIVの幅を固定する気がないのなら
左右のマージンを同じにすればいいけれど、
そう言う事ではないのね？

>>60
そうですね。幅を固定したいです。
あんま長いと読みにくく感じちゃって。

>>61
tableをdivに置き換えるだけでいいと思うんだが・・・

>>59
う、ごめん。

>>58のtableを div.main(テキトー) に置き換えて、
<div class="main">の中に本文書く方法なら、borderも簡単に使える。
border:ridge 0.2em gray;(かなりテキトー)
を付け加えるとか。

被った上に、書きながら修正しまくったので文脈がヘンだ…。

>>61-64
なんかね、これ有効なのN6、MacIE5.0だけなんだって聞きました。
WinIE5.5、5.0はかろうじて有効、程度だとか。
何がダメなんだろう…。厨房でスミマセン…。

>>65
うそっ？
今やってみた(IE5)けどちゃんとセンタリングされたよ。
body {text-align:center;}
の所、値の区切りでタイプミスやってるのに気が付かなくてビビったけど。

58の言いたいことはわかる。
固定幅のtable(でもdivでもいいからとにかくボックス)を中央に配置したいけど
その中の文章は左寄せにしたいんだろ?
俺が知る限りでは>>58の例のように
margin-left:auto;margin-right:auto;するしかないと思う。
けどIE5.0は対応してないから(´д｀)ｳﾂｰ

autoじゃなくて具体的な値を入れるとか。それなら出来たんじゃない＞IE5.0&5.5

divにtext-align:left;を指定すれば、
中の文章は左寄せになる筈なんだけど、違うかな？

むぅ、ちょっとあぷろだ探すかな。

divの幅を固定って言うのが曲者だよね。
幅を％指定にするなら、自分でmarginを計算して入れればいいんだけど…。

WinIEでブロックレベル要素をセンタリングするには
親要素にtext-align:centerを入れるしかないのが鬱だね。

すぐ消されるかも知れないけど。
http://www02.so-net.ne.jp/~riot/cgi-bin/junk/image/112.htm

ウチの環境（確認したらIE5.01だった鬱）では、
ボックスがセンタリングされてて、中の文章が左寄せになっている。

>>65
人から聞いただけじゃなくて自分で試した？
58のやり方ならWinIE5.xでもセンタリングできるよ。
まぁ、正当なCSSの使い方ではないけど。

本来ならば、58のtableをdivに置き換えた、
div {
width:200px;
text-align:left;
margin-left:auto;
margin-right:auto;
}
で、全て事足りるはずなのだが、WinIEでは、margin-left(or right):auto
に対応していない。
57の言う“左右のマージンをオートにするのって、なんかダメだって”とは、
その事だ。そこで、58は、
body {
text-align:center;
}
と付け加えているわけだ。本来これでdiv要素は、センタリングしないはずだが、
なぜかWinIEでは、センタリングしているので、これでよしとしているのだ。
わかるか？ >>57

多分今やってる問題は全スレ辺りで激しく既出だと思う。

おーのー

○　前
×　全

たぶん解決一直線なのでそろそろ名無しに戻る。
今回は解説が足りなかったと反省。

>>72-73
フォローありがとう。

>>74
「全」で正解なんじゃないかと思う。

なんで幅固定にしたいって思うのかな

昨日はおもっきり寝ました。スミマセン。
結局、親要素に「text-align:center;」を指定するしかないのですね。
これはどのブラウザでも問題なく表示できるんですよね？
ま、これでいってみます。みなさんありがとうございました。

>>72さん
うちのパソ環境が、とても貧弱な為、多数のブラウザを
入れていない為、ぜんぜんチェックできません。
落ちぶれてスマン。って感じなのです…。

>>77さん
>>61参照ってことで…。

>>61
その固定した幅よりウィンドウの幅が狭い場合は悲惨なことになりますが。

外部cssファイルで
td {background-color:blue}
td.b {background-color:red}
と指定して
<td class="b">
としているのに背景色が青になってしまうのですが、なぜでしょうか。

>>80
一言一句間違わずにコピペした？

ウチは幅を５６０ｐｘで固定だけど３００ｐｘでも余裕で読めるのでさしあたり問題無い。

>>82
漏れ>>79じゃないけど、それどのブラウザで、
どんな風に表示されてるのですか？
いや、純粋な興味で。

いや、トップページだけなんだけどね。
横幅２８０ｐｘの画像置いてその右側に目次リストを列挙。
それだけのページ。
ギリギリ大丈夫。

しまった余裕とか言っておきながらいきなりギリギリとか言っちまったよ。
その辺は忘れてくれ。

ちなみにどうしても読みにくいと言われたらその画像に指定してある
float:left → float:right
と変更すれば良いので問題無い、と思う。
こうすればリストが左に来るし。

background-color:transparent
は指定した方がいいの？validんとこで注意されっけど
意味ないような・・

　　＿＿＿＿＿＿
　／　　　　　　＼
｜￣￣￣￣￣￣￣￣￣￣￣￣￣￣｜
｜　　　　　　　　　　　　　　｜
｜　　　　　　　　　　　　　　｜
ーーーーーーーーーーーーーーーー
こんな感じのタブのブロックをdivあたりで作りたいのですが出来ますかね？
ちょっと表現出来なかったのですが出来れば角は丸くしたいっす。よろしくっす。

ずれてるっす…鬱っす…

>>88
CSSを勘違いしてないか？
2,000円も出したんだからもっとよく読めよ。

やっぱ無理っすよね…どうもっす。
初心者本だったのでもしかしたらと思ったんっすけど。

>>91
いや、君の場合はその前にHTMLを学んだほうがいいな。
divあたりで作りたい、と書くあたりに不安な要素が一杯だ。
さすれば自ずとCSSが何のためにあるか、何ができるのかわかるだろう。

>>88
画像使え

>>88
CSS3（と実装ブラウザ）を待て

>>79
確かに。いろいろ実験してたら、
下の行と重なったりでうなるしかない状況。

そうだ！漏れ、テーブルにするよ！

これってCSS自体の質問じゃないかもしれないけど
CSS使用中にさしあたる問題で「フォントを指定したはいいけど相手の環境に
そのフォントがない」場合があるとします。
こんな時は複数指定してできるだけこちらの
意思どうりに表示できるようにするわけだけどその時の...
うまく説明できないなぁ。要は自分はウィンドウズ９８なんだけど
マッキントッシュな人やバージョンの違うウィンドウズを使ってる人にも

途中で送信押しちゃった。
つづき
できるだけ似た表示になるようなフォントの対応表（？）が欲しい。
「ウィンドウズのこのフォントはマックではこのフォントに近いよ」
とか。
ええ、意味わからないですね。ごめんなさい。

ホントはgeneric familyで済むのにね

>>88-94
画像を使えば出来なくもない
ttp://cgi.mrdn.net/~vivo/
TOPの画像がショボイのはご愛嬌。
友達んとこだ。荒らすなよ。

あとhtmlのソースが汚いけど気にしないでね♥

tableのtr、tdのheight、widthの固定の仕方を教えて下さい

>>99-100
「作れ！」スレのちょこらさん？
多少尊敬してます。今後とも頑張ってください。

すみませんが質問です。
文字などの単位設定で、ptなどの絶対単位とpxなどの相対単位とで
どちらがどう不便なのでしょうか？
マージンを指定するときなどはptのほうがいいとか、とりあえずの
セオリー見たいのものがあれば、おしえてください。
また、1画面全体の単位をどれかで固定してやったほうがいいので
しょうか？

>>103
きみ、今、ヤバい質問したぞ。
まず過去ログ読め。

>>101
普通に指定すればいいと思うが？
ブラウザの対応状況は >>2 の関連リンク参照ということで．

　　
　　　position:fixed

とした時にWin IEではabsoluteと同じになるのはわかったんですが、
こいつの位置を
　　
　　　top:1em;
　　　right:1em;

とした際、右によってくれません。

　　　よせたいよ。

emでのフォント指定についてですけど、
これは要素内のfont-sizeを基準に1として考える単位ですが、
この場合のfont-sizeには何を設定したほうが一般的でしょうか？
単純に考えてfont-size:mediumあたりが妥当と思うのですが、
font-size:12pxだと駄目でしょうかね……pxは一応相対ですけど
歓迎されていないようですし。現在のブラウザの状況から
「これが妥当じゃない？」と思われるものを教えて欲しいです。

>>107
＞pxは一応相対ですけど
絶対に「絶対」です。

それと、漏れには質問の意図が不明。
emで指定するはずなのになんでmediumとか出てくるの？
親要素の話してるのか？

>107
解像度に対する相対だからね…。
絶対単位とあまり変わらないような気がするです。よくしらないけど。

妥当なのは何も(body要素に)指定しないか、もしくはmediumあたりでは。

というかbody要素のことだよね？

>>108
（　´_ゝ`）ｶﾌﾞｯﾀﾈ.

>>108

pxは相対
http://www.hajimeteno.ne.jp/stylesheet/css1/value.html
http://www.eris.ais.ne.jp/~haza/cssfont.html
http://www.parkcity.ne.jp/~chaichan/src/css.htm

漏れも感覚的には「絶対」っぽく思うのだが、相対ということらしい。

あ、すみません。親要素＝body要素の話でした。説明不足ですみません。
基本のフォントサイズを決めて、emで強調文字のサイズを決めたいと思って。
やはり指定なしかmediumですかね……。

pxは解像度に対しての相対と聞いていましたから「一応」と言いました。

mediumだとIEでデカくなる……らしい（見聞）
全部emでやるならbodyにいちいち指定しなくてもいいと思う。

>>106
Win IEは対応してないんじゃねえの？

em ってタグ（emphasis）か大きさ単位かどっちの話してるの？

>>115
単位の話だろう。親要素を基準にと言っているんだから。

Mの方だよ

>>106
text-align:rightは指定してる？

>>107
ユーザーが文字サイズを自分の好みで見られるようにしたかったので、
昔は、body は font-size なしで hn などに em で指定していたんですが、
例えば IE5 で「最小」にすると h1 { font-size: 1.2em } が body より
小さくなるなんてことがあったので、今は % 指定に変えました。
h1 { font-size: 120% } とか。

>>119
> 例えば IE5 で「最小」にすると h1 { font-size: 1.2em } が body より
> 小さくなるなんてことがあったので、今は % 指定に変えました。
え、それ本当？本当ならIE逝ってよし！

>>119
あらら……emより%が良いのですか……IEめ。
まぁ、CSSファイル書き直すだけだから良かったです。
皆様ありがとうございました。

しかし、本当ブラウザごとの解釈の違いには悩まされますね。
せめてユーザーで文字サイズ設定できるようこうして苦労してますけど……。

CSS で多段組を実装するにはどうしたら良いのでしょうか？（ガイシュツ？）

質問です。
例えば
<html><head><title>???</title></head><body>
<div style="width: 100px; background-color: blue; filter:Alpha(Opacity=75);">
<p>ｺﾞﾙｧｧｯ！</p>
</div></body></html>
として、ボックス要素を透過させたのですが、
これだと中の文字まで透過しちゃうのですが、
ボックスのみ透過できないもんでしょうか。
よろしくお願いします。

>>123
<p>を不透明にしてみるってのはどう？

>>124
こうですか？なんかダメなんですよう
<html><head><title>???</title></head><body>
<div style="width: 100px; background-color: blue; filter:Alpha(Opacity=70);">
<p style="filter:Alpha(Opacity=100);">ｺﾞﾙｧｧｯ！</p>
</div></body></html>

>>125
そうか、ダメだったか。
適当に言ってみただけだったんだ。
ゴメンネ。

>105
ありがとうございました

話に乗り遅れたけど、IEではフォントサイズにem使ったら駄目よ。
だいたい>>119の言うとおり。%にしませう。
親にmedium使うのも微妙に×。

教えていただきたいのですが、
以下のようにした場合、borderで作った長方形の右と下の辺には影がつきません。
テーブルタグで長方形を作ると全ての辺に影がつくのですが、
borderで長方形を作った場合も全ての辺に影をつけるにはどうしたら良のでしょうか・・・。
<html><head><style type=text/css>
<!--
ul{filter:shadow(color=#aaaaaa,direction=135);
position: absolute;
top: 50px;
left: 50px;
width: 400px;
height:120px;
margin-right: 20pt;
padding: 10pt;
border:4px solid green;
}
-->
</style></head><body>
<ul>
<li>テスト</li>
<li>夏ですねぇ</li>
<li>暑い</li>
<li>暑い</li>
</ul>
</body></html>

文字の%指定で便乗質問。
HTMLタグにおけるFONT SIZEの1〜7の大きさを実現するには、
FONT SIZE=3を100%として、残りは何%で指定してやればいいですか？

あと、Mac版NN4.7でfont-size:100%とするとデフォルトサイズより
一回り大きくなってしまうのは仕様ですか？

>>118
それも試したんですがダメでした…。
うーん。

>>129

solidじゃ陰にはならんと思う。

フィルタは重いからやめてをけ

あのーーー……。
>>73を試してみたのですけど、
DIVのボックスがセンタリングされたのはいいのですが、
DIV内のテキストまでセンタリングされてしまいます（滅
これはWinIE5.0は駄目ということですか？

>>106
どうやらWin IEは

　　　position:fixed;

を relative と解釈してしまうようですね。
>>114さんの仰った通りでした。

うまい回避策はないでしょうか。macの@media screenのような。
JavaScriptで別に読ませる…のは、
　　　いやっ。

両すれ挙げ

>>135
>>2 の「三日坊主＋＋」さんのところにブラウザ振り分け法がある．
僕は前にここで教えていただいた方法（文字エスケープ）で IE を外す．

>>137
できました！感謝。

軌跡残していきます。同じ悩みがあった方、参考にされて下さい。

最初のシートの不具合部分を修正し（この場合fixedをabsoluteに置換）
行頭に

　　　@import url("***.css") all;

とし、読み込ませる***.cssに

　　　position:fixed !important;

を入れた。さらにMacIE対策として
@media screenで囲った。
（MacIEはfixed対応してるがリンクテキストがクリックできないバグがある）
　　　

web板ではこのスレッドでしかまともな事話してないよね。

display : none;
をやるとその要素が無くなったようになるんですが、
一体なんのために使うんですか？

>>140
正統派な使い方はhr要素を消してCSS無効状態ブラウザ用の見栄えを考えたり、
邪道方法では無料ウェブスペースの自動広告を隠したり。

ジャバスクリプトと組み合わせて、クリックしたら表示/非表示切り替えスクリプトをつくるとか。

>>132,133
返事ありがとう。
少し考えてみます。

clipってN6だけですよね？

>>139
Javascriptの方も普通だよ。
あと、スタイルを作れ！も硬派。

border-collapse
って使う事ありますか？

総合して識者の方々に聞きたいんですけど、
結局、一般個人サイトで使うCSSで
使用に耐えるコマンド(？)ってどれとどれですか。
10個もないような気がしますが。

>>146
イケてるスレででも勉強してから聞けよ。
10どころか100ぐらいはあるんじゃないの？
というか、10っていうのはｷﾐが使いこなせる数じゃ（藁

ゴメソ・・・100は言いすぎか・・・

>>147
横レススマソ。
イケてるスレって見れないブラウザに対する配慮とか
関係なしでやってるっぽいから、>>146の言うように
一般的ではないってことでは？

ためしに数えてみた。うちでは20個。


color
text-decoration
background-color
font-size
font-weight
display
margin
padding
border-style
border-color
border-width
font-style
width
text-indent
line-height
list-style-image
position
top
left
overflow

>>149

いや、彼らほど「見れる」にこだわってる人種はないぞ。
ただ「同じように見れる」にこだわりはないだけで。

ためしにテキストブラウザとか、CSSをオフにしたNetscapeで見て見よ。

>>151
いや，それはベースとなる HTML のマークアップの問題であって
「一般的に使えるCSS」とは全然違う問題のような気が

>>146
いくらなんでも 10 ってことはないぞ
border や font みたいなのは数え方にもよると思うが

そんなの数える事に意味あるのか？
厨房に振り回されるのはよそう。

potisionのrelativeとabsoluteの違いがいまいちよく
わかりません。

potisionのrelativeとabsoluteの違い

relative---通常の状態で配置される位置からの相対位置
absolute---親ボックスを基準とした位置

「一般的」の意味にもよるな。
NN4あたりになるとそれこそ10程度かもしれん。
そんなあなたはこちらへ↓
http://natto.2ch.net/test/read.cgi?bbs=hp&key=994829516
User Agent - NN4への対応

155 の例を考えていたらわけがわからなくなってしまったので質問（僕は 155 じゃないけど）

div{width: 90%; border: dashed 1px #06c; margin: 0; padding: 0;}
p{width: 90%; border: solid 1px #0c6; margin: .5em 0; padding: 0;}

<body>
<div>
<p>基準：<span style="position: absolute; right: 2em;">あああ</span></p>
</div>
</body>

こう書いたら「あああ」は <p> の右端から 2 em 内側に配置されるのだと思ったのだけどそうじゃない
では <div> の右端からかと思ったらそういうわけでもない
てことは親 BOX って body のこと？それはなんか違うような
正しい解釈はどうなのでしょうか？
表示確認は Win の IE5.5 と Moz 0.9.2
あと，IE だと同じ行に表示されて Moz だと「あああ」が 1 行下がるのは，どっちが正しいの？

>>130
CSSの<absolute-size>は一段階につき20%ずつ大きく／小さくするのが推奨されているけど……。
<FONT size=*>はどうなんだろ。150%ぐらい（適当）？

>>157
「親ボックス」てのはポジショニングされたボックスの事。
親がposition:staticの時はポジショニングされた要素が
出るまで先祖を辿る。
HTMLの場合、最後はbodyだと思っていい。

>>159
おおー！なるほど
「ポジショニングされたボックス」であることがわかってなかった
ためしに 157 で p{position: relative; left: 0;} とダミーの指定を入れたら
「あああ」が p の右端から 2em になった
あと，Moz だと 1 行下になる件は span に top: 0; を入れれば解消した

ありがとうございました

素晴らしいスレ。あげます。

>>140
例えば、CSSのborderで指定した時には出てくる線も、
当たり前だが、CSS切ると見えないだろ。

CSS切ってある奴らの為に、
一応<hr />辺りを{display:none}で仕込んどく訳だ。
そうすると、両方に対応出来ると。

>>140
“CSS有効にすると、見映えが変わるよ”という文を、dispaly: none にしています。

>>134
>>73に　text-align: left;　ってあるでしょ？
抜けてない？　継承されないってことはないと思うけど。

リンクにカーソル合わした時に
カーソルを指定の画像にする事って出来ないのでしょうか？

これで試しましたが駄目でした。
<a href="" style="cursor:url(image1.gif),auto;">リンク</a>

>>165
まだ対応ブラウザがないんじゃないかな。

ポジショニングの質問ですが、位置でbottomを指定した場合、
Mozi、Win IEでは表示されている画面枠の下からの位置になるんですが
何故かマクIEだけ一番したからの位置になるです。

これは仕様的にマックがマチガイ？

>>165-166
というか、それは:hoverを付けないと駄目なのでわ？

>>165
IE6bはwinのカーソルファイルを指定出来たはず。
画像じゃなくて。
IE5.5でも使えたっけ？（曖昧）

>>166
MozとWinIEのポジショニング、特にbottomは弱い。
position:fixedなら画面下枠から、
position:absoluteならページの一番下からのポジショニングになる筈。

普及度合いから考えて、現状bottomからのポジショニングは使えない。

>>167
:hoverは関係ない。画像じゃなくてpointerとかで試してみ

input { background:tranparent ｝

で入力フォーム部分を背景に透過させてるのですが、
MacIEの人に緑になってるって言われました。
MacIEでもうまくいく方法ってありませんか？

すいません、sageちゃったのでage。

>>170
ない。
backgroundをtransparentではなくてbodyと同じ指定をすれば
なんとなくよくなるかも。

>>172さん
ありがとうございました。
う〜ん残念。
じゃ、WinとMacでスタイルシートを割り振ってMacは
Bodyと同色にしてみます。

<td nowrap>
をCSSでやるにはどうすればいいでしょうか？tdに限らずdivとかでも。

>>174
white-space: nowrap;

ありがとうございます。なんかWinIEは非対応みたいですね。

>>176
WinIE4は未対応だったかな？ IE5.5は対応してるよ。IE5は知らない。

>>176-177
少なくともIE5.0は非対応
5.5は対応してたっけ?
Mozillaは対応してる。

IE5.5は○だよ

fontについて質問なんですが、htmlで
<p><font color="〜">あいうえおかきくけこ<font color="〜">さしすせそ</font>
たちつてと</font></p>
ってあった場合、CSS的にはPタグにfont指定して、『さしすせそ』のところは
classかidで指定するんですか？
こんな感じに。
p{font color:black}
font.a{color:white}
どうでしょう？

>>180
<p><span class="a"> あいうえおかきくけこ </span><span class="b"> さしすせそ </span> たちつてと </p>

p{color:black}
span.a{color:white}

言ってる事がはっきりしないが、多分こうだろう。
CSSの属性名は半角スペースは含まないし、
font-colorなんて属性も存在しない。
前景色に関係しているのはcolor。

て言うか、一体どこのチュートリアルを読んだの？

>>180
そもそもHTML自体間違ってるよ。font入れ子にできないっしょ。

>>182
できるよ。

<!ELEMENT FONT - - (%inline;)* -- local change to font -->

>>181-182
何か文章おかしいですね。スマソ。
bodyでcolor:silverって指定してるんですけど、
数カ所だけフォントの色を変えたいんですよ。で、今は
あひゃひゃ<font class="a">うひゃひゃ</font>ぶひゃひゃ・・・・
ってやってるんです。

そうか、spanタグを使えばいいんですね。

>>184
色を変える理由によっては当然 EM や STRONG や DFN やなんやかんやが望ましい。
そして font-style: normal; や font-weight: normal; だ。
色に依存する場合は代替スタイルシートで白黒環境用も作ってあげるとベスト。

XMLなんかどぅぅぅぅぅだろ？

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="2.jpg" width="80" height="60"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="3.jpg" width="80" height="60"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="4.jpg" width="80" height="60"></td>
</tr>
<tr>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
</tr>
<tr>
<td align="center"><img src="5.jpg" width="80" height="60"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="1.jpg" width="320" height="240"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="6.jpg" width="80" height="60"></td>
</tr>
<tr>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
<td bgcolor="#ffffff"></td>
</tr>
<tr>
<td align="center"><img src="7.jpg" width="80" height="60"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="8.jpg" width="80" height="60"></td>
<td bgcolor="#ffffff"></td>
<td align="center"><img src="9.jpg" width="80" height="60"></td>
</tr>
</table>
</center>

ってなhtmlがあるんですけど、これもテーブル使っちゃダメなんですか？
div使ってみたんですけど上手くいかないんですよね。
何かイイ手は無いでしょうか？

外部CSSファイル読み込みでページ作っていたのだが……。
背景画像などの指定をCSSファイルでやってしまうとMacIEで
別ディレクトリのHTMLに反映されない事態になってしまった。
おかげで背景が真っ白いページが多数発生……。
画像ディレクトリ指定ってCSSファイルでやらんほうがいいの？

>>187
divというかp使え。
で、width,height,margin,background-colorあたりを
ちゃんと指定すればできる。
#いちいち計算する義理は漏れにはない。

>>188
＞画像ディレクトリ指定ってCSSファイルでやらんほうがいいの？
MacIEを使わない方がいいの。
それか、使わないようにお願いするのがいいの。
#それが嫌なのならCSSを「諦める」しかないの。

>>189
うーん、IEのほうががCSSの対応率がいいのだが、
この際MacIEには諦めてもらうしか……。
というかマカーの大半がNNだからあまり支障ないかな。
なにはともあれありがとう。Winでは問題ないよね？　一応。

>>183
あちゃー。適当なこと言ってすまへん

>>190
漏れもちょうど同じ事やってるけど、大丈夫。in Win

>>180
p font font{color:white}

>>188
一体どう言うディレクトリ？
ひょっとして、NN4を基準にして言ってる？

> 画像ディレクトリ指定ってCSSファイルでやらんほうがいいの？

そんなこたぁないと思う。マカで CSS 使いのサイト見ても、
バリバリ背景画像使ってるし。
なんか別の原因がありそう。
@charset, @import, @media あたりはどう？

うわー皆様すみません。
原因究明してたら以下の事実が明らかになりました。

「外部CSS定義ファイルで指定した場合、
IEでは外部CSS定義ファイルからの相対位置と解釈するのに対し、
NNでは外部CSS定義ファイルへリンクされているドキュメントからの
相対位置と解釈します。」

外部ファイルでurl("./img/00.gif")って指定してたのですが、
url("http://www.00.com/00.gif")などと指定したほうがいいらしいです。
お手数をおかけしてしまい申し訳なかったです……。
モジュラーケーブルで逝ってきます。

>>196
ありがちだよねー

<a href="hoge.html><img src="ahya.gif"></a>
と画像にリンクを貼ったんですが、これを
a:link,a:visited,a:active,a:hover{}
で色を変えることってできないんですか？
誰か教えて下さい。お願い！！

>>198
少なくともJavaScriptでなら出来ます
CSSはわからないので、他の優しい人が答えてください

あ、いやそういうのじゃなくて、画像の周りに出る色（ボーダー？）
を変えたいんです。
試しに上のCSSで{boder:black}とかやってみたんですけど青のままなんですよねぇ。

>>200
出きるはずだぞ。
自分の書いたソースコピしてみろ。

>>200
border-colorプロパティをいじれ

>>198
aのborderを直接いじってないか？
いじるのはimgだぞ。
a:link img { border: black }
だ。

>>201-203
よく見ろ。>>200が書いてるのは {boder:black}だ。
これで変わるわけがない。ﾎﾞﾀﾞｰ

B!
O!
R!
D!
E!
R!

BORDER!!

>>201-203
203さんのでできました！ありがとうございます。
で、また質問ですまんのですが、hrをいじる場合、boderでやったほうが
いいんですかね？普通にwidth,height,colorではまずいですか？

>>206
それはブラウザによっていろいろだ。
widthやheightは普通に使えるはずだが、
ただの空要素としてborderだけで表示している場合（Mozilla）や
一つの置換要素と捉えて凹んだ表示を独自に行うものもある。
colorでnoshadeな状態を再現出来る事もある。

まだboderになってるよ・・・

ｶﾞﾝｺﾓﾉ200ﾜﾗﾀ

質問いいですか？
＜イメージ＞文章＜イメージ＞
みたいな感じにしたいんですけど（テーブルだとこんな感じ）。
<table>
<tr>
<td><img></td><td>文章</td><td><img></td>
</tr>
</table>
何かいい方法ないっすか？pとかdivとかやったんですけど、上手くいきませぬ。

>>210
<p><img style="float:left;"><img style="float:right;">文章</p>

>>211
サンクス！できましたー！！

ネスケの4.7(mac)ってCSS綺麗にでないんですか？
a:link { font-family: "Osaka", "Osaka−等幅"; font-size: xx-small; font-style: normal; line-height: 140%; color: #0066cc; text-decoration: none}
て感じなんですけど。

NN4.Xで表示確認する必要は全くありません。

>>213
>>214
というか、media="all" にするとか、@importするとかして
NN4.Xには積極的にスタイルシートを適用させないのが
親切かもしれません。

>>213
Mac版は手元にないので知らんけど、
Win版のNN4.xだと日本語が混じると×だな。

>>213
ぶっちゃけた話、NNでfont-familyやline-height指定するとアレなのです。
本気で対応させたいのなら使わないか頭を使うかしましょう。

テーブルレイアウトはダメと聞きますが、height指定して
ちゃんと見れるのってどんなタグがありますか？
pとかdivとかでできるならプロパティ教えて下さい。

>>218
ブロック要素全部。***はクラス、===は数値。
div.***{height:===px;}
p.***{height:===px;}

>>213
NN4.xでは分けて記述した方がええよ。

a:link { font-family: "Osaka", "Osaka−等幅"; line-height: 140%;}
a:link { font-size: xx-small; font-style: normal; color: #0066cc; text-decoration: none; }

こうすれば、font-familyとline-height以外は適用されるかな・・？
（面倒なので確認はしてないよ。）

>>220
なぜこれで NN4 が除外されるのだ？
多分上の行を @media なり @import なりで分けろってことだとは思うが
あと細かいけど generic font family の指定があったほうが

>>221
除外ではなくて、NN4.xにも適用させる例なんじゃない？
よく知らないけど。

generic font family、そんなんあったんだ。
詳細き?hぉ。

>>222
ん？いや，適用させたらバグる（可能性が高い）よね，というのが >>215-217 だと思っているのだが

>>223
http://www.fan.gr.jp/%7ekaz/rec-css2/fonts.html#generic-font-families
要は serif とか sans-serif とかいうやつ

>>221
220じゃないけど、
@media なり @import なりで分ける必要は無いよ。
漏れは
.hoge{font-size:100%;color:#00B898;} .hoge{font-family:'hogefont';}
こんな感じにして、（NN4では）font-size、colorは適用されて、font-familyは適用されないって感じになってるから。
IEではしっかりと両方適用してくれる。

>>224
あ、なんだ、アレか。generic font familyてゆーんだ。
そういうセレクタがあったのかと思った。ﾋﾞｸｰﾘ。ありがt。

>>219
ですよねぇ？
p.top{
border-bottom : medium solid Gray;
border-right : medium solid Gray;
margin-left : 30%;
width : 100%;
height : 100px;
}
ってやったんですけど、全然反映されず・・・。
ん〜何故だ・・・・。

>>225
NN4.xは同じセレクタがあると、最初のものしか有効ではないってこと？

>>227
コピペで試したらちゃんとなったよ＠IE5.5
ま、まさかネ○ケ使いか？

h1,h2{border-style: solid;border-width: 2px}
h1{border-color: red}
h2{border-color: blue}

っていう使い方は正しいですか？

>>228
ちょっと気になったんで色々やってみた。
まず、前後逆にしても同じように表示してくれた。
次に
.hoge{font-size:100%;} .hoge{color:#00B898;font-family:'hogefont';}
.hoge{font-size:100%;} .hoge{font-family:'hogefont';color:#00B898;}
colorの位置を変えたら、font-sizeだけ適応された。
そんで
.hoge{font-size:100%;} .hoge{color:#00B898;}
こうしてみたら、両方適応された。
使えないスタイルがあったら、{}内は全部無視されるみたい。

>>227, >>229
NN6 もしくは Moz なら
height: auto; min-height: 100px; とかやると上手くいく，かも
＃以前こちらで教えていただいた方法

>>230
問題ないよ，のちのち管理がややこしくなる可能性はあるけど

>>228
>>231に付け足し。
.hoge{font-family:'hogefont';} .hoge{font-size:100%;color:#00B898;}
これでも同じ結果が得られる。

>>231
なるほど，細かい追試ありがとう

>>220
ロクに確かめもせずに疑うようなことを書いて申し訳ない

うそ〜ん・・・。N6でもないしmozillaでもないし。
IE5.5なのに・・・・。
pの変わりにtableでやると何故かちゃんとなる。鬱。
ちなみにNN4.xは消去済み（ｗ

>>235
p.topってbody要素直下にあるんかな？
divに入っていたりするなら、
div.*** p.top {---}
と細かくやってみるとか。もしくは、cssのどっかで他にも.topとかを指定しているとか。
何とも曖昧でスマソ

>>235
とりあえずfont-sizeとかつけたらちゃんとなるの？

>>236-237
いや、body直下なのよ。クラスも.topは無いし・・・。
font-sizeつけても何も変わらず。なーぜーだー！！
カナーリ鬱。

>>238
<html><head><style type="text/css"><!--
p.top{
border-bottom : medium solid Gray;
border-right : medium solid Gray;
margin-left : 30%;
width : 100%;
height : 100px;
}--></style></head><body>
<p class="top">Hoge hoge hoge.</p>
</body></html>
コピペしてみそ。

>>239
あれー？ちゃんとなってる・・・。
外部呼出しとか関係無いよね？

とかなんとか言って自分で突っ込みいれときます。
href違いでした。スマソ、逝きます・・・・。

リンクのかかった画像の枠線を消したくて

a img{border-style:none;}

とか

a img{border-width:0;}

とかやってます。
でもNN4では消えてくれません。
NN4で枠線を消す方法はありますか？

<img src="***.gif" border="0">

素直にこれがいいんじゃない？
全然CSS的解決になってないけど、、、

俺はHTML4.01StrictDTDでやるんだｺﾞﾙｧっていうなら

a img { border:0px ; color:#ffffff }
こんな感じでごまかすとか、、、
この場合のcolorは背景色ね。

スマートなやりかたあったっけ？

NN4 はアンカー要素となるイメージの border を消せません。
どうしてもってんなら、border 属性使うしかない、はず。

くりっかぶるまっぷ。

NN4で
a img{border:none;}
ってやったらリンク画像をクリックしても飛べなくなったよ。
カスだね。

やっぱりダメなんですね。
あきらめて border="0" でいきます。
ありがとうございました。

>>242=>>247
>>243のレスは見た？
a img { border:0px ; color:背景色; }
これでいいんだよ。

教えてください。

FRAMEなしのページで
スクロールバーをださない様にするにはどうすればよいでしょうか。
overflowでどうにかできるんでしょうか？

くだらない質問かもしれないけど、どなたかお願いします。

理論的には
body{overflow:hidden;}
と思われるが実際試したことないのでうまくいくかどうかは知らん

みなさんありがとう。
<style type="text/css">
<!--
td{ font-size: 10pt; font-style: normal;}
td{ color: #000000;}
td{ font-family: "ＭＳ Ｐゴシック", "Osaka", "Osaka−等幅", line-height: 140%; text-decoration: none}
-->
</style>
こいつで解決しました。
ところでこれにa要素を加えたいのですが、
a{ font-size: 10pt; font-style: normal;}
a{ color: #000000;}
a{ font-family: "ＭＳ Ｐゴシック", "Osaka", "Osaka−等幅", line-height: 140%; text-decoration: none}
て具合に合計六行にして書かないと駄目ですか？

<!--
a:link{ font-size: 10pt; font-style: normal;}
a:link{ color: #000000;}
a:hover{ font-size: 10pt; font-style: normal;}
a:hover{ color: #ff0000;}
a:link{ font-family: "ＭＳ Ｐゴシック", "Osaka", "Osaka−等幅", line-height: 140%; text-decoration: none}
a:hover{ font-family: "ＭＳ Ｐゴシック", "Osaka", "Osaka−等幅", line-height: 140%; text-decoration: none}
-->
</style>
てなりますね、ネスケにあわせようとすると。このダブリって省略できますか？
それでもネスケだと line-height: 140%;は反映されないですね。

あ、hoverもtext-decoration: noneも駄目ですね。
なんとかしてくれ、ネスケ〜。

テーブルを絶対指定でポジショニングしたら、
テーブル外の文字がテーブルの下に隠れてしまうみたいなんです。
なにかいい解決策ありませんか？

↓現状↓
<TABLE style="position : absolute;top : 9px;left : 9px;float : none;" cellspacing="0" cellpadding="0">
<TBODY>
<TR>

（中略）

</TBODY>
</TABLE>
<P>
ここら辺に書いた字がテーブルに隠れてしまいます。

>>251-252
colorを分ける必要があるのか。
text-decoration: noneも
{ font-size: 10pt; font-style: normal;}この中に入れて良いと思ふ。

>>254
<p>も絶対指定すれば？
tbodyってことはビルダー使いか？

>>256
ありがとうございます、早速試してみます。
そして、お察しのとおりビルダー使いです。
プレビューや背景テストモードが気に入って使ってるんです。
どうか偏見の目で見ないようご協力お願いします。

確かに偏見の目で見たよｗ

絶対指定ってのはソース内での順番に関係なく、何が何でも上から○px
に表示するってものだから、position非指定のものと共存させるのは
難しいと思うよ。

.position1{
position : absolute;
left : 20%;
vertical-align : middle;
}
.position2{
position : absolute;
right : 20%;
vertical-align : middle;
}

<p><img class="positon1"><img><img class=position"2"></p>

これで真ん中のimgをちょっと上にずらしたいんですが、margin-bottomを
設定すると左右のimgまで上に上がってしまいます。どうすれば？

>>259
なぜそこまでしておいて真ん中にclassを指定しないのか・・・
真ん中のimg要素にclass="position3"を設定して、
.position3{
position : absolute;
top : 適当;
}
あと、position"2"は間違いだよ・・・な？
こういうときはコピペするようにしたほうがいい。

＃左右のimgまでって・・・もしかして
＃img{margin-bottom:適当}ってやったわけじゃないよな？

>>260
あ、position"2"は間違いね（ｗスマソ。
topで指定するとその下にくる<hr>と被っちゃうんだよね。

<p>
<img src="a.jpg" class="position1">
<img src="b.jpg">
<img src="c.jpg" class="position2">
</p>
<hr>
htmlはこんな感じ。もっと長いけど端折りました。
この場合hrにも・・っていうかその下にくるimgとかにも%指定しなきゃ
いけないですよね？ん？absoluteじゃなくてrerativeにすりゃいいのか？
ヤヴァー、頭がごちゃごちゃしてきた。。。

何度もスマソ。解決しました。

ところでまた質問なんですが、<img>のwidth,height,boderってCSSで指定した方が
良いの？htmlの方でやったらダメ？
img{height: 100px; width: 100px; boder: 0}みたいに。

>>259
UAのこと考えないならいいもしれん。

>>262
<img>のwidth,heightはhtmlの方で、boderはCSSで指定した方がいいような
気がする。

widthとheightはStrictでboderはTransitionalじゃなかったか？

boderじゃなくてborderだよ・・・

すまん、素で間違えた・・。

StrictとTransitionalの違いがイマイチわからんのだが、
その辺について記述してあるサイトを紹介してれー。
ここを読めっ！みたいな。

>>266
仕様書。
http://www.w3.org/TR/html4/index/elements.html
http://www.w3.org/TR/html4/index/attributes.html
DTDにLがあるのがTransitional、空ならStrict。

position:absolute;
で絶対位置指定したのですが,
IE5.5 SP2は親要素を基準とした絶対位置,
N6.1はBODY要素(？)を基準とした絶対位置に配置します。
どっちが仕様なのでしょうか？

後,N6.1で
BODY{overflow:hidden;}
が有効になりませんが,バグですか？

>>268
親セレクタに、position:absoluteまたはposition:relativeが指定してあればIEのその挙動が正しい。
position:static（デフォルト）なら、Mozillaの挙動が正しい。

>BODY{overflow:hidden;} が有効になりませんが,バグですか？

バグかどうかは知らないが、やめてくれと言いたい。

>>266
>>267の仕様書には日本語訳もあるから検索して探してみるよろし。

>>270
そこは訳さなくても分かると思うが……。
変に訳されると返って分かりにくくなるぞ。

>>267
サンクス！
>>270
日本語訳はいっぱいあるんだね。
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
とりあえずここを読んでみようと思う。

下らない質問かもしれないんですが、基本的に被るスタイルは別のファイルに
書いて、@importで呼び出す方が利口なやり方ですか？

基本的に被るスタイルのいみわからん

すみません。

スタイルシートにhrに
1px実線影無し
を指定するにはどうすればいいのですか。

>>274
無理。
その前後に入るブロック要素またはインライン要素をブロック化したものの
border-topもしくはborder-bottomにsolid 1pxを指定するしかないだろうな。

どうしてもhrでやるのなら物理的マークアップするしかないだろう。

>>274
hr {
color: #******;
background-color: #******;
border: 0 none;
height: 1px;
}
colorはMacIE向け、backgrond-colorはMozilla向け。
WinIEでの追試求む。

>>276
WindowsIE5.5,Mozilla,NN6.1,Hotjavaでできました。
ありがとうございます。

hr{border: 1px solid #???; height: 0;} でも．

訂正
最後のはできませんでした。誤

>>278
height:0が効かないブラウザもある。

>>280
例えば？そしてそのブラウザは height: 1px; なら効くの？
自分の手元にないので確認が取れないのだが，あれこれ直す必要が
あるかもしれないのでぜひ教えてください．
手元での確認では，WinIE5.5 と WinMoz0.9.2 はどっちも大丈夫．
WinNN4.78 はどっちもダメでした．

>>281
手元のMacIEでは効かないみたい。
>>278の例にあるやつだと、height:0が効いても
border-topだけに限る必要とかありそうだね。

>>273
うひ。日本語おかしかったか。
例えば、全ページの背景が黒。フォントが白とかだった場合、
全てのcssファイルにそれを記述しないで、別ファイルに記述したものを
@importで呼び出すって事。

>>282
なるほど．MacIE はダメなのか．ありがとう．
border は，少なくとも Win では一括指定で大丈夫だった．top だけとかの方が安全だろうけど．

HRの上か下だけボダーを指定すればいいんじゃネーノ？
俺それだけど。

>>285
だめっしょ．hr そのものが表示されて，さらに border も表示されるはず
例えば hr {border-top: 1px solid #???;} ってやったら 2 本見えるよ（WinIE5.5）

>>283
共通するスタイルを抜き出して@importするってことだね。
背景色とか変えたくなったときに、@importしたcssだけを書き換えれば
すむから管理が楽だよ。

ただ、NN4.xxとかは@importしたcssは適用されない（はず）から注意。

>>287
サソキュウ。
NN4.x対策はしてない（ｻﾊﾟｰﾘ､ｷﾊﾟｰﾘ排除）から気にしなーい（ｗ
おかげでNN4.xユーザーは減ったけど。

<DIV STYLE="text-align:justify;text-justify:distribute-all-lines;">こんにちは、ヨッシーです！</DIV>

均等割付にならないんです。

>>289
なるけど。ブラウザは何？

text-justify: inter-ideograph
でどう?

>>290
IE5.5です

>>292
こっちもIE5.5。ほかの部分が悪いような気がする

>>286
border-box辺りも関わってくるから、
1px影無しならborderは使わない方が安全かな？

勘違いしてた。
height: 1px で、ボダートップ以外に none を指定してあった。
一応IEとN6で影なし1pxになってる。

テーブルって、cellpaddingを指定しないとcellpadding=2
ってことになりますよね？

スタイルシートでテーブルをcellpadding=0 cellspacing=0　に
指定したのと同様にするにはどうするのですか？（paddingとかだと
どうしてもセル間の隙間が空いてしまう。。）
IE55です。

>>296
無理かも。

TABLEのcellpadding、cellspacing、width、borderはStrictだから
HTMLのほうで　<table cellpadding="0" cellspacing="0">
って指定しちゃっていいのでわ？

IE55いいなぁ・・・

<table width="100%">
<tr><td align=left>左寄せ</td><td align=right>右寄せ</td></tr>
</table>
と同じことをCSSでやるにはどうしたら良いでしょう?

<div style="float:left;">左寄せ</div>
<div style="text-align:right;">右寄せ</div>
とやるとMozillaでは思い通りの配置になるのに対して
IE5.0ではそれぞれが微妙に上下にずれてしまいます。

IEのバグなのだろうとは思うのですが、
なんとかIEでもうまいこと正常に見えるような方法はないでしょうか?
やっぱりTABLEしかないのでしょうか?

>>296

table{
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
ってのはどうだろ。試してないからわかんない。

間違えた。
paddingはtdに。

以前はN4のCSS対応の酷さに「N4早く消えろN4早く消えろ」と思ってたけど
最近はIE5の微妙な表示不具合が少し嫌になりつつあったりして。
IEもMozillaくらいになって欲しいなあ。

>>296
table{
padding: 0;
border-spacing: 0;
}
td,th{
margin: 0;
padding: 0;
}

これでダメならどうしようもないです。

>>299

<div style="float:left;width:50%;">
左寄せ
</div>
<div style="float:right;width:50%;text-align:right;">
右寄せ
</div>

質問の意味を取り違えてないかとビクビクしながら補足しておく。

borderを入れた場合はMozillaでアレなので、
その時はdivに -moz-box-sizing: border-box; を追加する。

参考：
　http://www.cc-net.or.jp/~piro/tips/page/p0031.html

>>296
border-spacingとborder-collapseの対応状況はここ↓

http://www.zspc.com/documents/css2/index.html#table

>>305
MacIE5ではちゃんとbox-sizingで機能するよ。

ついでに言うと、IE6bはDTDをキチンと宣言したHTML上で
content-boxとして扱うけどbox-sizingプロパティには不感症らしい。
正式リリースで対応してくれる事を願って止まないよ……

外部リンクからのCSSで出来る限り全て指定したいのですが
テキスト色指定の仕方が良く分かりません・・・
どこにどう指定入れるのでしょうか・・・・
とほほ　や　ばけら　見てもいまいち分からなかったです・・・
ガイシュツならすいませんが　よろしくお願いします。

BODY{
font-color : #FF0000; /*こんな指定無いですよね*/
text-color : #FF0000;
}
/*これは何の指定でしょう?*/

em {color: red;}
strong {color: #FF0000;}
a:visited {color: #FF0000;}
cite {color: rgb(0,255,0);}
q {color: rgb(0%,100%,100%);}

>>308
は　全体のテキスト色の事です・・

>>308
ただのcolor。何が分からないのか分からん。

>>308
悪いが、とほほやばけらのどこがわからなかったのかを説明してくれ。

ネタ決定

>>308
<body text="white" bgcolor="black" background="bg.jpg" link="blue" vlink="purple" alink="red">

の場合、

body {
color: white;
background: black url(bg.jpg);
}

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: red; }

で再現できます。

ついでにa:hover{color:black;}
を加えて『あれ？消えちゃったYO!!』ってのはどうかね？

>>304
その方法で一応できました。
width指定せずにfloat化してたのがいけなかったんですね。うっかりしてました。
(今度はMozillaの方で微妙に変になりましたが我慢できる程度なので妥協します)
ありがとうございました。

しつもーん。
<div>
<dl>
<dt>内容1</dt>
<dd>
内容2
</dd>
</dl>
</div>

div{text-align:center;}
dl{width:500px;}
dt{width:500px;text-align : center;}
dd{text-align : left;}
IE5.5だとセンタリングされるんですが、N6.1だと左寄せになっちゃいます。
divの代わりにhtmlに<center>タグをいれると上手くいきます。
どっちの仕様が正しいの？？

>>316
dt が左寄せになるのが駄目ってこと？

>>316
text-align:center はインライン要素にしか適用されないのが正しいはず
なのでNetscape6.1の方が正しい。

dl{width:500px;margin-left:auto;margin-right:auto;}
dt{width:500px;text-align:center;}
dd{text-align:left;}
にすればいいはずだがIEが margin:auto; にまだ対応していないようなら

div{text-align:center;}
dl{width:500px;margin-left:auto;margin-right:auto;}
dt{width:500px;text-align:center;}
dd{text-align:left;}
かな？

>>317
否。<dl>〜</dl>までボックス全てが左寄せになっちゃうのよ。dtの内容は
センタリングされてるし、ddの内容も左寄せなんだけどさ。要はテーブルが丸ごと
左に寄ってるみたいな感じになっちゃうのよ。

>>318
おぉ被った。なるへそ。早速試してみます！！

ボックス（ってかブロック）をセンタリングしたいのなら、
既に>>318に書かれている通り、センタリングしたいブロックの横方向にに
margin:auto
を対称的に指定する。

margin:auto #上下左右のマージンが上下、左右ごとに等しくなる。
margin:1em auto #上下方向のマージンが一文字分、左右マージンは等しくなる。

とか、色々指定する方法はあるんで適当に選んでくれ。

>>321
サンクス。>>318氏のでやったらウマークいった。

>>313
今正にそれ質問しようとしていた所でした
ありがとうございます

>>310-314
馬鹿でした　すんません・・・・・
>>313
color: white; 属性だけでよかったのですね・・・
助かりました　ありがとうございます。

細かいことだが、属性という言い方は混乱を招くと思われ。

/*下のような2重テーブルタグをCSSで出来る限り指定したかったのですが*/

<TABLE border="0" bgcolor="#000000" cellpadding="2" cellspacing="0">
<TBODY><TR><TD bgcolor="#000000" width="200" height="100">
　 <CENTER><TABLE border="0" cellpadding="7" cellspacing="0" bgcolor="#ffffff">
<TBODY><TR>
<TD width="250" height="150" align="center" valign="middle">枠の中</TD>
</TR> </TBODY></TABLE></CENTER></TD> </TR></TBODY></TABLE>

/*下のようにしてもNN4.7ではborderを無しに出来ません*/

BODY{ text-align : center;}
TABLE{ text-align : center;
border-top-width : 0px;border-left-width : 0px;
border-right-width : 0px;border-bottom-width : 0px;
border-style: none;}
TD{ text-align : center;
border-top-width : 0px;border-left-width : 0px;
border-right-width : 0px;border-bottom-width : 0px;
border-style: none;}

「DIVタグ＋スタイルシート」使えば出来るみたいですが
CSSでのみだとNNでは無理でしょうか・・・
ご指摘ヨロシクお願いしますです。

今度は要素とタグを混同してる例か

>>326
何がしたいのかよく分からなかったけど、こーゆー事がしたいの？

<html>
<head>
<style>
body {
text-align:center;
}

div.content {
border-width:1.3em 2px 2px 2px;
border-color:black;
border-style:solid;
vertical-align:middle;
padding:2em 1em;
width:250px;
text-align:center;
}
</style>
</head>
<body>
<div class="content">
<p>枠の中</p>
</div>
</body>
</html>

>>326
ん？　外側がwidth="200" height="100"で、内側がwidth="250" height="150"？

>>326
「NN4.7ではborderを無しに出来ません」て書いちょるが、IEではできたのか？

>>328
おぉぉ　ありがとうございます! そういう枠をCSSで作りたかったのです。
>>329-330
IEだとborder-style: none;で大丈夫でしたよ。

あと枠の中のカラーを背景色とちがうのに変えたかったのですが
padding-color:#CCFF00; と言うのは無いのですね
なので

background-color : #CCFF00;
と入れてみたり　表を2重にしたりしたのですが
IEではうまくいきますが　NN4.7では中の色に透明枠線が出来てしまいます。

これをCSS内で消す方法は無いのでしょうか
何度もすいません・・・・

そろそろNN4.7切捨てて　NN6に水準変えようかと思います・・・

>>331
>>328にプラス、
p { border: 〜; }
でいいんでは？

>>332
いや、>>331は、
「NN4にはborderとbackground-colorの間にスキ間がある」
と言いたいのかと。

で、俺は多分対処法は無いと思う。

>>333
そういうことなら、divでbackgroudを指定して、
divのpadding、pのmarginをゼロにして
pでborderを指定したら？

あっと、divのpaddingじゃなくてpのmarginで処理するだけでもいいような。

いや、すき間はどう頑張っても解消できなかった記憶がある。試したのはずいぶん前だが。

フレーム別でセレクトメニューを２つ並べたいんですが、
２つに増やすと機能しません。
誰か教えて

CSS選択スクリプトのセレクトメニューを置いたのか？

ページを左右に色分けして
http://members2.tsukaeru.net/coara/
こんな感じにしたいんですけど、
これ場合フォントサイズを大きくしたり小さいウィンドウで開くと、
%で指定したwidthが仇となり、右側が真っ白になることがあります。
また、左右どちらかの内容が縦枠をはみ出した場合、height:100%;が仇となって、
はみ出してない方が白くなってしまいます。

これを解決する事は出来ないでしょうか。

>>339

これでどうよ？

@charset "Shift_JIS";
body { color: #606060; background: #fbf8cd; margin: 0;}
pre { font-family: 'MS UI Gothic'; }

#hoge {
background:#b0d36a;
width: 13em;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

#hoge2 {
text-align: center;
background: #fbf8cd;
margin-left: 13em;
}

#hoge3{
text-align: left;
position: absolute;
left: 14em;
bottom: 1em;
}

>>339
Mozillaだと問題無いな・・
IEのwidthの処理がおかしいのか？

>>341

というか、float の解釈の違いだと思う。

>>332-337
よく見ると外出しまくってましたね・・・すみません・・・

<table cellpadding="0" cellspacing="0"> か
GIF画像をセルのテーブルバックグランドに
設定するしかNN4.7 では透明枠まで消すのは
だめっぽいですね・・・・

みなさまいろいろありがとうございました。

CSSで出来るので聞いて来て　とのことでしたので　マルチですいませんが　ヨロシクです。

フレームの境界線の色は　立体3Dの境界線のとき意外　変えられないのでしょうか?
frameborder="no" border="1"の状態で色を変えたいのです。
色々試したのですがIE5.5ではぜんぜんダメでした.................
Netscape Navigator4.7でも縁が付いてしまいます
知っておられる方 教えて下さいませ。

<FRAMESET rows="15%,85%" frameborder="YES" border="1" BORDERCOLOR="#000000">
<FRAMESET cols="102,*" frameborder="NO" BORDERCOLOR="#000000">
<FRAMESET cols="106,*" frameborder="no" border="1"bordercolor="#FF0000">

これではダメでした.........

FRAMESET { border-color : #FF0000; 　なんて出来ないのですが

IE5以上 だけでもいいですので良い方法ありませんでしょうか。

>>338
はい、置きました。
１つならうまくいくんですが。

>>344
BODYにborder付ければすむ話じゃん。

>>346
ブラウザによって解釈が違うので思うような表示は期待できません。
フレームのボーダーを、CSSでどうこうするのは無理だと思う...

<frameset cols="15%,85%" border="0">
<frame src="left.htm" style="border-right:1px solid aqua;">
<frame src="right.htm">
</frameset>
でなんとかなるが、IE5以外ではダメだな。
つうか、これはスタイルシートの悪い使い方かもしんない。

>>346-348
<frameset cols="15%,85%" border="0">
BODY{
border-right:1px solid aqua;">
}　だけでよかったのですね。
IE5だけでも良かったので　助かりました　ありがとうございました。

テーブルを真ん中に寄せたいのですが
<CENTER></CENTER> タグをNN6.1で
cssで適応させるにはどうしたらいいのでしょう。
BODY{
text-align : center;
}
でIE5.5とNN4.7はできるのですがNN6.1は真ん中に寄らないです。

TABLE, TD, TH {
text-align : center;
}
や　div.test { text-align:center; }
など　を足しても　ダメでした。

あと　NN6.1の初期設定フォントがMS明朝でなんか見にくくて嫌なので
自分のNN設定は　MSPゴシックにしたのですが
サイトに来る他の人の
NNでのフォントの種類や大きさはサイト側で固定出来ないですよね。

>>350
table {
margin-left:auto;
margin-right:auto;
}

仕様上、text-alignは、インライン要素の整形にしか使えないので、
今のところは、auto値とtext-align:centerを併用する事になる。

>>350
フォントもCSSで指定。
bodyにfont-familyを指定する。

>>350
ブロックのセンタリングの話は何度もがいしゅつ。
ちょっとは過去ログ探せばすぐ出てくるぞ

＞あと　NN6.1の初期設定フォントがMS明朝でなんか見にくくて嫌なので
＞自分のNN設定は　MSPゴシックにしたのですが
＞サイトに来る他の人の
＞NNでのフォントの種類や大きさはサイト側で固定出来ないですよね。

html * { font-family: 'ＭＳ Ｐゴシック'; }
じゃ不満なのか?

>>350
CSSに、
body > * {text-align: center;margin-left:auto;margin-right:auto;}
を加える。
あと、"ＭＳ〜"は機種依存なので、フォントを指定するなら
# ゴシックなタイプのものなら、
body,body * {font-family:serif;}
か、
# 明朝なタイプのものなら、
body,body * {font-family:sans-serif;}
# この辺の詳細は
# http://www.y-adagio.com/public/standards/tr_css2/fonts.html#generic-font-families

やってることの意味がわからんというのは無しな。
# んなこた、自分で調べろ。

>>351-354
ありがとうございます！！！
こんなに親切なスレ初めてです。感ドーしました。

マカーの知り合いがいないので　ついでに教えて貰いたいのですが・・・・
macに　ＭＳ Ｐゴシック　などはIEを入れた時点で
一緒に入っているのでしょうか
"ＭＳ〜"指定してて　フォントが見つからない場合ちゃんと
似たフォントで表示されてますかね?
一様　body,body * {font-family:sans-serif;}
でやらしてもらうつもりですが　>>354　さんの意見　見て少し気になったのです。

>>355
Mac で ＭＳ Ｐゴシック に対応するのは Osaka
{font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif} という感じ
ところで body * の指定は必要なのか？ font は継承されると思ったのだが

>>356
そうだった。
IEでfont-sizeがtable内に継承されないバグと混同してた。
body {}だけでもO.K.

CSS を使うと重くなるという話しが理解できません。
どう考えても、総合的に、軽くなるはずだとおもいますが？

CSSを使うと重くなる場合を考えてみる。
・filter
・ファイルが階層の深い所にある
・外部に置くとリクエストが１つ増える（転送量は変わらないが、プロセスが増える）
これくらいか。

>>354
明朝系がserifでゴシック系がsans-serifじゃないっけ？

>>359
3つ目のに追加。
よく@import等でCSSを小分けにしているのを見かけるが、
分ければ分けるほどプロセスが増える。

>>356-357
すごく参考になりました、ありがとうございます。
会話についていけるように勉強いたします。

>>361
確かに外部CSSや外部スクリプトを使うと
制作者側は楽になるけど
ファイルが増える分リクエスト数が増えて遅くなるね。

ただし、頻繁に更新されるHTMLと、
滅多に変更されないスタイルやスクリプトを別で分けておけば
2回目以降のアクセスはスタイルやスクリプトのファイルの方は
GETしなくて済むので(HEADはしなきゃいけないけど)
軽くなる可能性も。

CSSを使うなとかいって問題になってたのは、
「外部に置く代わりに増えたHEADのリクエスト分の転送量」と
「fontとかタグ使った場合の転送量」を比較してる、ってことでＯＫ？

そこまで考えてた人がどれだけ居るのかは知らんけど。
（CSSを正しく解釈しないUAに考慮しろ、とか的外れな人も多そう）

レガシーな物理タグを多用するよりCSS使った方がデータ量的には軽くなると思う。
ただ、>>359も挙げているようにfilterなどを使うと
場合によってブラウザの挙動が重くなるよね。

filter使ってなくてもポジショニングでいろいろ重ね合わせてたり
背景の画像が固定されてたりすると重くなるよね。

最近はマシンがパワーアップしたから気にならなくなったけど
1〜2年以上前は背景画像を固定してるページも重くてうざかった。

input や textarea などに
font-family: "Verdana", "MS PGothic", "Osaka", sans-serif;
と指定したらWinIE5では問題ないんだけど
MacIE5を使ってる人から文字を入力する所が文字化けすると苦情がきました。
body に同じ指定をしても問題はないようなのですが…。
なんか良い対処法はあるでしょうか? 諦めるしかない?

>>361
レイアウトを全てCSSで行ってて、かつシートが
多く、そしてポジショニングなどと使ってると
MacIE5とかだと絶望的な重さになるね。

>>366
フォームコントロール系の要素があるHTMLの
中に lang="en" の指定があると、MacIEでは
該当要素に文字化けが生じます。確認してみて。

>>367
lang="en" の指定がなくても確か文字化けしました。

>>366
フォント名の順番を変えたら直ったと思う。
WinとしてはVerdanaを表示してほしいが
マックにもVerdanaがあって、こいつより前にマックにある
日本語フォントを置いてみる。
font-family: "Osaka"."Verdana"."MS PGothic", sans-serif;

これで上手くいくと思う。ちょっと自信がないから報告してね。

>>368
なるほど、Osakaを先に持ってくれば解決しそうですね。試してみます。
ところでこれってバグですよね? バグ辞典スレッドに書いておくか…

抽象的な質問ですまんのですが、WinIE5.5とMacIE5.5って
そんなに表示は変わらないですよね？

凝った事をしなければ。

>>367
マク使い？
浮浪徒はどう？

>>370
http://www.zspc.com/documents/css2/index.html
ここら辺見ると、

・:first-child擬似クラス
・子セレクタ
・兄弟セレクタ

とかで凝ったことすると酷い目に遭いそうだ。
うぃなーなので詳しいことはわからん。

子セレクタと兄弟セレクタは普通に対応しているよ。
first-childはダブルバイトに対応していない。（半角英字なら可）
floatはwidthをちゃんと指定するように。（W3Cの仕様上必須）

>>373
？
ダブルバイトに対応してないのは:first-childじゃなくて:first-letterじゃない？

凝った事なんてしてないんだけどさぁ、背景色が違ってたり、
ボックス領域をセンタリングしてるはずなのに左にあったりするらしいのよ。
近年稀に見る鬱状態・・・。

>>375
"color:000" みたいな表記を使ってたり（先頭の#が足りない）、
text-alignでボックスをセンタリングしてない？

>>376
否。誰かソース見て下さい。コピペすんのも悪い気がするんだけど・・・。

body{
background-color : Black;
font-family : "Times New Roman", Times, serif;
color : white;
font-size : x-small;
font-weight : bold;
}
があって、
@import"body.css";
body{
background-image : url(../material/a.gif);
background-position : left;
background-repeat : repeat-y;
}
div{
text-align : center;
}
dl{
width:500px;
border-color : #ffffff;
border-style : double;
background-color : Gray;
padding : 5px;
color : #F8F8FF;
margin-top : 3%;
margin-bottom : 3%;
margin-left : auto;
margin-right : auto;
}
dt{
width:500px;
border-color : #000000;
border : medium outset Silver;
background-color : #A9A9A9;
font-size : medium;
font-weight : bold;
color : Black;
text-align : center;
}
dd{
font-size : 13px;
font-weight : normal;
color : Black;
padding-top : 12px;
padding-bottom : 12px;
text-align : left;
}
これがCSS。

htmlがこれ。
<body>
<div>
<dl>
<dt>土曜</dt>
<dd>俺達はあの土曜の夜を忘れない・・・</dd>
</dl>
</div>
</body>

長くなっちったけどヨロシコ。

>374
おう、その通り。間違ったよｺﾉﾔﾛｳ
>370
調べてみたよ。
>@import"body.css";
@import "body.css";
間に半角スペースを入れるといい。
センタリングは……されてるけど？

>まかーさん
めっさありがとう！！
ってセンタリングされてました？ちなみに洩れは外部呼出しなんだけど、
その辺も関係あるのかなぁ。372のサイトでマックは外部が△ってなってたから。
ともあれ、ありがとう。

@import url(body.css);

を使ってみるとか言ってみるテスト。

いや、それならこうでしょ。
@import url("body.css");

floatを設定するとvertical-alignが無視されますが仕方ないの？

>381-382
どっちでも仕様的には可。参考までにブラウザの対応状況↓
http://www.zspc.com/documents/css2/associate/atimport.html
>383
どこのvertical-align？

>384
<p><img>文章</p>
の、imgにfloat-leftと、vertical-alignを。

文章の行間を、最初130%、途中200%、また130%と空けたいのですが、

<STYLE type="text/css">
<!--body,tr,td{line-height:130%;}-->
</STYLE>

＊＊＊＊＊＊＊＊＊＊

<STYLE type="text/css">
<!--body,tr,td{line-height:200%;}-->
</STYLE>

＊＊＊＊＊＊＊＊＊＊＊

<STYLE type="text/css">
<!--body,tr,td{line-height:130%;}-->
</STYLE>

これだと全部130%になってしまいます。
どうすればいいでしょうか？

>386

div を使いましょう

>>387
すみません、ちょこっとだけDIVの使い方教えて下さい。

「CSS」は
−カッティングスタイルシート−
の略です。

>388

<div style="line-height: 130%">
...
</div>
<div style="line-height: 200%">
...
</div>
<div style="line-height: 130%">
...
</div>

>>388
CSSは、スタイルを適用したい対象ごとにスタイルを記述します。
table, tr, td { ... } は「全てのtable, tr, tdに」スタイルを指定する記述です。
特定の部分のみスタイルを変えたいなら、class/idなどを利用して、それぞれの部分を対象にスタイルを指定しましょう。


<html>
<head>
<style>
table, tr, td { font-size: 130%; } /* 全てのtableに対する指定 */
table#table1, #table1 tr, #table1 td { font-size: 200%; } /* 特定のtableに対する指定 */
</style>
</head>
<body>
　<table>〜</table>
　<table id="table1">〜</table>
　<table>〜</table>
</body>
</html>

font-size → line-height
間違えた。

>385
＋ーーー＋
｜　　　｜
＋ーーー＋　文章
文章文章文章文章

こうしたいのが、

＋ーーー＋　文章
｜　　　｜　文章
＋ーーー＋　文章
文章文章

こうなるってこと？

ーーーーーーー<p>ーーーーーーー
＋ーーー＋　文章<br>
｜　　　｜　文章<br>
＋ーーー＋　文章
ーーーーーー</p>ーーーーーーーー
こうしたいんだけど、

ーーーーーー<p>ーーーーーー
＋ーーー＋
｜　　　｜
＋ーーー＋　文章<br>
　　　　　　文章<br>
　　　　　　文章

ーーーーー</p>ーーーーーー
こうなちゃうって事。
しょうがないから今はmargin-topで凌いでます・・・・。

×なちゃう
○なっちゃう。

>394
悪いが、再現できなかった。
ソースコードと環境教えてくれる？

>394
それ、vartical-alignいらなくないか？

>396
ソースコードって何？厨でごめん・・・。環境はWin98IE5.5

>397
う〜ん、どうすれば良いかね？テーブル使えば簡単なんだけどねぇ・・。

table,tr,tdとtable,tdは何がちがうんでしょう？

>394
imgにfloat: leftを指定すれば、万事OKな気もする

>400
いや、それだけだと394の図２みたいになってしまうんだよ。
<br>タグがあるからその分だけ<p>の領域が広がっちゃうんだよね。

>401

>394 のようにしたいだけなら
<div>
<img src=... style="float:left">
<p>...</p>
</div>
でいいと思うんだけど

だからvartical-align消して、そのままやってみなって。
多分大丈夫なはずだから。

>402
いっぱいあるからdivaタグは使いたくないんだよね。

>403
いや、実際もうやってるって。自分でやらないうちから質問なんてしないよ（ｗ
テーブルだったらこんな感じかな？
<table><tr>
<td><img></td><td>文章<br>文章<br>文章</td>
</tr></table>

img {display:block;float;left;}
で解決┐(´ー｀)┌

というか、<br>なんぞ使う奴が糞。

>405
やっぱり（ｗ？
line-heightを使うべきなのか・・・。
とりあえず試してみるよ。あんがと。

>>390 >>391
遅くなってすみません。ご教授ありがとうございます。

>398
……書いたHTMLとCSSをそのままって事だ。
ハッキリ言って、floatとvertical-alignに関係は無い。

font-familyをNNで指定すると一部もしくは全体のCSSが無効になるのですけど、
こればっかはもうどうしようもない仕様なのですか？　もう疲れたヨ……。

>409
NN6なら問題ないが。記述ミス？
それともNN4の話？

<dl compact> をcssで表現するにはどうしたらいいですか？

NN4ではfont-familyで名前に日本語が混ざったフォント（ＭＳ Ｐゴシック、平成明朝、
HG行書体など）を指定すると全部無効になるので分けて書こう。

span { font-family:"ＭＳ Ｐゴシック"; }
span { font-size:12pt; color:red; }

こうすれば font-family 以外は適用されるはず・・。

あ、409へのレスです。

>411
display:compactのはずだが、
残念ながら、対応ブラウザが無かったと思う。

CSSではないのですが、詳しそうな方が多いので、
こちらで質問させていただきます。

<dl>
<dt>定義語
<dd>内容１
<dd>内容２
</dl>

というように、ひとつの<dt>に対して<dd>を複数記述するというのは、
文法的に問題ないでしょうか？

>>416
Strict-HTML スレッド
http://natto.2ch.net/test/read.cgi?bbs=hp&key=992708594

>>416 ども、スレ違いでしたね。そちらで質問してきます。

レイヤのrelative指定って、
「レイヤを入れ子にした時の、親レイヤの原点からのオフセット」
じゃないんですか？

そう考えて、レイヤの中に、子レイヤを二つ入れてみたのですが、
子レイヤの二つ目が、思ったところに表示されないのです。

どういうことでしょう？

>>418
それはposition: absoluteの話。
relativeは対象要素がposition無指定の時の位置を原点として
配置することになります。

親要素の原点からのオフセットなら relativeではなくabsoluteを使いましょ。

>>419

ありがとうございます。

今まで、absoluteは「ウインドウ全体の座標上での絶対値」と思っていたので、
ずっと混乱していたのでした。

そうなるとrelativeって、なんかあんまり使い道なさそうだな…

>>420
んなこたぁない。
a:active { position: relative; top: 1; left: 1; }
例えばこうすればクリックしたリンクが沈むような効果が得られる。

IE のお気に入りをマークアップして
<ul>
<li><h3>alpha</h3>
<ul>
<li><span><a href="...">link1</a></span></li>
<li><span><a href="...">link2</a></span></li>
</ul>
<li><span><a href="...">link3</a></span></li>
</ul>
のようにし，スタイルシートを
li{list-style: none;}
li span{display: list-item; list-style: inside url(a.png)}
と指定．意図する見え方は h3 はリストマークがつかず，リンクには画像のリストマークがつく．
（li a に指定しないのは，li a だと Moz で見た時行全体がリンクスポットになるから．）

WinIE55 と WinMoz093 では意図した見え方になるのだが，
MacIE5 だと最初の <li><a> 以降何も見えなくなってしまうとの報告．
どなたかお知恵を貸していただけないでしょうか．

ちなみに li に list-style-image を指定すれば h3 を含めすべてに画像がつくらしいので，
display: list-item の指定が悪いような気はしているのだが，
手元に Mac がないので試行錯誤ができないのが辛い．

>>422
HTMLのソースを書き換えていいのなら

<style type="text/css">
li.dir{list-style: none;}
</style>
<ul>
<li class="dir"><h3>alpha</h3>
<ul>
<li><span>link1</a></li>
<li><span>link2</a></li>
</ul>
<li><a href="...">link3</a></li>
</ul>

こうするのが早い。

>>422
li{list-style: none; display: block;}

>423

perl スクリプトを書き換えてそういう html を出力するようにしてうまくいきました．
ありがとうございます．Mac でもちゃんと見えるとの報告をもらいました．
余計な <span></span> が大量に減って一石二鳥です．
なお，li.dir{list-style: none none} としないと画像が表示されました．
どうやら 1 つだけだと list-style-type: none となるらしいです．

>424

こっちも試してみます．ありがとうございました．
list-item の中にさらに list-item が入るのがまずかったのかな？

IE5.5ってtext-shadowに対応してる？
ウチでは影付かないんだけど、付くって言う人も居るからどちらか判らない。

>427
text-shadowはまだ対応ブラウザがないはず。
つけてるやつはfilterを使ってるんじゃないのか？

すごい基本的な事ですまないが、idってなんのためにあるの？
classしか使っていないのだが…。
こんなことも理解できない俺って、ｳﾄｩ

>>429
その文書に一つしかない要素・・・ってそれは知ってるか。

２大ブラウザの実装上は、CSS的にはclassと同じ解釈だから
確かにわかりづらいかも。
Javascriptだと、idはその要素にアクセスする重要な手段になる。
CSSとJavascriptは今後より一層結びつきを強めるはずだから、
classとidは明確に分けて使っていた方がいい。

>>421
単位を付けないとダメなのでは？
A:active { position: relative; top: 1px; left: 1px; }
みたいに。細かい突っ込みですまん。

>>427
http://www.zspc.com/documents/css2/index.html

>>428
>>432
フィルターね…なるほど。
サンクス。

em単位で文字サイズを指定すると
IE5.5で文字サイズを変えた時にとんでもなくなるってほんと？
%単位は？
ex単位は？

>>434
そうなの？俺em指定＆IE5.5使用だけど別段なんとも・・・

下記のようにしたとき、IEで文字サイズ「大」以上にすると
下に行くにしたがってだんだんと階段状に右にずれてしまうんですが、
どこがいけないのでしょうか。

（CSS）
dl{ color: #009977; font-size: 90%; font-weight: bold; margin-left: 0em; }
dt{ text-align: right; width: 8em; float: left; padding-right: 1em; }

（HTML）
<dl>
<dt>name:</dt>
<dd><input type="text" name="name" size="30" value=""></dd>
<dt>e-mail:</dt>
<dd><input type="text" name="email" size="30" value=""></dd>
<dt>title:</dt>
<dd><input type="text" name="title" size="30" value=""></dd>
　・
　・
　・
</dl>

>>434
ホント。
例えば、
body * {font-size:0.8em;} と body * {font-size:80%;} を、
<body><p>あいうえお</p></body>
とやって、IEの文字サイズ小以下でそれぞれ比較してみ。
emのほうはとてもじゃないけど読めないから。
推測だけど、em指定のレンダリングがIEの
文字サイズ変更と似た(もしくは同じ)動作なんだろね。

>>436
＞下に行くにしたがってだんだんと階段状に右にずれてしまうんですが
ってのがよくわからなかったけど、IE5.01sp2では特におかしくなら無かったよ？

>437
レスありがとうございます。
確かに私の書いたそのままではおかしくなかったです。ごめんなさい。

body{ line-height: 1.3em; }
書き忘れていたこの部分が原因だったようです。うちはIE6なのですが、

name:　＿＿＿＿
　　　　　　e-mail:　＿＿＿＿
　　　　　　　　　　　　　　　　　title:　＿＿＿＿

こんなふうになっちゃうんです。

なんとなく自己解決したようです。

body{ line-height: 1.3em; } があっても、
dl に line-height: 1em; を指定したらずれなくなりました。
なんでそうなるのかが今ひとつよくわかってないのですが、
明日また考えることにします。

板汚して済みませんでした。

>>439
それってなんかIEのバグくさいね。

>>439 こんなのどうよ

CSS改　（dt{}に clear: leftを追加）
dt{ text-align: right; width: 8em; float: left; padding-right: 1em;clear: left}

http://shota.pobox.ne.jp/
↑の作者です。
ナビゲーションバーのポップアップをフィルタで半透明にしているのですが、
表示した後非表示状態になると、非表示にならず残ってしまいます。
半透明をかけなければ問題ないので、
IE5.0のバグだと思いますが、残像（？）が残らない方法はありますでしょうか。

以下のコードは、RFC的に、違反ですか？
（「以下が違反とはならない、RFCのバージョンはありますか？」という意味です）

<style type="text/css" media="screen">
.SeenWhenPrinted {display:none}
</style>

<table border="1">
<tr>
<td>ふが</td>
<td class="SeenWhenPrinted">ほげ</td>
</tr>
</table>

>>443
HTMLをIETFが管理していたのはもう昔。RFC1866もRFC2070もObsolete済み。
今管理しているのはW3Cですな。

コードの方は別に問題ないと思うけど……何が疑問なの？

>>444
ありがとう。
＞今管理しているのはW3Cですな。
うが、無知失礼しました。
＞何が疑問なの？
セルをまるごと可視／不可視で切り替えるのが、
今まで見たことないし、なんだか不自然な気がして・・・(^^;
（レイヤや段落ならともかく、そうでなくて、セル１つを不可視にするというのが、
　どうも直感的に変な気がして・・・でも、直感でなく理屈が分からず・・・）

そうか、いいんだよね。

>>442
IEでしか動かないポップアップをゴチャゴチャいじる暇があるなら
ネットスケープ4.ｘでも同等の振る舞いをする
技術を磨いたほうがウケはいいぞ。

本題の質問には答えられなくてスマソ

>>445
http://east.portland.ne.jp/~sigekazu/css/css2.htm
の"visibility"の項を見ておくと吉、かも。

>>446
ですか。
NN4ではタブの部分のみの表示になるようになってます。
といってもH1の幅が100%に成らないのでタブに見えないんですが。
IE&Mozilla対応の方向で作ってますが。
ログをみるとNN4よりNN3の方が多かったりする時もあるんですが^^;

非常に今さらな質問なのですが…

CSS ファイルの中でNN4 除けに
@media all{
（NN4 に適用しない宣言）
}
を使用しているのですが，今日 MacIE5 を使っている人から「効いてない」との報告．
ttp://east.portland.ne.jp/~sigekazu/css/boxm.htm
の記述例をどう読むか，によりますが，@media ... は MacIE5 では使えないのでしょうか？
もしそうなら素直に @import を使うことにします．（ファイルが増えるのがイヤなのだが．）

>>449
MacIE5は@media宣言の中に入れたスタイルは無視してくれちゃいます。
マカーの中では常識っぽい。

それと、上の方で出てた話題だけど…
emはあくまで「M」を基準にした単位であって、
単純に1em=1文字分と捉えるのは間違いじゃないかな？
そう考えれば0.8emと80%で差が出るのも理解できると思うけど。

>450
むむー，やはりそうですか．ありがとうございます．
あと，@import は最初に書かないといけないはずなので，
読み込まれるファイルの宣言を有効にする（読み込み元で上書きされないようにする）には
@import の中の各宣言に !important ってつけるしかないですか？試してみたけど無理っぽいな…．
@import url() !important; のようなことができると便利かと思うのですが．

＃ID 消えたね…

451 の「試してみたけど…」は「便利かと思うのですが．」の後に来るべき文です．
変な日本語ですみません．

>>451
＞あと，@import は最初に書かないといけないはずなので，

ん？これって@charsetの事でなくて？
@importはどこに書いてもよかったんじゃなかった？

>453
ttp://www.fan.gr.jp/~kaz/rec-css2/cascade.html#at-import
6.3 の項より引用：
＞あらゆる@import規則は、スタイルシート内の全規則集合より先行せねばならず
というのを「先頭になければ」と解釈したのですが，間違ってますか？
ttp://www.fan.gr.jp/~kaz/rec-css2/syndata.html#at-rules
同，4.1.5 の項より
＞CSS2のユーザエージェントは、ブロックの内部に出現する'@import'、任意の規則集合より前に出現する'@import'を無視しなければならない。
あ，「他の規則の後にある @import は無視される」ってことですね．

>>454
@importは@charsetより後・そのシート内の記述より前、に書かなきゃいけません。

@import以外でNN4よけの方法としては、link要素のmedia属性を使うという手もあります。
<link rel="stylesheet" href="normal.css" type="text/css">
<link rel="stylesheet" href="notNN4.css" type="text/css" media="all">
こうすると、下のシートはNN4では無視されます。mediaにscreen以外の値を指定すればオーケイ。

あう、ごめんね。
逆に自分が勉強させられてしまいました。

>455
@charset に関してありがとうございます．上記サイト中 4.4 でも確認しました．
はあ，勉強が足りないや．
link の media も考えた（NN4 以外の部分を後から上書きできるのが利点）のですが，
全 html ファイルを書き直すのが面倒（かつミスしやすい）ので止めました．

回答を下さった方々ありがとうございました．

>>447
＞visibility
visibility: hiddenとしても、見えないだけでレイアウト上は存在しているように扱われる点で、display: noneとは異なります。

お、知らなかったです・・・。display:noneって、visiblity:hiddenだと思ってた。。。
遅まきながら、ありがとう！

概出でしたらごめんなさい。
テーブルセルに背景を画像で指定して、
そのセル自体はブラウザ環境に合わせて左右に自動で延びるようにします。
その上で、背景画像だけはリピートしないようにさせるには
どうすればよいのでしょうか？

CSSだよね？
background: url(〜) no-repeat;
だけど、取り敢えずどこかのチュートリアルを読んで下さい。

ありがとうございました。
スレッド間違えたみたいです。初心者スレに書くべきでした。
ごめんなさい。
私の質問はCSSではなくてhtmlのようです・・・

CSSで内容をど真中にもってくることってできないの？

<TABLE WIDTH="100%" HEIGHT="100%" ALIGN="center">
<TR><TD>ほげほげ</TD></TR></TABLE>

みたいなやつ。

>>462
<div class="center">ほげほげ</div>

.center {
position: fixed; /* absoluteでも一応可能？ */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}

こんなかんじでどう？

>>462
頻出の質問だけど、今のところこれだと言えるレイアウト法は無かったような。
position: absoluteをうまく使って真ん中に配置するくらいじゃないのかな。

>>463
自分で表示確認した？（ｗ；

>>464
ごめん書いてから自分で試したら全然さっぱりだった。
宇津志

う〜む、やっぱ無理なのか･･･。

解像度とかブラウザサイズの問題があるからなかなか万人に同じように
見れるようするには難しいね。

テーブル組んだままにしようかなぁ･･･。

何度も申し訳ありません。
テーブルの特定のセルに背景画像を指定して、セル自体が自動で伸びても
画像はリピートされないようにしたいのです。
これでどこが間違っているのでしょうか？
GoLive5で作っていて、暗中模索です・・・

<style media="screen" type="text/css"><!--
#id1 { background: url() no-repeat }
--></style>
</head>

<body bgcolor="#ffffff">
<table id="id1" border="1" cellpadding="0" cellspacing="2" width="400" height="200" >
<tr>
<td >-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>

スクロールバーってIE5.5からじゃないと変更出来ないんですね…
一晩悩んだ結果がそれでした。
でもココの人達はネスケでもちゃんと動作確認してたりえらいですね。
質問じゃないのでsage。

>>467
それだとテーブル全体に背景を指定することになっちゃうから、
背景画像を指定したいセルに class なり id 属性を指定して、そこにスタイルを適用させましょう。

classを使う場合で説明するけど、まずは
.tokutei {
  background-image: url(背景画像までのパス);
  background-repeat: no-repeat;
}
…というスタイルを作って、背景画像を指定したいセルの class属性に"tokutei"を指定すればいいと思います。
一番左のセルに指定したいなら↓のようにしましょう。

<table 長いので省略>
<tr>
<td class="tokutei">-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>

ただ、>>467のどこが間違ってるかわからないなら
CSSをしっかり勉強してからにした方がいいと思うよ....
自分で使うんだから、きちんと理解して使った方が気持ちいいでしょ？

>>468
えらいというか…それが制作側の責任のようなものでは？
CSSは下手すると特定の環境でめちゃくちゃになるし....

ありがとうございます。
このように書いてみました。
が、、、、やはり全然ダメで、、、泣き入ってきました。
出直したほうがいいのでしょうか、、、。

<style media="screen" type="text/css"><!--
.tokutei{ background-image:url(背景画像までのパス); background-repeat: no-repeat; }
--></style>
</head>

<body bgcolor="#ffffff">
<table border="1" cellpadding="0" cellspacing="2" width="500" height="400">
<tr>
<td class="tokutei">-</td>
<td></td>
<td></td>
</tr>
</table>

>>470
恐らく「背景画像までのパス」をそのままやってるように見うけられる。
画像は"hoge.gif"なりなんなり用意して、htmlと同じフォルダに置き、
ソース内の(背景画像までのパス)の所を画像ファイルの名前に変えないとダメ。

・・・と、それよりさ、もしかしてjpeg画像でやろうとしてる？
ローカル（IE）で見れない環境の人もいるから、それに当てはまるのかも。
手持ちのgif画像とかで試してみると良い。

>>470
"全然ダメ"というのが、どういう状態なのか書きなさい！

>>200さんと同じ質問です。解決策を提示して下さった>>203さんの言う通り
やってみたつもりなんですが反映されません。なんででしょう？
リンク関連の部分だけコピペしてみました。
A {text-decoration: none}
a:link {color: #FFCCCC;
background-color: transparent}
a:visited {color: #6A5ACD;
background-color: transparent}
a:active {color: #FF99CC;
background-color: #FFCCCC}
a:hover {color: #6A5ACD;
background-color: #CCFFFF}
a:link img {border: none}

>>473
同じ質問じゃないじゃないっしょ。
結果的にどうしたいの？

やってることを素直に見たら、
「a:linkの子孫img要素のborderを弄ってるね」
ぐらいしか言いようが無いけど。

あれ？違ったんだ…
画像をリンクの某体に使ってるんですが、その周りにクリック済みのボーダー枠が
出来てしまうので消したいんです。
その訪問済みボーダーの色は私が設定した色ではなく、デフォルトの紫です。
ちなみにIE5.0で試してます。もしかしてマヌケな事言ってたらすいません。

>>473
質問の下手な人間ばかりだな。
"反映されません"というのは、どこが反映されないのか書きなさい！

>>476さん
あぅ…バカなんです、すみません。
>>475にちょっと書きましたがわかりにくいですね…
要はテキスト部分のリンクの色はCSSで設定した通りに表示されますが、
画像を使ってのリンクでは画像の周りにボーダーが発生してしまうので
消したいという事です。

>>477
いや、時間差で投稿後に見られた475で理解した。
反映されないんじゃなくて、書いた通りに反映されてるんだと思う。
a:visited img {border: none} を加えたら？
それより、
a img {border: none} か、img {border: none}でいいんじゃないの？

a:link img {border: none} と a:visited img {border: none} と
img {border: none} と a img {border: none} の区別は出来るの？

あぁ…ほんとに私バカだと再認識しました。
そうですよね、訪問済だったらvisitedにしないとダメですよね。
CSSサイト少し回ってこの事が載ってなくて、ここで見つけて深く考えずに…
さっきのソースにa:visited img {border: none}つけ加えたら大丈夫でした。
>>478さん、こんなバカ相手に御親切にありがとうございました。

というか、いちいち:linkとか;visitedとかつけないで
a img { }
とすれば良いんでは?

ひえー

>>ローカル（IE）で見れない環境の人もいるから、それに当てはまるのかも。

こ、こ、これでした、、、、あぅ、、、、
ありがとうございました。本当に助かりました。
Jpegでは私の環境MacIEでは真っ白けだったのです。
アップして確認してみます。

画像を左右両端に表示したいのですが、上手くいきません
とりあえず単純に

background-image:url("a.gif");
background-position:right　left;
background-repeat:repeat-y;

としてみたのですが、案の定駄目でした…
background-position　で両端指定は出来るのでしょうか？
またもし無理だった場合はどのような方法があるでしょうか？

>482
過去ログは読んだかい？前スレ辺りで同じ質問が出てた気がする。

>483
すいません、前スレチェックしていませんでした
ありがとうございます
……やっぱり無理なんですね……。別のやり方考えます

>>484
逝ってよし。前スレ読め。

質問させて下さい。

letter-spacingを用いると、
何故か連続する「<br><br>」のうち、
二つ目の<br>がブラウザに無視されてしまいます。
回避する方法があれば、教えていただきたいのですが…。

<html>
<head>
<style type="text/css">
<!--
body{letter-spacing: 1pt;}
-->
</style>
</head>
<html>
ああああ<br><br>
ああああ<br>
ああああ
</html>
</body>

486続き

ブラウザで見た場合
「ああああ

　ああああ
　ああああ」
と見えるはずが、
「ああああ
　ああああ
　ああああ」
と見えてしまいます。

訪問者が読みやすいように
掲示板にletter-spacingを使っているのですが、
これだと逆に読みにくくなってしまうのです…。

環境　OS:Windows98SE　ブラウザ：IE5.0SP2

N4、N6では問題が無いことを確認しました。

すみません。486は下記の間違いです。
<html>
<head>
<style type="text/css">
<!--
body{letter-spacing:1pt;}
-->
</style>
</head>
<body>
ああああ<br><br>
ああああ<br>
ああああ
</body>
</html>

>>486-487
確かIEのバグだったような。IE6でも直ってない。

>489
素早い返事ありがとうございます。
バグですか…。

もしあればですが、
回避する方法をどなたかご存じないでしょうか？

>486
CSS/DHTMLバグ辞典スレッド ver2.0 の 48
ttp://natto.2ch.net/test/read.cgi?bbs=hp&key=991666454&st=48&to=48&nofirst=true
で報告されてるね．
で，回避策だけど，<br><br>の間に全角空白を入れるとか＆nbsp; を入れるとか…．
この問題とは関係ないけど <body> 直下に文字データは書けないよ．

>491
対策方法ありがとうございます。
紹介されたスレッドを見てきます。

＞この問題とは関係ないけど <body> 直下に文字データは書けないよ．

知りませんでした。
タグで囲まないと掛けないのかな。
気を付けます。

>>492
bodyの下には基本的にブロックレベル要素しか置けないナリ。 -Strict

>493
例えば<div></div>で囲めば良いわけですね。
ありがとう。

事後報告です。

掲示板に入力された「<br>」を「　<br>」に置き換えるスクリプト？を
掲示板のCGIソースに追加して問題を回避しました。

皆さん、ありがとうございました。
かなり悩んでいたので、嬉しかったです。

>>492-494
確かにdivで囲めばDTD的にはOKだが
だからといって安易に
<body><div>
ほげほげほげ…
</div></body>
とやったんじゃ文書構造的に良くないと思う。
本文は適切に<p>などで括るべきなんだろう。

連続BRを無視するとは、すばらしい(謎)

同一ページ内でリンク個所の色を部分によって変えることは可能でしょうか？

御教授おねがいします。

>>498
クラスかIDを設定してやれば可能。それにアンカー疑似クラスを組み合わせる。

A:link { color: blue }
A:emphasis:link { color: red }
※註・通常のクラスと疑似クラスを併用する時は、疑似クラスを後に書く。

という感じ。IE4以上かNetscape 6なら大丈夫かな？
NN4は怪しかった気がする……。

#でも、アンカーの色はあまり変えない方がいい（サイト内で統一した方がいい）と思います。

すみません、訂正。

> A:emphasis:link { color: red } 【誤】
A.emphasis:link { color: red } 【正】

です。ごめんなさい。

>496
なるほど、わかりました。

>497
DTD的にはある意味すばらしいのですが、
掲示板に書き込んでくれた人が、
他の人に見やすいように
所々で二回改行を入れて（文章の間隔を空けて）
見やすいように書き込んでくれる意味が無くなっちゃう
のには困ったです。

掲示板のCGIソースではエンターキーによる改行（\nや\rや\r\n）を
<br>に変換するようになっているので、
２回エンターキーを押して連続改行すると、<br><br>が現れるんです。
大抵の掲示板スクリプトはこうなっているのではないかと思われます。

このスレッドのHTMLソース見てもらってもらえばその例が如実にわかったりしちゃいます。
（２回エンターキーを押したと思われる場所が<br><br>になってます。）

>>501
\n\nを</p><p>に置換したらどうか？
最初と最後に<p>と</p>があることが大前提だが。

すいません、質問スレという事なので･･･恥ずかしい事限りないですが
いさぎよく、質問させていただきます！

スタイルシートを学びたいのですが、
わかりやすいサイトで「とほほのスタイルシート入門」さんが
人気のようなのですが、
このサイトでさえ、理解がなかなかできません！！！
もうこんな私駄目でしょうか･･･末期でしょうか･･･
一応、基礎HTMLはわかります。TABLEタグを使ってならそれなりのレイアウトの
ページを作ってはいたのですが、CSSの存在を知って衝撃を受け今に至ります。
とっても初心者向けで分かりやすいところってないですか･･･？

>503
>2 のリンク先は見た？

>>503
ここはどうでしょ？

http://www.cc-net.or.jp/~piro/tips/page/p0019.html
http://www.kanzaki.com/docs/htminfo.html

＞一応、基礎HTMLはわかります。TABLEタグを使ってならそれなりのレイアウトの
＞ページを作ってはいたのですが、CSSの存在を知って衝撃を受け今に至ります。

勉強して行くにつれ、その「わかっていたつもりのHTML」は、「本当のHTML」じゃなかった
ということに気づくと思います。
CSSがわからないというのは、本当のHTMLがわかってないからです。

だんだんわかってきたら、http://203.174.72.112/monar01/ここのリンク集のサイトの
ソースをじっくり研究して見よう見まねで覚えましょう。

>>504
はい、見ました。過去ログも読んで、とほほさんは定評が
あるようだ！と思って見に行った所、最初はわかった気で読んでたものの
だんだん専門用語とかが難しくなって放り投げてしまいました。嗚呼･･･

>>505
こんな初歩的な質問に丁寧に答えていただきありがとうございます。
>勉強して行くにつれ、その「わかっていたつもりのHTML」は、「本当のHTML」じゃなかった
>ということに気づくと思います。
なるほど、ありがちな勘違いというものですね。これを機にがんばって理解しようと
思います、推奨サイトの紹介までありがとうございます！

それにしても505さんが教えてくれたところはさすがに
美しいですねー（特に上）リンク集も目移りするばかりです。
どうも、ありがとうございます。

>>502
それ、使わせていただきます。
アイデアありがとう。

早速のコメントありがとうございます。
やってみます・・・・できるんだろうか・・・不安。

便乗質問なのですが、
リンク個所の色って、指定しないとブラウザによって変わって見えちゃいますよね？
テキストの色を全部ブルーにしたとして、
リンク個所も色変わらないように指定することってできるんでしょうか？
リンクもブルーに指定するとかじゃなくて、
他のテキストの色と一緒にするっていうことができるんでしょうか？

>509
「リンクもブルーに指定」しないと，ブラウザの設定が使われるよ．
多くの人にとってはブルーだろうけど，変えてる人もいるでしょうね．

CSSなんて使ってみりゃ簡単だよ。
それに関係するような単語で指定できるんだし。
（fontならfonf-sizeとかfont-colorとか）
難しいと思うのは初めだけ。だんだんCSSの使い良さにはまってくるよ。

うん、CSSは簡単…というか、取っつきやすいと思う。
プロパティは殆ど共通してるし、直感的に指定できるからね。
セレクタの使い方さえきちんと理解できればCSSの楽しさが見えてくると思う。
後は本人のセンス次第。

ついでに>>511
font-colorなんてプロパティは無いと思うんだけど？
テキストカラーはcolorでしょ。

背景、テキスト、リンク、訪問済みリンクの色は必ずセットで指定してクダサイ。
たとえば私は、ブラウザの設定で目に優しいように、
背景クリーム色、テキスト焦げ茶、リンク薄青、済みリンク薄紫　にしてますが
テキスト=黒、リンク=濃い青と決めてかかって背景色だけ濃いめの色に指定している
サイトではすんごくよみづらいです。

>>512
スマソ、勢いでそうしちゃった。
逝ってきます。

すみません、教えていただいた疑似クラス？の使い方がわかりません。
↓のような物を書いているのですが、
“あげ”のリンク色はブルーで、
“ほげ”のリンク色は赤にしたい場合、
どこにどうやって指示すればよいのでしょうか？？？

<style media="screen" type="text/css"><!--
element { color: black; text-decoration: underline }
a:link { color: blue }
a:emphasis:link { color: red }
--></style>
</head>

<body bgcolor="#ffffff">
<p>リンクだよ</p>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr>
<td bgcolor="pink">
<p><a href="()">あげ</a></p>
</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr>
<td bgcolor="pink">
<p><a href="()">ほげ</a></p>
</td>
</tr>
</table>
</body>

</html>

>>515
まず>>500をよくみてな。

ごめんなさい！
↓です。。。。class="a.emphasis"という指示を書くのでしょうか？

<style media="screen" type="text/css"><!--
element { color: black; text-decoration: underline }
a:link { color: blue }
a.emphasis:link { color: red }
--></style>
</head>
<body bgcolor="#ffffff">
<p>リンクだよ</p>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr>
<td bgcolor="pink">
<p><a href="()">あげ</a></p>
</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr>
<td bgcolor="pink">
<p><a href="()">ほげ</a></p>
</td>
</tr>
</table>
</body>
</html>

<style media="screen" type="text/css"><!--
element { color: black; text-decoration: underline }
a:link { color: blue } a.emphasis:link { color: red }
--></style></head>
<body bgcolor="#ffffff">
<p>リンクだよ</p>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr><td bgcolor="pink"><p><a href="()">あげ</a></p></td></tr></table>
<table border="1" cellpadding="0" cellspacing="2" width="64">
<tr><td bgcolor="pink"><p><a href="()" class="emphasis">ほげ</a></p></td></tr></table>
</body></html>

見難いとか言うな。

>515-518
element って何？

>517
本かどっかのサイトで css のお勉強をしたほうが…

element って何だろうな（藁
コピペしてたから気付かなかったよ。

ありがとうございます！！！
感動的です・・・・
ホントにバカというか、本も何も買わずにいきなりCSSやろうとしてるんです。
HTMLもそんな感じで始めてしまったので・・・
ご迷惑おかけしてごめんなさい。
でも本当に助かりました。ありがとうございました。

あ、elementってですね、
私、ベースのファイルをGoLiveで作っていたんですが（大ばか者ですかね）
そこでCSS使うと勝手に書かれるんですわ。
今まで気にしたこと無かったですけど・・・

DLできるようになるタグ教えて下さい…

>>522は逝ってよし

>>521
> あ、elementってですね、
> 私、ベースのファイルをGoLiveで作っていたんですが（大ばか者ですかね）
> そこでCSS使うと勝手に書かれるんですわ。
GoLive使ったこと無いから分からんが、そりゃどっか間違えてるぞ。
element要素??に色は黒、下線を引くって一体……HTMLじゃなくてXMLなのか？

強調したいのならばclass等使うな。em要素でマークアップしろ。

# 今原理主義者って名前あんまり使いたくないけど。

emphasisクラスなんてのは望ましくないか。

A:link { color: blue }
A:visited { color: purple }
EM > A:link { color: red }
EM > A:visited { color: maroon }

の方がいいかな。

>>526
子セレクタより子孫セレクタの方がいいんでない？
対応してるのN6/MozollaとMacIE5だけだし。

それより498=509=515=517=521は何処へ逝った？

おはようございます。ここにいます・・・

518さんの書いて下さったものでとりあえず無事クリアーしました。
いやもう本当に初心者で、子孫セレクタってなんですか状態なもので・・・

すみません、きっと初歩的なことなんですけど……。
margin指定にはautoがあるけどpaddingには無い、でいいんですよね？
レファレンスによってはpaddinngにもautoがあるとしてるものがあったもので
どちらが正しいのか不安になりました。

>530
はい，ありません．
＃あわてて自サイト見直しちゃったよ…

恐れおおくも質問させてください。この板のみなさまが制作に使うHTMLエディタは何ですか？
本格的なCSSを使用する制作には、テキストエディタを使うのが普通なんでしょうか。

私は.cssファイルはメモ帳で書いてます。
htmlの方はFrontpageだったけど今はテキストエディタのtera pad。

>>532

CSS書きにはTop Style Lite
英語版だが、CSS書くだけなら別に問題ない。
有料のプロ版もあるが、漏れのような厨房にはLite版で十分。

http://www.bradsoft.com/topstyle/download/litedload.asp

オレもTopStyleLite使ってるけど、我が家のマシンだと重いんよね。
だから、ちょこっと手直しする時はテキストエディタで開いてる。

>>532
最初はメモ帳→次は秀丸エディタ→そんでもって今はTeraPadという流れ。
FrontPageとかも使ったことはあるけど5分でやめた。Dreamweaverはたまに使うけど。

CSSは適当な雛形を一つ作っておいて、それをいじくって作ってる。

>>532
WYSIWYGタイプのエディタで、CSSを細かいところまでサポート
できてる物がないから、基本的にはテキストエディタ系になると思う。

私の場合やっつけ仕事はDreamweaver、余力ある時は秀丸。
CSSは秀丸メインでたまにTopStyleLite。
TopStyleLiteは操作性に気に入らない部分があるから、
色指定する時くらいしか使わないな。

TopStyleLiteは日本語版が出てもう少し軽ければ
使ってもいいね。
ただ、css書くのは個人サイトだったらメモ帳以下で十分。

>>537
HTMLもCSSも秀丸。
たまにDHTML AssistantやDreamweaverも使う。
DHTML Assistant がもうちょっと軽かったら秀丸のかわりにメインで使うんだが…
TopStyleはまだ使ったことないけどそのうち使ってみたいね。

CSSは構造化エディタで書いてます。

メモ帳以下
にﾜﾗﾀ

沢山のレスありがとです！やはりテキストエディタになるんですね。
私はHTML&CSSは超初心者で、覚えようと思ったらテキストエディタで辞書と
睨めっこしながらカキカキしなきゃいけない、タグによって有効無効、ブラウザ対応、
スペルミス、時間がかかる、などなど、何だかロスが多いなぁと思ったんです。
それらの大部分は規則性があるようなので（元来HTMLは簡潔なものらしいし）
もっとロスなくHTML記述できる制作ツールがあっても良さそうなのに、と不思議に
思うんです（いわゆるタグ打ち系に限ってですが）。
世の中にほんとにそーいうソフトが存在しないなら、いっそ作っちゃおうかと
思いまして．．それで質問してみた次第です。

なんかこう、テキストエディタでないHTML記述ツール、なんてのは存在しませんか？

>>542
文面から見ると、タグ埋め込み型が欲しいのかな？
TTTEDITあたりが有名だと思う。

タグ埋め込み型も、基本的にはテキストエディタですよね。
HTML記述でテキスト編集が必要な部分て、文章テキスト、ファイル名、注釈．．
など、ごく限られてますよね。それ以外は、実は編集の必要がない。

だから例えば、
タグは全てアイコンで、クリックすると属性ウインドが開いて、テキスト入力が
必要なところ以外は、マウスで属性の設定ができる．．．みたいなソフトがあれば
ミスも無くなるし初心者もとっつきやすいかな、と。

>>542
壮絶に高いですが、Adobe FrameMaker+SGMLはどうですか。
とりあえず買ってみたりしたのですが、XMLの入力が出来ないのには
極めて残念な思いをしました。なんといっても値段が値段だけに
尚更というか。

ＨＴＭＬエディタはともかく
ＣＳＳ書くのにはそれ用に特化したエディタの必要を感じない。
ここＨＴＭＬでなくてＣＳＳのスレッドですよね？

HTMLソースから使用中のセレクタを抽出して、CSSのひな形を
自動作成してくれるようなのは欲しい。

スレ違いだったらごめんなさい．．．
CSS板の方がHTMLも含めて意見が頂けると思いました。
CSSに関しても、タグ対応やブラウザ対応を自動で判別してくれる、属性一欄を表示する、
などが実現できるだけで、随分助かると思ったんです。

>>548

ブラウザ対応なら、Top Style Liteでわかるよ。

リンクをマウスでポイントしたりクリックしても問題ないのに、
Tabキーで移動するとページ上部に隙間がどんどんできていきます。
ページ全体が下に落ちていく感じです。IE5.01sp2での現象です。
<a>のタグのスタイルを消すとこの現象は起きません。
おそらくfloatを使いまくってるせいで起きてる現象のような気がします。
この理由や解決法を御存知の方、どうか教えてください。

CSSで target="_blank"　を指定することってできますか？

>>551
できない。
大人しくとらいでぃしょなるを使おう。

過去スレを読んでいて、いろいろと言いたいことが。

一応、誤解を指摘してみる。

誤解其の一，「px」を文字の大きさに指定するのはまずい。
二重の意味で、絶対単位として、振る舞うからだ。
二重の意味とは、
１，基準が、親要素やウィンドウの大きさではなく、ディスプレイの解像度による。
よって、解像度を変えない限りは、絶対単位とほぼ同じく、文字の大きさが変わらない。
２，ほとんどのブラウザは、解像度が変わったとしても、
文字の大きさを変えないというバグが報告されている（真偽は定かではない）。
さらに、ネットスケープは６をのぞいて、
「表示」＞「文字を大きくする（小さくする）」をつかっても、
文字の大きさがいっこうに変わらないと言う致命的なものがある。
（絶対単位ですら、文字の大きさが変わるのに！）

誤解其の二、スタイルシートにおけるHTMLは簡単ではない。
確かに、HTML（間違った文法も含む）だけなら簡単だし、
スタイルシート自体も、難しくはない。
問題は、スタイルシートを適用させるためのHTML（4.01)。
HTML4.01の仕様書とCSS2の仕様書を隅々まで読むと、
ブロック要素とインライン要素、または、置換要素と非置換要素
は絶対に学ばなくてはならないし、
SGMLの観念を理解する必要がある。
でないと、正しいHTMLを使うためにcssを使う意義がないから。

私は、SGMLをXMLで何とか、ほんの少し、理解したつもりだが、
非常に、抽象的で理解に苦しんだ。

あ、SGMLってどんなものなの?
と言う質問はなしよ。
仕様書は読んだんだけど、さっぱり抽象的で理解できなかったから。

検索フォームにスタイルシートで色を付けたいんですが、
ラジオボタンにまで色つきの枠が付いちゃいます。
どうせましょう？

idかclassで振り分けませう。

importは３回までですか？

置換要素と非置換要素ってなんだろう？はじめて聞いた。

今から覚えようとする人はxhtmlと1.0を覚えつつ、
XMLを理解するよう心がければいいんじゃないのかな？
SGMLはやっぱ必要？

そういいつつ私はSGMLはさわりはわかってるつもりだけどXMLはサパーリ。

スタイルシートでフレームを再現できますか？

>>557
置換要素はimgとかobjectのこと。大抵src属性でソースを指定するね。
HTMLソースがsrc属性で指定したソースに置換されるからこう呼ばれてる。
非置換要素はpやblockquote等、テキストがそのまま表示される物だと思って貰えればいいと思う。

>>551
CSSはHTML文書の見た目を整えるものであって、
Webブラウザの動作を指定するものではありません。
だから、不可。

>>552
Transitional
↑これ、なんて読む？

トランズィショナル（翻訳ソフト・ロボワードより）

http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=Transitional&sw=0
gooの翻訳ソフト

>>560
とらんじしょなる。
…ごめん、どっかの漫画と混ざってた。

>>558
見かけだけならな。

>557
なるほど、ありがとうー。
今までimgは空要素って認識しかなかったよ。
よく考えたら空要素でもimgとhrじゃ全然性質がちがうものな。

iframeなんかも置換要素になるのかしらん？

>>564

iframe要素も置換要素になるとおもう。
ほかにも、input,textarea要素など。

え？どうして、これらが置換要素になるかって?
置換要素は、要素そのものが寸法を持っており、状況に依存しない、
ということらしい。

それで、width,heightプロパティの値を「auto」にすると、
定められた寸法を自動的に取得する。
けれど、古いブラウザが対応しているとは思えないが。

>>563
雰囲気だけでいいんで教えてもらえませんか？
過去スレ見るとサンプルがあったみたいなんですけど、
そのサンプルへのリンクが切れてて…

>>566
http://www.cc-net.or.jp/~piro/
此処の切り替えスタイルのFlatとかだな。

イカスレのまと氏リンク集にも色々あったんだが、消されてわからんくなった。写氏。

body{background-color:green;color:silver;margin:0;}
#left{background-color:blue;width:7em;height:100%;text-align:center;}
#right{position:absolute;top:0;left:7em;}

<body>
<div id="left">左側</div>
<div id="right">右側</div>
</body>

>>566
こんな感じなのは？

IE6のStandard mode以外ではフレーム再現できます。多分。

body{ overflow:hidden;margin:0; }
#menu{ z-index:1; position:fixed!important; position:absolute; top:0; left:0; background:#CCF; width:10em; height:100%; }
#main{ margin-left:10em; height:100%; overflow:auto; }

<div id="menu">
めにゅ〜
</div>
<div id="main">
めいん〜
</div>

上下は無理？

IEがfixedに対応してくれたら・・・ねぇ。

body{ overflow:none;margin:0; }
div{ width:100%; }
#menu{ position:fixed;top:0;left:0;background:#CCC;z-index:1; }
#main{ position:absolute;top:1em; }

<div id="menu">
めにゅ〜
</div>
<div id="main">
めいん〜
</div>

>>567
これこれこんな感じです...とCSSファイルを覗こうとしたらどこにあるのやら？
>>568
イメージは近いんですけど、メニウも一緒に動くのが惜しいです。
>>569
ありがとうございます。イメージぴったりです。
position:fixed!important; position:absolute;
このposition:absolute;の指定はfixedに対応してないブラウザ用と考えていいでしょうか。

皆様ありがとうございました。

>>572
>このposition:absolute;の指定はfixedに対応してないブラウザ用と考えていいでしょうか。

考え方では逆です。
overflowとposition:absoluteで擬似fixed状態を作り出したのですが、
NS6のStandard modeでは思い通りに表示されなかったのでposition:fixedを付けてみました。

反則かもしれませんが、ちょっと自分の知識では追いきれていません（＾＾；

>>573
そういう経緯がありましたか。なるほど…
解説ありがとうございます。

次のスタイルを指定したところ、
ネットスケープ6.0でリストがまったく表示されませんでした。
どのへんでまちがったのか、わかる方がいらしたら教えてください。

ul.contents-list
{
line-height : 110%;
margin : 1em 0px;
padding : 0px;
position : relative;
z-index : 1;
}
li
{
font-size : 110%;
margin : 1px;
padding : 1px;
list-style-type : none;
width : 200px;
text-align : justify;
}
li a
{
display : block;
width : 100%;
text-decoration : none;
border-color : #cccccc;
border-style : solid;
border-width : 1px 3px 1px 3px;
text-justify : distribute-all-lines;
padding : 5px 5px 5px 5px;
text-align : justify;
}
li a:hover
{
border-color : #EF75BC;
border-style : solid;
border-width : 1px 3px 1px 3px;
text-justify : distribute-all-lines;
padding : 5px 5px 5px 5px;
text-decoration : none;
text-align : justify;
}

>575
いやあの，HTML がないと判断のしようがないと思うのですが…

>576
すみません。
HTMLのタグは
<ul class="contents-list">
<li><A href="bbs.cgi" target="_top">BBS</A></li>
<li><A href="daiary.html" target="_top">DIARY</A></li>
<li><A href="link.html" target="_top">LINK</A></li>
</ul>
こんなかんじです。

daiary.html　って･･･鬱だ･･･。

うーん、Netscape6.1だけど普通に表示されるなぁ。
text-align : justify; は効いてないケド。

ulとliにborderを指定してどこで消えたか確かめた？

>580
そういう確認はしていませんでした。
最初から一個一個確認してやってみます。
どうもでした。

すみません、スタイルシートのせいではなかったみたいです。
リストの前にフラッシュのタグかいてたんですが、
それをけずってみたら普通に表示されました。

質問です。

外部スタイルシートで
body { margin-left : 100px }
p { font-size : 10pt }
small { font-size : 8pt }
としているんですが、
HTMLで<p>の中に<small>タグを使用したあと一旦</;p>で閉じると
そのあとの<p>以降がNN4.75だとmargin-leftが無効になってしまいます。
IE5.01とNetscape6.1では大丈夫でした。
これはNN4.75のバグなのか、それともそもそも使い方が間違っているのでしょうか？

質問です。

<nobr>[トップに戻る]<wbr> [過去ログ]<wbr> [ワード検索]</nobr>

これに相当するような事はCSSでできますか？
↑のは掲示板のメニューですが、メニューは一塊で改行された方が良いので。。
これが文法チェックで点を落すのが気になるので、宜しくお願いします。

>>584
こんなかんじかー
p.nobr span { white-space: nowrap; }
<p class="nobr"><span>ただお</span> <span>さだお</span> <span>みつこ</span> <span>よしお</span></p>

>>585
あのー、white-spaceはブロックレベルの要素にしか効かない（指定してはいけない）のですが……。

16.6 Whitespace: the 'white-space' property
'white-space'
Value: normal | pre | nowrap | inherit
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentages: N/A
Media: visual

正直、すまんかった。

>>584
そりゃできるけど、簡単だから自分で探すべきと思う。
一応答えとくけど、指定不足があってもご勘弁。

li {float: left; width: 8em; white-space: nowrap;}

<ul>
<li>トップに戻る</li>
<li>過去ログ</li>
<li>ワード検索</li>
</ul>

>588
li はブロック要素なのか？

li,dt,dd などの要素にwhite-spaceを使えないとしたら、
今まで散々使ってしまった気がするな。
どうなの？だめなの？

>>590
OL,UL,DLはブロックレベル要素ですし、
"Inherited: yes"ですからUL辺りに適当なクラスやらIDやらを振って
子孫要素に継承させればいいのでは。

釈然としないな。
white-spaceをインライン要素に指定してはいけないだろうが、
li dt dd には指定してもいいんじゃないのか。
ソースはないよ。俺個人の常識でそんな気がする。
そういえば、td要素にはwhite-spaceを指定した例が仕様書
か何かにあった気がする。どーよ？

>>592
liはブロック要素だからwhite-spaceプロパティ設定できるだろ

組版規則に分離禁止って奴があります。
　cf. http://kondou.comic.to/nobuo_Web/zyukai_one07.html
ダッシュ「――」や三点リーダー「……」など、二字取りが普通のものを
途中で改行させないためにwhite-space:nowrapを使用しようと思ってたのですが……。
ブロック要素にしか指定不可となると、他にどんな方法がありますか？
International Layout（↓）が実現しないと無理ですか？
　http://www.doraneko.org/misc/i18n-format/WD990127.html

ＩＥ5.5だとインライン要素であるspan要素にwhite-space:nowrapを指定しても効いてる気がするのは私の気の所為でせうか。

CSSに限って言えばリストアイテムとブロックの違いについての
扱いは仕様書が曖昧な事もあって微妙。
もっとも、仕様書的にはfloatを指定した時点でdisplay:blockだと強制的に
解釈されるはず。（実装は伴ってない事がある）
で、floatを使うとどうしても幅を固定せざるをえないので、
基本的に>>584のやりたいようにはならない。
それから、直後の要素でclearも指定しなければならないかも。

あー、ワードラップについてはwhite-spaceしか関連属性が無いんで、
今のCSSで再現するのは無理。

>>596
ワードラップについては
やりたいことが実現できるかどうかよくわからんが
IE5の独自(先行)実装で
line-break: strict;
みたいなのがあるらしい。

ところでclear属性ってなんかいまいち使いにくいと思わない?
HTMLがいまいちきれいにならないというか。
俺としてはfloatの回り込みをキャンセルしたい最初の要素じゃなくて
floatの回り込みを使う要素の親要素あたりにつけたいんだよね。
<div style="afterclear:both">
<img style="float:left">
<p>回り込む文章</p>
</div>
<p>回り込まない文章</p>
みたいな感じで。

img { float: left }
img + * { clear: left }
ちょっと違うがこんな感じでもいいだろう。

うぉ、勘違いしてたよ御免。

<table>をCSSでcenterにもってくるには如何すればいいでしょうか？
IEだとbody{text-align:center;}でいいですが、
最近のMozillaやN等では効かないようで、body{text-align:-moz-center;}（だっけ？兎に角独自拡張の-moz-何だか）出ないと駄目なようです。
過去にも同じようなのが有ったら御免なさい。
御教授お願いします

>>600
http://www.kanzaki.com/docs/html/htminfo17-2.html#talign

>>601
有難う御座いました。
何となく分かりました。
ブロックレベル要素なんかはmarginを使うべきとう言う事ですね。
でも、marginだとブラウザのちょうど中心にテーブルを置くには如何すればいいでしょうか。
諦めるしかないでしょうか。

>>602
margin:auto;
margin-left:auto;margin-right:auto;

どっちかだと思った。
IE用に[text-align:center;]も残しておいた方が良い。

>>602
こっちの方がよかったな。
http://east.portland.ne.jp/~sigekazu/css/box.htm

>>603と>>604
body{
text-align:center;
}
table{
margin-left:auto;
margin-right:auto;
}
この二つでばっちりに成りました。
marginにこんな使い方が有ったとは知りませんでした。
いい勉強になりました。どうも！

<BODY onLoad="select_menu()">

<table id="t1" border="1" width="160" height="75">

<tr><td></td><td>たたかう</td></tr>
<tr><td></td><td>まほう</td></tr>
<tr><td></td><td>アイテム</td></tr>

</table></BODY>


<script type="text/javascript">

function get_keycode()
{
switch (event.keyCode)
{
case 37:alert("うしろへ下がる");break;
case 38:select_menu("up");break;
case 39:alert("ぼうぎょ");break;
case 40:select_menu("down");break;

default :break;
}
}

document.onkeydown = get_keycode;

var count = 0,tbl = document.getElementById("t1");
var child = tbl.childNodes[0].childNodes;

function select_menu(evt)
{
if(evt=="up")
{if(--count<0)count=child.length+count;}

else if(evt=="down")
{count=++count%child.length;}

for (var i = 0; i<child.length; i++)
{child[i].childNodes[0].innerHTML = "";}


child[count].childNodes[0].innerHTML = "<img src='a.gif'>";
}


</script>
</HTML>

テーブルを青くして
枠と文字は白く表示して
たたかうを選択してキーボードのAを押すと
a.htmに飛び（Aしか認識しないようにする）

まほうを選択してキーボードのBを押すと
b.htmに飛び（Bしか認識しないようにする）

アイテムを選択してキーボードのｃを押すと
ｃ.htmに飛び（ｃしか認識しないようにする）には
どうしたらいいでしょうか？
CSSの方で聞くのがいいらしいので
すいませんけど、だれか教えて（ソースを）ください。
よろしくお願いします。

CSSで
>テーブルを青くして
>枠と文字は白く表示
したいなら
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs1-04.htm
挙動に関してはJavaScriptだ。

>>608
読んでみましたが
どうしてもうまくいきません。
もし、よければソースを
教えてもらえないでしょうか・・・。
本当に申し訳ありません・・・・・。

勉強すれ

リンク先が理解できないのなら
そこの目次まで辿って初めから勉強した方がいい。

それと、JavaScript質問スレの解答もちゃんと理解した？

>>609
質問していきなり結果を求めるようではダメだ。
大体、とほほが有ればすぐに分かることじゃないのか？

最近はとほほWWW入門を見ている人が極端に減っているような気がする。（特にこの板では）

以前、2chでとほほを叩いてたからでは？

とほほはあまり良くないんじゃ・・・

質より量で・・・

>>615
CSSを扱う上で大切なStrictなHTML等を学ぶためには
量より質が大切だと言ってみるてすと。

>>616
とほほで一通り覚えさせてから、
鳩丸辺りでStrict教に洗脳しても遅くはあるまい。

つうか俺がそのパターンなんだけどな（ｗ

StrictなHTMLなんかどうでもいい。
CSSの基本構文やbackground-colorなんて初歩中の初歩を
知ってもいない人間が多すぎる。

>>617
ということは、ｱﾅﾀは僕とまったく一緒ですね（w

>>617

俺もそうだ。

むしろ俺はとほほ→２ちゃんでStrict教だなぁ

リンクを全てtarget="_blank"にしたいんですが
cssで一括指定する事は出来ますでしょうか。

>>622
CSSじゃでけまへん

divの多用って犯罪なんですか？

>>622
base target は嫌なわけ？

>>624
どんなものでも度を越せばあまりよい目では見られないような。
犯罪かどうかまではわからんが。

>>624
法律上は何の問題もないとしか言えない。

>>624
CSSで色々装飾するためにDIVを連発するのは本末転倒と思われ。
そういう無意味DIVはDOMで動的に生成とかすべきなのでは。

piro氏は…

>>629
あれは“CSSで色々装飾するためにDIVを連発するのは本末転倒”の代表例だな。
あのスタイル自体は割と好きな方だけど、あのDIV連発のHTMLは……。

#その点、nozたん（ｗのHTMLは流石に綺麗だな。

「〜だな」が被ってしまった、ｽﾏﾝ。

age

>>628
スクリプトで動的に生成した div であっても同じだよ。
それが装飾のみを目的とする要素なら本末転倒。

装飾で必要って事は、つまり構造的にもそう言う意味を持つって事。
本来は文脈セレクタや疑似要素でやるべき装飾もあるけど、
ブラウザの実装状況がヘボイのでdivに頼る時もある。

……まぁPﾀﾝのは確かにdivに頼り過ぎの感があるけどね。
もうちょっとなんとかなるだろって。

>>634
＞装飾で必要って事は、つまり構造的にもそう言う意味を持つって事。
これの逆は真と言えるけど…

>>635
ごめんごめん、そうだね。

質問です。
CSSでページ全体のフォントサイズを指定しているんですが、（bodyに1.2em）
ブラウザのフォントサイズ設定での間隔が物凄いんです。
普段自分は「小」でやってるので「小」に合わせて作ったんですが、
「中」にすると大き過ぎてスタイルが崩れ（約2倍くらいになる）
「最小」にすると、読めなくなる字が出てくる始末です。

このような場合の対処法を教えて頂けないでしょうか？

a:hover に position:relative を使ってマウスポインタのっけると
ちょっとへこむ（ように見える）ようにしてるんですが、
のっけた状態でマウスのホイルをぐりぐりやるとリンクの文字列もついてきます。
何か不思議な感じです。

>637
1.2 em ではなく 120% にしたらどうなる？
IE は（ベースになるフォントサイズを） em で指定するとおかしくなる，というのが
どこかにあったような気が．

>>637 >>639
↓これですね
>>434 >>437

>>639-640
どうも、ありがとうございます。
IEじゃem指定はほぼ諦めた方が良いんですね。。
取り敢えず100%にしたり、10exだった所を9exにしたりしました。
もちっとサイト内を巡って、小さすぎたり大きすぎたりする所がないか探す事にします。

>>638
質問でないのなら、↓で報告した方がいいのでは。
　CSS/DHTMLバグ辞典スレッド ver2.0
　http://natto.2ch.net/test/read.cgi?bbs=hp&key=991666454&ls=50

WinIEにはCSSを読み込ませないようにするというのはだめですか。

>>643
ダメ。
殆どのユーザーがWinIEなのに、一体なんのためにそんなことを？

>>644
ダメって、断言せんでも（笑）
俺はMozillaでOKだけどWinIEでだめなCSSを別ファイルにして
WinIEには読み込ませないようにしているよ。

独自拡張なら別ファイルでもよさそう。

>>645-646
別ファイルにするのと「読み込ませない」のは違ふ。
たしかにその別ファイルをモジラなどは読み込まなくなるが、ＩＥは読み込むわけだから。
まあＩＥ３とかＮＮ４みたいなバグだらけならば「読み込ませないようにする」手もアリだが、
WinIE全般に読み込ませないってのはチト暴挙ではないかい？

長くなってしまいますが、お願いします。

<style type="text/css">
<!--
body { background: #fff url(../img/8-20.gif); }
body, th, td, {
color: #000;
font-family: Osaka;
font-size: 10px;
}
/* NN 4.x 対策？*/
body, th, td, div { font-family: "ＭＳ Ｐゴシック" ! important; }

a:link { color: #f60; }
a:visited { color: #69c; }
a:active { color: #f00; }
a:hover { color: #f00; }
a { text-decoration: none; }

.color { color: #fc0; }
.title { color: #fff; }
-->
</style>

<title>NN 6 でのテーブル表示</title>
</head>
<body>
<table align=center border=0 cellspacing=0 cellpadding=0 width="100%" height="100%" summary="hoge">
<tr>
<td align=center valign=middle>
<table align=center border=0 cellspacing=5 cellpadding=5>
<tr>
<td align=center style="background: #f90"><span class="title">　　モ　ナ　　</span></td>
<td rowspan=6 width=10><img src="../img/spacer.gif" width=1 height=1></td>
<td>19**年</td>
<td colspan=2>オマエモナー</td>
</tr>
<tr>
<td align=center style="background: #369"><span class="title">　　ギ　コ　　</span></td>
<td>19**年</td>
<td colspan=2>逝ってよし！</td>
</tr>
<tr>
<td align=center style="background: #993"><br></td>
<td>19**年</td>
<td>このあとも</td>
<td>まだまだ続くよ。</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

>>648
これを、NN 6 で見ると、中央ではなく、画面の上の方に表示されてしまいます。
高さも合わせて中心に表示するには、どうすればよいのでしょう。

<table height=300> などにしても、ダメでした。
（そもそも、tableには、height属性は使えないのですよね。
でも、他のブラウザだと表示してくれちゃうので、わかってはいたんですが、甘えていました。）
横方向の中央揃えというのは、今まで何度か出てきましたが、縦方向は？

また、他のページでは大丈夫なのに、このページだけは、
フォントサイズの指定をすることが出来ません。なぜでしょう？
body, th, td, div { font-family: "ＭＳ Ｐゴシック" ! important; }
を外しても、ダメでした。
理由のわかる方、よろしくお願いします。

>648-649
外側のtable取っぱらって

table { margin-top: auto; margin-bottom: auto; }

じゃだめ？

>>650
だめっす。
言うこと聞いてくれません…。でも、ありがと。

あと、さっきは、勘違いしていました。
外側のテーブルに <table height=300> としたら、
ちゃんと valign=middle になってくれました。
CSSだと、他にやり方があったとしても無理そうなので、px指定で逝きます。

で、フォントの方の理由って、わかりますか？
どこを間違えているんだろう…。
このままだと、<font size> を使うしかないのかなぁ。

font-family: Osaka; を外す

>>652
変化なしです…。
本当に、なんでなんだろう？
同じ記述で、他のページは大丈夫なのに。

body, th, td, { }　から
body {　} にfont指定を移してみたら？

>>647
いや、例えば、 scrollbar-???-color とか
-moz-border-??? なんかを、対応している UA だけに読ませるってことね。

# さすがに IE5.x 以降を無視するわけにはいかないだろ（笑い）

>>649
Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4+) Gecko/20010929
だとちゃんと真ん中に表示されますよ。NN6使うならせめてNN6.1のほうが
より幸せになれるかも。Mozillaはnightlyのできがいいのでもっとお勧め。

#align=center等はなんで「"」を付けてないの？微妙に気持ち悪い・・・

>>649
というか過去ログ読み直してHTMLとCSS書き直した方がいいと思われ

そもそも、（WinIEも含めて）
全体的にいいブラウザが少ないのを差し引いても、
ここまでWinIEが多いのはちょっと…。

ていうかショートゴロゲッツー（謎）。

>>654
ありがとうううううう！！ 出来ました、出来ました。

body {
color: #000;
font-size: 10px;
font-family: Osaka;
}
th, td {
color: #000;
font-size: 10px;
font-family: Osaka;
}
と、分けてみたら（NN 4 や iCabのために）、ちゃんと表示されました。
う、うれしい。

>>656
HTML 4.01 なので、英数字には必要ないってことで。
それと、スペルミスチェックのためでもあるのです。
要素名や属性名、属性値は、色が変わるエディタを使っているので。
（「" 」でくくると、また違う色になってしまって、チェック出来ない。）

>>657
style="text-align: center" とかにしろってことですか？
text-alignは、言うことを聞いてくれないのですよ。（Mac）
それとも、tableを使っているから？ font-size: 10pxだから？
もし、他におかしいところがあったら、教えろ。ｲﾔ､ｵｼｴﾃｸﾀﾞｻｲ…。

>>659にしたら、今度は、NN 4 でダメだった…。
こうなったら、classで一つづつ指定かな…。
メモリが少ないから、いっぱいブラウザ立ち上げとくの、キツイんだよなぁ…。

何度もすみません。
何か、再起動してみたら、
body, th, td, div, p { color: #000; font-family: Osaka; font-size: 10px; }
で、NN 4もN6も、大丈夫でした…。この苦労をどうしてくれよう…。脱力っす。
でも、協力してくださったみなさん、どうもありがとうございました。

＃ブロック要素すべてに指定するのは、お忘れなく。

本当に、何度もすみません。
やっぱり、N6は、>>659 のように、分けないとダメっす。
ありがとう！ 654さん。

いつも、ネスケ使っている人って、こういうへなちょこページを
しょっちゅう見ているのかな。

次にスレ立てるときは、注意書きを書いてほしいな。


・とほほぐらいは読んでおく。

・いきなり巨大なソースをべたっと貼って「お願いします」は無し。
＃原因は最小限のところまで絞る。その際、思い込みだけで除外しないこと。
＃ソースを貼るのは解答者の要望があったときのみ。

・感謝の言葉に余計な文字は要らない。「ありがとう」「THX」で十分。
＃「カンドーしました」だとか、「！」をやたらにつけるのは邪魔。

・必要以上にへりくだらない。「初心者ですみません」は免罪符にならない。
＃知らないことは恥ではない。ただし、出来る限り調べること。
＃「過去ログにあったかもしれませんが」は最低。

・・・当たり前のことなんだが。

すみません、以前>>586で“white-spaceはブロックレベルの要素にしか効かない”等と
書いてしまいましたが、本当は全要素に適用出来るようです。

Errata for the CSS1 specification
http://www.w3.org/Style/css1-updates/REC-CSS1-19990111-errata.html
> Section 5.6.2 'white-space'
> [2001-08-28] The 'white-space' property applies to all elements, not just block-level elements.

Errata in REC-CSS2-19980512
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html
> Section 16.6 Whitespace: the 'white-space' property
> [2001-08-28] The 'white-space' property applies to all elements, not just block-level elements.

いい加減な知識で適当なことを書いてしまい、申し訳ありませんでした。

>>665
>全要素に適用出来るようです
それは何よりです。
インライン要素にも効いてるとだと見えたのは気の所為では無かったんですね。

てことは>>585で正解なんだな。

スタイルシート切り替えスクリプトってどう？

>>668
下記へどうぞ。

代替スタイルシートに萌え〜
http://natto.2ch.net/test/read.cgi/hp/991400015

失敬。URL間違った。正しくは下記。
http://natto.2ch.net/test/read.cgi/hp/991400015/

大き目の企業のサイトでCSSオンオフでまったく見栄えが違うくらいに
CSSばりばりに使ってるところってどのくらいあるの

ＮＮでＭＳ−ＩＭＥをアクティブにする方法知りませんか？
ＩＥ５．０、ＩＥ５．５については解かったのですが・・・

スタイルシートって<textarea>の幅の調整とかできる？
ブラウザ幅に対して何％とか

ＭＳの製品でないＮＮにそれは無理ってもんでしょ。>>672
だいたいネスケは日本語ユーザーへのサポートは熱心でないし。

>673

.w1{width: 50%;}
.w2{width: 100px;}
.h1{height: 50%;}
.h2{height: 100px;}

<body>
<div style="width: 600px; height: 600px;">
<textarea class="w1 h1"></textarea><br>
<textarea class="w2 h2"></textarea>
</div>
</body>

NN6.1 と Moz(9/26) は幅，高さともうまくいく
IE6（strict）は h1 が効いてない（残りはうまくいく）

マイクロソフトのサイトでメニューにアンカーを合わせると
画像のようなプルダウンが表示されますが、あれはどのような
技術のくみあわせでしょうか？また作り方などの参考サイト、
アドバイス等いただければ幸いです。

アンカーじゃなくてポインタ、またはカーソルな？
CSSが何か知ってるか？　まず初心者スレに行け。

失礼しました。初心者に書き込みをおこないまいた。

気にするな

mozilla ですが、スタイルシート周りがおかしくないですか？

おかしいのはおまえの頭だ

IE6だとカーソルの形の変更がうまく表示できない。
自分のところがヘンなのかと思ってたら他所の表示も同じになってました。
カーソル指定は元々IE4or5のみのものだったから止めるべきだったのかなあ・・・。

カーソルの変更は、厨クサイしユーザビリティとしても難があるので、
よっぽどの理由がない限り、止めた方がいいよ。

>>680
IEのスタイルシートを基準にするな。

アニメーションカーソルはブラクラ。

N6って検索窓とか入力フォームがデガイよね。
あれなんとか小さくしたいんだけど、みんなどうやってる？

>>686
そりゃ
input, textarea { font-size: 9pt; } とか
input, textarea { font-size: 75%; } とか…

>>687
あ、やっぱりそれで良いの？
なんかもっとフォーマルなやり方があるのかと思いこんでた。
教えてくれてありがとう。

初心者スレに書き込んだのですがこちらに誘導されました。
改めて質問させてください。

CSSでフォームの色を変えてるんですけど
<input type=file name=upload class=textbox>
こんな感じでタイプ=ファイルを指定すると「参照」ボタンが
デフォルトの色で凄くダサいのです。。
これはどこをさわればよいのでしょうか。

思いつきで色々やってみたのですが上手く行きませんでした。

style="background-color:pink;border:1px solid red;"

なんか686が異様にむかつくのだが。

しらんがな

テーブルのセルを見やすくするために
一行目は青,二行目は白というように交互に背景色を変えたいのですが,
これはclass属性を使ってHTMLをマークアップするしかないのでしょうか？

>>693
おそらくそれしかない…のかな?
もしいい方法があったら俺も知りたい

>>693
ＣＳＳを使用するのが最良だが、一応、ＨＴＭＬだけでもbgcolor属性で出来ます。

>>695
>>693が言いたいのは
HTML上でいちいちclassやらbgcolorやらidやらを追加することなく
CSSの力で交互に背景色を変えられないかって話と思われ。
ていうかここはCSSのスレなのでbgcolorはスレ違い。

Netscap6のCSS対応状況を詳細に解説しているサイトを
教えてください。

>>697
このスレのどこかに書いてあったので、ご自分で探して下さい。
http://natto.2ch.net/test/read.cgi/hp/991666454/

>>697
ここは？
http://www.zspc.com/documents/css2/

あげます、、上手く行かない

空揚げうZEEEEEEE!!!　厨房は消えろ〜〜〜　　　　(ﾜﾗ

困ってるんですよぉ〜　(;´Д`)
気に障ったならｺﾞﾒﾝﾅｻｲ

気にすんな>>689、この板は無料鯖でパクリサイトやってる701みたいな
ボンクラとパクリ防止です馬鹿主婦と仕事の出来ねえへたれデジタル土方しか
見てねんだから答えられる訳ねえって　以下どっかのスレからコピペ　ｗ
=========================================================
実際ここで何か聞く時は色々注意する事があるよ

Q：簡単な質問
↓
A：厨房逝ってよし！検索しろ！マナーに気を付けろ
↓
Q：ちょっと突っ込んだ質問
↓
A：ｼｰﾝ、、、、放置
↓
Q：また簡単な質問
↓
A：厨房うぜえ、スキル無さ杉、もっと勉強しろ！

以上の無限ループでこの板は成り立っています
質問者に求められるのは何よりもまず、回答者のレベルを見極める能力なんです。
=========================================================
と言ってみたもんの俺も解らんな、前にM$のサイトでそのボタンの実装に関して
FAQみたいのが有ったが忘れてしまったよ、確か君と同じような内容で
「あなたの意見は正しい」みたいな回答だった筈だが、これからも問題には出くわすだろうから
MLに入って質問投げてみたらどうか

>>689
現状でファイルの参照ボタンはどう頑張ってもいじれなかった筈。

>>693
<col>に設定すればマシになるんじゃない？
そんな話じゃなければスマンけど。

<style>
.a1{ background-color:#FFF; }
.a2{ background-color:#00F; }
</style>

<table>
<col class="a1">
<col class="a2">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>

>>705
列でなくて行だぞ>>693が求めているのは。

あー・・・すまん。
んじゃ
tr{ background-color:#FFF; }
tr+tr{ background-color:#00F; }
tr+tr+tr{ background-color:#FFF; }
.
.
.

とか。阿呆っぽいが。

>>660
>HTML 4.01 なので、英数字には必要ないってことで。
http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2 によると
<q>We recommend using quotation marks even when it is possible to eliminate them.</q>

あとまあ二重テーブルなくすとか、ゴミimgなくすとか、alignやcellspacing
使うならcss使おうとしてみるとか、fontは相対指定するとか、font-familyの
キーワード指定とか、color使うならbackground-colorも指定するとか、
テーブル中央寄せするなら過去ログ見るとか、まあこんなもんでよろしいでしょうか？

#個人的にはcss使う時NN4を考慮する必要はないと思う。なぜならそれに合わせていたら
#いつまでたってもcss2に対応した新しいブラウザが普及しないから。
#軽さを求めるから捨てるわけにはいかんという人にはテキストブラウザで十分でしょ。

もうすぐ5か。光陰矢のごとしとはよく言ったもんだ。もう10月入って一週間だよ。

>>707
それも考えたのですが,IEが対応していないのと,
行の数が増えるにつれて際限なく指定が増えないといけないから無理っぽいです。

CSS4あたりでこのへんのことが解消されるといいんだけどなぁ。

1px高のラインを引きたいのですが上手く行きません。
条件は上下のマージンが無い事（以下のサンプルでは
空間が出来てしまうのです）。環境はIE5、NN6以上で
動作です。

<hr>ですとどうしても上下のマージンが出来てしまいます。
position:absolute;指定だとNN6で期待通りになりません。
何か良い方法がありましたらお願いします。
<style>
.a {
width : 50px;
height : 10px;
margin : 0px;
border : 0px;
background : blue;
}
.test {
width : 100%;
height : 1px;
margin : 0px;
border : 0px;
background : red;
color : red;
padding : 0px 100px;
margin : 0px 100px;
}
</style>
<div class="a"></div>
<hr class="test">
<div class="a"></div>

>710

css3 のドラフトで新しいセレクタが提案されてるらしくて，
「n 番目の子要素」という選択ができるようになる，かも，らしい．
参考：ttp://www.kanzaki.com/book/html/updates.html#css3-selector

IE5の<div>ではheightを1にすることは無理なのでしょうか

<style>
.a {
width : 100%;
height : 10px;
margin : 0px;
border : 0px;
background : blue;
padding : 0px;
margin : 0px;
}
.test {
width : 100%;
height : 1px;
margin : 0px;
border : 0px;
background : red;
color : red;
padding : 0px;
}
</style>
<div class="a"></div>
<div class="test"></div>
<div class="a"></div>

>>712
おぉ！CSS3にそんな仕様が提案さえてたんだ。
ぜひ正式に採用決定してもらわないと。
で,712のサイトに行の背景色を交互に変える方法が載ってたり。
>tr:nth-child(2n) {background-color: white} /*nth-child(even)も可*/
>tr:nth-child(2n+1) {background-color: silver} /*nth-child(odd)も可*/
>というスタイル宣言によって、表の列に交互に背景色を設定するなどという、従来の方法ではいちいちtr要素にクラス指定が必要だったスタイルを、すっきりと構造的に記述できるようになります。
求めていたものがそのままあるとは・・・珍しい。

>>713
これは違うか？1pxの線を引きたいのですか？

<style>
.a {
width : 50px;
height : 10px;
margin : 0px;
border : 0px;
background : blue;
}

.test {
margin : 0;
padding: 0;
border-top: 1px solid red;
background : none;
color : red;
padding : 0px 100px;
margin : 0px 100px;
}
</style>

<div class="a">ふぁ</div>
<div class="test"></div>
<div class="a">ふ</div>

>>715
Mozillaとかならイイかも知れないけど、IE5じゃダメだね。
.test に font-size:0; 追加と、、<div class="test"></div>は<div class="test">　</div>こうすれば良いかも。

ちょっと改正
<style>
.a { background : blue; }

.test {
height:1;
font-size:1px;
background:red;
}
</style>

<div class="a">ふぁ
<p class="test"></p>
ふ</div>

これで出来た。

font-size:0;は効かなかった記憶がある。
やるとしたらfont-size:1px;だけど、
空白だけでline-height:0;とかしたらどうだったっけ？

<div class="test"></div> で font-size:0 を追加したら上手く行きました。
有難うございます。皆さんの環境ではどうでしょうか？

あの。「1pxの線がひきたい」のならそういう画像にすればいいんでは?

>>720と同じだけど、
場合によっちゃhr使うとかするべきだと思うよ。

>>720
言い忘れてましたが、スクリプトで色を変化させる予定があるので
それは却下になったんです。

全然関係ない話なんですけど、今 google 打ち間違ったら
こんな検索エンジンに出会ってしまいました(^_^;)

http://googlo.com/

パクリでしょうかね。

>>722
あ、いや、画像でも良いんだったら、
透明GIF画像1x1のを用意して、

<style>
img.line{
width:100%;
height:1px;
background:red;
}
</style>
<img src="./dot.gif" class="line"><br>

みたいにすればOKだよ。
画像はタブーかと思ってた・・・。

>>724
あっ！なるほど！気付きませんでした。
お恥ずかしい。

亀レスですが透過PNGはNN6になってもダメなんですね。
GIFは使わないポリシーなのでやはりdivタグでいきます。

NN6では<p>タグ内の<sup>の位置が極端に上に行くんですけど
CSSで上手く調整できないでしょうか？
フォントが日本語のときにそうなります。

>>727
これはだめ？

sup{position:relative;top:4px;}

IEで下がりすぎる

sup {
vertical-align: 50%;
}
とか、調整すれば良いんじゃない？
ていうか、vertical-alignの使い方を知らない人が多くて嫌だな。
ブロックレベル要素の垂直位置揃えじゃないっつーの。
あくまで行レベルの垂直位置調整なのに。

>>730
それだとIE５とNN6で異なってしまうんです。

取り敢えず、こんな感じで出来ました。superscriptの部分は
日本語フォントではダメですが英語フォントでは上手く行きました。
まだ気持ち悪いですけど。IE5、NN6対応です。


<style>
span {
    font : 80% Verdana;
}
</style>
スマートではありません<span>^*1</span>。

sup {
font : 80% Verdana;
}

にしないの？span無駄だと思うけど。

>733
やってみればわかると思いますが、
NN6では正しく表示されないのです。

<style>
span {
    font : 80% Verdana;
}
sup#a {
    font : 80% Verdana;
}
</style>
スマートではありません<span>^*1</span>。<br>
スマートではありません<sup id="a">*1</sup>。

アクセス解析見てると、訪問者600人のうち、NN4.xが20人程度。
これはもう無視しちゃっていいんでしょうか。
あんなもんブラウザじゃねえよ、で一蹴してもいいのかなぁ。

NN4.xは過渡期ブラウザです。

NN6って新しくコード書き直したとか聞いたが

>>736
はげしくがいしゅつ

皆さんのお知恵をお借りしたいのですが。
同一のstyle.css内にあるのに、
なぜか効くものと効かないものがあって困惑しています。
\/*一般エレメントセレクタ*\/
body { font-family: Osaka, "ＭＳ Ｐゴシック", Gothic, sans-serif; font-size: 0.95em; font-style: normal; font-weight: normal; line-height: 1.5em; letter-spacing: 0em; background-color: #ffffff; color: #000055; }
a:link { color: #0000cc; }
a:vlink { color: #000000; }
a:hover { color: #ff9900; }
a:active { color: #ff9900; }
ol { list-style-type: square; }
hr { color: #000055; }
\/*ヘッドライン*\/
div.headline-home { margin: -1.2em -0.8em 0em -1em; padding: 0em 0.8em 0em 1em; color: #ff9900; background-color: #000055; }
div.headline-common { margin: -1.2em -0.8em -0.3em -1em; padding: 0.6em 0em 0em 1em; background-color: #000055; color: #ff9900; }
とここまでは効いてくれるのですが、
\/*ヘッドラインメニュー*\/
a.menu { font-family: Osaka, "ＭＳ Ｐゴシック", Gothic, sans-serif; font-size: 1.2em; font-weight: bold; line-height: 1.5em; letter-spacing: 0em;}
a.menu-home:link { color: #000055; }
a.menu-home:vlink { color: #000055; }
a.menu-common:link { color: #ff9900; }
a.menu-common:vlink { color: #ff9900; }
\/*マージンandパディングinホーム*\/
.do-not-come-near1 { margin: 0.3em 0em 5em 0.6em; }
.do-not-come-near2 { margin: 1.9em 0em 0em 1.5em; }
\/*マージンandパディングinコモン*\/
.do-not-come-near4 { margin: 0.5em 2em 0em 2em; }
.do-not-come-near5 { margin: -4em 0em 1.5em 2em; padding: 0em; }
.do-not-come-near6 { margin: -4em 0em 1.5em 0.3em; padding: 0em; }
\/*フロートandクリア*\/
.leave-me-alone-on-your-left { float: left; }
.return-of-the-left { clear: left; }
\/*その他*\/
.pay-attention-to-me { color: #ff0000: }
.it-has-to-be-bold { font-weight: bolder; }
.i-do-not-think-smallfont-is-so-cool {font-size: 0.95em; }
これがｻﾊﾟｰﾘ
昨夜の11時頃まではこれで効いていたのですが、なぜか突然効かなくなりまして...
ちなみに当方MacIE5.0、メモ帳使用です。

長すぎですね、すみません。
\/*フロートandクリア*\/
.leave-me-alone-on-your-left { float: left; }
.return-of-the-left { clear: left; }
\/*その他*\/
.pay-attention-to-me { color: #ff0000: }
.it-has-to-be-bold { font-weight: bolder; }
.i-do-not-think-smallfont-is-so-cool {font-size: 0.95em; }
これがｻﾊﾟｰﾘ
昨夜の11時頃まではこれで効いていたのですが、なぜか突然効かなくなりまして...
ちなみに当方MacIE5.0、メモ帳使用です。
よろしくお願いします。

>>738-739
a:vlinkってナニ？　a:visitedかa:link:visitedではないの？

>>739
>ちなみに当方MacIE5.0、メモ帳使用です。
Winのメモ帳で書いてMacで確認してるの?

>>738-739
クラス名ばかり書かれても、適用する要素がわからないと何とも……。
あと、フロートが指定される要素には規格上width指定も必須です。実際、ブラウザによっては表示が崩れます。

>>740
BODY要素のvlink属性と勘違いしたものと思われ。

text属性→BODYにcolorプロパティを指定
link属性→A:link
vlink属性→A:visited
alink属性→A:active（A:link:active, A:visited:activeかも。ひょっとしてA:focusか？）

と置き換えるべし。

>>738
MacIE5だとfloatさせたい要素はwidthを明示しないとfloatしなかったよね。
それと、「\/*一般エレメントセレクタ*\/ 」この妙なコメントの書き方が気になるんだが。
なんでスラッシュをエスケープしようとしてるんだろう？
突然効かなくなったって書いてあるけど、DOCTYPE宣言を変更したりしただろうか…

Netscape4.7だと1pxの枠線で囲ったDIVの中に背景色をつけたTABLEを置くと
DIVとTABLEの間にすきまができてBODYの背景色が見えてしまうのですが
これを回避する方法はありませんか？

<BODY style="background-color:white;">
<DIV style="border-style:solid;border-width:1px;border-color:blue;">
<TABLE bgcolor="red" cellspacing="0">
<TR.../TR>
</TABLE>
</DIV>

IEだと青い1pxの枠で囲まれた赤いボックスに見えますが、
NN4.7だと青い1px枠と赤いテーブルの間に白いすきまが
見えてしまいます。

DIVのbackground-color,width,heightを指定して clipしてあげれば
いいのはわかりますが、DIVの中身は可変にしたいのです。

>>745
divにpadding:0;、tableにmargin:0; padding:0;を指定しても駄目？
うまくゆかなかったら、それはＣＳＳ関係がバグだらけのＮＮ4.7の所為です。

>>746

　それもやってみましたがだめでした。
　この隙間（marginかpaddingかどちらかわかんないけど）
　ってどちらの要素が持ってることになってるのやら。

　

>>747
NN4.xでそれを回避する方法はありません。
borderと要素の間に隙間ができるのはNN4.xの仕様です。
この隙間はmarginでもpaddingでもありません。
元々、まともにCSSをサポートできていないブラウザなのでそれをコントロールする事もできません。

　横レスですが>>748に追加。
　しかもその隙間は普通は上下左右２pxですが、中にTABLEなどが入ると
上左１px下右３pxという素敵な事態になったりもします。
　テーブルの周囲に線を引きたいだけならbackground-color＋paddingで
実現するのが無難かと。

　ところで質問なのですが、ＮＮ4.xでSIZEを使わずにＨＲを太くしたい場合、
みなさんどのようにしてますでしょう。ＣＳＳでは無理なのでしょうか。

　それと、ＮＮ６で「○○○○○……」という内容をＴＡＢＬＥで表示させるとき、
ワードラップ（？）のように一行で表示しようとするため、幅指定がかなり
狂ってしまうのですが、どなたかこれの回避方法をご存じでしょうか。

今（ｗ　気付いたんですが、
BODY { text-align:center; }
で調子良く動いてくれます。

やっと<Center>からも<Table Align="center">からも
逃れられると一人で喜んでるんですが、
これは文法的にアリなんでしょうか？　なんか違和感が。

ｶﾞｲｼｭﾂだったらごめんなさい。嬉しくて（ｗ

>750
一体どれについてのことを言っているのかわからないが（何が調子いいの？），
body{text-align: center;} と書くのは多分間違っている
table（その他）のセンタリングについては FAQ です

>>751さん

うわちゃぁ〜　ごめんなさい。スレの流れと全く関係ない話だったんです。

単に自分のサイトをいじってたんでした。
浮かれて書くの忘れてました。ごめんなさいいぃぃ

でもやっぱり間違いなんですね…　

>>751
http://east.portland.ne.jp/~sigekazu/css/text.htm
に

> BODYもブロックなので、text-alignをcenterに設定すれば、BODYと値を引き継いだ子孫ブロック要素は、
インラインのセンタリングを行います。

と書いてあるし、別に間違いじゃないと思います。

テーブルの内容ではなく、テーブル“自体”がセンタリングされてしまっているのなら、
それはブラウザのバグだと思いますが。

>753
あ，うん，>750 に <table align="center"> と書いてあるのを受けて，だよ．
おそらく「テーブルの内容をセンタリングしたいのではなく，テーブルそのものをセンタリングしようとした」と
判断したのだけど．まあ，本人じゃないので思い過ごしかもしれないな．

>>753さん、>>751さん

はい、テーブル自体をセンタリングしてくれるもんだと思ってました。
そうですか、ブラウザの解釈がおかしいのですか。

横幅が可変なテーブルをＣＳＳでセンタリングしたかったんですが、
やっぱ今んとこ無理みたいっすね。

ひっかきまわしてすんませんしたー。

>>755
横幅が可変なテーブルをセンタリングするなら…
テーブルに
margin-left:xx%;
margin-right:xx%
を指定すれば100-(xx*2)%の幅のテーブルができるよ。

亀レスすんません。
指摘していただいた変なところを直し、再起動してから見たら、
正常にCSSが働いてくれました。

この度はありがとうございました。
今後も精進します。

昨日からｈｔｍｌ＆ｃｓｓ始めたんですが、
ｖｌｉｎｋの色を外部ｃｓｓファイルで（例えば）ｇｒｅｅｎに
したいときはどう書けばよろしいでしょうか？
あてずっぽで、
body {vlink-color: green}
とかやってみましたが、ダメでした。
どうか教えてください。よろしくお願いします。

a:link {color:unko;}
a:active {color:timpo;}
a:visited {color:green;}

あらら〜。ありがとうございました。
がんばりマッスル。

あと、unko と timpo ってどんな色ですか？ＲＧＢで指定してください。

.unko { color: #663300; }

>>760
ネタはやめれ

>>761
それもやめれ

Windowsでフォントがアンチエイリアスされる条件って何だろう？
画面のプロパティ->効果->スクリーンフォントの〜 にチェックした
からといって必ずしもならないようだし。大きな文字でギザギザだと
格好悪いよね。

諸先生方へ質問

<p style="height:100%;background:#f00;text-align:center;vertical-align:middle;">
<img src="hoge.jpg">
</p>

どうしてこれで画像が画面中央にセンタリング出来ないのでしょうか？
IE5.5 SP2です