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

CSSに関する質問はこちらへどうぞ。　※　ﾏﾀｰﾘ進行推奨　※

■■■■■　質問のやり方　■■■■■
・まず解説サイト （かなりわかりやすい） で基礎を勉強してください。
・質問の前にはまず【FAQ】を参照してください。
・【FAQ】でもわからなかった場合は、過去ログを検索しましょう。
　WinIEの場合は、[Ctrl+F]で検索できます。
・IE などではまだ対応できていない要素などやバグが多数存在しますので、
　【関連スレ】の「バグ辞典」に目を通しておきましょう。

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

「環境を書け」とか「ソースは？」と求められたときは
応じるようにしましょう。回答が早く返るようにするためです。
OSやブラウザのヴァージョンについても必ず明記してください。
特にNetscapeは、4までと6以降でまったく別物です。

過去スレや関連リンクは>>2-10

【過去ログ】
　http://mentai.2ch.net/hp/kako/974/974934062.html
　http://natto.2ch.net/hp/kako/984/984113434.html
　http://natto.2ch.net/hp/kako/992/992992981.html
　http://pc.2ch.net/hp/kako/996/996828258.html
　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
　http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
　http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
　http://pc3.2ch.net/test/read.cgi/hp/1025346520/
　http://pc3.2ch.net/test/read.cgi/hp/1028646616/
　http://pc3.2ch.net/test/read.cgi/hp/1031773943/
　http://pc3.2ch.net/test/read.cgi/hp/1034922586/
　http://pc3.2ch.net/test/read.cgi/hp/1038437758/

【前スレ】
　http://pc2.2ch.net/test/read.cgi/hp/1041641395/

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

【仕様書】
・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
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

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

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/index.html
・（　´∀｀）＜ CSS でイケてるデザインサイトリンク集
　http://webcafe.zive.net/~css/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://strict.jp/~sappari/2ch/css.php
・ブラウザによる振り分け
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

【FAQ】

Q: IEで見ると大丈夫なのに、Netscape6（or7）で見ると、横スクロールバーが出てしまうのですが……

A: WinIEのボックス・モデルが間違ってるからです。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
widthプロパティは、要素の内容領域の幅を指定するプロパティですが、
Windows版 Internet Explorer は、ボーダー領域 + パディング領域 + 内容領域 の幅で
計算されてしまいます。
Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table（や、その他のブロック要素）をセンタリングできません。IEではセンタリングされるのに……

A: IEの実装が間違っています。くわしくは下記のページをごらんください。

http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html

Q: CSSで擬似フレームってどうやるの？
A: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html

Q: CSSで段組するには？
A: 下記などを参照して下さい。

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

Q: なんかMacIEやOperaでフロートの表示が崩れるみたいなんですけど？
A: floatさせる要素にはwidth指定が必須（img要素以外）。
　　これ、CSSの仕様書の決まりなんです。WinIEが勝手に補ってるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html

こんなもんかな
スレたて苦手

>>1
乙彼〜

|　 |
|　 |∧_∧
|＿|´･ω･`) そ〜〜・・・　
|鬱|ｏ乙 ｏ 　　　　　　
|￣|―ｕ'
""""""""""
|　 |
|　 |∧∧
|＿|･ω･`)
|鬱|ｏ乙ｏ.　　　　
|￣|―ｕ'　
""""""""""
|　 |
|　 |　∧∧
|＿|(´･ω･`)
|鬱|ｏ　　 ヾ　
|￣|―ｕ' 　 乙　<ｺﾄｯ
""""""""""""""""
|　 |
|＿|　　ﾋﾟｬｯ!
|鬱| ミ
|￣|　　　　　乙　　
""""""""""""""""

もうこっちに質問してもいいんでしょうか。

メニューをちゃんと<ul>と<li>で作ったのはいいんですが、
<li>がインデントされてしまいます。

こんなスタイルを適用しています
ul{
　padding: 0;
}
li{
　margin: 0;
　padding: 0;
　list-style-type: 0;
}

これだけでは左にピッチリくっついてくれないのでしょうか？

>>10
ul {
margin-left: 0;
padding-left: 0;
}

>>1
乙

>>10
list-style-type: none;
じゃなかったっけ？

>>1
使ってくれよ、と思った
http://pc2.2ch.net/test/read.cgi/hp/1041641395/940n

【FAQ】
http://fake_lint.tripod.co.jp/css.html#faq
【過去ログ】
http://fake_lint.tripod.co.jp/css.html#log
【関連リンク】
http://fake_lint.tripod.co.jp/css.html#related

早速すいません。
web初心者スレッドから誘導されてきました。

クラス指定したの中のタグにのみスタイルを適応させたいのですが、
どうやったらいいでしょうか？

例えば、<body class="index">とつけた中のddは背景を黒に
<body class="top">とつけた中のddは背景を赤にしたいのです。

.index dd {background-color:black;}
.top dd {background-color:red;}

ってやってもダメだったんですが、やり方教えてください

>>15
先ずは >>1 を読め。
>OSやブラウザのヴァージョンについても必ず明記してください。
>特にNetscapeは、4までと6以降でまったく別物です。

>>15
それでいいと思うんだけど。
WinXP IE6 と Netscape7 では反映されるよ。
あなたはどのブラウザで確認してるの？

.index dl dd { background-color:#000000; }
dl はさんでも意味ないかな。

>16-17
すいませんでした。　IEの6.0です。

なんかうまいこといかないのです。
やり方が間違っていないのなら、もういっかい見直してみます

>16-17

ごめんなさい、私がアホでした。　　　　できました。

スタイルシートの順番間違えて、
.index dlって指定したあとで、dlの設定書いちゃってました。
ほんとごめんなさい。

死ね

IE6SP1くらいのやつでbodyのボーダースタイルにdottedとdouble,dashedを指定したら見た目がsolidと変わらないんですがこんなもんですか?

>>21
IEじゃdoubleは太さを3px以上にしないとsolidと見た目が変わらん。
ついでに1pxに指定したdottedとdashedは見た目が一緒。

>>22
body {
color : #383838;
background-color : #e8e8e8;
margin : 0;
border : 10mm dotted #ffffff;
padding : 0;
}

こんな感じでいいですか?

>>23
mm指定はやめなさい。ただちにやめなさい。

ボーダーならpxかemがいいよね

>>23
mmよりはpxかemのほうがいいんでない？

>25

>26

入籍おめでと。

シアワセニシテネ

仲人を務めさせていただきます

emで指定すると同じタグの文字によって大きさが決まってもControl+ホイールぐりぐりでは長さが変わらないんですね。

まちがえた32→23
未来の人になっちゃった。

>>29
だから、mmなのか…

>>29
borderだったらpxでもいいだろ
ちっさいとこなんだし

何も分かってない

（´-`）.｡oO（駄レス書くなら、説明してあげればいいのに。

>>33
それは俺がいつも思うことだ。
確かにそうだよな。ちゃちゃいれるぐらいならだまってりゃいいんだ。
みんなキモに命じて桶よ。
俺はいま精液がキーボードにかかっていらいらしている。
コンビニサークルＫサンクス来期４５０店舗を閉鎖だってよ。
ＵＳＪなんてもういかねーよ。
殺人かな？２４歳ＯＬ首吊り状態で発見された。
今俺は何をしてるの？

>>35
ｷﾓｲ。

>>36
豚の耳は黙れ

おこめけんでおめこをなめるのは外務省
ちんぽるぷー

俺はお前がよく理解できるよ

>>38
基地がいはどっかいけ

>>39
照れるな馬鹿

お前の首を鑿で刺すぞ。

アジアの☆になりたいか？


亀い静かは来た

その調子で向こう埋め立てとけよ
こっちには出てくんな

その向こう↓
http://pc2.2ch.net/test/read.cgi/hp/1041641395/

言われなくても書き込んである。

これだから公務員は５時に帰るん駄ｙ

ＣＳＳで質問がるのですが、
フロートというのは、どういうものなんですか？
いや、説明とかは読みました。
どうやら段組とかに使うらしいですが、フロートってなんか浮いてるんですか

最近のネタって全然笑えないよな。ほんと。

ねたじゃねんだよたこ
まじでフロートつかったことねんだよ。
フロートっていうと浮いてる感じすんだろ？

あー、浮いてる浮いてる。浮きまくってるよ、おまえもボックス領域も。

>>48
なんとなくわかった。

裸でもみあうか？

↓この後衝撃の質問が！！！！！！！

↓Skip

→↑Reverse

div要素に設定したクラスに、background-colorをいつも厳密に記述してますか？
かなりのページにわたって利用したクラスをlintにかけたら、back...が
指定されてないと出た。ページの背景色が違う。。。めんどくさくないですか？

>>54
color と background-colorはペアですたい。

>>54
指定したくなかったら、
background-color:transparent;
にするべし。んで、辞書にでも食わせとけ。

CSS勉強始めなんですが、こんな事多くっていやになる。
ペアだとは学んでいましたが、背景がイラストの時とか、出したくないじゃないですか。
できる方々は、どう考えるのだろう。

嫌ならやめれば良いよ。
仕事ならそうはいかないだろうけど、
趣味でなら無理して嫌な思いする必要ないし。

>>57
>>56

>>57
嫌でもやめちゃ、いけない。
良い癖をつければ、後でためになる。仕事・趣味関係無しに。
そういう物事の考え方をしてても進歩なし。仕事・趣味関係無しに。

>>56
有難う。規定値透明の値があったんだね。確認せずに57書いた。
THX!

確認せずに質問して、「いやになる」とか言っちゃって・・・
凄く失礼なことのような・・・

* {color: ..., background: transparent none;}

, -> ;
失礼

http://www.fromdfj.net/html/index.shtml
上のサイトで幅固定なわけですけども、こういうのもだめなんでしょうか？


あと何故かhttp://tohoho.wakusei.ne.jp/wwwcss.htmで
各項目にいくと必ずブラウザＩＥが落ちるんですが、みなさんはなんともないですか？

>60HTML初学で同時にCSSも勉強してて、初日にささっとページ作れたけど、
本当の基礎は難しい（論理/物理構造からの理解）と感じてる。
趣味だけど、辛くてもやめないよ。てきとー…なページなら作れるけど、ヤだし。
レス有難う。

>>66
がんばれよ。一生

>>66
がんばって！p(^-^)q

　p(^-^) q
└（　 ）┘
　　｜｜
　⊂　　つ

下の写真を見て答えなさい
http://lounge.dip.jp/upboard/img-box/img20030209215834.jpg

この写真が撮影された理由

>>70
ぐろ、と言って見る

<li>にheightを設定した時、
中にいれるテキストを垂直方向に
真ん中に持ってくることってできますか？

↑
え？

一括指定について教えてください。
背景画像の固定、フォント（face、color、size)、英文のフォント指定、スクロールバーの色指定など
全部ひとつの<style>〜</style>の中に入れるにはどう書けばいいんですか？
それと、日本文と英文のそれぞれのフォント指定はどう書けばいいんでしょうか？

>>74
>>3-4

高校受験終わったからかなぁ……

>>74
検索すりゃあ分かるようなことをいちいちここで聞かないよーにね。

すいません、リンク先調べてみました。
あと、日本語と英字の指定の仕方だけがわかりません。

>>78
お前の検索の仕方が悪いだけだよ。

「CSS　フォント指定　英語　日本語」あたりで。

余計なレスすると長引くんだからとっとと教えてかえってもらえよ
かすばっかだな。
お前なんか別に来なくていいからさ。

どうやら>>80がズバリ教えてくれるみたいだぞ

ばかはしね
わからないから聞いてるんだよ

まず、HTMLの英語の部分に、lang="en"と明記し、CSSに、

[lang="en"] { font-family : "Times New Roman",serif; }

なとと指定します。

<p>まんこのことを英語では<span lang="en">cunt</span>と言います。</p>

この場合、cuntという部分にだけ、指定が適用されます。
ただし、IEは未対応です。

>>83
<p><dfn lang="en">cunt</dfn>は日本語でまんこの意味です。</p>
の方が言いと思うYP。
いや、どうでもいいんだけど。

今日見てて思ったけど、
sageてない香具師多すぎ。余計なことはsageてよ。


-------------------------解決-------------------------

わかったよ

次の質問どぞー

<dl>
<dt>キャラ名</dt>　　っていうのを
<dd>読み方</dd>　　　　[キャラ名][読み方][持ち物][行動]
<dd>持ち物</dd>　　　　[キャラ名][読み方][持ち物][行動]
<dd>行動</dd>　　　　　と横に並べたいのですがどうしたらいいでしょう？

<dt>キャラ名</dt>　　　ddにclass="1"〜class="3"までつけて
<dd>読み方</dd>　　　CSSで
<dd>持ち物</dd>　　　　dt {float:left; width:20%;}
<dd>行動</dd>　　　　　dd .1 {float:left; width:30%;}　　dd .2{float:left; width:15%;}
</dl>　　　　　　　　　　　dd .3 {clear:left; width:40%:}

とやってもできませんでした。やり方教えてもらえませんでしょうか？

>>88
class名の先頭には数字は使えないけどそのせいじゃないかね？

>>88
li.name {clear:left;float:left; width:20%;}
li.reading {float:left; width:30%;}
li.item {float:left; width:10%;}
li.action {float:left; width:40%;}

<ul>
<li class="name">キャラ名</li>
<li class="reading">読み方</li>
<li class="item">持ち物</li>
<li class="action">行動</li>

<li class="name">キャラ名</li>
<li class="reading">読み方</li>
<li class="item">持ち物</li>
<li class="action">行動</li>
</ul>

widthの%は100%超えてるわ、クラス名は数字からはじめるわ。
<dd>やたらでてくるわ。

>89

あぁ、すいません。
でもa,b,cにしてもできませんでした

とえらそうなこと書いておきながらふと思った。

li.name {clear:left;float:left; width:20%;}

clear:left;float:left;
これってありよね？

これから自分で調べてきますが、博識のかたダメならダメだししてください

>90
すいません（汗。

そのまま書いてみたらできました。
ところで、リストの最初（キャラ名）がなぜか左端によらないのですが、
なんでなんでしょう？（2-3文字分くらい左に隙間ができるのですが）
IE6.0　XP　800*600

clear:leftはnameの所につかうのですね！　ずっと最後（action)に
使ってました・・・

この場合 width が100%になるから clear:leftする必要もないのかなぁ
もう一度出直してきます。スレ汚しｽﾏｿ

>>93 ごめんこれ追加
ul {margin-left:0;padding-left:0}
li { list-style-type:none;}

>94
おおぉ！できました

すいません、もう一つ。
これって画面のサイズをちっちゃくすると段落がたがたになって
しまいますよね？

なんとか回避する方法ってありますでしょうか？（table使わずに）

つかこの<dl>の使い方自体は問題ないのでは？
で90のにするならdisplay: inlineのほうが簡単では？

>96

え〜と、display:inlineを使えっていうのは、dlをインライン要素にしろ！
ってことでしょうか？

すいません、それと横に並べることがいまいち頭の中で繋がらないです（TT

言い訳：各キャラクターの解説の箇条書きなので、dlを使ってみました。

table使った方が早くないか？

>>95
こういう場合は、表で正しいから、表使ってもいいんだけどな。

>>97
いや<ul>使うなら<li>にdisplay:inlineしたほうがめんどくさくなくてよいかと。
そしてこの場合表なんだからtableでいいじゃんって意見に禿同。

<table>使えよ
本末転倒になってきてるぞ

>98-100
tableですか。
なんかtableを使ってイイ場面というのがいまいちよくわからなくて。
解説の箇条書きならdlかなぁとか思ってたので・・・。

ありがとうございました。
>95　自己レス。毎回　</ul>とか</dl>で閉じればできました。すいません

>>102
いやわかるよその気持ち。
ちょっと複雑なリストになってくるとこれ表にしたほういいよなみたいな。
でもリストでズラズラ−っと並べられるより表にしたほうが見やすいって時は
迷わずtable使うべし。

ってスレ違いだった。すいません。

>>104
ｽﾚ違いｳｻﾞｲ。したり顔で、わかるよ。とか言ってんなよ。

>>105
まあまあ。

>105
したり顔でしたり顔の奴にうざいっていうお前が一番うざい。

>>107
まあまあ。

105と107は今日ﾁｮｺもらえなかった香具師

いやわかるよその気持ち。

>>110
185を思い出しますた。
わたし185さんのゆーことよっくわかります、だっけか。

すみませんが、質問させて下さい。
なるべくCSSでレイアウトしようと思っているのですが、やっていいことなのかわかりません。
解像度に依存されること無く、画面の真ん中に画像と画像に回り込んだテキストを置きたいのですが、
横方向では上手くいくのですが、やっぱり縦方向では上にへばりついたままです。
margin : autoも効果ナシでした。
それで、
BODY{background-image : url(hoge.jpg);background-repeat : no-repeat;background-position:10% 50%;}
として、重ならないような位置にDIV（中にテキスト）の位置指定をしています。
しかし、CSSオフにすると間抜けなページになってしまいます（涙）。
あきらめてTABLEレイアウトした方がいいですか？
アフォな質問ですが、よろしくおながいします。

ど真ん中にこだわらないで適当に上マージン取れば？ %で
Web媒体の特性を把握してからレイアウト考えよう

>>1へ。
　>>2の【関連スレ】がみなpc3.2ch.netのままで、つながらんぞよ。
　次回スレッド立てる人は注意しよう。

まあ>>14もあるしな。↓
　「CSS、スタイルシート質問スレッド」テンプレ
　http://fake_lint.tripod.co.jp/css.html

>>112
hoge.jpgが120*120と仮定。
.hoge {
  margin-top:-60px;
  margin-left:-60px;
  position:absolute;
  top:50%;
  left:50%;
}

<img src="hoge.jpg" alt="hogehoge" width="120" height="120" class="hoge">

回り込みは適当に（w

質問する際にHTMLファイルとCSSファイルを当たり障り無く加工して、
うｐロダにでも上げると適切な答えが返って来やすくなります。

W3C信者にサイトを正しい記述に直して貰うスレ
っぽくなってまいりました。

煽りじゃなくて、
現状でサポートされてない部分が多いＣＳＳでレイアウトするのと
テーブルレイアウト
どちらがユーザビリティに優れているのでしょうか？

>>119
　サポートされていない部分が多いCSSでレイアウト
　テーブルタグでレイアウト
　→別のレイアウトにする

http://minatsu.pos.to/
↑の様にリストを横に並べつつマーカーを表示させるにはどうしたらよいのですか？

>>121
そこのCSSソースは見たの？　見てもわからなかったらまた訊いて。

>>122
個人的にはMozillaのDOM Inspectorで見ることをおすすめしたい。
フリーだし。

>>122
見ても分からなかったです・・・

>>124
質問の下手な人ですね。
わからなかった箇所を示してくれなくちゃ。
あと、list-style-imageって知ってるのかな？
　http://msugai.fc2web.com/web/CSS/list.html#img

>>125
list-style-image は diplay プロパティの値が list-item でないと有効でない。
したがって、津波荘のように inline などで横に並べると無効になる。
（少なくとも仕様上はそのような挙動が正しい。）

>>121
津波荘は各 li 要素の background に画像を指定することで、
横に並べつつ“疑似マーカー”を表示している（ように思える）。

>>126 誤字 diplay → display ゴメン

>>121
追記：import されているのをたどっていけ

>>121
のサイト importしてるｃｓｓファイルはアクセス制限かけてるね。

>>124
恐らく、liにクラスとid振って

display : inline;とdisplay:list-item; と　list-style-imageとmargin, padding
を駆使すればできるよ。

そうやってるみたいだし。

でも、津波莊のCSSはlist-style-imageを指定してますよ。
WinIEでもNN7でもマーカー画像が見えるし。

>>128
アクセス制限なんてかけてません。ディレクトり見誤っただけです。ｽﾏｿ

>>129は>>126の前半へのレスね。

すみませんが、質問させて下さい。
なるべくCSSでレイアウトしようと思っているのですが、やっていいことなのかわかりません。
解像度に依存されること無く、画面の真ん中に画像と画像に回り込んだテキストを置きたいのですが、
横方向では上手くいくのですが、やっぱり縦方向では上にへばりついたままです。
margin : autoも効果ナシでした。
それで、
BODY{background-image : url(hoge.jpg);background-repeat : no-repeat;background-position:10% 50%;}
として、重ならないような位置にDIV（中にテキスト）の位置指定をしています。
しかし、CSSオフにすると間抜けなページになってしまいます（涙）。
あきらめてTABLEレイアウトした方がいいですか？
アフォな質問ですが、よろしくおながいします。

>>125
list-style-imageはdisplay:list-itemの要素にしか効果が出ないのが正しいので
それを使って>>121のようなことをするのは特定ブラウザの実装依存になり宜しくない
という話が確か以前にも出ていた気がする。

>>132
img { display: none; }
とでも書いてCSSオン時は背景・CSSオフ時はimgで見せるようにしては？

　　　　　　　　∧　 ∧
　　　　　　　　|1/　|1/
　　　　　　／￣￣￣｀ヽ、
　　　　　 /　　　,,　 　　　ヽ
　　　 　 /　 丿 　＼　　　 |
　　　　　|　（●） （●）　　 |
　　　 　/　　　　　　　　　　| 　さすがのムーミンも
　　 　/　　　　　　　 ^　　　|
　　　{　　　　　　 　 /|　　　| 　このスレには
　　 　ヽ、.　　　　／丿ノ 　 |
　 　　　 ｀`ー――‐''"　　 　| 　呆れ果てているようです
　 　 　 ./　　　　　　　 　.　| |
　(⌒―|　　　　　　　 　 |　ﾞ―^⌒)
　.￣￣|　　　　　　　　　￣￣|￣

>>113
>>116
説明不足にも関わらず、親切なアドバイスありがとうございました。
お陰様で出来ました〜（嬉）。
>>118
妙な流れ作ってしまってスマソです（汗）。
回線切って逝てきまつ。

ちなみに132は私ではないです。

質問させてください
body{
color: #fff;
background: #000 url("../bg.gif") repeat-y 0% 0%;
border-left: solid #999 1em;
}

という設定をしています。
IEで見ると問題ないのですが
Mozilla,Operaで見るとbg.gifがボーダーの下に隠れてしまいます。
ボーダーのぴったり隣り合わせにbg.gifを置きたいのですがどうすればできますか？

>>138　>>6をごらん。
【FAQ】
A: WinIEのボックス・モデルが間違ってるからです。

>>138
background: #000 url("../bg.gif") repeat-y 0% 1em;
で、どうです？

border-left: solid #999 1em;
を含めた背景画像を用意すればいいと思った。

>>139
ありがとうございます
対策を教えていただけませんでしょうか

>>140
ありがとうございます
しかしIEで崩れてしまいます。
申し訳ありません。

>>141
ありがとうございます。
しかし画像のサイズが大きくなってしまうので
その方法は最終手段ということにしようと思っています。
申し訳ありません

>>142
とりあえずマイクロソフトに『ふざけんな(ﾟДﾟ)ｺﾞﾙｧ!』とメールを送ることをお勧めします。

>>142
IEのバージョンは？
6.0でDOCTYPEスイッチが標準準拠モードになってれば大丈夫でないかい？
>>118
正しいhtmlのほうがcssを適用しやすいから多少はしょうがないような。

>>144
6.0です。
Doctype宣言は
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
です。

>>145
そのDOCTYPE宣言の前に
<?xml version="1.0"?>
ってつけてみたら大丈夫だと思う。

>>145
<?xml version="1.0" encoding="Shift_JIS"?>
はつけていますがどうにも効果が無いです。

ウザくて申し訳ないです

訂正
すいません >>146でした

あ、嘘書いてしまった。
>>146は無視してください。

>>147
それを削れば標準準拠モードになります。
lintには怒られちゃうけどxhtmlで標準準拠モードにするには
そのxml宣言を削るしかないです。

どうもありがとうございますた

XHTMLのことをよくわかってないIE6は、XML宣言を「余計な文字列」とみなし、
XHTML文書を互換モードで表示してしまう。
IE6の標準モードで表示される文書を書きたかったら、HTML4.01 strict
にするしかない。

まあ、IE5.5以前のユーザが依然として多い現状では、標準モードでも
互換モードでも意図通りとなるCSSを書くのが無難だと思う。

Opera7にもDOCスイッチってあるの？
box-sizing: border-boxは効かないみたいだし。

>>152

.htacsessいじってhttpレスポンスヘッダで文字コードを明示
するようにすればxml宣言はいらないはずです。

つまり標準準拠モードでxhtmlも使えるわけです。

>>153
http://www.opera.com/docs/specs/doctype/

>box-sizing: border-boxは効かないみたいだし。
嘘つくな。効きます。

>>155
サンクス。効くんだ。書き方間違ってたんだな。

こんにちは。
Hタグを使うと次行に絶対に改行が入りますが、それを強引に解除させる方法は
ないものでしょうか?

>>157
こんにちは。
hn { display: inline }

つーか、変なマークアップしてそう。

157です。
>158
早いレスどうもありがとう!早速試してみます。

minatsuさん自身が答えてくれたので、
>>121は解決ということで。

>>161
background-imageだったんだ。

>>161
つーか一応報告しておけよ
どうやっていたんだよ

後に他の人が同じところでつまずくことを考えて
解決した方法を 残していくのが常識。

報告汁。

>>121の津波荘は
background : url(〜) no-repeat 0px 50%;
ってやっているね。

つまり>>126が正しかったってこと？
list-style-image 指定してるとか主張していた奴は何だったの？

>>166
うん（≫121の場合は）。
display: inline; じゃマーカーは出ない（仕様）だっての

俺も以前、background-imageで同じことやってたけど、IE5.0以前は、
inlineに対するpaddingが効かないので、background-imageが文字と
重なって見づらくなることに気づいてやめた。
津波荘さんはどうやって回避してるんだろう。
それとも、IE5.0以前は放置なのかな。

リストを横並びにするにはどうすればいいでしょうか？

>>169
display:inline
>1をよめ。そして実行しろ。この糞野郎。

>>170
なんだとこの童貞インポテンツが。
display:inlineなんて糞要素使ってられっか、早く別のやり方教えろ。

糞要素　糞要素
糞　要　素

>>168
>津波荘さんはどうやって回避してるんだろう。
特に回避とかはしていないようだ。

>それとも、IE5.0以前は放置なのかな。
真面に実装していない WinIE5.0以前が悪い。
WinIE5.0以前とか Mozilla Classic とかは無視するに限る。

>>171
float: leftでもしとけや糞が！

>>174
なんだよフロートって！糞じゃん！！
ポジションでやりてーんだよ。なんとかしろや。

>>168
IE5.0以前なんて今じゃほぼいないに等しいから安心しる！

…うち一人だけIE5.0の常連がいる。どうしましょう？

>>176
アクセス禁止しちまえばいいんじゃないか！？なんつってな！がはは！！（ｗ

>>175
マジレスするとpositionでも可能。
んなめんどくせーことやってられっかボケナスが！！！

もういいよ！！ふざけんなよ！！やってられっかよ！

　すいません、おしえてください。

>>173
レスありがとう。
でも、IE5.0って、使ってる人結構多いからいまいち踏み切れないのよね。

>>176
ひとりだけなら、メールして
「お願いですからアップデートしてください」
と頼んでみるとか。

>>180

li { display : inline; margin : 0 1em 0 0; }

これで、リストの中身が横並びになる。

ボックスを中央に配置したいのですが、上手い方法はないものでしょうか。
positionを使うとIEかNNどちらかの配置がおかしくなってしまうのですが。

>>183
margin-left: auto; margin-right: auto;
縦方向に中央というならちょっとわからん。

>>183
そう云う、レイアウトは自滅するから止めとけ。
ボックスの高さは内容量に依存するかな。
それと top と bottom のパーセント値は、コンテナブロックの高さが
明示されていないと「auto」として扱われるから注意しろよ。
垂直方向に中央ってのは、HTML+CSS の仕様の範疇じゃまず無理だな。

互換モード+テーブルレイアウトとかで可能だが、
初心者が良くやりたがる、カステクだから止めとけ。

IEで、右のスクロールバーを
左に移すことは可能ですか？

>>184
水平方向はこんな便利な技があったんですね。助かりました。
こんな夜中にどうもありがとうございます。

>>185
垂直の方は無理ですか。
>top と bottom のパーセント値は、コンテナブロックの高さが
明示されていないと「auto」として扱われるから注意しろよ。
あ、全然知らなかったです。これは親切にどうも。

>>186
無理かも。

>>186
filterでページ全体を反転させることはできるけど、
内容全部、反転されるから意味がない。

つーか、そんな操作性０の作り方はやめたほうがいいよ。

>186
body {direction: rtl;}
body * {direction: ltr;}

>>190
変なことを教えるな大馬鹿者。
direction は、双方向書字を再現する為のものだ。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#direction

>>190
（ﾟ∀ﾟ）ｻﾝｸｽｺ

>>191
そういうことはあまり気にしないので大丈夫です

>>192
てめぇが気にするかしないかなんて関係ねぇんだよ。
ユーザーが迷惑するからヤメロってんだよ。
一昨日来やがれ、アフォが。

body * {direction: ltr;} がうまく効かなかったので
body {direction: rtl; text-align : left;} で代用してみました。
なんとなく大丈夫そうなのでこれでいってみようと思います。

>>190
それじゃ不思議マークアップと変わらんだろ。

ブラクラがまた一つネット上に誕生しました。

strictにがちがちにやれ、とは言わないけど不思議マークアップのお手伝いはここではやらないでほしいよな。

>>193
あなたはユーザなのですか？

>>194
氏ね。ウェブから消えろ。
リアルワールドからも消えろ。

>>198
ユーザビリティの対象がユーザなら、閲覧者＝ユーザなわけで、
>>193がどうかとかは無関係なわけで。
とにかく、不思議なお手伝いは不思議を生む要因になるので、やめてほしいですね。

>>197
でもそうゆうのってどこで聞けばいいのですか？
当方2chﾌﾞﾗｳｻﾞのスキンを少し作ってるんですけど
どうしても今後必要な技術だったんで聞いてみました。
別にホムーページとして公開するわけじゃないんで
まぁ大目に見てほしいとか思った次第ですが。

>>201
2chブラウザのスキンで、左にバーが必要？どんな状態だよ？意味不明。

>>201
>どうしても今後必要な技術だったんで聞いてみました。
どうして必要なのか論理的に述べてみよ。

>別にホムーページとして公開するわけじゃないんで
ホムーページとは初耳だ。新手のｶﾙﾄ宗教団体かなんかのページか。

>>203
ホムーペジならわかるんだけどな。

本当は左右にスクロールバーが欲しいんだけど
とりあえず片方ずつやってみようと思って

>左右にスクロールバーが欲しいんだけど
そんなインタフェイス見た事ねぇぞ、ゴラァ！

便乗質問いいですか？
アップダウンコントロールの代わりにスクロールバーを使いたいんだけど
スクロールバーだけを表示させるのって出来ますか？

>>207
質問いいですか？
アップダウンコントロールってなんですか？

>>208
http://www.bcap.co.jp/hanafusa/VBHLP/updown.htm
こういうのです

以後194と207には反応禁止の方向で良いでしょうか？

>>210
いいですよ。

>>210
その前に質問いいですか？
スクロールバーだけを表示させるのは
・出来るけど推奨されない
・出来ない
どちらですか？

>>212
一回だけ答えるね。
VBはVBスレで。

すみません
このままではまっとうなみなさんにご迷惑おかけするので
推奨から離れた使用方法を追求する専用スレを立てます

>>213
VBではありません。そのリンクはVBのページですが
それと同様の画面をHTMLで表現したいのです

>>215
VBじゃないのに、アップダウンコントロール？
プルダウンメニューのことか？

何か面白い奴がいるな。
このままヲチさせてもらうよ。

>>216
プルダウンではないです。
VBでいうところのアップダウンコントロールと同等の機能を
Web上でスクロールバーを使って簡易的に実現しようと思っています。
また、スクロールバーを単体で表示させることができるなら
それを応用してボリュームバーも作りたいと考えています。
(スクロール量/係数＝ボリュームとして使用を検討中）

とりあえず次の質問どうぞ

>>218
http://report.s22.xrea.com/
ここを参考にして、divのスクロールバーの幅を変えればできると思う。

>>218
一般にはスピンボタンと呼ぶ模様

おい、VB使ってるならPG=技術者な訳だろ、
とりあえず自分で考えろや(ﾟДﾟ)ｺﾞﾙｧ!

（　ﾟдﾟ）ﾎﾟｶｰﾝ

(　ﾟдﾟ）ﾎﾟｶｰﾝ

(　ﾟдﾟ)ﾎﾟｶｰﾝ

（´-`）.｡oO（便乗ﾎﾟｶｰﾝはわかってない香具師も混ざってそう。

( ﾟдﾟ)ﾎﾟｶｰﾝ

>>222
VBﾌﾟﾛｸﾞﾗﾏなんざ糞ばかり（　´,_ゝ`）

>>223-225 >>227
全部微妙に違うな

>>228
正直、「VBプログラマは糞だから教えてもどうせ理解しねーよ」とどっち書こうか迷った。

次の質問どぞー

皆さんにとってCSSとはどういう存在ですか

>>232
んー、やっぱスタイルシートって感じかな。

>>232
心の支えです。

>>232
一緒にいると煩わしいけど、
いなきゃいないで淋しいかな

>>232
カレーには必ず入れるよ

imgを中央寄せにしたいのですが
img {text-align:center;}ってやってもよってくれないのですが、
どうしたらいいでしょう？

現在は、<p class="center"><img〜></p>ってやって
.center {text-align:center;}とごまかしてるのですが・・・

>>237
img {
display: block;
margin-left: auto;
margin-right: auto;
}

つーかbody直下にimg置けたっけ？

>>232
パワポ使ってるときに，CSSとJavascriptでレイアウトとかしてプレゼン出来るソフトが（　ﾟдﾟ)ﾎｽｨ…と思った，って感じ．

>237
ごまかすも何もそれで正しいと思いますが

>238
即レスどもです。
display要素を使うのですね。ありがとうございます。
使ったことない要素なので、色々やってみます！

>240
毎回、クラスを指定するのが鬱陶しくて・・・

>>237
クラス名「center」はいただけない。
（それじゃ<center>を使うのと何も変わらない）

あと、body直下にimgを置くのはよろしくないです

<p class="image"><img ... /></p>
でファイナルアンサーじゃないかな…

>>239
Mozilla(Netscape 7)やOperaならそういう使い方ができると思われ。
そもそもOperaの全画面モードは media="projection" なスタイルシートしか読まないのでそういう用途を想定していると考えられる。

ID名やclass名には
大文字小文字使えるんですよね？

>242
なるたけわかりやすいクラス名がいいかなとおもって安直に
つけてしまいましたが、クラス名につかっちゃいけない文字とかは
ないですよね？今度気をつけます。（imgはちゃんとpで囲ってます）

すいません、もう一つ聞いてもイイですか？
h1に枠線をつけたいんですが、可能でしょうか？
h1 {border-width:0 0 1 10; border-color:red;}
ってやって付箋紙みたいにしたいのですが。。。

>>245
まずやってみるベシ．ベシ！

>246
うぅ。できんかったとですたい

>245
0以外の数値には単位をつけてくださいませ

>>220
ありがとう！

solid　も入れて

>>244
何が聞きたいのかわからん…。
大文字も小文字も使えなかったら何使うんだって話。

とりあえず、大文字小文字を混ぜていいのか？
という意味ならYes。

大文字、小文字の区別があるの？を聞きたいのなら
標準モードなら区別する。互換モードはしない。

質問の意味が違ってたら、わかりやすい日本語でお願いします。

>246
あぁ、すいません！！

>250
できました。 border-style:solid忘れてました。ありがとうございます

>>251
私の聞きたいことは全て答えて下さいました
ありがとうございました！

日記などでインデントを使う場合 blockquote は引用だからやめた方が良いようなんですが、
その場合は何を使うのが一番適切なんでしょうか。

>>242
<center>使うのとは全然違うだろ。

>>254
<p class="diary"></p>の
p.diary {padding-left:2em;}
日記の文の中で段落分けあって<p>をそこで使うなら当然
<div class="diary">ね。

>>254
インデントってtext-indentの方ではなく？
知らなかったら検索すれ

>>254
全体の余白を取りたいならmarginもしくはpadding
文章の頭だけの余白ならtext-indent

>>256-258
Thx
<p>でpaddingを使うのがいいのね。

>>1-259
氏ね。ウェブから消えろ。
リアルワールドからも消えろ。

もう春房の季節ですか？

もう春房の季節ですか？

何でも房つけちゃって。（ぷ

ポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョム

>>263
房じゃなくて厨だもんね。
春夏秋冬厨ならだいぶ前からあるし。

そういうことじゃなく

季節厨

http://tmp.2ch.net/test/read.cgi/cat/1045418127/

ぎるもねどす、へぶらけめ。
ぴぶりねりこ！>>268

おながいします

<STYLE TYPE="text/css">
<!--
BODY {
scrollbar-base-color : #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color : #000000;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #000000;
}
-->
</STYLE>

これを<head></head>のところに貼り付ければ
スクロールバーを平面的に出来る、と聞いて
あるサイトから↑のソースを貼り付けみたのですが
なんどやっても平面的になりません。
どなたか教えて頂けないでしょうか、既出だったらすいません
ちなみにIE6です

>>270
バカチン､>1を読んで出直しな

BODY を html に変えて試してみて

>271　出直してきます(´･ω･`)。気に障ってたらすいません
>772　平面的なスクロールバーになりました。ありがとうございました

リストに画像を使いたいのですが
{style-type-image:url('CSSファイルから見た画像パス');}
この指定をdlやdtにやっても一向に画像が表示されません。
ulでやったらできました。
dlの場合にはなんか他に各必要があるのでしょうか？

それともう一つ、リストに任意の言葉や画像の連続使用は可能でしょうか？
例えば、リストの先頭に「リスト」って言葉をつけたり
画像1画像2画像3と並べたいのですが。。。

>>274
list-style-***はdisplay:list-itemが指定された要素にだけ反映される。
dtにも表示させたいのならdt { display: list-item }を書き加えれ。

あとlist-style-***は継承されるので記述の簡略化のためにulやdlなどの
コンテナに指定される「ことが多い」が、それをして「ulやdlなどのコンテナにのみ
指定するためのもの」と勘違いして憶えるのは良くない。

追記。
リストのマーカーに何が使えるのかは、仕様書（邦訳でよい）のプロパティ索引からlist-style-***プロパティの説明に飛べばわかる。
文字を表示させたい場合はcontentプロパティの説明を見れ。
仕様に書いてある事はこのように自力で調べるくせを付けると良い。

img border="0"と同じ役割をするCSSはなんですか？
ついでに
<noscript>の中にimgをいれるとりんとに怒られるのですが回避方法は？

>>277
img { border:none; }

<noscript><p><img src"***" width="***" height="***" alt="***"></a></p></noscript>

間違えた。</a>は無視してくれ。

>>277
img { border-style: none; }

srictDTDでは<noscript>直下に<img>は置けないので
<noscript><p><img></p></noscript>
とか。
こっちの質問はスレ違いですよ。

× src"***"
〇 src="***"

逝ってきます

かぶったスマソ。
しかもsrictDTDって。正しくはstrictDTD。

>275-276
ども。読みにいってきます！

同一時間帯におっちょこちょいが二人いる奇跡。

マジごめん

ｹｺｰﾝしる
微笑ましい夫婦になれそうだ

>275-276
こことか　http://www.w3.org/TR/REC-CSS1#list-style
こことか　http://members.tripod.co.jp/yamashita_t/REC-CSS1J.htm#list-item-elements
読んでみたのですけど、liに画像・画像2・画像3などと
画像を続けて表示とかが書いてませんでした。

ご存じの方いたら教え頂けませんでしょうか？

>>287
仕様書にはできることしか書かれてないの。
書いてないことは「できないこと」なの。
「仕様」の意味わかってる？(´Д｀；)

仕様に書かれてないことをしようと思ったら、仕様に書かれてることや他の技術を組み合わせてやるしかないでしょう。
画像を連結しておくとかbackground-imageを使うとかいくらでも手はある。
url(img.cgi)とか指定して画像を動的に生成する手もある。

contentで代用すれば？

ポジションで段組を行なっているのですが、
深い階層にあるリンクにbackground-colorが適用されません。
hoverとactiveに設定しているのですが…。

浅い階層にあるリンクには適用されます。
なにか解決策はありませんでしょうか？

>>290
実際にどういう構造でどういうスタイルシートを用いているのか提示してください。

WinXP+IE6に激しく依存した話で申し訳ないんだけど、

IEの独自拡張のスクロールバーの色を変更されると
（たとえ一部分でも）XPのスクロールバーが
それ以前のスクロールバー風 < A > になってしまうのが気に食わないので
ユーザースタイルシートに!important指定をしてみましたが、
前述のように、どれかひとつでも変更されると
< A > になってしまうので、うまくいかないようです。

何とか、スクロールバーを弄られないようにする方法は無いのですか？
レジストリ弄るとか、リソースハッカーとかそういうワザしか使えないのかな。

#長くなってｽﾏｿ

>>291
<div class="outline">
<div class="inline">

<h2 id="top">■ ほにゃらら</h2>
<p>ほにゃらら</p>
<hr />
<h2 class="sec1">■ ほにゃらら</h2>
<ul>
<li><a href="ほにゃらら">ほにゃらら</a></li>←これが適用されないリンク
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
<hr />
<h2 class="sec1">■ ほにゃらら</h2>
<p>ほにゃらら</p>
<div class="lefts">
<noedit><script language="JavaScript" src="http://www.ほにゃらら"></script></noedit>
</div>
</div>
</div>

こんな感じです。

>>293
cssも書けよ

.outline { position:relative; width:99%; background-color: #F0FFF0; border-color:
#669966; border-width: 2px; border-style: solid; margin-top:3em; }
.inline { position:relative; width:99%; background-color: #99cc99; border-color: #669966;
border-width: 2px; border-style: solid; margin:1em 0.5em 1em 1em; }
h2 { margin: 0;border: solid; border-color: #669966; width: 50%;
padding: 0.2em 0em 0.1em 0em; font-size: 100%; background-color: #F0FFF0; }
#top { position:relative; top:-0.15em; left:-0.15em; border-width: 0px 2px 2px 0px;}
.sec1 { position:relative; left:-0.15em; border-width: 2px 2px 2px 0px; }
p { text-indent: 1em; padding: 0em 2em 0em 2em; }
.lefts { position:relative; top:-0.5em; left:0.5em; }
a:link { color:#00509f; }
a:visited{ color:#dfd; }
a:hover { background-color:#696;color:#dfd; }
a:active { color: #FF8000; text-decoration: underline;
background-color: #FFFFF0; }

こんな感じです。

アプロダ使えや

>>290>>293>>295
ちゃんと適用されてるように思えますが？
WinXP IE6 Netscape7

IE5.01で動作確認しているのですが、UAの方の問題でしょうか…。

128 名前：Name_Not_Found 投稿日：03/02/02 17:27 ???
おまいら参考にしる
http://www.annie.ne.jp/~sheepers/komain.html
http://3110.sunnyday.jp/
http://cheser25.hp.infoseek.co.jp/
http://phoenity.com/
http://www.users.yun.co.jp/~souichi/
http://d-o-b.ciao.jp/^o^/
http://www.windfarm.co.jp/
http://www.deadbydesign.com/
http://www006.upp.so-net.ne.jp/Initialz/index.html
http://raku-gaki.com/
http://akiko.kuhndesign.com/
http://apc.dip.jp/takaya/index.htm
http://www1.odn.ne.jp/~cce60200/
http://www2.ocn.ne.jp/~u.kenji/

>>298
そう。俺も同じことあった。

>>295
原因はよく分からないけど、
li a:hover { background-color:#696;color:#dfd; }
li a:active { color: #FF8000; text-decoration: underline; background-color: #FFFFF0; }
って付け加えておくとか。

CSS level2の仕様書訳の子孫セレクタと子供セレクタの違いについて教えてください。

子供セレクタのとこの説明で
DIV OL>LI Pは　DIV OL LI P
と違うのですか？

DIV OL>LI Pは
このセレクタはLIの子孫であるP要素にマッチするが、そのLI要素はOL要素の子供でなければならず、
更にそのOL要素はDIVの子孫でなければならない。閉じ不等号結合子の両側にある空白類文字は
無視されるということに注意する。

DIV OL LI Pも同じような気がするんですけど・・・。よろしく、お願いします。

>>302
こっちの探す手間が省けるからそのURIも示しましょう。

>>302

DIV OL LI P だと

<div>
　<ol>
　　<li><p>ここにマッチ</p>
　　　<ol>
　　　　<li><p>ここにもマッチ</p>
　　　</ol>
　　</li>
　</ol>
</div>

DIV OL>LI P だと

<div>
　<ol>
　　<li><p>ここにマッチ</p>
　　　<ol>
　　　　<li><p>ここにはマッチしない</p>
　　　</ol>
　　</li>
　</ol>
</div>

ごめん早とちりした。
この例だとどっちでもマッチするね。
仕様書のしょうもないミスのひとつということでしょう。

>>303
すいません、PCが固まっちゃって、再起動してました。
ここです。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#child-selectors

段組するのに、フロート以外でやるとしたら何を使いますか？

HTMLの場合、olとulの子供はliしかあり得ないので、
ol>liとol liは等しいです。
子セレクタの例としては不適当。

まあ，ol直下はliしかダメだしね

同じ所の原典。typoも多いぞ（ｗ
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

例では、
BODY>Pはbody要素内のp要素にスタイル適用
でも、
BODY Pでもbody要素内のp要素にスタイル適用されますよね？

じゃあ、
BODY>P STRONG　だと、bodyの子供セレクタのp要素内のstrongにスタイル適用される。
でも、
BODY P STRONG　でも、bodyの子孫セレクタのp要素内のstrongに適用される。

結果的に同じじゃないですか？子供セレクタの使用方法がいまいち理解できません。
初め、子孫セレクタと併用して条件分岐的な使用方法かと思いましたが、
結果的に子孫セレクタのみでできる方法しか思いつきません。

分かる方、よろしくお願いします。

>>311
body>pは
<body>
　<div>
　　<p>text</p>
　</div>
</body>
のpにはマッチしない．

>>312
あっ・・・！？　なるほど！！

と思って、確認しましたが現状で対応しているブラウザってないんですね・・・。
Netscape7.01とOpera7.02でも動作してません。。。

ってことは、例題が悪いということか。あきらめます。

返答くださった方、ありがとうございました。

>>307さんの質問が流れてしまったので、誰か答えてやってください。スンマソン

>>312
嘘書いちゃいました。Netscape7.01、Opera6.05、Opera7.02では動作するようです。
使い方は、いまいちわかりませんが。。。

スレ汚し、ｽﾏｿ

>>307
position

>>311

じゃあ、
>BODY>P STRONG　だと、bodyの子供セレクタのp要素内のstrongにスタイル適用される。
>でも、
>BODY P STRONG　でも、bodyの子孫セレクタのp要素内のstrongに適用される。

この例ならすぐに差が分かるな。

<body>
　<p><strong>〜</strong></p>
　<div class="menu">
　　<p><strong>〜</strong></p>
　</div>
</body>

BODY>P STRONGだと、最初の方の<strong></strong>にだけ適用される。

>>314
親切な方ですね。

>>316
ありがとうございあｍした。

>>308
>ol>liとol liは等しいです。
>子セレクタの例としては不適当。

嘘をつくな馬鹿が。

ul li { list-style-image: url(foo.png) } なんて指定してみろ、
ulの子孫の序列リストまでマーカー画像が適用されるだろうが。

ul li ol li { list-style-type: decimal } と指定してみろ、
今度は ul li ol li ul li に番号が振られてしまうだろうが。

従って、
ul > li { list-style-type: url(foo.png) }
ol > li { list-style-type: decimal }
と指定する必要性が出て来るだろうが。

ul > li { list-style-type: url(foo.png) } は、
ul > li { list-style-image: url(foo.png) } に訂正。

正しいことを教えてくださるのはとても嬉しいのですが
馬鹿呼ばわりは（たとえ真に馬鹿だとしても）やめていただきたく存じます
>1にも「ﾏﾀｰﾘ進行推奨」とあることですし

>>321
無理に答えなければ解決。

>>321
たしかに、ちょっと勘違いしただけで人を馬鹿呼ばわりする方も悪いと
思うけど、それでいちいち反論してるとスレの無駄遣いになるので、
心の中で小学生チックに、
「ばかっていったら、じぶんがばーか！」
と罵ることをおすすめします。

（´-`）.｡oO（馬鹿と言われる方が「馬鹿と言われる要素がある」ので馬鹿

つまり馬鹿は馬鹿

（・３・）　エェー　この板の住人はみんなＢＡＫＡなんだＹＯ！

今のところ、自分のサイトでは、デザインが共通のページの場合は外部CSSに、
共通部分が少ない場合はページ内のhead部にいれてるんですが、
後者のような場合、外部CSSにした方がいいとかいくないとかどっちでもいいとかってありますか?

>>327
それでいいと思う。

>>328
そのまんまでいいってことですね。ありがとう。

>>327
W3Cは内部スタイルシートはｲｸﾅｲとしてるぽ。
XHTMLからは<!-- -->内を完全無視することが許されるようになるから、
内部スタイルシートが無視されるか、無視されない代わりに非対応のUAで丸見えになるかを選択する事になる。
将来の話だけどね。参考までに。

>>330
> W3Cは内部スタイルシートはｲｸﾅｲとしてるぽ。
　マジですか。それを示してるところを教えてくれない？

>>331
あと10分ぐらい探してから聞こう

>>332
じゃあいいや。英語読めないし。

ｵｹｰ次↓

ここは爽やかなインターネットですね。

邦訳読めよ馬鹿と突っ込む気にもならん馬鹿だ

>>327
共通部のスタイルを変更する場合、それに合わせて非共通部分のスタイルを
変更するのに手間がかかる、というのもあるけど、要は本人の問題だから、
自分が納得してるなら構わないと思う。

あとは、なんらかの不具合で外部CSSを読み損なった場合、内部CSSだけ解釈
されると読みづらくなる可能性がある、ぐらいかな。

>>336
どれか示すのがそんなに苦痛なの？
それくらいの手間惜しまないでよね。減るもんじゃないし。

>>338
ちょっと検索するのがそんなに苦痛なの？
それくらいの手間惜しまないでよね。減るもんじゃないし。

いいからバカと罵られたくなかったらこんなとこで質問しなければいいし、
バカと罵る奴もえらそうに質問者見下したりすんなよってことでどうですか？
ここは２ちゃんですよ？

・・・でここなんのスレだったっけ？

>>339
苦痛、そして面倒。さらに睡眠時間が減る。

ここは、

/* CSS・スタイルシート質問スレッド【15】 */
http://pc2.2ch.net/test/read.cgi/hp/1045124732/

でぇす(^-^)

リストを入れ子にした状態で
リスト1の先頭には画像1を、リスト2の先頭には画像２を表示させるには

<body class="list">
<dl>
<dt>リスト１</dt>
<dd>
　<dl>
　<dt>リスト２</dt>
　<dd>ここが孫？子？</dd>
　</dl>
</dd>
</dl>
</body>

スタイルシートで
.list dt {display:list-item; list-style-image:url('./gazou1.gif');}
.list dd dt {display:list-item; list-style-image:url('./gazou2.gif');}
じゃだめでした。なんかいい手ないでしょうか？

テーブルで、上と左の線だけ表示させたいのですが・・・

Γ　　←こんな感じで

border-width を使っても、線の太さしか変わらず、
どうしても四辺とも表示されてしまいます。
教えてください。

border-width: 1px 0px 0px 1px;

>>345
0は単位省略可

さっそくの返答ありがとうございます。
ですが、どうしても四辺に線が出てしまいます。
上と右だけが太い状態です。
う〜ん・・・

>>347
おまいの書いたソースを晒さないとダメだよ

>>343
適用されたけど？（Win2000＋IE6、Opera7で確認）

<STYLE type="text/css">
TD {border-width:1px 0 0 1px;}
</STYLE>

<TABLE border="1" cellspacing="0">
<TR><TD>

以下略

>>350
border-colorとborder-styleもしていしる

>349
まじすか！

だめです。やってみても
リスト２に画像は表示されますが、リスト１に画像がでないのです（TT

>>352
つーかなんで素直に ul li 使わないの？

できました^^
>>352　どうもでした。

>352=>343です。すいません

>353
実際は、名前とその説明なので、dlが適当かと思いまして。
たまたま、その中の入れ子も名前、説明なのでulよりdlかなと。

>354
いえ、私は何もやってません＾＾

>>355
単にリストマーカーが表示される領域が隠れてる(って表現でいいのかな？)だけ
じゃないの？.list に padding-left とかなんか適当なもの指定してみては
.list { padding-left:30px; }

>356
おぉぉ！！！
出てきました。そんなことあるんですね。
ひとつ賢くなりました。ありがとうございます！！

すいません、ついでにもう一ついいでしょうか？

テーブルの行と行の間の隙間を設定するやり方ってありますか？
paddingだと、中の文字と枠の間が広がるだけなので、
margin使って tr {margin-top:1em;}とかってやってみてもうまく
広がってくれなくて（TT

>>357
>margin使って tr {margin-top:1em;}とかってやってみても

表内部要素には、マージン領域はありません。

>テーブルの行と行の間の隙間を設定するやり方ってありますか？

border-spacing を利用すればできそう。
Internet Explorer では不可。
Netscape 6以降, Opera 6以降では可。

table {
border-collapse: separate;
border-spacing: 0 1em;
}

>>358
>'margin'
>Applies to: all elements

>358
＞表内部要素には、マージン領域はありません
ごめんなさい。勉強不足でした。

＞border-spacing を利用すればできそう
できました！
ついでに↓にも書いてありました。検索不足でした。
http://www.htmq.com/style/border-spacing.shtml

>>359
>17.5 Visual layout of table contents
>Like other elements of the document language, internal table elements generate rectangular boxes with content, padding, and borders. They do not have margins, however.

質問するものもばかならば答える方もばかばっかりだなおい

あのー釣りですか？

>>362
うん、馬鹿だよ。なんか文句ある？

>>362
ばかだと思うならてめーが回答しろよ

>http://www.htmq.com/style/border-spacing.shtml

おお、こういう独自仕様まで、まとめて一覧できる資料が欲しかったんだ。
英語ならあるけど読めねーんだよな。

>>366
そういう資料なら、こっちの方が良い。
ttp://is.vis.ne.jp/notes/index.xhtml

http://www.htmq.com/style/border-spacing.shtml
>値を2つ指定した場合： 記述した順に[上下][左右]の間隔が指定された値になります。
どうでもいいけど間違ってるな。

質問です。
IEでユーザーCSSを使ってmarqueeを無効にしようと考え、
色々調べてMozilla系では-moz-binding: noneで無効にできるとこまではわかったのですが
IEでの方法はわからずじまいでした。
誰かご存知の方がいらっしゃったら教えてください。

.textBorder{
border-style: dashed;
border-width: 2px;
border-color: #996666;
letter-spacing: 0.1em;
padding: 10px;
margin: 5% 15% 5% 15%;
}

と、設定しています。
MacIE5.1.6で表示すると、ところどころ枠から文字がはみ出てしまいます。
この状態を直すのには、どのようにしたら良いのでしょうか。
どなたかご回答お願いいたします。

>>370
どうでもいいがpaddingには個人的に〜emを推奨

>>368
えっ？2つ指定した場合は、上下・左右の値を指定することになるんじゃないの？

>>372
[上下][左右]じゃなくて[左右][上下]

[上下][左右]であってるよ。
これだからIDでないとこはいやだ。

びっくりした

>>373
値を1つだけ指定した場合、その値は上下左右の全ボーダーに適用される。
2つの値を指定した場合、1つ目の値が上下のボーダー、2つ目の値が左右のボーダーに適用される。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3つの値を指定した場合、1つ目の値が上のボーダー、2つ目の値が左右のボーダー、3つ目の値が
下のボーダーに適用される。 4つの値を指定した場合、1つ目の値から順に上、右、下、左のボーダーに適用される。

こと border-spacing に関しては［左右][上下]であってます
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#propdef-border-spacing

td {border: solid 1px #00f;}
.spacing {border-spacing: 1em 5em;}

<table>
<tbody>
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</tbody>
</table>

<table class="spacing">
<tbody>
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</tbody>
</table>

（続き）
NN7.01，Moz1.2.1（ともにWin)で見た場合，
2つ目のtableのセルは明らかに上下のほう
（border-spacingで後に指定したほう）が間隔が開いています．

どこかで仕様が変更になっていたり，その仕様変更にブラウザが
対応してないなら，その旨教えてください．よろしくお願いします．

やはりユーザーCSSでマーキー無効にするのは無理なんでしょうか？
マーキー使ってるようなサイト見る私が悪いのでしょうか？

>>374-376

本当に無知な香具師ばかりだな。
お前等、本当に仕様書読んだのか。

>'border-spacing'
>the first gives the horizontal spacing and the second the vertical spacing.

border-spacing
すら知りませんでした。

>379
display: none; でも visibility: hidden; でも消えるけど，
多分中のテキストは見たいとかそういう要求だよね？
Proxomitron使ってmarqueeをpに置き換えるとかくらいしかないんじゃないかなあ

>>382
レスありがとうございます。
どうにも文字が動いたりすると目がチカチカしてしまうもので。
消してしまえば楽なのでしょうがmarqueeで更新情報マークアップしてる
サイトもあるのでそうもいかなくて。
ユーザーCSSではない方法を探ります。ありがとうございました。

質問です。
外部（別サーバ）に置いているcssファイルを読み込んでいるのですが、
その場合 background-image の背景画像(image.gif)も
cssファイルと同じ別サーバに置いていますが、
background-image:url(image.gif)と記述しても表示されません。
cssファイルからの相対パスで指定しているのでokかと思ったのですが…

背景画像を表示させるには、やはりhtmlと同じサーバに
cssファイル+背景画像ファイルを置く以外に手立てはないのでしょうか？

>>384
とりあえず使ってるブラウザの情報を。
ネスケ４だと背景画像の基準がCSSファイルでなくてHTMLファイルだったりする。

でも予想されるのはCSSファイルで外部サーバじゃないほうの相対パスで
画像呼び出してるからでないかな？
hoge.pngと相対パスで記述してるAサーバのCSSファイルをBサーバで呼び出すと
Bサーバのhoge.pngを呼び出すとか。

>>370
letter-spacingをやめる。

>>855
自己解決しました。
どうもキャッシュで古いcssファイルを読み込んでいたようで、うまくいきました。

○385
×855

%
で指定しても支障はない。ＥＭなんかくそくらえだ。

文字の左右に、ページ幅に合わせて伸縮するボーダーを入れたいのですが、どうすれば良いでしょうか。

―――――タイトル―――――　←こんな感じ

現在はテーブルで区切って

┌――┬――――┬――┐
│　hr │　タイトル │　hr │
└――┴――――┴――┘

こんな風にして対応しています。

>>390
CSSでできないこともないけどあんまりお勧めはしない．まあ，tableよりはましかな．

<h1><span class="text">タイトル</span></h1>

h1{
background-image:url("..."); /* 幅数十pxのボーダー画像 */
background-repeat:repeat-x;
background-position:center;
text-align:center;
}
h1 span.text {
background-color:#fff; / *背景と同じ色 */
}

素直に，
<h1>タイトル</h1>
h1{
text-align:center;
border-bottom:solid 2px #f90;
}
でもいいと思うんだけどな．

<head>
<title>こんなんとか。</title>
<style type="text/css">
body {
color: Black;
background: White;
}
div#documentHead {
color: inherit; background: #f90;
/* WinIE5.5以前対策 */
text-align: center;
}
h1 {
text-align: center;
color: inherit; background: White;
min-width: 4em; width: 20%;
margin: 0 auto;
}
</style>
</head>

<body>
<div id="documentHead">
<h1>タイトル</h1>
</div>
</body>

一寸、違うか。

考えてから書き込めよたこ

また嵐か

>>371さん
emに直しました。ありがとうございます。

>>386さん
お返事ありがとうございます。
letter-spacingをやめればちゃんと表示されるのは分かっているのですが
テキストの量が多いので、微妙に文字間隔が空いていた方が読みやすいんですよ。
letter-spacingアリでもちゃんと表示される方法はないですか？

すみません、引き続きどなたかご回答お願いいたします。

insで文字色と下線の色を別個に指定したいんですが、
どないな指定すればよいですか。

そもそもできますか。

>>397
下線を消して border-bottom で擬似的に再現するとか

>>398
普通の指定じゃやっぱ無理ですか。
それでやってみます。
ありがとうです。

<dl>
　<dt> xxxxxx
　　<dd>
　　　　ここに文字を書く
　　　　<div class="oooo"> この部分だけ背景色を変えたい </div>
　　　　ここに文字を書く
　　</dd>
</dl>

のように<dd>の中で一部分だけ背景色を変えたいと思っているのですが、<div>を
入れるのは文法上良くないらしくOperaでは表示が崩れてしまいました。
<span>で囲むと行間に隙間ができるので<div>で囲みたいのですが、何か良い方法は
ありますでしょうか？

<style>
<!--
dd.color {background-color:red }
-->
</style>


<dl>
<dt>xxxxxxx
<dd>ここに文字を書く
<dd class="color">この部分だけ背景色を変えたい
<dd>ここに文字を書く
</dl>

＞<div>を入れるのは文法上良くないらしく

ガタガタブルブル((((ﾟДﾟ;))))

ありがとうございました！
<dt>と<dd>が1対nでもいいのは初めて知りましたです。。。

<style>
<!--
dd.color {background-color:red }
-->
</style>


<dl>
　　 <dt>xxxxxxx</dt>
　　 <dd>ここに文字を書く</dd>
　　 <dd class="color">この部分だけ背景色を変えたい</dd>
　　 <dd>ここに文字を書く</dd>
</dl>

>>403
CSSをはじめる前に一通りHTMLを勉強しとけってことですな。
W3CのCSSValidatorさんも
>CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。
>つまり、正当(valid)なHTML文書と共に、CSSスタイルシートを用いる必要があります。
と仰ってるわけですし。

>>367
ダウンロード画面になって、ダウンロードした奴をIEにドロップ
したらテキストファイルだったんですが、何すかコレ？

>>406
application/xhtml+xmlですがなにか？

>>407
う、何すかソレ？良く知らないけどXHTMLすか？
IE5じゃ見れないって事すか？
でもXHTMLって古いブラウザでも問題ないってどこかで聞いた覚えが？？？

>>408
IEはXHTMLをapplication/xhtml+xmlで受け取ると、自分で解釈できないと思いﾀﾞｳｿをはじめる。
Strict-HTML スレッド10
http://pc2.2ch.net/test/read.cgi/hp/1045493217/6
参照。

>>409
あ、そうなんすか。ありがとう。
怖いのでやめときます。

怖いのは最初だけだから

>>391さん
あまりお薦めされない方法のようなので、少し考えてみます。
でも参考になりました。ありがとうございます。
>>392さんも考えてくださってありがとうございます。

↓こんなテーブルでデータの整理をしているのですが、

┌─┬─┬─┬─┬──────────┐
│th│td│th│td│td（クラス設定あり）│
└─┴─┴─┴─┴──────────┘

thをそれぞれ同じ幅（固定）にして、
クラス設定をしたtdには幅（固定）を設定した場合、
td２つをそれぞれ同じ幅（可変）にすることはできますでしょうか。

thおよびtd（クラス設定あり）には画像が入るため
固定幅にしなければならないという都合があるのです。
『固定幅になんかするなボケ』というツッコミは無しの方向でお願いします。

　 ∋8ノノハ.∩
　　 川o・-・）ノ　＜先生！こんなのがありました！
＿_/ / 　 　/ 　　
＼(_ﾉ￣￣￣＼
||ヽ||￣￣￣￣||
　...||￣￣￣￣||
http://saitama.gasuki.com/kaorin/

>>413

固定幅を可変させたい？ってどういうことですか？

┌─┬─┬─┬─┬──────────┐
│th│td.│th.│td│td（クラス設定あり）　　　│
└─┴─┴─┴─┴──────────┘
　固　　変　 固　 変　　固

こういうことですか

>>413

ソースさらした方がわかりやすいよ。
こんな感じ？

<table>
<tbody>
<tr>
<th><img width="**"></th>
<td>文章</td>
<th><img width="**"></th>
<td>文章</td>
<td class="hoge"><img width="**"></td>
</tr>
</tbody>
</table>

で、画像の入ってるセルだけ画像と同じ幅に固定し、文章の入ってるセルは可変（ただし、両者は同じ幅）にしたい、ということ？
だとしたら、JavaScriptとか使わないと、CSSだけじゃ無理じゃないかな。

>>413
tdだけパーセンテージ、じゃダメなの？

<table>
<tr>
<th><img src="hoge1.jpg"></th>
<td width="50%">文章</td>
<th><img src="hoge2.jpg"></th>
<td width="50%">文章</td>
<td class="hoge"><img src="hoge3.jpg"></td>
</tr>
</table>

>>418
画像の幅とウィンドウの幅の比によっては、table全体の幅が100%を超えて、
横スクロールバーが出てしまうのを避けたいのでは。

まあ、画像を使ってる時点で、ウィンドウの大きさによっては横スクロール
バーが出るのは避けられないことだけどさ。

>>413
『幅固定よくない』という以前に、肝心のHTMLの方が適切でないのではないかと疑っている。
レイアウト目的ではなく、「データを整理」するのが目的でtableを使うのならば、
おそらくもう少し簡潔な表にまとめられるんじゃないか。
HTMLのソースを見直すことをおすすめする。

こちらの説明不足で余計な混乱を招いてしまいました。
実際のテーブルは以下のようになります。商品説明のページです。

┌────────────────────────┐
│td colspan=5 class=name(商品名) │
├─┬──────┬─┬──────┬──────┤
│th│td(データ１)│th│td(データ２)│td rowspan=3│
├─┼──────┼─┼──────┤ class=image│
│th│td(データ３)│th│td(データ４)│(商品画像) │
├─┼──────┼─┼──────┤ │
│th│td(データ５)│th│td(データ６)│ │
├─┴──────┴─┴──────┴──────┤
│td colspan=5 class=info(商品の詳細説明) │
└────────────────────────┘

thは各データの見出しなのですが、クライアントの要望で画像使用。
ということでthおよびtd class=imageについては幅固定なのですが、
テーブルの幅は％による可変なので、
td(データ１)とtd(データ２)の幅が内容の長さによって
まちまちになってしまうのをどうしようかと思いました。

現在の記述は以下のような感じです。

table{ width:90%; }
th{ width:50px; }
td.image{ width:150px; }
td.name,td.info{ width:100% }

困っているのはクラス無しのtdに設定するwidthです。
<td width="50%">で解決することはできるのですが、
なるべくHTMLでのwidth属性は使用したくないので・・・。
よろしくお願いします。

表を使っている時に、

｜　　Ａ｜　ｃｃ　｜ｂｂ　｜
｜　ＢＢ｜ｄｄｄｄ｜ＦＦＦ｜

という感じで右・中央・左そろえを使いたいのですが、
tdではクラスわけせずに、colgroupかcolを使いたいです。

どのようにすればよろしいでしょうか。

ちなみにIE6では col {text-align:right;}で出来るのですが、
Opera7やMozilla1.3aでダメということは、CSS的には間違いってことですよね。

識者の方々お教え下さい。

>>424
>col {text-align:right;}

col td {text-align:right;}ではどうだろう
でも、td要素はブロックレヴェルじゃないので仕様違反かな

>>424

CSS2仕様 17.3. Column Selector
http://www.w3.org/TR/REC-CSS2/tables.html#q4

<col> と <colgroup> に適用されるプロパティとして、
border, backgroud, width, visibility の4つが挙げられている。
つまり、text-align は反映されなくてもよいので、OperaやMozillaの挙動は正しい。

で、HTML4では、<col> と <colgroup> に align属性が定義されているので
それを使いなさいってことになるが、多分、Mozilla（Netscape）で反映されないと思われ。

>>425

>>426の引用元と同じ箇所に

Table cells may belong to two contexts: rows and columns.
However, in the source document cells are descendants of rows, never of columns.
Nevertheless, some aspects of cells can be influenced by setting properties on columns.

とあって、td は tr など行の子孫であるが、col など列の子孫ではないと言っている。
だから、col td { ... } という指定の仕方が成り立つかどうかよくわからん。

ちなみに、td はブロックレベル要素なので、td { text-align: right } の指定自体は問題ない。

だから半端な知識で答えるなと何度（ｒ

いや、このまま名物化してもいいな

>>428
答えられない奴は黙れ。
これ以上のくだらないレスは必要ない。

>>429
いつも完璧な回答をされてる方ですね。ありがとうございます

質問したことないけど

>>423
思いっきり「レイアウト目的」でtable使ってるね。
なんでwidth属性使いたくないの？

>>431
クライアントに「Strictで作れ」って言われてるだけでしょ、たぶん

例えば

body {
color: #000;
background-color: #fff;
font: 100%/100% "Font Name", sans-serif;
letter-spacing: 0.1em;
margin: 1em;
padding: 0;
}

というソースがあった場合
どのような方法でこのソースを見やすくしますか？

・適当にインデント
・エディタで行間、文字色をカスタマイズ

>>434
>エディタで行間、文字色をカスタマイズ
( ´,_ゝ｀)

そのソースを見やすく？

<pre><code>
body {
color: #000;
background-color: #fff;
font: 100%/100% "Font Name", sans-serif;
letter-spacing: 0.1em;
margin: 1em;
padding: 0;
}
</code></pre>

code{
color:#000;
background-color:#ccc;
font:normal 1em/1.3 monospace;
letter-spacing:0.1em;
margin:1em;
padding:0.5em;
border:inset 1px #777;
}

こうでいいのか？

>>423

もし、>>432が言うように、なんらかの理由（クライアントの要望等）で
Strictにしなければならないのだとしたら、このレイアウトを実現するのは
あきらめ、なおかつHTMLについて勉強し直すことをすすめる。
逆に、このレイアウトの実現が優先されるのであれば、Strictにすることは
あきらめた方がいい。
どちらにせよ、こういった幅固定を多用せざるを得ないレイアウトは可読性
を損なうので、個人的にはStrict云々とは無関係にやめた方がいいと思う。

>>424
tr > * + * + td {
text-align: hogehoge
}
とかやればできるべ。

<td>田中</td><td>田中の発言内容</td></tr>
<tr><td>斉藤</td><td>斉藤の発言内容</td></tr>
<tr><td>山本</td><td.山本の発言内容</td></tr>
というのをテーブルを外してやりたいのですが、
条件が合わずに出来ません。条件とは

「名前」と「名前の発言内容」の間にスペースを入れる。
名前ごとに色を変える。
今は
<span class="red">田中　田中の発言内容</span>
のように、全角スペースで間に合わせているのですが
もっと効率的なものがあれば、教えていただけないでしょうか。

★あなたのお悩み解決致します！！
●浮気素行調査
彼氏、彼女、妻、夫の浮気を調査致します！！
●盗聴器盗撮機発見
あなたの部屋に誰かが仕掛けているかも！！
●行方調査
行方不明になっている家族の消息を調査致します！！
●電話番号から住所割り出し
一般電話、携帯から住所を割り出し致します！！
●ストーカー対策
社会問題ともなっているストーカーを撃退致します！！
その他人生相談からどんなお悩みでも解決いたします！！
　２４時間受付　　０９０−８５０５−３０８６
ＵＲＬ　　http://www.h5.dion.ne.jp/~grobal/
メール　　[email protected]
　　　グローバル探偵事務局　

>>439
表を使え。

いやならpaddingとmarginで

>>439
>404みたいにDL、DT、DDを使えば？

>>439
名前ごとに色を変えるなら、class="名前"だろ。
そして、スレ違いのおかん。

>>437

最初にクライアントにも説明したことはしたのですが
『大量の共通項目によるデータを整理して表示するのが表なのだから
　このデータはリストではなくテーブルでレイアウトするのが正しいのだ！』
と逆に強弁されてしまったのでつ（´Д｀;）

スレ違いですが、正解はDL要素ですよね・・・。

ともあれ、なんとか他の案を提示してみます。ありがとうございました。

443さん混乱させてしまってすいません。
色替えがわかりやすいようにclassで色を示してみただけです。
404さんのようにしてみたのですが<dt>と<dd>の間で
改行されてしまいますよね。出来れば並べたいのです。

>>445
>>6でも読んでfloatの使いかた学んでみてください

追記。
属性にcompact入れても、私のブラウザでは改行されてしまうのです。

>>444
いや、そうじゃなくて、こういう場合はtable使っても全然構わないんだけど、
>>423の表は、tableの使い方が間違ってるって言ってんの。
HTMLのソースが「たまたま」Strict DTDに適合してればいいってもんじゃ
ないんだよ。
そのクライアントもHTMLについて分かってないかもしれないけど、あんたも
わかってないんだって。

とりあえず、レイアウト目的ではないなら、この表は、colspan属性だの
rowspan属性だのを使う必要は全然ない。
商品名はcaptionかh1〜h6でマーク付けすべきだ。

>>444

とりあえず、こんな感じでマークアップして、クライアントに見せてみ。
属性は省略してるんで、imgのsrc属性とかalt属性とかは適宜補って。

<table>
<caption>商品名</caption>
<tbody>
<tr>
<th>商品の外観</th>
<td><img><!-- 商品の画像 --></td>
</tr>
<tr>
<th>価格</th>
<td>***円</td>
</tr>
<tr>
<th>サイズ</th>
<td>縦**cm×横**cm</td>
</tr>
<tr>
<th>説明</th>
<td>**で**な商品です。</td>
</tr>
</tbody>
</table>

これで納得してくれるようなら、少なくともそのクライアントはあんたよりHTMLのことがわかってる。

いいかげんスレ違いなので、以後はこっちで。
http://pc2.2ch.net/test/read.cgi/hp/1040377672/l50

意図した表と全然違うじゃん

「いいかげんスレ違い」というより、
無理やりスレ違いな話題へ誘導したきらいが…

クライアントってなに？質問者がwebデかなんかなのか？
こんな厨房知識しか持ち合わせていなくてもなれるなら俺もwebﾃﾞｻﾞｲﾅｰになるべ。

すみません。難しく考えすぎていました。
position使えば簡単に出来たんですね。
ありがとうございました。

Web"デザイナー"だからな。あくまでも

>>450
レイアウトを無視して「意図した表」から構造だけ取り出すとこうなるでしょ。

>>451
いや、「width属性使いたくない」とか言うから、strictにしたいのかなあ、と思って。
そしたら「正解はdl要素ですよね」とかしゃらくさいこと言うし。

>>454

「デザイナー」って言葉にもいろんな意味があるけどな。

http://www.ne.jp/asahi/minazuki/bakera/html/update

ここの「2002-07-22」の項を見れ。

# ばけらさん、見出しにidふってほしいな……ってここで言っても無意味だが。

>>439
.tanaka{
color : #ff0000;
background-color : #ffffff;
}
.yamamoto{
color : #0000ff;
background-color : #ffffff;
}
.saito{
color : #009900;
background-color : #ffffff;
}
DT{
float : left;
width : 3em;
}
DD{
margin-left : 1em;
}

>>455　了解。

＞　HTMLのソースが「たまたま」Strict DTDに適合してればいいってもんじゃないんだよ。

という言葉に、あなたの信念を感じます。

外部cssを使って1つのHTMLに対し、2つの a:link 等を使うことは出来るでしょうか？
デザイン上、どうしてもリンクの色やホバー時のアクションを分けたいのですが
今のままですとどうしても1つにまとめられてしまうので。

できるよ

a{color:yellow}
li a{color:red}

とかすれば<li>の下にあるリンクは赤、それ以外が黄色になるよ
li→.hogeとかクラスに変えてもよし

擬似セレクタの説明としては
div.kurohaikei a:link { color:yellow; }
div.sirohaikei a:link { color:blue; }
かな

>>462
例とは言え物理的なclass名はｲﾔﾝな感じ

そういうクラス名つけてんだろ

ごめん

>>461
yellowなどの色名は依存するから使わない方がいいと聞いたんだが…

>>466
yellowやredなんかの基本色はOKなんでないの。
fuchsiaとかは怪しいけど。
でも実際のところ色名指定のほうがわかりやすくない？

そう言う問題ではない

どういう問題よ

過去ログに載ってるよ

馬鹿にはわからん問題です

>>467
それだと色変えたときに混乱するでしょ？
それともclass名も書き換えるの？

つまりそういうこと。

>>472
クラス名に関してはそうだが色名に関してはそういう問題でもない

>>473
ちと勘違いしていたよ。ｽﾏｿ

質問。
スタイルシートで、テーブルの背景色を透過させるものって
ありますよね？
これまでは問題なく透過されて見えていたし、自分のパソは
IE5.5、JavaスクリプトもONにしてあり、またそれ以外の
設定も全く変えていないにも関わらず、ある日突然透過され
ずに表示されるようになってしまいました。
こういった場合、考えられる原因とはなんでしょうか？

>>461-462
ありがとうございます、
大変参考になりました。

お二方様にに多謝。

<table width="100%" height="100%" border="0"><tr><td valign="middle" align="center">
いろいろオブジェクト<br>
</td></tr></table>
↑以前こういうやり方で、ウインドウの中央にオブジェクトを表示させるようにしていたのですが、<div>とcssで<table>の代用をしてみようと思い色々試してみましたが、下記のようになったところで躓いてしまいました。


<html><body>
<style type="text/css"><!--
div.base{position:absolute; top:0px; left:0px; width:100%; height:100%; text-align:center;}
--></style>
<div class="base">いろいろオブジェクト<br></div>
</body></html>

この状態でjavaや<table>を使わずに"<td valign="middle">いろいろオブジェクト<br></td>"と同じような効果をcssを使用して出すにはどのようにしたら宜しいでしょうか?

幅1300ピクセルの画像があって、それを800ピクセルの枠なんかに入れて（背景としてでもいいんですが）、
画像の中央部が枠の中央にきて、両端が消えるような感じに配置することはできるでしょか。

できます

早めに答えてもらえませんか？
さもないと本当にあなたたちを無知だと見なしますよ。

ご自由に。次の方どぞー

おい、俺の質問はいつになったら解決するんだよ。
俺は忙しいんだ！早く答えろこの糞ども。

来たくもねーのに2chくんだりまで来て質問してやってるのによ。
わからなくて答えられないなら金返せ。

春だね。

本物の478ですが偽者が出てる・・・

漫画で、HUNTER×HUNTER ってのがあるらしいのですが、面白いですか？

本物だったら>>480や>>482みたいな態度は取らないから心配するな。

480も482もコピペだから、騙される奴はいないよ。

>>486
だったらさっさと答えたらどうですか？？

>>477はjava無しcssのみは不可能でしょうか?

>>487
同上

>>478
background-position:

すみません。質問させていただきます。

掲示板をレンタルしているのですが、壁紙を固定したいんです。
掲示板の管理ができるところに、壁紙URLを書くところはあるんですが、
そこにURLを入れると、壁紙が何度もダーーーっと出てしまんです。
それを固定させるためには、壁紙URLにスタイルシートの形で書けばよいのでしょうか。

また、その時の形はこれで合っていますか？

<STYLE type="text/css"><!--TD { background-image: url(ここにURLを入れました); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed;}--></STYLE>

★あなたのお悩み解決致します！！
●浮気素行調査
彼氏、彼女、妻、夫の浮気を調査致します！！
●盗聴器盗撮機発見
あなたの部屋に誰かが仕掛けているかも！！
●行方調査
行方不明になっている家族の消息を調査致します！！
●電話番号から住所割り出し
一般電話、携帯から住所を割り出し致します！！
●ストーカー対策
社会問題ともなっているストーカーを撃退致します！！
その他人生相談からどんなお悩みでも解決いたします！！
　直通　　０９０−８５０５−３０８６
ＵＲＬ　　http://www.h5.dion.ne.jp/~grobal/
メール　　[email protected]
　　　グローバル探偵事務局　

>>492
駄目と思われ。

>>493

>>494
CSSの悩みはダメっぽいぞ。どの項目にも当てはまらない。

.css {
border:#fff solid 1px;
width:70%;
position:relative;
top:40%;
left:15%;
}

とすると、IE6では意図通りに表示出来るのですが、NN6.2や
OPERA6.05ではtopが無視され、leftが無視されてしまいます。
これをIE6と同じように表示させるにはどうすればいいのでしょうか。

>topが無視され、leftが無視されてしまいます。

間違えました。無視されてしまうのはtopだけです。

>>497
親要素の height を明示的に指定するとか

>>496
bottomをautoにしてもダメ？

cssにおけるpとdivの違いは何でしょうか？

>>498,>>499
どちらもやってみましたがダメのようです。

>>501
親要素に position: relative を指定するとか

>>500
おける、ってなによ？

>>500
識別子が違う

>>500
UAによってデフォルトのプロパティ値が違う
Pは上下に空行が入るが、DIVは入らないのが一般的

レスありがとうございます。
divでマークアップ（？）してるのをｐに変えても
上下に1行空きが入るだけで違いがあるのだろうか？
と思い質問してみました。
とゆーか最初からこう聞くべきでしたね。
それ以外に違いはあるのでしょうか？

>>506
ああ、DIV直下に普通の文章入れちゃダメじゃなかったっけ？
<DIV><P>本文</P></DIV>でしょ。

>>507
入れてもいい。スレ違いだが。しかもそれCSSに於いてじゃないし。

みなさんからのレスを元に調べてみたところ
p要素の中にブロック要素を内容することができない。
と言うのが自分の疑問に対する答えのようです。
お騒がせしました。
調べてみて思ったのですが
自分の「cssにおけるpとdivの違いは何でしょうか？ 」@500
の質問ってのは的外れな質問のようですね。
お恥ずかしい。

>>509
それに気づいただけでもいいんじゃないすか？
みんなそうやって「自力で」勉強してきたわけだし。

>>508
ホントだいけた。
>>506
ウソついてすまん。

>>509
内容じゃなくて、内包な。

親要素に対して絶対配置したdivを、常にセンターにしたいのですが、
margin-left:%;でやってるのですが、画面サイズを変えると
ずれてしまいます。
どなたかよいプロパティ、値ありましたらお願いします。

>>513
絶対配置してるということは、left とか top も同時に指定してるの？

>>513
margin-left:auto;
margin-right:auto;

>>514
トップだけ指定して左右は常にセンターにしたいです。
>>515
成功しました！非常に助かりました。ありがとう。

>>516
うまくいったということは、6.xブラウザ対応だけでいいってことだな…

<span style=width:340>ー△ー</span>
IEを6にウプデートしたらwidthが効かなくなっちまいました！
単位付けないと無視される不具合のせいだというところまでは
調べてわかったので
<span style=width:340px>ー△ー</span>
と直しますた。でもdivには効くのにspanには効きません。
どうすればいいですか？

>>518
""つけろよ

何をしたいのかわからないけどdivにすればいいんじゃないの?
spanでやりたい理由は?

>>518
インライン要素にwidthを指定しても無視されるのは仕様どおりです。
今まで効いていたほうがバグ。

marginかpaddingで代用するのがいいかと。

>>496
例えば、topの値をpxとかなら、反映されるかと思うのだが。
パーセンテージにしたいのなら、
>>498 の回答が正解ぽい。
>>501
親要素のheightをパーセンテージで指定したなら、
htmlのheightまで、ずーとさかのぼって指定しなきゃ駄目ぽい。
html,body{
height:100%;
}
みたいな。

思う
ぽい
みたいな

>>522
明示的に指定ってのには、パーセンテージは含まれんですよ。

>>496
top と bottom にパーセンテージを指定した場合、
コンテナブロックの高さが明示されていないと「auto」として扱われるです。

相対配置は通常フローなので、
最も近い祖先ブロックレベル要素の内容辺がコンテナブロックになるですよ。

<head>
<title>relative-positioning</title>
<style type="text/css">
.コンテナブロック { height: 20em; border: solid 1px; }
.相対配置 { position: relative; top: 50%; }
</style>
</head>

<body>

<div class="コンテナブロック">
<p class="相対配置">foo...</p>
</div>

<p class="コンテナブロック">
foo... <em><span class="相対配置">bar</span></em>... baz...
</p>

</body>

何か間違ってたら突っ込んで。

>>522
root要素のheight:100%が何を意味するかは実装依存。
たいていのブラウザーはウィンドウの高さだけど
macのIEはウインドウの幅になるよ。

思う
ぽい
みたいな

475です。
スレが大分進んでしまっているので再度書かせてもらいましたが、
>>475の内容についてもしご存知の方がいらしたら教えて頂けない
でしょうか？

>>527
「ある日突然」と言われてもなぁ…
うっかりCSSの記述を間違ったくらいしか思いつかん。
自分のページの透過だけがダメなの？
それとも他の人のサイトの透過もダメ？

>528
ソース（CSSの記述）は一切いじってないんですよ。
自分のところも、他所もだめで。

>>529
つーことはIEのどこかがイカれたのかな…？
win板で聞いた方がいいかもしれない。

http://pc2.2ch.net/test/read.cgi/win/1032915590/l50
IE5 (5.01&5.5)統合スレッド

誘導だけで力になれずｽﾏｿ。

>>529
縦読みですまんが他のブラウザで確認してみた？

DIV要素に前述>>496のCSSを指定したい場合に>>524さんの仰ってる事を踏まえて考えると
>>524さんのDIVにあたる部分はBODYになるという事でいいんですかね?
とりあえずそれでやってみました。BODYのheightを30emにしてみると、NN6.2ではtopで
指定した数値が反映されましたが、OPERA6.05では位置がズレてしまいました。
あと、新たに気付いたんですが、この場合IEでは.cssで指定した要素は右端に寄っているのに
対して、NNやOPERAは中央寄せされています。

>>532
>>496の事例だが、
Opera6.xは
「相対配置要素のtopプロパティの%値がpx値で扱われる」
というバグがある。
http://cssbug.tripod.co.jp/detail/opera/b027.html

body要素の高さに対して40%の位置に配置したいなら、
30em×40%=12em と考えて、
top: 12em; と指定してみては？

IEでは右端・NN&Operaでは中央ってのは、
.cssで指定した要素自体がそのように寄せられるの？
それとも、その要素内に含まれる文字列が寄せられるの？

>>532
body 100% - .css 70% - relative left 15% = margin-right 15%

　┏━━━━┓
　┃img 　　　 ┃
　┃ 　 　 　 　┃　 　 　 　 　 ┏━━┓┏━━┓┏━━┓
　┗━━━━┛　 　 　 　 　 ┃aaaa┃┃bbbb┃┃cccc┃
　┏━━━━━━━━━━┛ 　　 ┗┻━━┻┻━━┫
　┃ 　 　 　 　 　 　 　 　 　 　　　　　　　　　　　　　　　　　┃
　┃ 　 　 　 　 　 　 　 　 　 　　　　　　　　　　　　　　　　　┃


こういう感じにしたいんですが・・・
どうレイアウトすればいいんでしょう。絶対指定無しで。

>>533
emで指定すればよかったんですね。とすると他の部分でも%をemに直した方が
良かったりするのかな。CSSのソースとしてもその方が見栄えはいいですかね。

IEでは右端、NN&OPERAでは中央というのは、.cssを指定しているDIV要素自体が
寄せられています。>>534さんが仰っているように、NN&OPERAでの見え方が適当
なんですが、私としてはIEのように右端に寄せた見え方にしたいと思ってます。
なので今は.css内のleftを30%にしてNN&OPERAでの表示を右端に寄せています。
そうするとIEでは要素の右側がはみ出てしまうのでそこがどうにかできないもの
かな、と思っています。

/*--自己解決です--*/

もしやと思ってバグリストを覗いてみたらやはりバグだったようです。
｢text-alignプロパティの指定がボックスの配置に影響を与える｣
http://members.tripod.co.jp/cssbug/detail/winie/b035.html
関連リンクにあるモジラ組の｢ブロックレベル要素をセンタリングする方法｣を
やっていたのでこのようなバグが発生してしまったんだと思われます。
BODYに指定したtext-align:centerを*{　}に指定して、BODYのtext-alignに
justifyを指定したら、どのブラウザも意図通りの表示になりました。

長々とご教授頂きましてありがとう御座いました。

>>536
要素の右側がはみ出すってのがよく分からん。
まさか .cssの親要素あたりで幅固定とかしてないよな？

>>535さん
それは枠線も再現しなきゃダメですか？

>>535さん
とりあえずfloatで並べて、背景色で区別する方法を提示します。
http://www10.ocn.ne.jp/~dotnote/535.html

あ…
>>540の記述だとブラウザごとに挙動が違ったり。
>>535さん、差し支えなければ使用する画像のピクセル数を
書いてください。

>>539
はい。枠線をつけたいのです。

┌──┐
│ 　 　│
│ 　 　│┏━┓┏━┓┏━┓
┣━━┷┛　 ┗┻━┻┻━┫
┃ 　　 　 　 　 　 　 　 　 　 　 ┃

こんなかんじです。

自分的には
┌────────────────┐
│┌──┐┌┐┌────────┐│
││　 　 ││││ 　　 　 　 　 　 　 　 ││
││　 　 ││││┏━┓┏━┓┏━┫│
│┗━━┛┗┛┗┛　 ┗┻━┻┻━┛│
└────────────────┘
┏────────────────┓
┃　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
こうしてしまえばうまくいくのかもしれないと思ってやっていたんですが、
てんでうまくいかない・・・といった感じです。
画像はwidth:121px;height:80px;です。
すいません。

>>535さん
枠線ありですか…
ちょっとソースが煩雑になっちゃうかもです。

>>543
そうさねぇ…普通はtableで片付けてしまうところを
あえてCSSでやってみようという心意気に期待

えーと、positionの絶対指定を使わずに、って条件だと
IE6.0では再現できないような気がしてきました…

>>535さん
とりあえず枠線あたりを適用してみました。

あのー、もしかして画像もぴったりとくっつけたいとか…？

>>546
ぴったりしたいです。はい。

あ、IEではできた。operaじゃだめですが。
<style><!--
body {margin:0px;padding:0px;background:#90BA8C;text-align:center;}
div.base {width:600px;text-align:left;}
div.menu {background:url("test.gif") no-repeat;height:80px;text-align:right;}
div.vspace {height:61px;}
a.m {text-decoration:none;font-size:10pt;color:#000000;
background-color:#FFFFFF;padding:2px 3px 0px 3px;border-top:solid 1px #000000;
border-left:solid 1px #000000;border-right:solid 1px #000000;border-bottom:solid 1px #000000;}
a.mc {vertical-align:text-bottom;text-decoration:none;font-size:10pt;
color:#000000;background-color:#FFFFFF;padding:3px 3px 0px 3px;
border-top:solid 1px #000000;border-left:solid 1px #000000;border-right:solid 1px #000000;}
span.mb {width:490px;border-bottom:solid 1px #000000;}
span.mspace {width:5px;border-bottom:solid 1px #000000;}
div.main {background-color:#FFFFFF;border-left:solid 1px;#000000;border-right:solid 1px;#000000;
border-bottom:solid 1px;#000000;}
img {border:none;}
--></style>
<div class="base">
<div class="menu">
<div class="vspace"></div>
<span class="mb"></span>
<a class="mc" href="./">aaaa</a><span class="mspace"></span><a class="m" href="./">bbbb</a><span class="mspace"></span><a class="m" href="./">cccc</a>
</div>
<div class="main">
aaaa<p>fdsfsdf
</div>
</div>

とりあえず、Opera7.0限定で>>535さんの意図通りのものが
できたと思います。（たぶん）

http://www10.ocn.ne.jp/~dotnote/535.html

IE6.0、NN7.01、Mozilla1.0だと回り込み関連で
画像と他の枠が離れます…。
（絶対指定を使っていいなら解決できるかもです。）

ここでこの話ばかり続けると迷惑かもしれないので、
>>535さん、捨てメアドでいいですから
http://www10.ocn.ne.jp/~dotnote/　に書いてあるアドレスまで
メールください…。とりあえず今日は寝ますけど。

↓次の質問ドゾー

すみません、どなたかご教授下さい。

<table width="751" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="78">　</td>
<td width="16" rowspan="2">　</td>
<td colspan="2">　</td>
<td width="7" rowspan="2">　</td>
</tr>
<tr>
<td>　</td>
<td width="20">　</td>
<td width="630">　</td>
</tr>
</table>

このテンプレを何度も使うので、CSSでモジュール化を図ったのですが
CSSでテーブルを組む概念自体が理解できていないため無理でした。
これをCSSで表現する場合、どのようにすればよろしいのでしょうか？

>>550
colspan と rowspan をCSSで表現するのは無理かと。。。
というより、レイアウト目的の table は、このスレではボコボコにされるでしょう。
td を「位置指定した div」で置き換えるのが順当ではないかと。

>>551
正直spanで詰まってました。
無理でしたか。。
レス頂きありがとうございました。

>>535さん
一応IE6.0、NN7.01、Mozilla1.0、Opera6.05、Opera7.0で
正常に表示されるように作りました。
http://www10.ocn.ne.jp/~dotnote/others/535.html

以下コメント。
・見栄えを調節するための空のDIVがある
・画像の高さに依存しているので、新しい画像を使うたびに
　CSSを書き換えなければならない
・左の画像を使わなくていい、または枠線がいらないのであれば、
　各classの背景色をうまく変化させればそれなりのものが作れます

<a href="xxx"><img src="xx" alt="xx" width="xx" height="xx"></a>

Netscape4.xで、imgのボーダーを消すにはどうやったらいいのでしょうか。
border : none;とか、border-style : none;とか、border-width : 0;とか
やっても消えてくれないんですが。

<img border="0">
NN4はあきらめろ。

あきらめますた。

>>554
ボーダー色を背景色と同じにしてゴマカスとか。
余りお勧めできないけど。
A { border: solid 1px fff; }

#を付け忘れますた。

現状でもっとも妥当で人にやさしいレイアウト方式は

　・テーブル
　・フレーム

であったりするという事実にめを背ける人々がいるスレはここですね。
連邦もフレーム使用、テーブルレイアウトでも人気サイト有り。

正しいことを普及させようとする意志は立派だが、要はコンテンツのレベルが
高ければ

>>559
＞もっとも妥当で人にやさしいレイアウト
この根拠は？

>>559-560
そういう議論は下のスレでしてください。

【td】テーブルレイアウトの何が悪いん？【/td】
http://pc2.2ch.net/test/read.cgi/hp/1035775357/

フレーム使うなだと?ボケぇ
http://pc2.2ch.net/test/read.cgi/hp/998434786/

>>559-660

寧ろ、こっちでやろうぜ！


「タグの玉手箱」閉鎖
http://pc2.2ch.net/test/read.cgi/hp/1045704853/

正直、どうしようもないテーブルレイアウターなんてどうでもいい。

>>562
901 名前：500 ◆gM3QsItM1s 投稿日：03/02/23 00:17 ID:???
偽者が多いのでパッチつけますた。


903 名前：Name_Not_Found 投稿日：03/02/23 06:35 ID:???
>>901
だから、パッチって何なんだよ？


904 名前：Name_Not_Found 投稿日：03/02/23 07:11 ID:???
500になれるパッチはどこで落とせばいいんですか？


905 名前：Name_Not_Found 投稿日：03/02/23 07:11 ID:ccKy0GL/
>>903
500はパッチとトリップの違いが解らないんだよ。
そっとしておいてやろうぜ。

>>564
なんで俺に向けてその堕レスのコピペを？？？

>>565
誤爆臭いと思ったけど、アンカーがちょうどよすぎるよな。

↓↓↓次の人質問どうぞ。↓↓↓

予想：nullがやってくる↓

('A`) ぬるぱ

>530
ありがとう。1度行ってみます。

>531
ありがとう。うっかりなことに、自分がIEしか入れてないもん
だから他ブラウザで確認するということを怠ってました。

テーブルレイアウトとフレームがなぜいけないのか
いってみろ。

こちらを採用した方がＣＳＳを使うよりも多くの人に見てもらえる

スレ違い

テーブルレイアウトやフレーム使うより多くの人に見てもらえるからです

>>573
スレ違い

>>573
スレ違い

>>571-575
スレ違い

↓次の質問ドゾ

貴方のお勧めのラーメンは塩ですか？

そういう質問を待っていたっ！！！！！！！！！！！！１

札幌一番



はい次！！

http://www.b-architects.com/

テーブルを使わずにスタイルシートを使って上のサイトのようなページ構成にするには
どうしたらいいですか？

>>579
ソース見て理解しろ
それも勉強のうちだ

はい次

>>580
スタイルシートは外部になっているので良く分からんです。

>>580
失礼。分かりました。

って言うかマルチかよ

仕様書邦訳読んで勉強してるんですが、言葉が難しくて、意味がわからない部分があるので
質問します。

widthプロパティとheightプロパティは、ボックス領域のパディング領域の内側の内容領域のみの
幅と高さを設定するという理解でいいですか？
それとも、ボーダー＋パディング＋内容領域を合わせた幅と高さを設定するプロパティなんですか？

よろしく、おながいします。

そうは思わない！
http://hkwr.com/

>>584
質問を撤回します。ちゃんと、読んでませんでした。

10.2 内容領域の幅（Content width: the 'width' property）
とでっかく見出しがありました。

スレ汚し、すいませんでした。

すいません、質問内容を変えさせてもらいます。

p {
　width : 200px ;
　height : 150px ;
　padding : 0.5em ;
　border : solid 1px ;
}

こうした場合、paddingの値を大きくすればするほど、width、heightの値に関係無くボックス領域が
大きくなっていきますよね？

仕様書には、

＞置換要素のボックス幅はその要素に内在している。
＞しかし、置換要素の'width'プロパティが'auto'以外の値を取る時、UAはその幅を伸縮させてもよい。

と書いてあるのですが、これはブロックレベル要素も含まれてるのでしょうか？

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#the-width-property

いまいち質問の意味がわからないんだけど、
とりあえずその引用部は
「置換要素、例えばimgなんかはそれ自体が幅を持ってるけど、
auto以外のwidth値が指定されてたらUAはその値を取っていいよ」
と言ってる。用語にアンカーもあるからよく読んで

>>588
どうもです。そのヒントから、やっとわかりました。

>>587のスタイルを標準モードが試していて、paddingの値を大きくしていくと、
枠線がどんどん大きくなるので、てっきりwidthとheightが伸縮してるのかと
思ってましたのが勘違いでした。
widthとheightはそのままで、パディング領域が広がって、枠線を伸縮しているのということですね。
しかし、邦訳の言葉むずかひい・・。ありがとうございました。

>589は「原文を読め」とでもいわせたいのか？

>>573
スタイルシートのブラウザ対応状況を鑑みると断然フレームやテーブルレイアウトの方が
見れる人多いぞ。
もちろん、パソコンで普通のブラウザを使用しているという条件でね。
その他の環境なんて割合的にいえば少ないんだからさ。

さあ他になんか理由あるのか？
説明できるか？

＞その他の環境なんて割合的にいえば少ないんだからさ。
このその他ってのはパソコン以外を含んだその他か？
だとすれば、i-mode利用のインターネット閲覧数を甘く見すぎということになるんだが。

>>590
えっ？なんか、間違ってますか？指摘してください、たのんます。

スレ違い、って言われて終わってる話題にいつまでもしつこく・・・

>>593=584
>しかし、邦訳の言葉むずかひい・・。
邦訳の言葉、邦訳の言葉、、、、、じゃあ原文読めと。

>>595
あー、邦訳よりも原文のほうが難しいってことですね？
英語はうんこレベルなので無理です。ｽﾝﾏｿﾝ

>>592
あんな液晶サイズで見れるサイトなんか最初から数が知れてるでしょ。
文字だけのサイトだとしてもサイズ大きいと見れないんでしょ？
だいたい、普通のサイト経営してる人が携帯を対象としてるなんて少ないでしょ。
それよりも、未だに教育機関などで使われてる古いＰＣ、ブラウザからも
見れるテーブルの方が人にやさしいよ。
そりゃスタイルシートがこれからもっと対応するようになって
古いＰＣを使ってる人たちもいい加減に買い換えるようになれば
スタイルシートを使った方がいいけどさ。

現状では時間がかかってもテーブルで表示してくれた方がうれしい人が多いと思うよ。

>>592
ネタだろ。真面目に相手する必要なし。

>>598
>>597を読んでやっとネタだと気付いた僕

>>594
他のスレと間違えてレスしてしまったすまそ。

>>597にあえてマジレス。
テーブルがどうの、CSSがどうのっていう話からはズレるが、
学校や公立図書館などの公的教育機関って、
PCをリースで導入しているところが多いんだよ。
しかもたいていは5年という期間での契約で。

NN4が1997年6月リリース、IE4.0が1997年10月リリースという事を鑑みると、
リース契約更新に伴う教育機関のブラウザの世代交代は近いと思うが。

また、「うれしい人が多いと思う」と言っているが、
http://pcweb.mycom.co.jp/news/2002/12/18/19.html
によると、IE5.0〜IE6.0の使用率が92.8%、
NN4の使用率が1.1%という数字を見ても「多い」と断言できるのか？

質問ﾄﾞｿﾞｰ

>>601
研究室とかのことを言ってるんだよ。
そういえば確かに施設内にアルは定期的に新しいのに代わってるな。
リースなのか。

スタイルシートはＩＥ５〜６でさえ対応してないのがあるじゃないか。
そんなのを全てどれが対応してるとかやるよりはテーブルでやればいいんだよ。
横幅指定すれば表示速度はましになるんだから。


>>602
どうしてフレームはだめなんですか？

>>603
ＩＥ５〜６に対応しているプロパティだけ使った
CSSにすれば、なんの問題もない。

なにより、模様替えするときに、
いちいち全リソースを書き換える
手間があるテーブルより、
CSS使った方が、はるかにラクだが、何か。

>>604
ばーか

602じゃないし，スレ違いだけど答えてみる．
分かりやすく具体例を書いて見る．

A,Bの２つのフレームで構成されるページがあったとする．
Aのリンクに対応して，Bはb1,b2,b3．．．のページが表示される．
ナビゲーション関係はAにまとめてあるので，b1,b2,b3．．．にナビゲーション機能は持たせていない．

この場合，外部のサイトからb3に飛んできた場合，Aが表示され無いので他のページに飛ぶことが出来ない．
しかしA,b3をまとめてリンクすることは出来ない．
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


この問題を解決するためにはb1,b2,b3．．．にサイトナビゲーションの機能を持たせるしかないが，するとAは存在意義を失う．

って感じでどうだ？

今時その手の厨はいねえよ
ネタは上手くやれ。ただし他所で

↓質問と見せかけて山崎渉

>>606
うーむ、納得だな。
わかりやすくてまとまってるよ。

ただ、ＣＳＳで各ページにナビゲートを作ったとして、
ナビゲートの項目を変えたいときに全部書き直すのはめんどくさくないのか？

フレームにはその利点が有ると思う。

６０６さん見たいな人がいると、アホみたいなやりとりが少なくなると思うんだが
まともな説明も出来ない奴がほえるとろくなことがない

>>608
スクリプトなりSSIなりXSLTなりobjectによる埋め込み（インラインフレームの代わりだね）なり手はあると思うけど。

>>608
作り手がラクしてユーザに不便を強いるわけ？
非フレームでもラクできなくはないが

>>609
ばーか

>>611
ユーザがラクして作り手に不便を強いるわけ？
その辺は需要と供給の力関係によるだろ。

ユーザにとってフレームが不便だというなら、
cssだろうが関係なく不便って事になるんじゃねーの？
ナビゲートなんざいくらでも入れられるし。
作り手が楽出来るところを楽して悪いわけがない。
というか一般人はそんなこときにしない。
というか文字サイズが激小のバカが作るcssサイトは嫌だ。逸れた。

続きはこちらで

フレーム使うなだと?ボケぇ
http://pc2.2ch.net/test/read.cgi/hp/998434786/

(´-`).｡ｏＯ人はTABLEにもどってくるんだよ。
http://pc2.2ch.net/test/read.cgi/hp/1011140326/

【td】テーブルレイアウトの何が悪いん？【/td】
http://pc2.2ch.net/test/read.cgi/hp/1035775357/

ここは、スタイルシートについての質問がしたい人のタメニあるのであって、
勧めたい、ってわけじゃないんだから挑発に乗るのはよそうよ。

フレーム云々の話題はこちらで。

段組は愚かなのだろうか？
http://pc2.2ch.net/test/read.cgi/hp/1043588207/


そのスレ主の顔文字がつくったサイト

フレームを普及させるサイト
http://frame.s26.xrea.com/

>>614
お前の言うとおりだ。
そんなことを気にしてるのはウェブ製作きちがいのお前等だけだ。
連邦のフレームに文句つける奴なんていないだろ？
反論おまちしてまーす↓

↑誘導されてんだから巣にｶｴﾚ

では次の質問どうぞ
↓

なんでcss使うの？
htmlの方が対応範囲が広いじゃない。
利用者の幅を狭めてどうすんの？
つまりcssって自己満足じゃないの？

↑ｶ（ｒｙ
↓次（ｒｙ

みんなCSS Validator での「警告」って、気にしてるもんなの？
http://jigsaw.w3.org/css-validator/validator-uri.html

>>621
CSS使えないからって卑屈になるなよ。

対応範囲? 利用者の幅? 狭い視界しか持ち合わせていないようだが、
その対応範囲とやらを広げようとすれば、使ってみるのが一番だろ。

と、昼飯の後に軽く釣られてみる。

偏見だよ。上級者じゃないけど使えるよ。

>対応範囲とやらを広げようとすれば、使ってみるのが一番だろ。
だから何で？
対応がhtmlよりバラバラじゃんって話だよ？
将来的には今よりサポートが広くなるかもしんないけど。

>>623
ほとんど気にしない。
background-colorを指定しろって大量に出てくるけど、いちいち指定してらんない。

>>624-625
>>617

HTMLの方が対応範囲が広いって、そりゃ当然だろ、時間の流れからして。
使いもしない技術は洗練されないだろ。
使い込まれた結果に煩雑になったHTMLっつーのもあるが。

HTMLのみで…CSSを使わずに、いわゆるテーブルレイアウトとか
論理的、視覚的なものを両方盛り込んだ上で、
メンテナンスや更新が楽であって、なおかつ、対応範囲が広いHTMLがあるなら歓迎?

そもそも、UAに対応するために、文書をいじくり回して
UA別に複数の文書を用意すること自体がおかしいとは思うが。
根本的な答えはできてないかもで申し訳ないが、
だったら視覚的な部分…CSSをUA別に用意して、文書は一つという方が必然。

どう振り分けるか、というのはまた別な問題。

>>626
その誘導はちょっと趣旨が違う。

あーもう、なんで質問スレで議論したがるかなー
スルーしろよ、ったく

>>629
じゃあ答えてくれよ。 なんで?

>>616

>>622
> ↑ｶ（ｒｙ

って何を略してるんだよーわからねえ

↓以後、議論はスルーで。

>>627
なんだ、振り分けてんの。
そんな技術は当方ないから気付かなかったよ。

>>630は自分じゃないよ。

議論も答えることもできない香具師が仕切るなってw

>>634
見る側が選べるorオフにできるという点もあるぞ、CSSは。

ま、勧める気も押しつける気もないから、いいか。

毎度毎度、「テーブルレイアウトは様々な人に制作者が意図したデザインで見れる」と言ってくる奴がいるわけだが、そんなにデザインに拘るなら、そもそも画像を使うべきだ。
HTMLは文書構造を表すものであって、デザインと共に書く物ではない。

そしてCSSは、気をつければ、CSSでどのブラウザでも同じデザインにすることもできるし、
正しいHTMLを記述しておけば視覚障害者にも優しい、健常者はユーザースタイルシートを利用したり・OFFにしたりと見やすくなる可能性だってある。

さあ、教えてくれ。テーブルレイアウトのメリットを。
組みやすい？　制作者のメリットなんてどうでもいい。
君の組むテーブルレイアウトでデザインされたものが最高に見やすいのか？

>>637
http://pc2.2ch.net/test/read.cgi/hp/1045704853/l50

以後そっちでやってくれ

>>638
スマン。

って言うか、ぽんたとＴＡＣＴだろ、さっきから必死になってるのは

>>626
> >>623
> ほとんど気にしない。
> background-colorを指定しろって大量に出てくるけど、いちいち指定してらんない。

background-color指定しないのって背景色を指定しとかないと文字が読めなくなる
可能性があるからだよね？
なんで{ background-color: transparent; }では警告でないの？

正直 background-color ぐらいでいちいち警告出されるのうざい

HTMLタグで画像を半透明にさせる
<style><!--img {filter:alpha(opacity=50);-moz-opacity:0.5; }-->
</style>
ってタグがあるけど指定した画像だけ半透明にするにはどうしたらいいの？
教えてください。

>>643
img.hoge { filter:alpha(opacity=50);-moz-opacity:0.5; }

指定したい画像を<img class="hoge">とする。（hogeは任意の文字列）
つうかブラウザ依存かつ処理が重くなるfilterプロパティなんかより
直接画像に半透明処理したほうが賢明。

>>644
>>直接画像に半透明処理したほうが賢明
それだと画像は半透明になるけど後ろの壁紙が透けて見えないよね。
透けないと意味ないんですよ。

GIFにして市松模様で透過したら疑似半透明の出来上がり
スーファミライクでいいかもよ

>>646
それを、GIFアニメで交互に出すってのもいいな。

>>643
<style>とか</style>とかがタグで、
<!--〜-->がHTMLのコメントアウトで、
img{filter:alpha(opacity=50);-moz-pacity:0.5;}はCSS文。
そして、filterと-moz-pacityはブラウザ拡張なので、私はあまりお勧めしない。
-moz-系プロパティに関してはモジラORG自身がブラウザ内で使うために作ったのものなので、
一般のサイトでは使うなと言っている。

勉強になりまふ

>>645
PNGのαチャンネルで透過処理ってどうだ？
って，PNGのαチャンネルちゃんと対応しているUAってあったっけ？


>>646
それって，GIFの圧縮効率がめちゃくちゃ悪そう(w

>>649
MozillaとNetscape6以降は対応してる
MacIE5は対応してたかな
Operaは知らん

質問です。(OS-W2K)(ブラウザ-IE6)
metaではtext/css宣言してあります。

HRを左寄せしたいのですが、
Googleで
http://216.239.33.100/search?q=cache:pv34ZogTSGcC:www5.wisnet.ne.jp/~z-plus/hp/html40/hr.html+%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%80%80%E5%B7%A6%E5%AF%84%E3%81%9B%E3%80%80HR&hl=ja&ie=UTF-8
のように検索して、

<HR STYLE="BORDER-ALIGN:LEFT; COLOR:#008080 ;WIDTH:250px;">
↑このように記述しました。
colorとwidthは効くのですが、左寄せが効かないです。
小文字にしてもダメでした。
何が間違っているかわかりますでしょうか？

>>651
border-alignって何ですか
そんなインチキサイトを見ても何も得る所は無いですよ、>>1読め

<hr style="margin-left:0px; color:#008080; width:250px;">

>>652
はぁ･･･インチキ何ですか。
すいません。>>1見ます。
検索の方が早いと思ったもので。。

>>653
すいません。左余白は別に…

取り合えず調べて、以下のようにしました。
<HR STYLE="text-align:LEFT; COLOR:#008080 ;WIDTH:250px;">
NN4とOpera6とIE6はOKでした。
が、NN7ではダメだったので調べなおします。。

>>653
すいません。左余白じゃないですね。

えっと…
<HR STYLE="margin-left:0 ;margin-right: aito;TEXT-ALIGN: LEFT; COLOR: #008080 ;WIDTH: 250px;">
なんか間違っているような気もしますが、これで
NN4とNN7とOpera6,7とIE6に対応出来ました。

>>653さん、ヒント頂いてどうもでした。

<hr style="
text-align:left;
color:#008080;
background-color:#008080;
margin-left: 0;
border:none;
width:250px;
height:2px;">

あ、autoです。あとNNではcolorは効かないですが、いいっす。

>>657
それが正しい記述ですか？
borderとheightをまだ調べてないので、勉強してみます。
有難う御座いました。

>>659
正しい記述かどうか知らんが、
取り敢えず既存のブラウザの多くで同じ様な見栄えになるだけのこと。
各ブラウザ間で、HRの実装方法が異なるので一貫性のある見栄えの調整は無理。
然るべきブロックレベル要素で括ってボーダーを指定した方が賢明。

>>659
Valid(正当)かどうかは>3の検証サービスで分かる。

>>660
それじゃCSSをオフにした時見づらくなる。
<p class="attention">注意！！</p>
と同レベル

>>657のtext-align:left;はCSS的には明らかに間違ってるよなぁ。
ブロック要素をtext-alignで動かすって変。
まぁ、Validにこだわらなければそれでも良いと思うけど。

>>660-663
えっとですね、お蔭様でインライン要素は簡単にセンタリング＆横寄せ出来ました。
「正しい」ってのは、Strict程じゃなくていいです。なるべく仕様通りにはしたいですけど。。

ブロック要素（今回はHR）の位置決めですが、DIVを使って、外部cssにしようと思ったのですが

DIV.cntr {margin-left :auto; margin-right:auto;}だとIEでは無効なので不可
(値＝0でもダメでした）
DIV.cntr {text-align :center;}は言うまでもなくダメ

で、値は適当ですが、下のように。。
DIV.cntr {margin-left :50px; margin-right:50px;}
IEとネスケで、または解像度の違いによって、バラバラなのでダメ

もう<DIV ALIGN="CENTER">〜</DIV>で良いような気がしますが、
取り合えず最初のtext-align使ってます。
または、ページ毎に支障の無い範囲でpx指定してます。

Pxで指定しようとするからダメなんじゃないか

>>663
確かにそうなんだが、俺は別に構わないと思う。
@import 使って NN4.x とか MacIE 除けするのと似たようなものかと。

>>664
DIV.cntr なんてclass名にするなら素直に <DIV ALIGN="CENTER"> にしとけって思うぞ。

>>665
すいません。autoと0もダメでした。

>>666
母音抜くのクセなもので。。

>素直に<DIV〜>
どっちでも表示結果が同じなので、(ネスケだとcolorは違いますけど。）
ttp://openlab.ring.gr.jp/k16/htmllint/htmllint.html
ここで100点の方がイイじゃんっていう自己満足です。。
対応ブラウザ的には<DIV ALIGN>の方がいいんでしょうけどね。

ちなみに表示確認とっているのは、NN4.78、7.01とOpera5.05、7.02(ja)、IE6、mozzila1.2.1jaです。
基本的にデフォ設定で。。

ボインで抜くのクセなもので。。

>>667
>母音抜くのクセなもので。。

そういう問題じゃない。

>>669
じゃあ何で抜くんだよ

じゃ、どういう問題？
位置指定だからalgn(align)やpstn(position)にしろとでも？

>>667
お前はpxしか単位を知らないのか？

em？インチ？絶対指定には変わりないじゃん。

＞「正しい」ってのは、Strict程じゃなくていいです。
ﾜﾛﾀ

そんな揚げ足レスは無駄だろ。
次行けよ次。

物理構造のためのネーミングをするなという問題かもよ。

＞揚げ足レス
ﾜﾛﾀ

http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=%CD%C8%A4%B2%C2%AD&sw=2

>>670
MEGUMI

677
http://dictionary.goo.ne.jp/cgi-bin/jp-more_print.cgi?MT=%C7%F2%F0%B5&ID=a4cf/16181800.txt&sw=2

そんな白痴レスは無駄だろ。
次行けよ次。

まったくだ。低脳どもが。

× 低脳
○ 低能

-----------------------------------------------------------
|文字|
------

みたいなことを実現したいんですが、可能でしょうか？

可能ですよ、ポンコツ

＞ポンコツ
できるよ

ポンコツには無理じゃないか

ポンコツとは言ってもプログラマーだぞ

これはなんというものなのでしょうか・・・
CSSリファレンスで探しているのですが・・・
それらしいものが見つからず・・苦戦しています。

>>688
頑張れ！

ボーダーについて学んでから出直せポンコツ

ポンコツなりに頑張れば

プログラマーならプログラムにやらせればいいじゃん

〜ポンコツを応援するスレ〜
※あくまで応援だけしてください

違います、ここは

/* CSS・スタイルシート質問スレッド【15】 */
http://pc2.2ch.net/test/read.cgi/hp/1045124732/　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　です。

勝手に変更しないように、ヘッポコ693

>'width'は効果を持ちません。'left'、'right'、'margin-left'、'margin-right'の値が'auto'なら、
>その値は'0'(ゼロ)として扱われます。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#Computing_widths_and_margins

その値は0として扱われます。という、その値とは何に対しての値なんでしょうか？
よろしく、お願いします。

'left'、'right'、'margin-left'、'margin-right'の
実際の値（算出値）が0になるってことだべ。

>>696
どうもです。
わかるような・・、わからないような・・・。中々、言葉がむずかひい。

>>695
読解力が無さ過ぎやしないか。活字離れの影響か。
これぐらいの文章、小学生でも理解できそうだぞ。
まさか、幼稚園児じゃないだろうな。

sage

妙なじいさんが来たぞ

>>698
すいません・・。でも、本当にわかるような、わからないような。
包含ブロックに対しての理解が全然できてないようです。
勉強を続けます。。。

確かに、「10. 視覚整形モデル詳細」はわけ分かんないとこが
あるからなー。
「絶対配置の場合……」は飛ばして読むのがおすすめだ。

>>702
親切にどうもです。で、ついでに質問させてください。

「制限しすぎ」っていうのがあるじゃないですか。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#q6
＞上に挙げたすべてのプロパティが、指定値として'auto'以外の値を取る時、
＞それらの指定値は「制限しすぎ」であると言う。
＞　　　　　　　　　　　~~~~~~~~~~~~~~~~
＞そして、それらのプロパティのうち1つは、指定値とは異なる算出値を取る必要が生じる。

これは、実際、staticな位置に配置される非置換ブロック要素に
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'
をauto以外の値にする場合に「制限しすぎ」という状態になるんですよね？
でも、すべてのプロパティをauto以外の値にしても、ちゃんと動作します。

「制限しすぎ」っていうのは、目に見えるエラーやCSS文法チェックで出てくるエラーじゃなく、
こういう仕様だという理解でいいんですか？

超ｸｿ長文ｽﾝﾏｿﾝ

指名かよ
横レスできねーな

>>704
いや、遠慮無く横レスして下さい。m(ﾟ∀ﾟ)m

margin-left: 10px; border-left-width: 10px;
padding-left: 10px; width: 100px;
padding-right: 10px; border-right-width: 10px;
margin-right: 10px;

と指定した場合、「制限しすぎ」になる。これらの合計は160pxだが、
たとえば包含ブロックの幅が200pxの場合は、margin-rightの
指定値10pxは無視され、合計が200pxになるように、margin-rightの
算出値は50pxになる。（direction: ltrの場合）

てな感じかな。

ｼﾈｰﾖｳﾞｫｹ(ﾟ∀ﾟ)ｱﾋｬﾋｬﾋｬ

>>706
めっちゃ、わかりやすい。包含ブロックも上の例で理解できたような気がします。
ありがとうございました。( ´∀｀)/

>>703
>そして、それらのプロパティのうち1つは、指定値とは異なる算出値を取る必要が生じる。
>'direction'の値が'ltr'なら、'margin-right'の指定値が無視され、上の等式を満たすような算出値が与えられる。
>'direction'の値が'rtl'なら、'margin-left'が同様の処理を受ける。
と書いてあるでしょう、本当に良く読んでいるのですか。

「何でもかんでも質問すれば良い」とでも考えているのですか。
仕様書は、一部分を読んだけでは全体像は見えてきません。
一通り良く読み、良く考えて、それでも解からなかったら質問して下さい。

>>709
どうも。一通り読んでます。仕様書と「鳥さんの棲むところ」を見比べながら、
サンプルソースを書いて、opera6.05とie6.0とnetscape7.0で見比べながらやってます。

それでも、わからない部分を聞いているんです。
気分を害したならば、謝ります。

蛤ってなんて読むんですか、教えて下さい。

>>709
まあ、落ち着け。

偉そうに文句言ってるだけの奴がいますね

はまぐり。

はまぐち。

>>710
気分を害しましたので謝ってください。

ごめんなさい、勘弁してください

ところでなぜ海の色は青いのですか？

>>717
空の色が映ってるから

勉強になります

>>717
CSSで指定されてるから。
.sea{
background-color:#3261af;
}

海の水がしょっぱいのは何故ですか？
気分を害したならば、謝ります。

>>721
あれは海水浴客の尿や汗の味です。


ある一部分にだけ他の箇所とは違うlink要素を適用するには
どうすればいいのでしょうか？

>>722
擬似クラスのことか
このスレ嫁

>>722さん
ええと、head要素内に書く方のlink要素ですか？
それとも、a要素内に書く擬似クラスの方ですか？
（たぶん後者でしょうけど）

>>724
前、このスレかどのスレか忘れたけど、◆.noteIcx3A さんに世話になったものです。
そのちょっと意地悪いレスにがかりです。前は、もっと丸みがありましたよ？

サイトは時々拝見させてもらってます。

>>725さん
あ、誤解を招いたならごめんなさい。
憶測で回答するより、質問のポイントを明確にした方がいいかな、と思いまして…。
ええと、とりあえず後者だろうということで>>723に回答します。

特定のアンカー（仮にhogehogeとします）に
他のアンカーと違う効果をもたらす方法ですが、2種類あります。

1.<a href="〜" class="hogehoge">リンク</a>というように、
　アンカー自身にclassを指定して、特定の効果を指定したい場合

この場合、a.hogehoge:link{〜]とすれば、他のa:link{〜}と区別されます。

2.<p class="hogehoge"><a href="〜">リンク</a></p>というように、
　hogehogeというclassに含まれるアンカーに特定の効果を指定したい場合

この場合、 .hogehoge a:link{〜}とすれば、他のa:link{〜}と区別されます。

ちなみに私は2.の方法を主に使ってます。

意地が悪いようには見えんが
質問要綱をハッキリしてくれんと答え様が無いのは如何ともし難いんじゃ・・・

>>726
生意気言ってすいませんでした。。。
>>727
おっしゃる通りです。申し訳ないです。

>>726の4行目、「>>723に回答」じゃなくて「>>722に回答」ですね（汗）
今日はもう遅いので寝ますけど、もし>>726の説明でよく分からなかったら、
言ってくださればサンプルページ作ります。

>729
アンタいい人だな。
俺だったら
「もう他人の質問なんか答えてやらねぇ」
と思うな。

>>730
剥同。

すいません、質問させて下さい。
Tableで使われるCellSpacing、CellPaddingはCSSではどう書けば良いのでしょうか？
スタイルシートで作った枠に、Tableと同等の値を入れたいので。。

>>732
cellspacing → TABLEに対して border-spacing
cellpadding → TD, THに対して padding

>>733
どうもありがとうございます。感謝します。

IE 5.1だとCSS適用されるのに、ネスケ4.7だと適用されない。
どうして？

NN4.7が腐ってるから。

仕様。そして、NN4.7が腐ってるから。

>>736
>>737
ｹｺｰﾝ

>>736
>>737
ｹｺｰﾝ

>>738-739
重婚イクナイ

>>736
>>737
そうか。。。でも仕様書には4.0以降に対応って書いてあるんだよね。
どうもありがとう。

>>741 ソース書いてYO!

>>741
HTMLのﾊﾞｰｼﾞｮﾝとブラウザのﾊﾞｰｼﾞｮﾝを混同？

仕様書にどのUAに対応かなんて書いてあるのか？

>>743-744
まあ、いいじゃないか。
彼は「ネスケ４は腐っている」という正しい知識を得て、このスレを去っていったのだから…

今、テーブルを使用したサイト構成から、なるべくCSSを使用したサイトへ
書き換えをしようとしているのですが、色々と試してみてもよく分からない
ので質問させて下さい。

例えば、以下のようなテーブルでレイアウトしているぺーじは、CSSで
どのように書き換えたら良いでしょうか。

<TABLE border="1">
<TBODY>
<TR>
<TD bgcolor="#804040"><IMG src="画像" border="0"></TD>
<TD bgcolor="#ff8080">文章・・・・・</TD>
</TR>
</TBODY>
</TABLE>

>>746
<div class="hogehoge">
<img src="**" alt="**" width="**" height="**">
<p>文書・・・・</p>
</div>

cssは
.hogehoge {border:1px solid #好みの色;}
img{background-color:#804040; border:none;}
p{background-color:#ff8080;}

余白とかつけたい時はお好みで

>>747
strict厨としては
<div class="hogehoge">
<dl>
<dt><img src="**" alt="**"></dt>
<dd>文章……</dd>
</dl>
</div>

dl{display:inline}
またはフロートで

>>747
back-ground: に対する color: がありませんって怒られない？
color:inherit; かな？

>>748
いや、「文書・・・」が画像の説明なのか解らなかったので・・
確かにその通りだね、ｽﾏｿﾝ
>>749 ﾔｯﾁﾏｯﾀ ｽﾏｿﾝ

こちらに誘導されたのでこちらで質問します。

スタイルシートのテキストってページ内で1つしか使えないんですかね？
例えば文字が12pxと14pxのスタイルシートがあったとします。
これにリンクを貼ってマウスを乗せたら色が変わるようにしたい。
で、a;hoverで背景の色を指定します。
でも、テキストサイズも指定しなければいけないから12pxにする。
そうすると14px用のa;hoverが作れません。

ちなみにDWMX使ってます

説明不足ですみません。
写真付きの日記を公開しているのですが、テーブルの左のセルに写真、
そして右のセルに日記の文章をレイアウトしています。
皆さん、ありがとうございました。
試してみます。

>>750
って俺のアホ！　よく見たら画像と文書は同じTR内じゃないか！
>>752
ちょっとまってて。ゴメンネ

>>751
とりあえず、a;hoverじゃなくてa:hoverね。
後は状況把握してからレスします。

>>751
> でも、テキストサイズも指定しなければいけないから12pxにする。
　なんで指定しなきゃならないの？どこでそんなヘンな知識を。

>>751
文章が理解できません。

>>751
DWでは「テキストサイズも指定しなければいけない」操作が必要ということか？
あるいは、勝手にテキストサイズまで指定されてしまうということか？
いずれにしても↓

Dreamweaver教えます♪（その７）
http://pc2.2ch.net/test/read.cgi/hp/1044871264/

>>751
何度読んでも状況が把握しきれないんだが、

<p class="size14px">クラス名は説明用な（笑）<a href="size14.html">14pxのリンクね。</a></p>
<p class="size12px">この文はサンプル文な。<a href="size12.html">12pxのリンク。そこんとこﾖﾛしく/a></p>

なら、
.size14px{
font-size:14px;
}
.size12px{
font-size:12px;
}

.size12px a:hover,.size14px a:hover{
background-color:お好きな色;
}

でええんちゃうかと。

>>754-756
厨ですみません・・・。
さっき、テストしていたのですが
やはりa:hoverやa:linkなどはページ全体に適用されるみたいですね。

やりたかったことですが
12ｐｘの”あいうえお”と14ｐｘ”あいうえお”を指定してたとして
ともにリンク貼った時の表示を異ならせたかったのです。
a:hoverに色をつけてたら
どの文字のリンクでも色が付いてしまいますよね？
ページ内の特定のリンク文字だけに色をつけたかったんです。

>>758
ありがとうございます！早速試して結果報告しにきます。

訂正。

誤）
.size12px a:hover,.size14px a:hover{
background-color:お好きな色;
}

正）
.size12px a:hover,.size14px a:hover{
background-color:お好きな色;
color:お好きな色;
}

怒られます(((( ;ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

754さん、ありごとうございます。
が、無理でした。。色は反映されません。
下記のようにコピペしたのですが・・・。

.size14px{
font-size:14px;
}
.size12px{
font-size:12px;
}

.size12px a:hover,.size14px a:hover{
background-color:#ff0000;
color:#ffcc99;
}

<div class="hogehoge"><dl>
<dt><img src="***.***" alt="**" width="**" height="**"></dt>
<dd>文書・・・・</dd></dl></div>
.hogehoge {background-color:#お好み;color:#お好み;border:1px solid #お好み;clear:left;}
img{border:none;}
dt{background-color:#844;color:inherit;float:left;}
dd{background-color:#ff8080;color:inherit;border:none;}

（行数短くするため改行をある程度省きました、ご自分で見やすいようにしてください）
こ、これでどうだろう・・(((((((( ；ﾟДﾟ)))))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

>>762
HTMLのほうのソースお願いします。

>>762
何がしたいの？？
箇条書きにしてごらん。

>>759
＞ページ内の特定のリンク文字だけに色をつけたかったんです。
>>722-726嫁

>>754
htmlソースです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テストページ</title>
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="font12"><a href="#" class="size12px">あいうえお</a></p>
<p class="font14"><a href="#" class="size14px">かきくけこ</a></p>
</html>

>>765
それぞれ違う文字の大きさにリンクを貼ったときに
違和感なく表示させたいのです。

>>767
それ、>758の例と構造が違ってます。

>>754
できました！なんか独自にやろうとしたら変になりましたが
758に例文を参考に独自にやってみます。
ありがとうございました。

>>767
＞class="font12"
＞class="font14"
class名が間違ってるだけだ
正しくは、class="font12px"、class="font14px"

>>770
正しくは、class="size12px"、class="size14px" だろ。

というか、このクラス名って、めちゃめちゃ物理的じゃねえか？

12pxにする理由、14pxにする理由でつけるべきかと。

>>771
>758に書いたとおり、説明用。

>>772
いや、あんたが理解してる事はわかってるよ。
>>762がまんまコピペしてたら、と危惧したもんでな。

>>773
そうですね。
物理的なクラス名を使う事への注意を書かなかったのは注意不足でした。
今後気をつけたいと思います。

インライン要素のheightプロパティの指定は仕様上正しいものでしょうか？

http://www.agemasukudasai.com/bloom/

>>775　ものによる

>>775
非置換インライン要素には効果を持たない。
非置換インライン要素の高さは line-heightプロパティによって決まる。
置換要素のボックスの高さはその要素に内在している。
しかし、置換要素の heightプロパティが「auto」以外の値を取る時、
User Agent はその高さを伸縮させても構わない。

CSS 2.1 草案では、次の様に追加されている。
もし width に「auto」が指定され、height に「auto」以外が指定された場合、
width の算出値は (要素に内在する幅) * ( (heightの計算値) / (要素に内在する高さ) ) とする。

>>778
ありがとうございます。heightを指定しても特に問題ないということですね。

IE5.5の場合insに背景画像を指定して、複数行(ins直下は生テキスト)にまたがる場合に画像の位置が
ずれることがあったのですが、height:1emを指定することで回避できたのでそのまま使っていいか悩んでいました。

別にどの要素に何を指定したっていいんだよ。
適用されない要素なら無視されるだけ。

すみません、質問させて下さい；；
何度やっても出来ないんですが、フレームを使用しているページでの、
ページの周りに枠をつけるCSSは効果がないんでしょうか？
<STYLE type=text/css>
<!--BODY{ border-style: 枠の種類;border-width: 枠の太さpx;border-color: 枠の色;-->
</STYLE>
<FRAMESET>
</FRAMESET>
みたいな感じで・・・
判りづらかったらスミマセン。

愚かな・・・

>>781
body { border-style:枠の種類; border-width:枠の太さpx; border-color:枠の色;
margin:0; padding:0; }

<body>
<iframe src="frame.html" width="100%" height="100%" ></iframe>
</body>

frame.html に
<frameset>
<frame src="***.html">
以下略

とか（汗

>>783
body { border-style:枠の種類; border-width:枠の太さpx; border-color:枠の色;
margin:0; padding:0; }
↓
body { border:枠の太さ 枠の種類 枠の色;　margin:0; padding:0; }

アンカーいれた文字にリンクを入れるように
ブロック属性で囲まれる部分にリンクを入れる事は可能でしょうか？

例えば
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
で左上のセルにで表示されるエリアに<a href="">を入れるみたいな

わかりにくくてスマンす。

>>785
質問はageるように。

それと、HTML、CSSの用語をもう一度しっかり確認してください。

テキストにアンカーは入らないし、リンクにアンカーをいれたテキストも入りません。
ブロック要素、包含ブロックなる言葉はあるけど、ブロック属性という言葉は存在しません。

もう一度、質問を整理して、何をしたいか明確にしてください。

ごめんなさい。
なんと表現して言いかわからなかったものでつい…
出直してきます。

質問はageる事
との表記がないのと恥かしがり屋なのでageませんでした。

きっと td.hoge a {display: block;} みたいなことがやりたかったのだろうと想像で答えてみる

a:hover {background: #0f0;}
td {width: 15em; border: solid 1px #0ff; text-align: center;}
td.test a {display: block; width: 100%;}

<body>

<table>
<tbody>
<tr>
  <td class="test"><a href="somewhere">top-left</a></td><td><a href="somewhere">top-right</a></td>
</tr>
<tr>
  <td><a href="somewhere">bottom-left</a></td><td class="test"><a href="somewhere">bottom-right</a></td>
</tr>
</tbody>
</table>

</body>

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style><!--
body {font-style:inherit; font-weight:inherit; text-align:inherit; padding:0; margin:0;}

.title {
background:#999999;
color:white;
text-align:center;
font-size:200%;
}

.menu {
background:#cccccc;
color:white;
text-align:center;
width:100pt;
height:100%;
}
--></style>
<TITLE>Web Site - Last Heaven</TITLE>
</HEAD>
<BODY>
<div class="title">title</div>
<div class="menu">menu</div>
</BODY>
</HTML>

と記述しているのですが。
メニュー枠（？）の右側に文字列を表示するにはどうしたらいいんでしょうか？
私流にやっても、メニュー枠の下に表示されます・・・

>>790
>>6を読む

>>791
ありが�d
これでできるようになったよ。

http://eggtown.gaiax.com/home/yukime

どうしてスレの最初を読まずに質問するヤツばかりなんだ？

スレの最初をまず読む、という習慣が浸透していないからでは?

>>790
div class="title"は、見出し(h1-6)要素としてマークアップした方が良いのでは？
div廚呼ばわりされちゃうよ。

お前らがホイホイ答えるからだろ。

初心者スレから誘導されてきましたので、こっちで聞きます。


置換ブロック要素って、
hrとdisplay:none;を指定した置換インライン要素以外に何かありますか？
お願いします。

>>798
objectとかどうよ

>>799
objectはインライン要素みたいなんですけど。

>789
レス遅れてすみません。
無事できました。
ありがとうございます。

display:none;を指定した置換インライン要素って、置換ブロック要素なの？

>>794
ｽﾏｿ。

>>796
あ、確かにそうですね。
そうしときます。

おい！CSSって順番関係あるのか？！

>>804
もっと具体的に

例えば、リンクのLVHAを指定する時、仮に:hoverが:visitedより上の位置にあると、ブラウザーで見ると:hoverが適用されないよね？（訪問済みになると）

body
h1
p
a:link
a:visited
a:hover

の順番？

>>806
まさに、L→V→H→Aの順番。LとVはどっちが先でもよい。

>>807
その他のタグとかは順番関係ある？リンクの順番については書いてあったんだが…LVはどっちでもいいのか。むー

>>808
タグの順番は関係ない。関係するのは詳細度。
で、詳細度の計算方法は↓
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#specificity

>>809
おお、ありがとう。ちょ、下のURLで勉強してくるわ。サンキュー

えーと、質問させてください。
http://www.geocities.co.jp/Milano-Aoyama/7024/example-j.html
の場合、ある程度幅を狭くしても回り込んでくれるんですが、
http://www.geocities.co.jp/Milano-Aoyama/7024/example.html
の場合、ある程度短くなると隠れてしまいます。
(ﾟДﾟ)ﾊｧ?な質問してるかもしれませんがよろしくお願いします。

>>811
それはIEでの話ってことね？
ちなみに、Opera 7.02 では貴方が意図したように表示される。
Netscape 7.02 では、“-” で自動折り返しされないので、
contentssuitableの頁がトンでもないことになっている（笑

失敬。
誤　contentssuitable
正　suitable-contents

>>812さん
そうです。ちなみにOpera6.02然りです。
幅を%指定したのが(ﾟДﾟ)ﾏｽﾞｰかったんですかね

>>811
WinIE は「overflow: visible」の実装が間違ってるですよ。
幅を縮めても、最も長い単語が収まる様に、ボックスの幅を合わせてるですねぇー。
正しい実装では、収まりきらない内容は、ブロックボックスの外側に溢れるです。

「overflow : auto」とすると、ボックスは切り抜かれて、
かつ内容にアクセスすることが出来て宜しいかもですよ。

>>815さん
なるほど。
とりあえず、手元で試してみたら崩れずにすみました。
参考になりましたっす。
どもありがとうございました(・∀・)

なりましたっす。っす。っす。っす。

>>816
質問の趣旨とは多少違うけれども、去年の11月、米 Wired News が
TABLE を排除したレイアウトを実現した時の DevEdge のインタビュー記事
http://devedge.netscape.com/viewsource/2002/wired-interview/

TABLE を使わずに段組する手段として float と position を候補に挙げ
最終的に position を採用した経緯が載っている。
一方、float を使って段組を実現した例が→　http://www.w3.org/

float はバギーで、「CSS/DHTMLバグ辞典スレッド ver2.0」
http://pc2.2ch.net/test/read.cgi/hp/991666454/　にもたくさん報告があるようなので、
使わずに済むなら越したことはないというのが個人的な意見。

#column1 { position: absolute; width: 20% … }
#column2 { margin-left: 20%; width: 80% … }

とかを試してみてもいいんじゃないかと思いますた。

CSSの邦訳版の話ですが、
google検索やstrictスレのテンプレなども回ってみたのですが、
ローカルでのんぶり読める zip圧縮版は無いですか？

あればそのサイトのURL教えてください。

なければ メール送ったほうがいいかなぁ。

>>819
ダウンロードして読んでください。

>>819
ttp://web.archive.org/web/20011204173550/http://www.fan.gr.jp/~kaz/rec-css2.zip

>>783
遅くなってすみません。
そういう方法もあったんですね。
ありがとうございます！

リンクをクリックした時に別ウインドウを開くCSSってどうしたら出来ますか？
結構前に、とあるサイトで見たんですが今は閉鎖してて・・。

アドバイスお願いします。

>>823
CSSの範疇ではないと思われ、、、
HTML か JavaScript のお話。

>>824
それが、そのCSSを使ってたサイトってゆうのは携帯向けスペースの魔法のアイランドで、そのCSSを見たのは魔法のアイランドが提供してる掲示板なんですよ。

魔法のアイランドの掲示板自体、リンクに _blankとか使用できないし設定も出来ないので、、、

う〜ん。。。

( ﾟДﾟ)

( ﾟДﾟ) なんですと

>>825
一人で悩んでろ。

もしかして電波さん？(；´Д｀)ﾊｧﾊｧ…

>>828
うるせーバカ。

Line : 4 Level : 1 指定された背景色(background-color)に対応する前面色(color)が指定されていません : h1
このエラーって何？

>>831
colorとbackgroud-colorは常にペアだということ。
理由はユーザースタイルシートがあるから。

>>831
背景色だけでなく文字の色も指定しろってこと。

a:hover{
text-decoration:underline;
というのでラインの色だけを変えたい場合はどうすればいいのでしょうか？