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

CSSに関する質問はこちらへどうぞ。　※　議論はよそで　※
■■■■■　質問のしかた　■■■■■
・基礎は解説サイト（>>4・かなりわかりやすい）で勉強してください。
・質問の前に【FAQ】（>>5-8）を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
　WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
　【解説など】（>>4）の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。

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

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

過去スレや関連リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-8

http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】　http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】　http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com:8080/?CSSRelated

【過去ログ】
1　http://mentai.2ch.net/hp/kako/974/974934062.html
2　http://natto.2ch.net/hp/kako/984/984113434.html
3　http://natto.2ch.net/hp/kako/992/992992981.html
4　http://pc.2ch.net/hp/kako/996/996828258.html
5　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7　http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8　http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9　http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10　http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11　http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12　http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13　http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14　http://pc2.2ch.net/hp/kako/1041/10416/1041641395.html
15　http://pc2.2ch.net/hp/kako/1045/10451/1045124732.html
16　http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
17　http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
18　http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
19　http://pc2.2ch.net/hp/kako/1053/10536/1053619342.html
20　http://pc2.2ch.net/hp/kako/1055/10555/1055536413.html
21　http://pc2.2ch.net/hp/kako/1057/10578/1057860130.html
22　http://pc2.2ch.net/hp/kako/1060/10608/1060869440.html
23　http://pc2.2ch.net/hp/kako/1064/10645/1064502391.html
24　http://pc2.2ch.net/hp/kako/1066/10663/1066310242.html
25　http://pc2.2ch.net/hp/kako/1069/10692/1069216458.html
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1072018825/l50

【関連スレッド】
・CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
　http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・CSSでイケてるデザインサイト 20
　http://pc2.2ch.net/test/read.cgi/hp/1074254818/l50

【仕様書】
・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
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・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/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準普及プロジェクト　（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け　（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q2: text-align:center;を指定しても Netscape6(or7)ではtableなどブロック要素がセンタリングできません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に4.）をご覧ください。

1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
Q3: CSSで擬似フレームってどうやるの？
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://kobit.info/tips/overflow.html
　http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html

Q4: CSSで段組するには？
A4: 下記などを参照して下さい。
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://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと　（ネスケ４でも崩れない段組みの実例）
　http://village.infoweb.ne.jp/~fores/

【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど？
A5: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
　http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A8．下記に書いてあります。テーブル・レイアウトは段組のFAQ（A4・>>6）をご覧あれ。
「いままでの HTML との対照」
　http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.jp/site/tips/page/p0037.html

Q9.dt・ddを横並びにしたいのですが。（会話文など）
A9.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q10.リンクした画像の線が消えません。
A10.img要素ではなくa要素をセレクタにしてborder指定してませんか？　
a:link img, a:visited img, a;hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。

>>4は下記に変更。
>・Web標準普及プロジェクト　（特に「HTML/CSSのよくある誤解・ミス」）
>　http://www.mozilla.gr.jp/standards/index.html
・Web標準化Tips　（特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/webtips/index.html

そろそろテンプレ終わりでしょうか？

http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
ここのサイトの「初出 公開 最終更新」部分の上下にボーダーがあるのですが
この表示方法を教えていただけませんでしょうか？

最初のclass指定のstatusかと思ったのですがmarginしか記述してありませんでした。
そこでstyle.cssを見てみたのですが、backgroundを指定するdt部分はあれど
上下の線は出ませんでした。borderで試しても上手くいかず、悩んでいます。

あの表示方法だと段組の場合に見やすく、とても興味が沸きました。
どなたかご教授よろしくお願いします。

別に普通だろ。こんなの

dt{
border-style:solid none;
border-width:thin;
border-color:#666666;
margin:0.25em 0;
padding:0.125em 1em;
}
http://members.jcom.home.ne.jp/pctips/antinn.css

>>10
tnstyle.css で @import している antinn.css 中に以下のような記述があります。

dt{
border-style:solid none;
border-width:thin;
border-color:#666666;
margin:0.25em 0;
padding:0.125em 1em;
}

cite : http://members.jcom.home.ne.jp/pctips/antinn.css

かぶった……しかもageてしまった……。

>>11-12
最近cssを勉強し始めたんですが、今までHTML言語で同時にデザインも指定していました。
cssの可能性を知ってから、新しいことを知るたびに楽しくなってきます。

これからも精進しようと思います。ありがとうございました。

>>10
@importによるNN4除けを知らなかったの見逃すとしても、
「borderで試しても上手くいかず」が解せない。
border:thin solid #666; border-width:thin 0; で済むはずだが。

__________________
| |
| |
| 画像 |
| |
|__________________|
| |
|__________________|

こんな600×650くらいのウィンドウをjavascriptを使って開けるようにしています。
このウィンドウの上部に画像、下にその説明テキストを入れたいのですが
隙間無くきっちりと画像を置いて、その下のテキストエリアには左右にゆとりを持たせ
説明文を書きたいと思っています。その際、タイトルとなる文字を入れるため
>>11-12にあるような感じで<dl><dt></dt></dl>を使いました。
するとそのタイトルと画像の間に空行が出来てしまいました。

cssのdt部分にmargin,paddingを0で指定したのですが、それでも埋まりません。
これはもしかして<dl>が原因なのでしょうか？

>>16
下手に図示するよりソースを書いてみてくれませんか。

あと、無理に定義リストにしないでも、タイトルが欲しくばh1でもいいのでは。

>16
dl の padding 確認しる

>>17-18
<h1></h1>でも可能なこと忘れてました。早速試してみたところ
やはり画像と<h1></h1>との間にほんの少しだけ間が空きます。

<html><body>
<img src="/a.jpg" width="600" height="450" border="0" alt="写真説明">
<h1>写真タイトル</h1>
<p class="text1">
ここに説明が入ります。</p>
</body></html>

body { color : #000000; background-color : #cccccc; margin : 0,0,0,0;}
h1 { font-size:12pt; font-weignt:normal ; text-align:center; color:#ffffff;
background-color:#663300; border-style:solid none; border-width:thin;
border-color:#000000; margin:0,0,0,0; padding:0.3em,1em,0.1em,1em;}

上がhtmlソース、下がcssソースです。画像は横がウィンドウサイズとぴったり合った状態です。

body に padding は？ img の margin 指定は要らんと思うが

cssにpaddingを指定しましたが、変化なしでした。
imgのmargin指定というと width="600" height="450"の部分でしょうか？
試しに何も指定しませんでしたが、それでも変化なしです。

>>19
body の子として img を直に置いてはいかんよ。
<body>
<p><img src="/a.jpg" width="600" height="450" border="0" alt="写真説明"></p>
<h1>写真タイトル</h1>
<p class="text1">
ここに説明が入ります。</p>
</body>

で、リトライしる。これは hn などのブロックに限らず、
table 等でも同様のことがおきるよ。

何らかの理由で img の親要素を body にしなければならないなら、
<img><br>

とすれば何とかなるみたいだけど。

>>19
なぜ、値をカンマで区切っているのか。区切りは空白類文字。

というか、各要素にブラウザでデフォルトのマージン・パディングが
設定されてたりするのだから、全称セレクタでゼロにリセットするか、
ソースに書いた各要素のmargin/padding等を設定すべし。

というか、そのソースはbody直下にimgがあったりして良ろしくない。
まあ、それは放置して。下記のようにしてみたらどうか。
というか最初に挙げた解説サイトでも以下略。

body { margin:0; padding:0;}
h1 {margin-top:0;}
p.text1 {margin:0 5% 0.5em 5%; line-height:1.4;}
img {margin:0; padding:0;}

>>21
<img src="/a.jpg" width="600" height="450" border="0"
alt="写真説明"><h1>写真タイトル</h1>

こういうことかいな

marginやpaddingの一括指定はカンマじゃなくて半角スペースで区切るんだよ

レス被った。。＿|￣|○

流し読みすぎた OTZ

>>22-25
今のところ変化なしです。

<body>直下に置かず>>22さんのように<p><img....></p>をやってみたんですが
今まで以上に空きました。

>>23さんのも試してみたんですが結果は同じです。

他に何か見落としている点がありましたら、よろしくお願いします。

＞　<body>直下に置かず>>22さんのように<p><img....></p>をやってみたんですが
＞　今まで以上に空きました。

……。悪いことは言わないので、いっぺん全称セレクタで、
* { margin:0; padding:0; }
とやって、各要素（セレクタ）はmarginとpaddingを指定しないで
（コメントアウトして）みてください。

>>28
> <body>直下に置かず>>22さんのように<p><img....></p>をやってみたんですが
> 今まで以上に空きました。

そりゃ，<P>のマージンの分だけ，隙間が出来たんだな。
<p class="image"><img....></p>
p .image {margin:0;padding:0;}
で試してみてはどうか？

>>24さんの方法試した？
imgとh1の間に改行を置かない方法。
これだと隙間開かないよ。ソースの見た目は悪くなるけど。

>>30
あれ・・>>24さんので試したら成功しました。これは何故でしょうか？

>>29
一度それでも試してみます。

ちなみにFirebird0.7では改行に関係なく隙間開かないね

てか、「ぴったりにしたいんですけど」と言い出すやつの美的感覚って狂ってるよな。何についても。
できないならやりたがんな、と。

できないから「やりたがる」んじゃないの？

やりたがってるけどできない、だろ。童貞と同じだ。

>>36
馬鹿だなぁ。「できない」のは結果論だろ。
前提として「やりたい」ってのがくるわけだ。じゃなきゃ動機がない。
どちらにせよ俺もぴったりの美的感覚がわからないがな。

>37
お前が馬鹿だろ。
前提が「やりたい」、結果的に「できない」だから、
「やりたがってるけどできない」で合ってる。

もうちょっと日本語勉強しろよ。馬鹿だなぁ。

>>38
母国語も理解してない奴がいるとは・・・(；´Д`)
マジでちゃんと勉強汁！

37が35宛なら納得できるんだけど。

ピッタリ閉じてるのをヤりたがるのはなぜか、と言う議論ですね
哲学的です

マンコが閉まってるか、ちんちんが起たないため意思との矛盾に悩まされるスレですか。

>>34-42 {display:none !important;}

次の方、質問どうぞ。

画面の高さの30%を指定できるタグはどれですか？
div{
height:30%;
}
これは失敗しました。インライン要素のemも失敗しました。

「画面」って何よ。viewport のことか。
「30%を指定できるタグ」って意味不明。
何をしたいのかも不明。答えようがない。

>>45

つまり特定の要素の高さを
ディスプレイの（ブラウザの）最大高30%に設定したい
ってことなんじゃねーの？
そしてそれをDivで失敗した、と。

>>44
CSSやりながらタグがうんぬん行ってる方は勝手にFontタグだのmarqueeタグだの使ってヘヴぉいサイト作って頑張って下さい。
ここはHTMLを教えるスレッドではありません

>>4のリンク先から

height: n%;の正しい仕様
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

http://romance.s6.x-beat.com/index.xcg?abt&css=2
このページで、aのhover時にborderで修飾かけてるんですが、
なぜかhoverするたびに親要素であるpかdiv.cntごと動いてしまいます。
Paddingの指定やWidthの指定など色々してみましたがダメでした。
この動作でいつもリンクのborder修飾はあきらめていたんですが、これを動かないようにするためにはどうしたらいいんでしょうか

>>48
漏れも似たような状態になって困ったことがある。
そのページとの共通点ったら、hn要素でfirst-letter→色替えくらい。
それを取っ払ったら動かなくなったから試してみ。

ホホホホントだっ

すごいっすね
バグなんだ・・・・調査の上で報告報告っと

直ってますな

レイアウトはスタイルシートで管理するのが常識ですが、例えば制作側で
文字の大きさを指定した場合ユーザー側で変更しても固定されてしまいますよね。

これを避けるためにはどうすればよいのでしょうか？

>>52
font-sizeを%で指定する。
>>4を呼んでから質問して下さい。

>>53 =~ s/呼/読/

質問

背景画像にgifを使ったんですが左1pxほど空いています。bodyにmarigin:0; padding:0;を適用しても駄目です。
これは何か理由があるのでしょうか？

>>55
実例をリンクしてくれ

今やろうとして気づいたんですが、IEの左端にあるグレーの影の部分でした。
やはり気にはなりますが、これ自体はどうしようもないのであきらめます。

>>57
html, body {
border: none;
}

>>52
単位はemがおすすめ。

フォントサイズについて考えよう
http://pc2.2ch.net/test/read.cgi/hp/1042293757/l50

<dl><dt><dd>これらそれぞれに背景画像を指定したのですが上手くいきません。
何が原因なのでしょうか？

dl { background-image:url("./img/back.gif"); }
dt { background-image:url("./img/back.gif"); }
dd { background-image:url("./img/back.gif"); }

間違えました。back.gifは1〜3までそれぞれ別のを用意しています。
あと「"」をなくした状態でも試してみましたが失敗しました。

>>60
どううまくいかないのでしょうか。
>>1

相対パスはシートが基準ですが、HTMLを基準にしてませんか。>>60

>>63
出来ましたー！ありがとうございます。「相対パスはシートが基準」というのは
外部CSSでは相対パスは使わないほうがよいということでしょうか？

>>64
ナンデソーナルノ!?
外部シートのURLを基準とした相対パスにすればいいだけ。

基本なので>>4で復習しなさいね。

>>65
なるほど。今まで相対パスでいろいろ出来ていたので
今回のパスの書き方が間違っていたということですね。

ありがとうございました。

http://hp.vector.co.jp/authors/VA022006/css/data.html#uri
CSS の外部スタイルシートにおける基準URIは，“ソース文書の URI” ではなく “外部スタイルシートの URI” です。

http://cssbug.at.infoseek.co.jp/detail/nn4x/b008.html
本来、外部スタイルシート内の相対パスはスタイルシートファイルを基準にしたパスであるが、NN4はこれをリンク元の文書ファイルを基準にしたパスとして扱う。

すいません。前スレ終りかけのところに書き込んだので、
再掲します。

{position:absolute; bottom:0px; left:0px;}
で左下に画像を配置してみたんですが、IE6、Mac版IE5.17、ネットスケープ7（Mac、Win両方）等で確認すると、どのブラウザでも何故か下に10ピクセル程度の隙間ができてしまい困ってます。BODYにmargin、padding共に0px指定してます。
IE6以外では{position:fixed｝にすると解決するんですが、IE6ではfixedを認識してくれないようで、ムチャクチャになってしまいます（さすがにIE6を無視することもできません）。
何かいい方法ないでしょうか。

>>68
背景画像としてみたら？

>>68
こういうのではだめなのでせうか。

<title>sample</title>
<style type="text/css">
body { margin:0; padding:0;}
p.image { position:absolute; bottom:0px; left:0px;
margin:0; padding:0; /*line-height:1ex;*/}
img { margin:0; padding:0;}
</style>

<p class="image"><img src="hoge" alt="" width="20" height="20"></p>

>>66
> なるほど。今まで相対パスでいろいろ出来ていたので
まだわかってない予感

>>48
がんがって報告してくれ。
漏れは自分のとこ以外でこれを見たことがなかったから、
再現性があるかどうか確認するのが面倒だったからやめた。

hn（first-letter で色替え） の後に p 配置してアンカー置くとそうなる気がするんだけど、
常にそうってわけでもなかったからなぁ。何にせよがんがれ。

これじゃねえの？
ttp://cssbug.at.infoseek.co.jp/detail/winie/b102.html

>>72-73
こちらで。
http://pc2.2ch.net/test/read.cgi/hp/1050844510/734-

>>74
いや、だからｶﾞｲｼｭﾂだ、って言いたかっただけで。

>>75
否。>>73の挙げたバグの、次の条件と合致しないので、新出バグかと。
＞一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している
http://cssbug.at.infoseek.co.jp/detail/winie/b102.html

>>76
そか。ｻﾝｸｽｺ｡

http://pc2.2ch.net/test/read.cgi/hp/1074061533/996
の者です。良かったら教えてください！

#ホストが規制されていてスレたてできなかった・・

A { display:block; } でブロックボックス化すればいい

thxでつ！

ページ全体のリンクの色を変えるのではなく、
特定の箇所（リンク）だけの色、
クリック後の色、
カーソルを乗せた時の色、を変えるにはどうすればいいでしょうか？

>>1-4読んで出直してきて下さい。

>>81
>特定の箇所（リンク）だけの色、
a.hoge:link { color: blue;}
>クリック後の色、
a.hoge:active { color: red;}
>カーソルを乗せた時の色、
a.hoge:hover { color: green;}

<a class="hoge" href="xxxxx">アンカー</a>

最近>>4読めって奴が多いが、それじゃ質問スレの意味ねーだろーが。
まぁ確かに>>4辿ればわかるだろって質問が圧倒的に多いが、それを全部誘導するんなら
このスレの存在意義まったくなし。

「>>4読め」は思っても口に出すな

すると、>>84は>>1を改訂すべきであるといっている、と。


まあ、>>84のいうことも分かりますが、質問者は状況説明くらいはきちんとした方がお互いに幸せと思うこのごろ。

>>85
うむ。言葉足らずが多すぎるのも事実。その辺をもう少し考慮して質問してくれればね。

正直cssぐらい>>4読めばほとんどわかる。スレ立てるほどでもない。
だからと言ってスレがないと単発スレばかり乱立する罠。
つまり、このスレは隔離スレ。

質問内容により回答するのが面倒な人は回答しなくても良い
ただ回答者の個人的な優越感を満たしているだけだろ？

（´-`）.｡oO（>>4読めを書かなくて良い質問だけなら良いスレッドなんだけどなぁ。）

0120-読むわ毎日>>4

自分で調べることなく、努力もなく、答えを出して貰おうという態度が(ry

このスレの 仕切りたがり が、なにか他の趣味でも見つけてくれないと
変わらないだろうな〜

>>89
同感。あまりに幼稚な質問がおおい。
それを差し置いて>>4 読めと言うなとはちと厳しい。
>>4読んですぐ答えが分かるような質問をするな、というなら話は分かるが。

とにかく、木下是雄先生の『理科系の作文技術』を読んで欲しい。

質問する奴は黙って質問する
答える奴は黙って答える
煽る奴は黙って煽る
それでいいじゃないか、これまでだってそうしてきたんだ

だから、回答したくない人はしなくてもいいんだよ（w
そんなに暇なんだ

>>96
そうやってここを除いてる時点でお前も暇なんじゃな（ｒｙ

たぶんこのｽﾚがpart50くらいになったら
「過去ﾛｸﾞ嫁」って奴が出てきて
今みたいな議論が繰り返されるんだろうな。

<ol>
<li>ふたつ</li>
<li>みっつ</li>
</ol>

のようにしたとき、

2. ふたつ
3. みっつ

このように表示する方法を見たような気がするのですが、
可能でしょうか？
（olで表示される数字を、任意のものから始める方法です）

<li value="*">

>>99
>>4に載ってる「とほほのスタイルシート」って所から
トップに戻るとTHMLリファレンスがあるから見てきなさい。

○html
×thml

content: counter()
counter-increment のことか？
こんなのOperaだけだろ、実装してるのは

>>99
>>100と、olのstart属性。但しどちらにしろ、非推奨属性。

CSSでは、counter()関数、counter-incrementで一応連番の生成はできるけど、
実装はおそらくOperaだけ…

counterってCSS3でなくなるんじゃなかったの？

clearを空要素に使いたいんだけど<br>にしか使えませんか？
それと基本的に<br>は使わない方がいいのですか？

>>99-104　前スレッドにて既出。

そういやCSS2.1ってどうなったんだ？
LastCallからだいぶん経ってると思うんだが。

>>106
スレ違い

>>107
前スレ230-232あたりな。

>>108
独自拡張、草案段階のCSSについて語れ
http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50

>>106
>clearを空要素に使いたいんだけど<br>にしか使えませんか？
できるかできないか、まづは自分で試してごらん。

>それと基本的に<br>は使わない方がいいのですか？
然り、基本的には。

お答えをくださった方、どうもありがとうございます。
CSSで指定できればよかったのですが、
今回はあきらめて、何も変更しないことにします。
Operaだけしか対応していないのでは、使いたいと思えないですし・・・。

H1とかの文字サイズを100%にすると小さくなるのですがこの100%は何を
基準にしているのでしょうか？

お使いになられていらっしゃるブラウザに基づいて決定されております

>>114

とりあえずCSSに
* {font-size:100%;}
の一文を入れておけば、H1もPも基準の大きさが統一されるんじゃなかったっけ？

あとは必要に応じてH1やstrongのフォントサイズを大きくするなり小さくするなりしてやればいい

>>116
そうなんですか？
二重指定になって片方だけ適用されるのかと思いきや…
それは便利ですね！使わせてもらいます！

全称セレクタは優先度最低だから
font-sizeを指定したところには無意味になる。

というかfont-size: n%は親要素に対しての割合だから
わざわざ全称セレクタで指定する必要は無い。
指定忘れを防ぐのには使えるかも。

WinIEにはHnのfont-sizeに関して親要素を基準にしないバグがある。
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b091.html

>>118
> わざわざ全称セレクタで指定する必要は無い。
そういう意味じゃないだろ。

body {font-size:100%;}
あとのセレクタではem単位で指定。

>>120
なるほど、それなら概念的にもスッキリ理解できます。
それを使います！

>>120
font-sizeに限ってはemより%の方がよい。WinIEのバグがあるから。

em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b048.html

ま　た　I　E　か　よ

そろそろさ、仕様書通りにレンダリングしてくれるエンジンもったブラウザでないかね。
俺は作れないから他力本願だが。

仕樣書通りなら、Amaya だな。W3C謹製。

>>122
マジかよ！？今まで知らなかった・・。

早速全部更新してきまつ

割と有名だと思ってたが。
個人的に思う、よろしくないCSS
LEVEL4（IE対策）
>body{ font-size:1em }
>昔私もやってました。文字の大きさを変更すると、ものすごい勢いで変化します。
>狙ってやるのはアリかも知れません。
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html#level4

何の効果を狙ってやるのかいまいち不明だが

>>122
MacIEの入れ子バグは無視ですかそうですか

入れ子バグ？

>>129
すまん。ＭａｃＩＥじゃなかった。Operaだ。
ttp://cssbug.at.infoseek.co.jp/detail/opera/b009.html

本文の文字サイズは何も指定しない
他の要素はem単位で指定

がベストだと思われ

>>131

そんなネタじゃ僕は釣られないぞっ

>>130
101%とかにしとくと平気なんだろうか……？

>>133
全称セレクタにそれやったらどんどんデカくなるな。

階層が深くなるほどデカくなるな。
逆に100%未満にすると小さくなる…それはそれで使い道がありそうだな。

上下がピッチリくっ付いてるサイトを作っているのですが
ある一つのブロックの高さを***〜みたいな指定は出来ますか？
最低***でそれ以上大きなブラウザで見ている場合はその分延ばす、みたいなです。
宜しく御願いします。

>>136
　>>34

>136
最低高さについてはmin-heightがあるが、>34

>>136
>>138の補足。min-heightはIEが実装してないし>>34

ひょっとしてmax-heightも実装してない？

訊く前に>>4で対応表を見てね。>>140

>>136
overflowによる疑似フレーム（>>6）の応用で、できないか？
つまり子フレームが一つしかないフレームセットを作るわけ。

>>140
してないなぁ。あると便利なんだけど。
あと、marginとかpaddingにもmax-、min-欲しいな。

>>142
ぴっちり、ってだけでoverflowであるかどうかはかかれてないな。

.foo{
margin : 0;
padding : 0;
}
.bar{
margin : 0;
padding : 0;
}

<div class="foo">
ないよう
</div>
<div class="bar">
ないよう
</div>

でも>>136の提示したドキュメントと符合するわけだし。

.menu { word-spacing:0.1em; text-align:center; background-color:#eeeeee; border : 1px #000000 solid ; padding: 1em 0 1em 0; margin:0; }
a.menu {text-decoration:none; border-bottom:dotted 1px #000000; padding:0.1em;}
a.menu:hover { background-color:#3399ff; text-decoration:none;}
a.menu:link,a:visited{ color:#000000; }

<div class="menu"></div>この中に<a>を入れました。本来なら下にドットが出るだけのはずなのですが
上と左右に黒のボーダーが出てしまいます。それと同時にフォント色が背景色の#eeeeeeと同じになってしまいます。
これは何が原因なのでしょうか？

>>145
とりあえず、セレクタを理解していない予感がビシバシとします。
「<div class="menu">の子であるa要素」は、
「div.menu a」
です。

「classの値がmenuである要素の子であるa要素」は「.menu a」ということで。

×　 a.menu
○　 .menu a

ってことかいな、と横やり。

>>146-148
どうもです。しかし<div class="menu">で背景色のある1つの枠を作り、その中に文字を入れたいのですが
文字をcenterにしたりする場合、どこに記述すればよいのでしょうか？

padding: 1em 0 1em 0; margin:0; }
.menu a {text-decoration:none; border-bottom:dotted 1px #000000; padding:0.1em;}
.menu a:hover { background-color:#3399ff; text-decoration:none;}
.menu a:link,a:visited{ color:#000000; }

<div class="menu"><a href="a.html">A</a> | B | C | D</div>

間違えました。>>149の
「padding: 1em 0 1em 0; margin:0; } 」
は無視して下さい

うう、なんだかオラ頭が痛くなってきた

書いた瞬間わかりました。寝ぼけていたようです（ｗ

.menu aは「class="menu"の中にある<a>に対して」効果を発揮するわけですね。

スタイルシートにはあまり詳しくないのですが…
長い文章を書くと、右側がガタガタになってしまうのを何とかできないものでしょうか。
特に句読点や「…」「！？」を使うと妙な位置で改行されてしまい、
非常に見栄えが悪くなってしまいます。
確か、解消できるものがあったはずなので、教えてもらいたいのです。
よろしくお願いします〜。

address { ........... }
.xxxx { ........ }
<div class="xxxx"><address></address></div>

このように書いたcssがあるのですが、paddingを<address><div>のどちらで設定しても
妙な動作をおこします。詳しく書くとpaddingの値を正常に読み込んでくれず
padding:1em;とするだけで5em分ほどあいてしまい、0にすると極端に狭くなります。

これは記述方法が間違っているのかバグなのか判断できません。
ご存知の方いますでしょうか？

>>154
ソース書いてくれんと、解るわけね

<div class="xxxx">
<address>
<ul>
<li>CopyRightAAA</li>
</ul>
</address></div>

>>155
ソースは>>154に書きました。

>>156
adress要素の中にブロックレベル要素を入れるのはinvalid。
CSSの問題を疑う前に最低限正しいHTMLかどうかを調べれ。

そのulは何かと小一時間問い詰めたい。

>>153
両端揃がやりたいのかな？
p {
text-align:justify;
text-justify:auto;
}
但しMozillaでは「justify」は英語では問題ないが、日本語の場合は右端が揃ってくれぬ。
text-justify:auto;を追加指定したときのみWinIE5以降で有効。
　http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align
　http://east.portland.ne.jp/~sigekazu/css/international.htm
　http://www.doraneko.org/misc/i18n-format/WD990127.html#a5
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/text.html#alignment-prop

>>156　ソースと言ったら、CSSソースも書くべし。

>>153 >>159
日本語の両端揃えだったら text-justify: inter-ideograph; を指定しないと。
text-align: justify; は、MacIE5 でレンダリングが崩れるから注意すること。
その他でも空白が引き伸ばされるから、文章によっては表示が不自然になる。

>>153
改行（自働折り返し）を禁じたいひと連なりの文字列には
white-space:nowrap;を指定する。
詳しくは、>>4

>>161
MacIEバグ除けなら
@media all {
p {text-align:justify; TEXT-JUSTIFY:inter-ideograph;}
}
cf. http://cssbug.at.infoseek.co.jp/detail/macie/b016.html
　　 http://cssbug.at.infoseek.co.jp/detail/macie/b030.html

出来ました！感謝です。
テキストやってるところは見やすさ＆読みやすさを
最重要視するはずなのに両端揃えを使ってないサイトが
多いのは見られるバージョン（言葉知らないので…）が
少ないからでしょうか。というか、使わない方がいいのかも？
質問しておいてなんなのですが。

>>157
なるほど。知りませんでした。

>>158
やはり変でしょうか？

>>160
>>154に書いた
address { ........... }
.xxxx { ........ }
がcssソースにあたります。

>>164
現在大多数はWinIE5以降使用なので、対応ブラウザは少なくなんてない。
組版品質に配慮の足りない人が多いのと、
単にtext-align:justify;を知らないのとが大半かと。
イヤそれ以前に、CSSすら満足に使ひこなせないのが大多数でせう。
スタイルシートは文字色と背景のみ利用、相変らずテーブル・レイアウトって人ばかり。

>>165　なぜ空欄にしますか。セレクタだけでなくプロパティとその値を書かないと。
なんか、前スレッドでもあったけど、また話の通じない人なのかな……。

>>165
ソースの意味を調べてこいと。

> address { ........... }
> .xxxx { ........ }
> がcssソースにあたります。

わたくしたち、馬鹿にされてるんでしょうか…。

すみませんでした。きちんと書きます。

address { margin:0; padding:0; word-spacing:0.1em; text-align: center; font-style: normal; font-size: 11pt; line-height: 1.4em; }
.kabu { color:#eeeeee; background-color:#000000; margin:0; padding:0.5em;}

>>165=156=170
基本中の基本とはいえ、知らなかったのはしょうがないが
質問する前にValidatorなりで調べないのはいただけない。

人に聞く前に最低限自分で調べられることは自分でやれよ。
どうせこのスレのテンプレさえ見ていないんだろう。

.kabuってなんだよ
最初から該当部分のHTMLとCSSのソースを全部出せ．ブラウザのバージョンも書け．
情報を小出しにするな

>>149
もう見てないかもしれないけど
×　 .menu a:link,a:visited{ color:#000000; }
○　 .menu a:link, .menu a:visited{ color:#000000; }

>>170
で、>>157の指摘に従って、HTMLの誤りはもう直したんだよね？
直してもまだ>>154みたいな「妙な動作」が起こるのかね。

CSSソースは誤りはないみたいだが、font-sizeをpt単位で固定するのは感心しない。
line-heightは単位無しの実数値指定がよいのでは。
この件、当スレッドで既出なので説明しない。

>>171
そもそもValidatorという言葉自体初めて聞いたので、調べようがありませんでした。
早速調べてみます。

>>172
>>156を見ていただけるとわかると思いますがxxxxが.kabuにあたります。
その点はわざわざ説明しなくともわかるかと思いましたので省きました。申し訳ないです。
ソースは全部載せると改行を削っても入りませんし、見づらいと思いましたので
必要な部分だけ抜き出しました。CSSのソースはこれだけです。
他2行ほどありますが、背景色に関する色指定です。

ブラウザはIEの6.0をWinXPで使っています。

>>170
それだけじゃ足りない。スタイルはカスケーディングされるんだからcssソースは全て必要。
当て推量で書いてみると、ulかliへのスタイル指定がおかしいんじゃないのか。
htmlとしてもおかしいが。

基本だが、marginやpaddingのスタイル指定が指定通り効いてるどうか調べるには、
当該要素やその子要素にborder:1px solid red;とでも指定すると結果が見やすくなる。
それで試してごらん。

<address>の中にブロック要素を書くことは推奨されていないということは
どうやって数行にわたる文章（箇条書き）を表現するのでしょうか？

>>178
HTMLの質問をここでするかね。
基礎から学ぶべし。CSSはHTMLを理解してからです。
http://www.kanzaki.com/docs/html/htminfo15.html#S16
http://www.tg.rim.or.jp/~hexane/ach/tnht/tnht03.htm

display:list-item;だってあるんだし。

>>178　
<li>〜</li>の中にaddress要素を入れればぁ？　address要素は文書中に何回登場してもいいんだしさ。

>>175=178
【HTMLの検証】
・W3C HTML Validation Service http://validator.w3.org/
そもそもここでValidにならないHTMLは論外。
CSSの問題を疑う前に最低限HTMLとしてエラーがないかチェックする。

HTMLの検証は下記URIのものも便利。
・Another HTML-lint http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

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

あと、address要素の中にブロックレベル要素を書くのは
「推奨されない」じゃなくて「完全な間違い」。

>>178
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
address span {
display: list-item;
margin-left: 1em;
}
</style>
<title>テスト</title>
<address>
<span class="author">作者名：Name_Not_Found</span>
<span class="modified">更新日時：2004年01月27日</span>
</address>

いろいろありがとうございました。完全に勉強不足でした。出直してきます。

>>166
text-justify は CSS2 にないので使わないって人も多いのでは?

text-justifyサポートしてないの多いんだから使うなよ

text-justify は IE のみの独自拡張じゃなかったか。
漏れは使ってるけどさ。

text-justify は International Layout in CSS (1999年1月27日 草案）で
考案され、現在は CSS3 module: text（現在勧告候補）に取り込まれている。
いずれも、Microsoft® の Michel Suignard 等が編集を担当しているようだ。
http://www.w3.org/TR/1999/WD-i18n-format-19990127/
http://www.w3.org/TR/css3-text/

文書制作者があえて独自拡張を利用するより
ユーザー側のスタイルで設定して貰えばよいかと。
わたしはユーザースタイルで常に適用させています。

>>185
ブラウザの種類から言ったらたしかに非対応が多いことになるが、
使用されるWinIEの割合からすれば対応が大半である。
また、使ったところで何ら害は無い。
（MacIEのバグはtext-justifyでなくtext-align;justify;が原因だし、それもバグ除けすれば済む）
だから、別に使ってもよいと思ふ。何を遠慮することがあるか。

典型的な自己厨

text-justify初めて知った。仕様書しか読んだことないからなー

これ以上は、こちらで。

独自拡張、草案段階のCSSについて語れ
　http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50

既出ですかね・・・
テーブル内の自動改行を禁止するのを
スタイルシートでまとめて設定できませんか？

タグの設定でイチイチ[th][td]に[nowrap]打つのはおっくうなので・・・

既出です（キッパリ）。>>192
"nowrap"でこのスレッドを検索しなさい。>>4で勉強しなさい。

「自動改行」なんて機能はない。

「自動改行 nowrap」でググると厨房サイトがいっぱい。
http://www.google.com/search?q=%8E%A9%93%AE%89%FC%8Ds+nowrap

>>192　なぜＦＡＱを見ない？　>>7だ。
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.jp/site/tips/page/p0037.html

>>196
「とりあえず調べるのが面倒だから人に訊いて、答えが返ってくれば儲けもの」という怠慢な姿勢。

>>197 がいいこといった。

テンプレに、回答者はｶﾞｲｼｭﾂは放置厳守、って入れようよ。
で、放置できなかった回答者は「テンプレ嫁」となじろう。

スタイルシートで新窓リンクを設定できますか？

>199
無理

あと、新窓ｳｻﾞｲ

>>199
あるけど教えない。ウザいから。

えっと、他のサイトをリンクするときに使いたいんですけど、うざいですか？

無事できました、ありがとうございましたm(_ _)m
HTMLで禁止するサイトは沢山あるのに
ＣＳＳで〜となると探せなかったので
書いてはみたんですが・・・、失礼しました、本当にありがとうございます

>>202
ウザいです。とっても。

>>202
タブブラウザが流行ってるしね
自分のスタイルでwebブラウジングする人は増えていると思われ

>>202
取り敢えずこれ読んどけ。やり方も載ってるから。
ttp://www.rju666.com/web/mistakable.html#SEC20

>206
ありがとうございます。やはり新窓はあきらめようとおもいます。

質問です。
<PRE>の中のタブ文字の幅を指定することはできるのでしょうか。
なんだかものすごくありふれてそうな質問なので
既出or常識だったら申し訳ないのですが、
わしの検索レーダーには感がありませんでした。

あんまり関係ないとは思いますが、IE6を使用しています。

>>208
>水平タブ文字
>水平タブ文字 ([ISO10646]及び [ISO88591]の十進9) は、視覚系ユーザエージェントによって、通常、8文字毎に出現するタブ区切り箇所に適合する、1つ以上で最小の空白列として解釈される。本書は、整形済テキスト中で水平タブを用いることは避けるよう、強く要請する。
>なぜなら、編集の際にタブ区切り幅を8文字以外の値に設定することはよくあることだが、これが誤った配置の文書を生み出す元となるからである。
【HTML 4.01仕様書邦訳 9.3.4 整形済テキスト: PRE要素】より
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/text.html#h-9.3.4

テキストエディタの水平タブの文字数を任意に設定しておいて、
編集作業が終了したら、空白に変換する機能を利用すればよい。

>>209
即レスありがとうございます。
仕様として8文字に固定されてしまっているのですか。なんだか納得いかないなあ。
プログラムのソースなんて、タブ4で書くのはポピュラーだと思うのに。
しかも水平タブ使用を避けろときたもんだ。ソースのコピペはおのずと推奨されないわけね。
ああ、とても納得できないです。だからどうするってわけじゃないですが。
#誰に憤ってるわけでもないので、放置してください。

<ol><li></li></ol>タグの
数字とテキストの間のスペースの幅を変えることってできますか？
広すぎるので狭めたいんですが。

　　1.　あいうえお
　　　↑ここ

>>211　できますよ。>>4参照。

>>210
>仕様として8文字に固定されてしまっているのですか。なんだか納得いかないなあ。
水平タブは UA により様々に解釈される可能性があるから、
相互運用性を確保したいなら避けるべきだ、ってことだｳﾞｧｶ。

テキストエディタには一般に
「水平タブ→空白 変換」とか
「空白→水平タブ 変換」の機能が付いているだろうが。

・制作者は水平タブで書いて、保存時に空白に変換する。
・利用者は好みに応じて空白を水平タブに変換しなおす。

これでイイだろうが。
テキストエディタすら使えない奴がプログラムなんか書くな。

>>211
marker-offset: 2em; 等
>>212
一行ぐらいの回答もしないのに出てくるな

>>212
もすこしヒントくれませんか？
marginじゃないですよね。
リストのところを読んだんですけど、わかりません。

>>214
>>196-197

>>215
#marker-offsetを実装してるブラウザがあるかどうかは知らない。
#リストマーカーの位置調整のプロパティ・実装はこれから（の課題）かと。

一応、li{padding-left}　で間隔の調整ができなくもないです。推奨はしません。

>>215
display: marker; は CSS2.1 で削除予定。
CSS3 の::marker疑似要素が普及するまで無理かも。
http://www.w3.org/TR/css3-lists/#markers

ついでいうと、これも一応は既出な質問ではある。

既出だろうが、ﾃﾝﾌﾟﾚに載ってようが
答える気のある奴が答えればいいじゃん。


このｽﾚだけに限った事じゃないが、そのうち
どんな質問に対しても「既出　ﾃﾝﾌﾟﾚ嫁」だけで終わって
ｽﾚの存在意義が無くなるぞ。

>>220
それでも存在意義はなくならんだろ

CSS3 module: Lists
Changes From CSS2
http://www.w3.org/TR/css3-lists/#changes

・display:marker has been replaced with ::marker
・The 'marker-offset' property is obsoleted.
・The marker display type is obsoleted.
・Markers now have margins.

・display:marker は ::marker によって置き換えられた。
・'marker-offset'プロパティは陳腐化した。
・marker の表示形式は陳腐化した。
・今はマーカーにマージンが存在します。

>217>218
どうもありがとうございます。
padding-leftやってみたんですが、間隔を広げることはできたんですが、
デフォルトよりも狭めることができませんでした。-にしたりしたんですが。

display: markerもリファレンスを見ながら設定してみたのですが、
変わらず。むぅ。

>>223
padding に負の値は指定できないよ。
細かいことは妥協しなよ。もっと重要なことがある筈だからさ。
見栄えなんて補助的なもの。可読性が損なわなければよいのさ。
ウェブは WYSIWYG じゃない。DTPじゃない。出来る事をやるだけさ。

>>213

>>仕様として8文字に固定されてしまっているのですか。なんだか納得いかないなあ。
>水平タブは UA により様々に解釈される可能性があるから、
>相互運用性を確保したいなら避けるべきだ、ってことだｳﾞｧｶ。

W3C勧告曰く
通常、8文字毎に出現するタブ区切り箇所に適合する、1つ以上で最小の空白列として解釈される
とあるのですが、「通常そうである」とW3Cが勧告しているのなら、実質的には標準仕様ですが。

>・制作者は水平タブで書いて、保存時に空白に変換する。
>・利用者は好みに応じて空白を水平タブに変換しなおす。
>
>これでイイだろうが。

おまえはほんとにそれで満足ですか?

>>225
213じゃないが、環境適応能力とやらが欠如してますね君は。
あと、そんな　からかってみる　とか下手な釣り師を装わなくていいからね。
逃げ道を必死に作ってる人みたいで虚しいよ。

>>223
<li>〜</li>の中をさらにdivか何かで括る。
それにmargin-leftで負の値を設定する。
――で、どうかね。

marker-offsetを実装したＵＡは、無い。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/generate.html#lists

>>211　　list-style-position:inside;

>>224
そういわれてしまうと返す言葉もないんですけど・・

>>227
これ、いけそうです。ありがとうございました。

また一人、div廚が生まれてしまったか。

>228
む、これもいけそうですね。若干表示が変わりますが。
どうもありがとうございます。
いろいろ試してみます。

>>225
「通常」(usually)の意味を理解していないな。
>一般の習慣。世間のならわし。通常の例。
つまり「通常」とは「一般的な慣習」と同義。
あと注釈（Notes）は、参考情報であって規範情報ではないので。

仕様書の読み方ぐらい調べてから発言してね♥

>>226
環境適応能力というが、君はHTMLに載せる事を前提にコーディングするのですか?
そんなに暇なプログラマは多くないよ。
スペースに変換って、ファイル開いたままdiff取ったりしないの?
そんなら問題ないんだろうけどね。

>>231　結局、list関係のプロパティーを全然調べもしないで質問してたのか。>>4読め、で沢山だったな。

>>232
ハートマークをわざわざありがとう。
一般的な慣習とがあくまで慣習だとしても、
それが注釈だったとしても、
パーサ書くなら従うね、普通。
でなきゃMSみたいに独自仕様とか何とかたたかれる罠。

214 名前：Name_Not_Found[sage] 投稿日：04/01/28 14:22 ID:???
>>211
marker-offset: 2em; 等
>>212
一行ぐらいの回答もしないのに出てくるな

素で疑問なのだが、置換作業ぐらいできないんですか。プログラマさんは。

そもそも
>・制作者は水平タブで書いて、保存時に空白に変換する。
>・利用者は好みに応じて空白を水平タブに変換しなおす。
これの何が不満なんだか。

↑ここはＣＳＳ質問スレッドです……。

>>235
UA は広い画面上のブラウザだけじゃないの。
PDA や携帯電話で8文字分インデントさせますか。

>>238
そりゃ、仕事で使うには大いに時間のロスだ。
変な工程入れずに済めばこしたこと無いわけで。
ソースが意識しない間に形を変えるのは好ましくないね。

>>240
>PDA や携帯電話で8文字分インデントさせますか。
でしょ?
でも実質、タブ幅をPCのブラウザに合わせてデザインされたページは
PDAで見れば製作者の意図を再現できない訳で。
それというのもPC系ブラウザはデファクトスタンダードが
タブ8になってしまってるためでしょう。
そんな差異を緩衝するのに役立つのがCSSな筈なのになあ。

そろそろ出て行け>おれ

>>241
>そりゃ、仕事で使うには大いに時間のロスだ。
>変な工程入れずに済めばこしたこと無いわけで。

プログラムコードを Copy して，HTMLファイル内のpre要素の内容に Past して，
通常の空白に変換する作業なんて数秒で出来ることです。秒単位の仕事ですか。

>ソースが意識しない間に形を変えるのは好ましくないね。

整形済みテキスト内にタブ文字を用いることの方が，
「ソースが意識しない間に形を変える」ことになり得ると思いますが。
4文字分のタブであれば，4文字の空白に変換すればよいのであって，
なんら形が変わることはありません。

>そんな差異を緩衝するのに役立つのがCSSな筈なのになあ。
そもそも水平タブ自体の使用を避ければよいだけのことです。
自分勝手な理由で，CSS仕様を批判しないでください。愚かです。
それと制作者のスタイルシートが常に有効であるとは限りません。

あなたの発言はすべて論理性に欠けています。
すべてを自分の都合の良い様に考えないでください。

※　議論はよそで　※

>>208 が　>>210 で反感を買うような捨て台詞を残すのがイクナイ。
知識もないのに無駄口をたたく香具師がイケナイ。
答えがワカタのなら、さっさと（・∀・）ｶｴﾚ!!。

おまいらdiv入れ子とtableレイアウト、どっちの方が許せますか？

まだdiv入れ子

>>245
div入れ子たって、使い方によるっぺ

liを横に並べるには如何すれば良いのでしょうか？
以前にそうしているサイトを見たのですが今見てみると404になってました･･･
宜しく御願いします。

>>248

li　{
　　　display　:　inline;
}

とか

>>245
table入れ子の方が、アクセシビリティを低下させる気がする。
最悪は div で「どこでも配置モード」だろうな。というかスレ違い。

>>248
それは CSS の常套テクニックです。
displayプロパティを調べればわかります。
li { display: inline; }

>>249-250
無事できました、有難う御座いました。
今までメニューは縦に続くレイアウトばかりしていたので幅が広がりそうです。

文字間を空ける手段として<word-spacing>を使ったのですが上手く反映されません。
これは例えば下のような書き方でもOKなのでしょうか？

.aaa { word-spacing:1em; }
<div class="aaa">あ い う え お</div>

上がcss下がhtmlです。狙っているのはmarginによる字間ではなく
「株式会社○○○　○○○課　○○○」といったように語句にスペースを取りたいんです。
「  」と書いて同じ効果が得られるのであれば良いかとも思ったのですが
cssで制御できれば変更時も簡単かと思いました。

よろしくお願いします。

どうも、div入れ子は
ベースにDIV
メニューと本文を纏めるのにDIV
本文を纏めるのにDIV
メニューを纏めるのにDIV
みたいなです、簡単なのでいままでこんな感じでしてきたんですがこれだと
tableレイアウトと変わらない様な気がしてどうかと思ってたところです。

>>253
良し悪しは別として、tableレイアウトとはまた違うんじゃないかな
div某になったとしてもソースが気持ち悪いだけで、閲覧に支障は無いわけだし

ちゃんとclass及びidで意味を与えて上げれば、俺は良いと思う。

>メニューと本文をまとめるのにDIV

なんとなく、これはいらなそうな気がするけど

>>252
ブラウザのバージョンを明記してください。
提示された例は適切だと思います。
Win版 IE については ver 6 から実装しています。

>>252
スペースが全角で、かつネスケ6だと反映されなかったり。

>>256
表意空白は語の区切りか？
適用される方がバグだろう。

続けて質問なのですが
liをinlineで横に並べてaをblockにする事は出来ないのでしょうか？
横に並べれたのは良かったのですがaをblockにすると縦に戻ってしまいました。

>>258
float使え。
情報を小出しにするな、質問は一度に言わないとスレが無駄に消費されて迷惑だ。

>>258
もしもし？　display:block;の意味、わかって使ってますか。
ブロックレベル要素が改行するのは当り前ですよ。

>>258
float : left ;
width : hogehoge ;

これを追加すればできまｓ

回答、激しく既出＿|￣|○

>>254
> >メニューと本文をまとめるのにDIV
>
> なんとなく、これはいらなそうな気がするけど
　どうせ「背景を指定したいから」みたいな下らん理由だろ。

>>252
letter-spacingの誤りでは？

>>255
Win＋IEの6.0です

>>256
スペースは半角で打っています

>>264
うお、もしかして根本的に間違っていましたか・・・？

>265　半角だろうが全角だろうが、
なぜスペースをHTMLのソース内に使っているのかがわからん。
何のためのCSSなのか。

<div class="aaa">あ い う え お</div>
↓
<div class="aaa">株式会社○○○ ○○○課 ○○○</div>
もしかして、こういう意味で書いたのかな。
もしそうだったら、自分の勘違いだな。すまなかった。

>>265
ケアレスミスなのかもしれません。
下記に最も簡潔で妥当な例を出しておきます。
わたしの環境では、ご希望の通りになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
p { word-spacing: 2em; }
</style>
<title>テストページ</title>
<p>「株式会社○○○ ○○○課 ○○○」</p>

>>266
はぁ？　意味不明。

>268　<div class="aaa">あ い う え お</div>
と書いてあったから、ソース内では
<div class="aaa">株 式 会 社</div>
こんな書き方をして字間を調節していたのかと「思い込んだ」だけです。
ただの勘違いなので、スルーでお願いします。

>>268さんのソースで試してみたら、こちらの環境でもきちんと
表示できました。何かミスがあるようなので、調べてみようと思います。
使い方自体は間違っていなかったようなので安心しました。

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

ほんとこのスレ教えてる奴あほぉ多いな。
字間にスペース使っただけで意味わからん。て煽られるのか？　くだらねー
字間はCSSで指定できるぞって言えねーのかよ
そんなにHTML知らない奴排除したかったらスレタイでも変えたら？
なぁもてないマニュアル君達わかるかな？柔軟性も必要ですよ　ははは

> なぁもてないマニュアル君達わかるかな？柔軟性も必要ですよ　ははは

↑この部分が余計。

>>271
終わってから煽るなら、進行中に回答してやれカスが

てか、ここCSSのみ使う為の質問スレだろ？
スレタイ変えろよ。
/* CSSのみで作る趣味でしか使えないスタイルシート質問スレッド【27】 */
でいいじゃない？

てか、なんで必死なん？

必死で悪いかこの野郎！
こちとらあくせく働いてんだよ！ヴォケ！

とでも言いたいのだろうか

一つ言える事は、答える人がいなくなった時がこのスレの終わる時です

あらまあ

左にメニュー・右をメイン
左メニューにfloat:leftにして回り込ましてますが、
ブラウザの幅を狭めるとメインがメニューの下に落ちてしまいます。
absoluteしか回避方法はないのでしょうか？

<div>
左・右
</div>
にして、divの幅を実数で固定させる

と言うやり方もある

>>278
%でレイアウトすれば。width必須なのは承知さよね？

右メインは float:left; なのか、margin-left:左メニューのwidth; なのか。
後者がおすすめ。

<div id="menu">
<ul>
<li>TOPへ</li>
<li>日記</li>
（略）
</ul>
</div>
<div id="main">
<form>
<dl>
<dt><label>Title</label></dt>
<dd><input type="text"></dd>
<dt><label>Name</label></dt>
<dd><input type="text"></dd>
</dl>
</div>

#menu{
float:left;
}

みたいな感じで掲示板のページをつくってるんだけど、
これだとフォームの部分で
Title[　　　]
Name [　　　]
みたいにラベルとテキストボックスを横に並べようにも
dt{
float:left;
clear:left;
}
っていう手が使えないんだけど、何かいい方法はないですか？

position : absolute　と
z-index : ; で
ボックスの多重合成をしてます。
ネスケとIEで完璧に同じ表示にするのって難しいですね・・・・・
とりあえず、キャプったりしてピクセル測ってなんとか出来たんですが、
ブラウザ毎のデフォルトのラインハイトとか親要素の認識が違い過ぎてて、基地害じみたスタイルシートになっちゃった・・・
同じような事をしている方、どのように対処しました？

間違ってたらすまんが
dt {
float:left;
width:20%;
}
dd {
padding-left:20%;
}
ってことか？

(´-`).｡ｏO（　　　　　　　　　　　　　　）

>>281
ddにもフロートかけてやればいけるんじゃねえ？

ちょっとお聞きしたいんですがフレーム使ってる場合
ターゲットで表示先を指定しないと大変なことになるんですが
スタイルシートで同じような効果のあるタグってありますかね？

>>286
スタイルシートはデザインをするためのものです。

>>287
あ、ということは無理ですか・・・・・・
タグ採点サイトで注意されたもので、
すいません。

>>282
１コマ漫画の吹き出しに、毎回違う言葉を入れるのに
似たような事してたけど、IEとﾈｽｹの表示で妥協できる所を探すか
外部CSSでIE用ﾈｽｹ用を用意するしかないかも。

俺の場合は、分割画像にしてテーブル使った方が楽だった。

>>285
説明不足スマソ。
dtにclear:left;を指定すると、メニューのfloatも解除しちゃって、メニューより低い位置まで下がってしまうのでつ。
ddにfloat:right;やってみたけどぐちゃぐちゃになってだめでした。
あと、今までやってみたほうほうとしてはposition:absolute;とマージンを組み合わせてやる方法だけど、
掲示板3つ置いてて、一箇所だけ入力項目の数が多いから、フォームの下にくる要素のmargin-topをそのページだけ変えてやらないといけないのが難点。
仕方ないからページ毎に違うスタイルシート読ませるかなぁ。。。

>>286
プロパティのこと？
CSSにタグなんてもん存在しないけど。

>>286
注意された理由は、フレームを使ってるのにフレームセットDTDを指定していないから。

>>289
正しい構文を書かないやつはCSS使わなくていいよ。

>>291
フレームセットDTDをメニュー部分に使うと怒られますた。
なのでメニュー部分はルーズなんとかで書いてます。

>>293
ぶっちゃけお前lintの解説読んでねえだろ。
フレームセットDTDはルーズDTDを内包してる。
target属性はフレームセットDTDにしか存在しない。

もう、CSSとか以前のレベル。
仕様書のDTDのところだけでいいから読みなされ。

>>294
まじすか。
現在

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これで書いててlintに「ターゲットはあまり薦められない」と言われたんですけど。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

これに書き換えると「frame setねえよ」とか大幅減点されたんですけど・・・・・・・
スレ違いすいません。

>>295
お前はなんでフレームセットDTDの仕様を読まずに、フレームを使うんだよ。こんなにも嫌われてるのに。
取り敢えずすれ違いだからこっちこい

Webサイト制作初心者用スレ vol.80
http://pc2.2ch.net/test/read.cgi/hp/1075004841/l50

>>296
すいません、移動します。

>>294
>target属性はフレームセットDTDにしか存在しない。

嘘を書くな。Looseにtargetあるよバカ
http://www.w3.org/TR/html4/index/attributes.html

盲人が盲人を導いている例だな

>>281 これではだめでつか？
dt { float: left }
dd { clear: left }

>>298
あ、そっか。逆やね。

>>294
適当な知識で初心者に嘘教えるな馬鹿。

>>302
>>301で認めてるだろ。しつこいガキだ。

294 名前：Name_Not_Found[sage] 投稿日：04/01/29 20:12 ID:???
>>293
ぶっちゃけお前lintの解説読んでねえだろ。
フレームセットDTDはルーズDTDを内包してる。
target属性はフレームセットDTDにしか存在しない。

もう、CSSとか以前のレベル。
仕様書のDTDのところだけでいいから読みなされ。

>>303
認めるとかどうでもいいけど、適当な知識で嘘教えるのは迷惑だからね。

>304

>305

そうだね。ごめん。
でも、しつこいよ。

恥ずかしい奴だな。

>>300
それだとdtがddの左に回り込まないのでは？^^；
どうもclearプロパティは使えないっぽい。
というか左側にメニューを回り込ませるのをやめちゃうかなぁ…いっそのこと。
CSSの弱点は、テーブルレイアウトと違ってfloatの入れ子が難しいところなのだろうか…と思う今日この頃。
とりあえずレスくれた人サンクス

傍観者として、許容できるのは>>299までだ
それ以降で>>294に噛み付いてる奴は、見ていてｳｻﾞｲ。

>>309
自演と思われるからヤメテクレ

正直ｽﾏﾝｶｯﾀ。
醜かったので、ついな。

…本当に恥ずかしい奴だな。

>>308
もうみてないかもしれないが一応。
適当風味だけど、おそらく大体意図したようになるんじゃないかと。
#widthの指定がなかったり、formの終了タグがなかったりするのがやや謎だった。

/* CSS */
#menu{
float:left; width:10em;
}
#menu ul {
margin:1em 3em; padding:0.2em;
}
#main dl {
width:20em; float:left; margin:1em 3em; padding:0.2em;
}
#main dt {
width:4em; float:left; clear:left;
}

>>294
>>303
>>306

dtとddだけど、俺はddにマイナスのマージン設定して同じ列に並べてる
ブラウザに若干左右されるかも知れんけど、まぁおおむね希望どおりに行ってるよ

>>313
widthとかはここに書くときには省略してまつた。スマソ。
formはコピペミス。
やってみたけどフォームがしたのスレッドたちに回り込んじゃうっぽい＆メニューの文字が縦書きになってしまう（笑
せっかく書いてくれたのにスマソ。。

>>315
すごい。。単純なのにちゃんとなった〜
とりあえずこれでいってみるよ。
ありがとうございました。

質問です。
<div>でテーブルを囲む時、画面センター合わせにしたいのですが
どうすればよいでしょうか？

.divcenter {　text-align: center;　}
で
<div class="divcenter ">
<table><th><td>test</td></th></table>
</div>

とした場合、ＩＥではうまくいくのですが、ＮＮ7では左寄せになって
効いていませんでした。
何か良い方法はないでしょうか？

>>317
>>5を読んでね

その<th>はなんだッ！

<tr>だよね・・・
そうだといってよ・・・

うわぁぁぁん！
<tr>なのかッ？<tr>なのかッ？
嘘でもいいからそう言ってくれよ！>>317

えと、回答ね。まずは>>5をヨメ。
marginをautoにしれ。IEでうまくいくのはIEのバグだ。

クラス名divcenterが気に食わんな。わざと？

>>316 >やってみたけどフォームがしたのスレッドたちに回り込んじゃうっぽい＆メニューの文字が縦書きになってしまう（笑
呈示されたソース以外考慮に入れてないので、さもありなんという感じ。すまん。解決したならなにより。

>>323
あぁ、いやいや、せっかく教えてくれたのにすまん。
ソース全部貼り付けたらうざいだろうし、必要なところだけきちんと抜き出すべきでした。
お世話になりましたです。

font-sizeを指定した場合、
ネスケ7ではブラウザで文字サイズの変更が可能だったのですが、
これは仕様ですか？

仕様がないなぁ・・・

変更できない方が問題あり。

>>315
今更だけど、IEにやられたよ…
ネスケとOperaは見事に並ぶ、そしてIEも一見並ぶんだが、左のメニューのアンカー（リンク）がなぜか押せなくなってしまった。
はぁ…他にも、position:relativeでやろうとしたときも、IEだけフォームが消えるとかいう事態になって却下したんだよなぁ…
(´Д⊂ ﾓｳﾀﾞﾒﾎﾟ
いろいろサンクスでした。
レイアウト自体ちょっと変更してみるよ。

またまた来ましたが・・・
またまた初心者叩いてますね。うはは
仕様書読めってお前らみたいに暇じゃない奴もいるだろ。
今なんて、HTML知らなくてもホームページ作れる時代だぞ　うはは

やっぱりスレタイ変えろよｗ
/* 上級者専用CSS･スタイルシート質問スレッド【27】 */

俺コテハンにするよ　初心者叩いたら降臨します

あからさまな煽りｷﾀｰ

食いつき数が二桁になると読む

とんでも系ほーむぺーじ入門を信じたり、糞オーサリングツールで製作するより、
ストリクトなHTML+CSSを素直に覚える方がコストがかからないぞグェアーーーッ！

>>332
貧乏人だな、とか言ってきそうで怖いよ。

「cost＝物の値段」という認識しかない典型的な日本人。
金銭以外にも、生産するための労力・時間とかもコストだろうが。

"ホームページ"は作らないし（とか

取得することになる技術能力を考えに入れる事の出来ない人間

正直、中途半端な知識でvalidだけどstrictじゃないHTMLを手書きで書くぐらいなら、
素直にオーサリング使ったほうがマシだと思う。

んなこたぁない

>>329

Name_Not_Foundというコテハンですか

>>337
手書きで不思議マークアップされるぐらいならオーサリングツール使った方がいい。

どの道不思議マークアップにはなるんだな

野崎氏のご意見
ttp://members.jcom.home.ne.jp/pctips/www/Advice.html

すげえ。
有名な人かなにか知らないが暴論だ。

一度オーサリングソフト使ったらもうHTMLのことを理解しようとせず、
ソフトも乗り換えてはいけません。

↑こんなことを堂々と述べるとは、すげえ。

CSSに関する質問はこちらへどうぞ。　※　議論はよそで　※

スレ違いかもしれませんが。

背景を指定するじゃないですか。
そこで50*50の画像を用意しました。
その画像は縦のストライプの画像です。
それを縦方向、横方向repeatで表示させます。
その場合、50*50じゃなくて100*50でも50*100でも300*300でも同じようにブラウザにはうつるけど、
どのサイズがいいんですかね？
サイズによって重くなるとかあるんですか？

>>346　大差無いから、気にしなくてもよい。

>>346
表示された時に同じ見栄えなら、画像サイズは小さい方がいいに決まってるﾀﾞﾛｶﾞ。
画像がでかけりゃ、読み込むのに時間がかかる。
ISDNやH"といったﾅﾛｰを切り捨てるなら、存分にでかい画像を背景にしてくれ。

背景の繰り返しに使うとき画像が小さすぎるとレンダリングに時間がかかってスクロールも重くなることがある
まあ、そこそこのサイズで

>>346
画像そのものの大きさを小さくしすぎると、
描画を繰り返さないといけなくなるので、
CPUに負荷がかかります。

適度なバランスをみつけてください。

でも実際に2*2の画像で背景作ってみたら
そんなに負荷がかかっているようには感じなかったけどなぁ。
そう言うのを定量的にベンチしているサイトってある？

>>349 >>350
描画を繰り返すために必要なＣＰＵの負荷なんか、無茶苦茶小さい。
１０年以上前のＰＣでなければ、大丈夫。

346です。
>>349-350みたいなのが気になってたんです。
まぁ適度にきめます。レスどうもでした。

スタイルシートでブラウザのスクロールバーの色を変えるのは、正しくないことなんですか？
スタイルシートのチェックをするとエラーとして表示されてしまいます。

正しくないと言うか、標準化されていない。
他の環境では再現されない事を知っていて
なおかつそれで問題無いと判断するなら使っていい。

W3CのValidatorは基本的に標準化されたプロパティしか知らないから
知らないプロパティに警告を出しているだけ。

>>354
配色によってはユーザビリティを下げることになる。
ユーザは自分で利用し易いように配色している筈だ。

スクロールバーの各構成を認識できないような配色は、
ユーザにとっては迷惑に他ならない。ユーザが使い易いか考えること。

>>355
>>356
なるほど。
たまに横ｽｸﾛｰﾙバーが全く見えないところがあったりするのは、そういうことなんですね！
ありがとうございました。

http://www.microsoft.com/japan/
上記サイトの左メニューにある「製品情報」〜「企業情報」までの部分の
マウスオーバーを表現したく、他スレですがアドバイスをいただき
少し近づきました。背景色を変更することはできたのですが
初期でミドルになっていたテキストが上に移動してしまいました。
これはcssの仕様なのでしょうか？

css
-----------------------------------------------------
body { margin:0; padding:0; font-size:95%; }
.menu a {text-decoration:none; padding:0; width:100%; height:100%;}
.menu a:hover { background-color:#3399ff; text-decoration:none;}
.menu a:link,a:visited { color:#eeeeee;}
-----------------------------------------------------
html
-----------------------------------------------------
<html><head><body bgcolor=#ffffff><table border=0 width=200 height=500 class="menu" padding="0" margin="0">
<tr><td bgcolor=red><a href="#">メニュー1</a></td></tr>
</table></body></head></html>

>>358
OSやブラウザの種類とヴァージョンを明記してください。

>>359
言葉足らずでした。WinXPでIE6.0を使っています。

>>358
項目を中央に配置したいが為にテーブルレイアウトですか？
工夫すれば、UL,LI要素だけで再現できるはずです。
マークアップの観点から見直された方がよいかもしれません。

海外サイトですが、リストに対する CSS 適用例を紹介しておきます。
ttp://css.maxdesign.com.au/listamatic/index.htm

>>358
レイアウトにhtmlでの指定とcssが混在してるのがちょっと…。
まあ、それは置いといて、
.menu a の padding をいじってみたら?
ていうか、padding:0 を入れてる理由は何よ?
あと、何であんなところに</head>があるんだ?
それに .menu a:link,a:visited は .menu a:link, .menu a:visited かと。

＞ .menu a:link,a:visited { color:#eeeeee;}

理解せずコピペするから↑こんなミスをする

隣りあう画像とテキストの表示位置は
vertical-align:middle;
であわせられますよね。ではその画像とテキスト全体を
テーブルのセルの上端に合わせるのはどうしたらよいのでしょうか。

参考：
非置換インライン要素へのwidth,heightプロパティの指定は無視する、
というのが正しい解釈。
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html

>>361の挙げたサイトに激しく萌えた。いいデザインするなぁ

>>361
いえ、中央に配置するためにテーブルを使っているのではなく
>>358に記したURL先のサイトのようにマウスオーバーで「枠部分の背景色を変化」という
効果を出したかったんです。
一応結果は得られたのですが、今までmiddleになっていた文字がcssを適用したとたん
上のほうにいってしまい困っている状態です。

>>362-363
cssスレで紹介されていた物をコピペしたので安心しきっていました。
ちゃんと理解するべきでした。padding:0をしている理由は「とほほの・・」に載っていたのですが
テーブルボーダーに影響（立体的な影を排除）するとあったので使いました。

質問させてください。

スタイルシートで、ページをスクロールしても画像が右下に固定されるように
してあるんですが、さらにその画像をランダム表示にすることは可能ですか？

>>368
CSSでは画像ランダムは無理。
CGIで時間に応じて背景画像を切り替える，というのならあるけど。

>>367
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html
http://www.mozilla.gr.jp/standards/webtips0015.html
http://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box

>>370
これは私の場合解決しないということでしょうか？

>>364
「その画像とテキスト全体」をブロックレベル要素で括って、
td,th{vertical-align:top; padding-top:0;}。

>>367
>テーブルボーダーに影響（立体的な影を排除）するとあったので使いました。
.menu a をセレクタとした paddin指定がその親要素のtableの枠線に影響するわけない。
tdに指定するってならともかく。
いいから削れ。

>>372
はい。それは指摘された時点で消しました。
</head>が妙な位置にあったのも修正してcssの.menu a:link,a:visited { color:#eeeeee;}
の部分も修正しました。
しかしまだ解決していません。

>>368
JavaScriptで、読み込ませるCSSファイルをランダムに変える方法もある。
（基本だけど）その時はJS切ってる人のことも考えてね。

>>358
.menu aへのwidth:100%; heig0ht:100%;は何の必要があるのですか。無意味では。
削ってごらん。

あと、
「時々間違える人がいますが、TABLE 要素には height という属性はありません」。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/table#table
IEなどの独自拡張だからOperaなどには通用しません。
table {height:500px;}とでも指定すること。
しかし高さ500pxに満たないウィンドウサイズでは見づらくなるので感心しない。

もしかして>>358は
.menu a {
display:block;/*これが大事*/
width:100%; height:100%;
}
としたかったのか。
テキストの垂直位置はpadding-top:250px;とでもして調節する。これ>>362が指摘済み。

>>372
どうもありがとうござました。

てか、ここCSSのみ使う為の質問スレだろ？
スレタイ変えろよ。
/* CSSのみで作る趣味でしか使えないスタイルシート質問スレッド【27】 */
でいいじゃない？

>>378＝>>274＝CSSに乗り遅れた人

スルー♪

ほんとこのスレ教えてる奴あほぉ多いな。
字間にスペース使っただけで意味わからん。て煽られるのか？　くだらねー
字間はCSSで指定できるぞって言えねーのかよ
そんなにHTML知らない奴排除したかったらスレタイでも変えたら？
なぁもてないマニュアル君達わかるかな？柔軟性も必要ですよ　ははは

既出だろうが、ﾃﾝﾌﾟﾚに載ってようが
答える気のある奴が答えればいいじゃん。


このｽﾚだけに限った事じゃないが、そのうち
どんな質問に対しても「既出　ﾃﾝﾌﾟﾚ嫁」だけで終わって
ｽﾚの存在意義が無くなるぞ。

近ごろ「ビジュアルの制御はCSSで」っていう案件が増えてきたけどなあ…
今年はその流れが一気に加速する予感。

>379＝>380
スルーできてないしｗｗｗｗｗ

NGワード登録っと

css初心者です。疑似フレームを使って左右に分割し、
左にメニュー、右にコンテンツの表示できるようにしたいのですがうまくいきません。
（右にあるメニュー項目をクリックすると右のコンテンツに表示はされずに独立した
ページがひらいてしまいます、、、）どのようにしたらよいか知ってる方、
おしえてください。

教えてください
回り込みを連続で使ったらＩＥレイアウトがきれいに表示されます。
ですががＯｐｅｒａとネスケで確認したところぐちゃぐちゃでした。

これは仕様ですか

>>387
これだけ言っておく。

　I　E　を　信　じ　る　な　。

>>386-387
>>1嫁。
他の人に具体的な状況が伝わるようにちったぁ頭使え。

386です。うまく表現できていなくてすみませんでした。
以下のようにフレームをわけ左にメニュー、右にコンテンツを表示できるようにしたいです。
メニューをクリックしたときにその内容が右に表示されるにはどうしたらいいでしょうか？
<style type="text/css">
<!--
.left-space,.right-space{background:#000000;color:#ffffff}
.content{color:#000000;background:#ffffff}
body{background:#000000}
body{padding:0px;margin:0px}
.left-space{width:15%;height:100%; position:absolute;left:0px; top:0px ;overflow:auto}
.content{width:70%;height:100%; position:absolute;left:15%; top:0px ;overflow:auto}
.right-space{width:15%;height:100%; position:absolute;left:85%; top:0px ;overflow:auto}

-->
</style>

<body>

<div class="left-space" >めにゅー</font></div>
<div class="content">こんてんつ</div>
<div class="right-space">みぎ</div>

ページ下に帯のついたフッタを表示したいでず。
ウィンドウサイズに対してrelativeなやつ。

>>386
>クリックすると右のコンテンツに表示はされずに独立した
>ページがひらいてしまいます

まさかまさか、a要素にTARGET属性を指定してなんかないよね？
疑似フレームは飽くまで疑似であって別のページではないんだからね。
はは、まさかね。

>>387
　ＦＡＱの>>7のリンク先は見ましたか。
　また、IEのフロート解釈バグは下記参照。
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html

それでも疑問が解決しなかったら、具体的なソースを出してもう一度質問して下さい。

まさかに一票

３９０です。解決しました。ありがとうございます

>>390
＞<div class="left-space" >めにゅー</font></div>

ＣＳＳ使ってるのに非推奨のfont要素を使用。しかも閉ぢタグのみ。……不安だ。

>>395　どう解決したのか報告が欲しかった。折角助言してくれた人のためにも。

やっぱり『まさか！』だったのかな〜？

テキストにunderlineを設定すると文字から１〜２pixel離れて下線がつきますよね
font-familyにosakaとかMSゴシックとか設定しちゃうとテキストにくっついた下線がひかれます
font-familyを設定しつつunderlineを離すやつってあるんですか？

>>399
text-decorationでなくborder-bottomを使ふよろし。
下線と文字列との距離はpaddingで調節しませう。

>>391
div.footer　に対して、position:fixed;で位置決めとか。

textarea {
width:80%;
}
とか指定するのはよろしくないのですか？
あんま見ないもので。

>>401
position:fixed;はWinIEが未対応なので、
overflowによる擬似フレームの要領で表現する手もあるね。

>>402
別段弊害はあるまい。

>>400
ありがとうございます。そういう方法ですかー。
<a>タグのというかリンクの下線として使ってもおかしくないですよね。

>>402
よろしくないというか。
textarea要素は、rows属性とcols属性が必須であるわけで。
また、（非置換）インライン要素だから、CSSでwidth指定は本来無効。

>405

css仕様書やgoogleによればtextareaは置換要素のように読めますが
どっか（errataかな）で修正されてたら教えてください

>>404
インライン要素へのborder指定はWinIE5.0以前では無効。
つまり、text-decoration:none;と併用するとリンクの箇所がわからなくなるおそれがあります。
まあIE使用者はver.5.5以降が大半を占めるにしても、ご留意ありたし。

text-decorationとborder-bottomを併用すると想像するに二重線になるんですよね…
なかなか難しいですね
こだわるかこだわらないか

>>407-408
WinIE5.5未満のみ有効
<!--[if lt IE 5.5000 ]>
<STYLE type="text/css">
a:link, a:visited, a:hover {text-decoration:underline;}
</STYLE>
<![endif]-->

ブラウザによるCSS振り分けは最終的にCGIやPHPなどでやるのがいいのでしょうか

>>410
何を持って最終とするのか。
振り分けのために存在するメディアグループは無視なのか。

おいおい、振り分けのために存在するわけではないだろ。

>>412
「これを対象にしてます」と言ってるんだから振り分けてるといえるような。

<div class="section">
<p class="comment">hoge</p>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
以下上記と同じものが何個か続く。
----------------
div.section { clear:both; margin:0; padding:0 }
p.comment { float:left; width:60%; }
ul.menu { float:right; width:30% }
----------------
このようなHTMLソースとCSSがあった時、IEではdiv.sectionが子要素の高さ分計算され
ますが、Mozillaで見るとfloatさせた分の高さが下にはみ出てしまいます。
これはIEとMozillaどちらが正しいのでしょうか？
また、Mozillaで表示させてもはみ出さないようにするにはどうすればいいのでしょうか？

>>414
とりあえず、例文については興味ないけど、IEかMozillaか、となるとMozillaがあってる。常にな。

表示が違った場合、95%くらいはIEのバグor未実装or独自拡張だな。
100%とは言い切れないところがなにげに厄介。

>>413　そはメディアの振り分けにして、ブラウザの振り分けに非ず。
>>414　ＦＡＱです。A5（>>7）のリンク先を見なさい。>>393のリンクも。
それでわからなかったらまたどうぞ。

>>417
そは屁理屈。

>>418
まづ>>410は「ブラウザによるCSS振り分けは」と言った。
それを受けて>>411は「振り分けのために存在するメディアグループは」と言った。
この流れでは、ブラウザ別のＣＳＳ振り分けのためにメディアグループが存在する、としか取れぬ。
たしかに@mediaを利用してブラウザ振り分けをすることもできる。
cf. http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
だが勿論それはブラウザごとの未実装やバグを逆用した非本来的用法だ。
メディア・グループはメディアを対象に指定するもの、ブラウザ振り分けのためのものではない。

>>419
いや、「そは」って言いたかっただけやねん。

>>420　そは人騷がせなり。　文語調でないと「そは」は生きないヨ。

>>421
そはの意味が分からん。わからん言葉使わないでよね。鬱陶しい。

……あまりの教養の無さに唖然とさせられました。
無知は仕方がないにせよ、それを補ってゆく知的向上心の無さにも。

>>423
知ってることが必要なんじゃなくて、知っていることを使い分けられることが必要なんだよ。
日本の幼稚園児にトイレの行き方を英語で教えるようなものじゃん。
内容が正しくても伝わらなければ無意味。無価値。

＃旧かな厨すべてに当てはまるけどネ

>>423
お前は知らんことがあったら完全に網羅するような人間なんか？
知的向上心って言葉自体が稚拙なので、「たまたま知ってる言葉を他人が知らなかった優越感」ってのがわかるけどな。

「そは」程度で何を大層な。知らない方が恥なだけ。「幼稚園児」のままでいいわけ？

意味も知らずに「言いたかっただけ」ってあたりは、
たしかに幼児の口真似なみかもね。>>420

そろそろ>>378が降臨する頃かな？

次どうぞ↓

#質問者は義務教育修了程度の読み書き能力（literacy）を有すること。

ただいまより英語、漢文、文語による質問も認められることになりました

卒爾ながらちとお訊ね申すが、すたいるしいーととは何でござるか。

すみませんでした。再挑戦。

�@上段にDivを２つ左回り込みでならべます。左回り込みの指定は最初のDivのみ
�AそのDivのなかにそれぞれＰで50%：50%でやはり左回りこみで並べます。
これも最初（左側）のみ左回り込みを指定してます
下段はDivを250px指定で３つ左回り込みで並べます。
こちらは１番目と２番目を左回り込みを指定してます。
IEだときれいにレイアウトが表示されます。オペラとネスケはめちゃくちゃになります。

宜しくお願いします　

>>433
左マージンは適切に設定されているかね？

>>415-416
ありがとうございます、Mozillaの表示を信用して調整していくことにします。

>>417
FAQは目を通したつもりだったのですが見落としていたようです、お手数をおかけしました。
<br style="clear:both;">を入れることで対処できました。
ありがとうございます。

質問があります。
overflow-yは「auto」にして、縦方向にはスクロールさせますが、
横方向にはスクロールさせずに、勝手に改行させたいんです。
今のままだと横にもスクロールバーが出てしまうんです。

もしかしてバカな事を聞いてるのかもしれませんが、
それも分からないほど初心者なんです…。
よろしくお願いします。

>>436
まあソースだせや

あ、スミマセン。解決してしまいました。
<pre>にしてたので<p>にしたらできました。
スレを汚してしまって申し訳ありませんでした。以後気をつけます。

>>433＝>>387
すると>>393のリンク先を見てもわからなかったのですね？
たぶん右側に来るfloat無指定の要素への指定が足りないのかと。
しかし、とにかくHTMLとCSSのソースを出して下さい。

>>424
禿げ上がるほど同意

降臨〜俺の偽者がいるみたいだな。

おまえら非常にくだらん！
まぁ質問する方にも問題あるが、何度も言うが答えてる奴の一部がアフォだな。
お前らただでさえ知識晒す場所ねーんだからよ。いちいち勿体ぶるなよｗ
そんなマニア知識、女の前で晒せば確実にキモーが飛び交うぞ。
まぁあれだ、こいつらに何か言われたら、おめーより女の扱いは知ってるぜとでも言って去れ

やっぱスレタイ変えるか?
/* 女にもてないキモヲタ常駐のCSS･スタイルシート質問スレッド【27】 */

>>406
>>405では知能障害を起こしていました。>>405は無視で御願いします。痴呆で鬱なので死んできます。

遅くなり申し訳御座いません。
こんなふうです。
393を読みましたが何が何だか･･･

<DIV style="width : 250px;float : left;height : 200px;">ここに文章</DIV>
<DIV style="width : 250px;float : left;height : 200px;">ここにも文章</DIV>
<DIV style="width : 250px;height : 200px;">さらに文章</DIV>

オマエらさ、本買えよ
その方が早いよ（w

>>444
で、お勧めの本は？

>>443
これでIEと表示同じになるんじゃないのか？

<DIV style="width : 250px;float : left;height : 200px;"><p>ここに文章</p></DIV>
<DIV style="width : 250px;float : left;height : 200px;"><p>ここにも文章</p></DIV>
<DIV style="width : 250px;height : 200px;float : left;"><p>さらに文章</p></DIV>

>>446さん
ありがとう御座いました。できました。
最後のにも回り込みの指定が必要だったんですね。

[スレ番号]　投稿者の名前

としたいのですが、

<h3>[スレ番号]　投稿者の名前</h3>
として、
スレ番号と名前の間にスペースを入れたいのです。

<h3>[スレ番号]<span class"name">投稿者の名前</span></h3>
とし、
.name {
margin-left : 1em;
}
というマージンの使い方は仕様書よめなんですか？

>>448
<h3>[スレ番号]&nbsp;投稿者の名前</h3>

>>448
実態参章でも半角でも全角でもスペース入れたらええやん

>>448
> <h3>[スレ番号]<span class"name">投稿者の名前</span></h3>

class"name"・・・・!!
　　　　　　　　　　　　　　　　　

>>447
やっぱり理解してなかったのか……。
floatで回り込みするのは後続要素の文字列であって後続要素のブロック全体ではない。
後続ブロック自体は浮動要素の下に重なってるのだ。背景色をつけるとわかる。
IEでブロック全体が回り込んだかのごとく表示されるのは
「フロートに後続する要素のボックス幅がフロートに合わせて短縮される」バグ。
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
従って、float:left;に対して後続要素のブロック全体を右に回り込ませるには
その右に来る要素にもfloat:left;が必要。でないとMozillaで表示が崩れる。
浮動要素にはwidthが必須だが、左要素の幅が決まってるが右要素は決められない場合もあるから、
その場合、右要素にfloatを指定せずとも{margin-left:左要素の幅値;}と指定すれば
ブロック要素全体が回り込んだかのごとき外観が得られる。これ、おすすめ。

参考までに>>452の実例

ttp://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html

imgタグにborder使うのはＯＫでしょうか？
img {
border: none;
}
ってやったんだけどＮＮは効いてくださらなくて・・・
どうすればいいんですか？？

>>454
border:0px none #ffffff;

色は背景色に合わせるとなお良い。
これでも表示されるならCSSでは無理だ。と思う。

borderでいいんですね。
やっぱNN4.Xは効かないですね〜。
ぶっちゃけ、みなさんはNN4対策どうしてるんでしょう・・・

>>456
NN4対策には
import使ってCSS読み込ませないようにしてるよ。
NN4以外には>>455で対応できるだろうし。

CSS無しでもちゃんと読めるHTML書けば、
NN4でも読めるからそれで良いんじゃないかな。

>>454　ＦＡＱ（>>8）に既出ですよ。

おい
もっと気軽な質問スレはないのか？
ここで質問するとケツの毛抜かれるほど
コケにされそうだよ

>>459
お前も含めて名無しなんだから気にするな。
ここでいくら叩かれようともリアルに影響しないだろ。もっと気楽に。

>>460
スタイルシート使うと女にもてますか？

>>461
モテます。
当然、スタイルシート無しでもモテる奴はモテるのですが、
スタイルシート使ってる連中は例外なくモテます。

>>461
スタイルシートを使ってもモテるとは限らないが、
モテるやつは皆スタイルシートを使っている。

<table width="100%" summary="メインメニュー">
<tr>
<td class="titimg"></td>
</tr>
</table>

.titimg {
background-image: url(../image/image.gif);
background-position: center;
text-align: left;
margin: 0px;
padding: 0px;
}

って背景を指定したらIE4は表示されませんでした。
何がいけないのでしょうか？

>>464
tdの中に何も入ってないからでは？
それにしてもいまどきIE4……。
IE4ではロクにCSSを実装してないよ。5.5以降にヴァージョン・アップしたまへ。

分かり易いようにサンプルにはtdの中に何も書かなかったけど
実際はあります。
お仕事なんで、verうっぷでは・・・

　　　　　　　お　仕　事　な　ん　で

>>464　もしかしてパスが間違ってるとか。　絶対URLにして試してみ。

すみません自己完結しました。
background-position: center;
で表示のされかたが変わってました。

わざわざvirtualPCにIE3.0、IE4.0環境作ってチェックしてます。
めんどくせ〜

異なるバージョンのMicrosoft Internet Explorerを共存させてみる。
　http://www.misuzilla.org/docs/ie-SxS
1つのWindowsに複数バージョンのIEを共存
　http://altba.com/yuu/blog/archives/000351.html
異なるバージョンのIEを一つのWindowsにインストール
　http://chitatopops.net/archives/2003/11/10/multiple_ies_in_windows.php
単一のWindowsに異なるバージョンのIEをインストールする方法
　http://deztec.jp/design/03/12/000028.html
？
　http://mugi.cc/ie.htm

いまさらIE4かよ。Netscape4よりシェア低いぞ。
クライアントの環境がIE4だったら、相当ｱﾌｫだな。
セキュリティ的にマズイとは思わんのか。
どうせいまだにWin95とか使っているんだろうな。

確かにNetscape4には及びませんが
Netscape6-7,Mozilla,opera,mac全部が束になっても
IE4のシェアには及びません。優先されるべきはIE4です。

>>472
http://pcweb.mycom.co.jp/news/2004/01/19/007.html

1pxは何cmでしょうか？画面のサイズは1024×768です。

ちょっと笑った

>>474
100pxのボックスを作ってモニタに定規を当てて測れ。

仕事でやってて、IE3 やら 4 やら相手にしているとは。
言われたことそのままやるのだけが仕事じゃないよ。

--

>>452
その方法が本筋だと漏れも思うが、それだと、
IEでブロックの間に超えられない壁が出来るよね。
しっかりしてくれよ IE 、と思う。

スレ違いかもしれませんが質問させてください。

CSSに複数の背景を用意します。
例えば
body#01 {
background-image : url(./img/01.jpg);
}
body#02 {
background-image : url(./img/02.jpg);
}
body#03 {
background-image : url(./img/03.jpg);
}

アクセス毎にランダムにどれかを選ぶようには出来ませんか？
<body id="0*">というふうに。

>>478
CSS云々を飛ばして、
背景のランダム表示だったらJSでできるとおもうけど。

あとIDの頭に数字は使っちゃダメだって。

>>474

0.2mmというのが全国共通の企画です（藁

＃＃ってか、ネタじゃなくてマジだったら俺は相当な悪者なわけだが。。

漢字間違えたし。。。企画→規格

classを使うコツを教えてください。
まったく使わなくてもいいの？

>>482
既にあるタグで十分に纏められるならいらない。

なんか違うか？

>>8
a:link img, a:visited img, a;hover img {border:none;}
これさ、a;hoverじゃなくてa:hoverだよな。

ユーザスタイルシートの質問はこちらでいいすかね？
といいながら質問させてもらいます。すまんそ。
えー、とうとうIE6を導入してしまいました。
ユーザスタイルシートで画面をいっぱいに使ってくれないページを
なんとか画面いっぱいに表示させたいと思っていますがうまくいきません。
どんなスタイルシート要素を使えばよいでしょうか？

※たとえば↓のTV番組表をブラウザの横幅いっぱいにしたい。
http://www.ontvjapan.com/program/grid.php3?tikicd=0002
単純にtableのwidthを100%にしたりすると↓のように段組の中に
http://my.yahoo.co.jp/
テーブルのあるページなんかで問題が起こるし…。

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

質問はアゲて。

table {width:100%}
table table {width:auto;}
で、よくないか？

多分駄目。
全体の最大マージン指定(無駄なスペースを無くす)とかできるといいんだけど。
無理っぽいかな？サイト毎に切り替えるしかないか…。

>477

>仕事でやってて、IE3 やら 4 やら相手にしているとは。
>言われたことそのままやるのだけが仕事じゃないよ。

クライアントが公共系だと、情報バリアフリーもあるんで
ＪＩＳ（レビュー）＋ＨＴＭＬ4.01で企画しなくちゃいかん事が多いです。
読み上げ系ブラウザにも対応しないとならないし・・・

自分でコーディングすればなんとかなる所も多いが、全部やってる
わけにもいかないんで。
それにしても無能な職人が多すぎ。
まぁ、いい加減な事を教える学校が多すぎなのがいけないのだろうけど・・・
スレ違いですみません。

無能>>488

>>488
CSS使わなければいいのに。

<dl class="foo">
<dt>name</dt>
<dd><input></dd>
<dt>mail</dt>
<dd><input></dd>
<dt>message</dt>
<dd><textarea></textarea></dd>
<dt>password</dt>
<dd><input></dd>
</dl>

とやって、
.foo dt{
width : 8em;
float : left;
clear : left;
}
とやって、項目と入力欄を並べてるんですが、
dtに枠（border）を用いているせいでdt要素とdd要素の高さが違い、
Operaで見ると入力欄が少しずつ上にずれ込んでしまいます。

floatは前出のボックスの右肩より上にいかない、が正しいと思ってたんですが、どうすれば解決しますか？

あと、Mac+Safariでpassword入力欄がtextareaに重なってます。これも原因がわかりません。

どなたかお知恵をお貸し下さい。お願いします。

<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font color=#000000>あいうえお</font></td>
</tr>
</table>
こんな感じでフォントカラーが指定されてるとします。HTMLに記述する事は出来ません
CSSのみでフォントカラーを変えるにはどのようにすればよいでしょうか?

>>491
dd要素への指定はどうなってるの？

>>492
td * {color:#f00;}とか適当に。

>>492
td{
color : #000000;
background : transparent;
}

table要素の幅もCSSでやりましょう。

>>493
dd要素への指定は何もありません。

>>495
それではダメです。floatによる段組のやり方として間違ってます。>>452を読んで頂戴。

>dtに枠（border）を用いているせいでdt要素とdd要素の高さが違い、
これも、dd要素にdtと同じ幅のborderを指定してやれば解決するはず。
borderを表示したくなければborder-colorを背景色と同じにすればよし。

>>495
ＦＡＱ（>>8）を見てないのですか？
Q9.dt・ddを横並びにしたいのですが。（会話文など）
A9.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

>>496
あ。
ddに高さをあたえることばかり考えてました。でも、
dtのフォントサイズなんて変わるしなぁ、って。
一度迷いだすと他の方法って見えなくなっちゃいますね。ありがとうございます。

あと、
＞あと、Mac+Safariでpassword入力欄がtextareaに重なってます。これも原因がわかりません。
が真剣にわからないんです。できましたらお願いいたします。

>>497
ああ、こちらもありがとうございます。
＞floatは前出のボックスの右肩より上にいかない、
というので、頭がいっぱいで、既出の問題とは違うミスをやらかしてると思い込んでました。

>>496
> これも、dd要素にdtと同じ幅のborderを指定してやれば解決するはず。
ダメでした。dd要素に文字列があれば文字の高さ+borderの幅でいけると思うんですが、
dd要素の中身がinput要素だけなので、borderを追加していない状態の時点で高さが違います。

>>498
＞あと、Mac+Safariでpassword入力欄がtextareaに重なってます。

ddにmargin-left:8.5em;とか指定して直した？　それでも変りないの？
他にHTMLやCSSの記述でミスはないか、validatorでチェックして。
それでも原因がわからなければ、Safariのバグかと。
下記へ報告してくれませんか。
　CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
こちとらWindowsなんで再現できんのですよ。

input要素、select要素などを1emに指定すれば、
dd要素の高さがdt要素と同等になりますが、
そのために入力欄をデカくするのもあれだし、
dd要素にこじつけの文字を入れて高さを保つのは好ましくないし、
dd要素を1emとやっても、input要素の1文字分（80%くらいの文字の大きさかな？）にしかならないし。

「input要素、select要素などを1em」くらいしか解決策ないんですかね。

>>500
>dd要素に文字列があれば
>dd要素の中身がinput要素だけなので

？　input要素でもtype="text"とかtype="radio"とかあるでしょ。
まさかtype="hidden"ではあるまいし。

>>501
まだローカルでテストしてる段階なので、
Safariではチェックできてないんです（アップされてるファイルのSafariでのスクショを公開してくれるサイトを利用してるので）

validatorでは問題なしでした。
自分も恐らくSafariの解釈に問題があると思うんですが。

>>503
input要素の高さが0.8emくらいしかない、という意味です。
でも、全てのUAがそのサイズとも限らないので、それを基準にするのも無理ですし……。

>>502
>dd要素にこじつけの文字を入れて
input要素だけでlabel要素は入れないのかな。それは不便だ。
いっぺん、inputの属性とか省略しないでソースを全部書いてくれない？

>>506
<dl class="form">
<dt><input type=hidden name=kan value="漢字"><input type=hidden name=a value=regist><label for="NAME">名前</label></dt>
<dd><input id="NAME" type="text" tabindex="1" accesskey="n" size="15" name="name" maxlength="20" value="名前" onfocus="if(value=='名前')value='';onfocus=null"></dd>
<dt><label for="MAIL">E-mail</label></dt>
<dd><input id="MAIL" type="text" tabindex="2" accesskey="e" size="20" name="email" maxlength="40" value="E-MAIL" onfocus="if(value=='E-MAIL')value='';onfocus=null"></dd>
<dt><label for="WEBPAGE">Website</label></dt>
<dd><input id="WEBPAGE" type="text" tabindex="3" accesskey="w" size="25" name="webpage" maxlength="60" value="http://"></dd>
<dt><label for="TITLE">題名</label></dt>
<dd><input id="TITLE" type="text" tabindex="4" accesskey="s" size="30" maxlength="40" name="subject" value="題名" onfocus="if(value=='題名')value='';onfocus=null"></dd>
<dt><label for="MESSAGE">本文</label></dt>
<dd><textarea id="MESSAGE" name="message" tabindex="5" accesskey="m" rows="5" cols="40" onfocus="if(value=='本文')value='';onfocus=null">本文</textarea></dd>
<dt><label for="PASSWORD">削除パスワード</label></dt>
<dd><input id="PASSWORD" type="password" size="10" tabindex="6" accesskey="p" maxlength="8" name="pass"></dd>
</dl>

>>491ではクラス名をfooとしてましたが、実際はformにしてあります。

dtとddに同じ値のpadding-top（とborder-top）を指定すれば、高さは揃ってくれるだろ。

>>508
dt要素の高さ（1em）+border（1px）
と等しくするための必要な不足分、の算出方がわからないんです。
IEとOperaではdd要素の中身のinputなどは0.8emくらいですが、
仕様書にはinput要素のデフォルトの高さは定義されてませんし、
かならずその大きさでレンダリングされるとは限らない、と思ったのですが。

textareaだけcol属性のため他より高さがあるんだよね。
たぶんSafariはこのバグと同じ解釈なのでは。

先行するフロートの上方に後続のフロートが置かれる
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

詳しくは下記にてどうぞ。
CSS/DHTMLバグ辞典スレッド 第３版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

>>509　いや、>>508のやり方で上辺だけは揃ってくれるのでは？

>>508
万が一dd要素の方が大きくなっても、dt要素が上にずれ込むことはないみたいです。
上下に1pxずつとって、ひとまず解決とします。
ありがとうございました。

>>510
なるほど、textareaの高さが原因でしたか。
紹介下さったところを参照してみます。有難う御座いました。

>>511
>>512でも書きましたが、今度は逆にdd要素がデカくなったら、を危惧してたんですが、試して問題なかったみたいです。
本当に有難う御座いました。

無理に定義リスト（dl）にしなくても、
名称（ラベル）とその値を並べるなら、表（table）と見做していいんでないかい。

<head>
<style type="text/css"><!--
BODY {
padding-left:5px;
background-color:#efefef;
color:black;}

A.menu {
font-size:110%;}

P.discription {
font-size:85%;}

DIV.news {
margin-top:5px;
padding:3px;
border:2px solid silver;
width:50%;
height:170px;
text-align:left;
position:relative;
left:20%;
right:auto;}

DIV.menu {
border:1px solid black;
width:200px;
float:left;}--></style>
</head>

<body>
<div class="menu">
<p class="discription"><a href="#" class="menu">えええ</a><br>
説明</p>
<p class="discription"><a href="#" target="unko" class="menu">ううう</a><br>
説明</p>
<p class="discription"><a href="#" class="menu">いいい</a><br>
説明</p>
<p class="discription"><a href="#" target="_top" class="menu">ああ</a><br>
説明</p></div>

<form action="null" style="margin:0px;">
<textarea readonly cols="65" rows="5">
なったらかんたら
</textarea></form>
<div style="width:56%; height:180px;"><!--DIVのスタイルで、後方のIFRAMEの大きさを決める。-->
<form action="null" style="margin: 0px;" name="pulink">
<select onchange='parent.patches.location.href=this.options[this.selectedIndex].value' style="float:right; margin:2px 0px;">
<option style="background-color:white; color:black">選択</option>
<option value="iii.html">iii
</select>
</form>

<iframe marginheight="7px" marginwidth="5px" frameborder="1" src="aaa.html" name="unko" width="100%" height="100%"
style="border: 1px thin black; clear:right;" title="">iframeを使用しています。以下省略</iframe></div>
<div class="news"><strong style="color:red; display:block; font-size:120%;">お知らせ</strong>特に無し。</div>
</body></html>

上のソースをIEで開くと希望通りのレイアウトになりますが
ネットスケープだとiframeと<div class="news">が重なり、
さらにiframeが<div class="menu">の下に来ます。
ネットスケープでIEのように表示させるには、どうしたら良いのでしょうか。

>>516
> </iframe></div>
この閉ぢdivの開始タグが見當りません。
ＣＳＳを問ふのはＨＴＭＬをチェックしてからにしませう。

・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。

継承/非継承のプロパティ一覧があるサイトない？

>>476
はい、ありがとうございます。やってみますね。

>>480
そうなんですか。0.2mm…一応真面目に質問しているつもりなんですが。

>>516
ＦＡＱの>>7は見ましたか。
>A5: floatさせる要素にはwidth指定が必須（img要素以外）。

なぜiframeなどはインライン・スタイルシート（タグ内のstyle属性）で指定したのですか。
外部シートに一括した方がいいね。

おっと間違ひました。開始タグはありますね。失敬。

>>519
可哀想だから。

えと、pxとcmは換算できません。
1cmは1cmだけど、100ｐｘは何cmにでもなる。
解像度は変更できるからね。

ちなみに、フォトショップで新規ってやると、cmで指定できるけど、cmに対するpxという独自の換算を使ってるよ。

>>519　ちょっと笑った。

>>515-516
ひどいソースだなあ。もう少し整理して提出できないかい。
インライン・スタイルシートのこともあるが、
a要素とdivに同じclass名menuを付与する意味あるの？
divだけclass名を残して .menu a {font-size:110%;}でいいだろ。

>>522
なんでやねん。
独自の換算じゃなくて解像度から割り出してるんでしょ

>>493
アスタリスクで問題解決いたしました。ありがとう
>>494では無理でした。でもありがとう

>>515-516
body {padding-left:5px; background-color:#efefef; color:black;}
.menu a {font-size:110%;}
p.discription {font-size:85%;}
.menu {border:1px solid #000; float:left; width:200px;}
.main {margin-left:205px;}/*これが肝腎*/
.main form {margin:0;}
.main select {float:right; margin:2px 0; width:5em;}
.main iframe {border: 1px thin black; clear:right; height:180px;}
option {background-color:#fff; color:#000;}
.news {
margin-top:5px; padding:3px; border:2px solid silver; width:50%; height:170px;
position:relative; left:20%;
}
.news strong {color:red; display:block; font-size:120%;}
<body>
<div class="menu">
<p class="discription"><a href="#">えええ</a><br>説明</p>
</div>
<div class="main"><!--右に回り込ませる領域-->
<form action="null"><textarea readonly cols="45" rows="5">なったらかんたら</textarea></form>
<form action="null" name="pulink">
<select>
<option>選択</option>
<option value="iii.html">iii</option>
</select>
</form>
<iframe frameborder="1" src="http://pc2.2ch.net/hp/" name="unko" title="">iframeを使用</iframe>
</div><!--右に回り込ませる領域-->
<div class="news"><strong>お知らせ</strong>特に無し。</div>
</body>

>A5: floatさせる要素にはwidth指定が必須（img要素以外）。

見落としていました。
floatがある箇所にwidthを指定しましたが、IEのようになりませんでした。
ネットスケープのような糞ブラウザを使用している糞ユーザーは、切り捨てる事にします。

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

>>525
モニタのサイズとかは無視してるけどな。

>>528
floatを理解せずに使って、よくそんな口が利けるものだ。
浮動要素は通常フローから除外されるのだから、Mozillaの解釈が正しい。
>>527と何が異なるのか、じっくり勉強すること。

>>528
なぁ、苛立つのはわかるけど、何かをなじる、ってことは傷つく人間もいるわけだぜ？
俺はネスケユーザじゃないけど、なんかそのもの言いには非常にムカついた。
その性格は改めたほうがいい。

あと、NN対策できないレベルの制作者であることは恥ずべきことだ。

モジラの方が正しくても、ネットスケープが糞なのは変わりません。

>>532
もう誰も教える機を失ってるよ。
好きなようにやればいいさ。器が知れる。

私の器が小さくても、ネットスケープが(以下略)

>>532　
Mozilla=Netscapeなわけだが？ もしかして糞NN4なのかよ。　>>1見ろ。

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。

>>534
そのネットスケープすら上手に扱えないとはな。

>>529
解像度600dpi、2.54cm四方の画像解像度は600*600、
解像度72dpi、2.54cm四方の画像解像度は72*72。

ユーザが設定できる情報なんだから
「PSが独自に換算」ではないだろ。

>>518　検索して見つからないなら、無い。

ハイ次の方、質問どうぞ。

仕事で返信が遅れてしまい申し訳ないです。

TABLE要素にheight属性がないとご指摘いただいたのですが
例えば「この高さ、幅のテーブルを用意したい」というときはどう処理するのでしょうか？

>>376
paddingで指定しても上手く調節できないようです。

現在の悩みを簡単に書くと
<table><tr><td>AAAAA</td></tr></table>
デフォルトではAAAAAは表の真ん中（縦位置）にくると思うのですが
リンクを張ってからAAAAAが表の左上に位置するようになりました。
リンクは<td>全体に張るようになっています。

>>537
モニタのインチ数とかは？

＃つかどうでもいいけどな。

>>539
>例えば「この高さ、幅のテーブルを用意したい」というときはどう処理するのでしょうか？
height属性ではなくスタイルシートのheightプロパティーで指定しなさい。

>paddingで指定しても上手く調節できないようです。
どう指定してどううまくゆかなかったのか、書かないとわかりません。

>リンクを張ってからAAAAAが表の左上に位置するようになりました。
a要素へのheight:100%;指定の所為です。
また、a要素をdisplay:block;にしたのかどうか、>>376の確認に応答して下さい。

説明不十分な質問には役に立つ回答ができません。

掲示板のタイトルをページの上からギリギリのところに持っていきたくて。
マージンの個別指定をしてみました。「margin-top:1px;」
そこで質問なんですが、初期で設定されている上側の領域はどのぐらいなんでしょうか？
少しずつ変更していっても、ズレて最初の領域にできないんです。

モニタの実寸dpiを測っておけば、それに合わせられると思う。

#ほんとどうでもいいw
#スレ汚しすまん

>>542
>初期で設定されている上側の領域
何の上側ですか？ 言葉足らずでよくわからんな。

>マージンの個別指定をしてみました。
何のマージンですか。タイトル（h1要素？）のマージンかな？

body要素に margin-top:0; padding-top:0; を指定すれば解決するかも。

bodyのところに、margin-top;1px;を入れてます。
1pxにすると少しタイトルが上にいくのですが、
30pxにするとタイトルが下に下がっていきます。
そのちょうど最初の高さにするには、どのくらいのpxか気になり。
いじってたのですが、変わらないんです。

>>541
:hover疑似クラスがa要素以外に効かないIEの現状では
DHTMLでタグ内に個別指定する手もある。
<td onMouseover="this.style.backgroundColor='#f00'" onMouseout="this.style.backgroundColor='#fff'">AAAAA</td>

>>545
>そのちょうど最初の高さにするには
marginを指定しない。もしくはmargin:auto;で。

ありがとうございます。
marginの指定でautoって書く意味あるんでしょうか？
書かなくても初期の高さにできるのに。書くだけ意味ない気がするんですが。

>>548　margin-left:auto;margin-right:auto;で中央寄せ、とかの用法が有名かな。

>>549
感謝です、これで安心してホームページが作れます。

外部のスタイルシートで、サイト全体の文字の大きさを
一段階小さくする方法はありませんか？
<p></p>に対して小さくする設定だと、<p></p>だけにしか適用されないので
そういうので囲んでない文字も、小さくしたいです。

<P>の高さ幅を狭くするために、<BR>のマネをして。
P{line-height:0.5em;}としたのですが、高さに変化がみられません。
<P>の高さ幅は変更不可なのでしょうか、それと特定の<P>のみ変更できるならばやりたいです。

>>551
する方法はあるけれど、本文の文字サイズは弄らないのが正解に近いぞ。

>>545
ブラウザのデフォルトスタイル・研究室
http://is.vis.ne.jp/lab/ua_default_css/index.xhtml
body
margin, padding
Windows版IE, Mac版IE のデフォルトスタイルでは、マージンが 15px 10px。
Netscape のデフォルトスタイルでは、マージンが 8px。
Opera のデフォルトスタイルでは、パディングが 8px。

>>551
body{font-size : .8em}

>>552
>P{line-height:0.5em;}としたのですが、高さに変化がみられません。
当然ながら、改行を挿むか、自働折り返しされる長さの文でないと、変化が見られないよ。

WinIEにはバグがある。
line-heightの指定が置換要素を含む行に反映されない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b075.html

あと、既出だが、line-heightは単位抜きの実数値指定がおすすめ。line-height:1.5;とか。

>>553-555
ありがとうございます。できました。
本文のサイズは変えないほうがいいのですね。
変えずに済むように、デザインを少し変えてみようと思います。

>>555
font-size、しかもbodyのfont-sizeに限っては、em単位はおすすめできない。
理由はWinIEのバグ。>>122・>>126既出。
font-sizeでem単位を使用したい場合、祖先要素でfont-sizeプロパティを%値で指定しておくことが望ましい。
　cf. http://cssbug.at.infoseek.co.jp/detail/winie/b048.html

heightに関してですがcssに
table { height:250; }
と記述したのですが合っていますでしょうか？

.menu a { display:block; text-decoration:none; }
と試してみたところ文字が真ん中にきました。無事解決かと思ったのですが
今度はその記述後、別の問題が出てきました。

１）ソースを見ていただけるとわかると思うのですが、メニュー1だけリンクが張ってあります。
これはメニュー2、メニュー3と続くのですが、記述後メニュー1のリンクだけ横幅いっぱいに
リンクがかかっています。他はメニュー2などの文字の上にもっていかないとマウスオーバーの
処理が出てきません。

２）効果として文字ではなく<tr><td>の枠にマウスを当てることでマウスオーバー処理を
表現したかったのですが、今度は文字の高さ分（縦）しかリンク範囲が出ておらず
当初の枠全部という効果が消えてしまいました。

>>559
仕様書を読んで、そんな記述の仕方があるかどうかを調べたら死ぬ、とかそんな病気にかかってるのかな？

body { margin:0; padding:0; font-size:95%; }
td { font-size:95%; }
table { height:250; }
.menu a { display:block; text-decoration:none; }
.menu a:hover { background-color:#999999; text-decoration:none; }
.menu a:link, .menu a:visited { color:#000000; }
.dot { border-bottom: 1px dotted gray; border-left: 1px dotted gray; }
.dot th { border-top: 1px dotted gray; border-right: 1px dotted gray; }
.dot td { border-top: 1px dotted gray; border-right: 1px dotted gray; }

<body>
<table cdllspacing=0 cellpadding=0 border=1 bordercolor=#000000 width=200 padding=0 margin=0><tr><td>
<table cellspacing=0 cellpadding=0 border=0 width=200 class="dot menu" padding=0 margin=0>
<tr><td bgcolor=#f1f1f1><a href="#">メニュー1</a></td></tr>
<tr><td bgcolor=#f1f1f1><a href="#">メニュー2</a></td></tr>
<tr><td bgcolor=#f1f1f1><a href="#">メニュー3</a></td></tr>
</table></td></tr></table></body>

わかりづらいかと思いましたのでソースを書きます。
どこか間違っている部分がありますでしょうか？

>>559
>table { height:250; }
>と記述したのですが合っていますでしょうか？
ご自分でCSS Validator（>>3）を使ってチェックすればすぐわかります。
HTMLの屬性と違ってCSSでは數値指定に單位が必須（例外はline-heightだけ）。

>文字ではなく<tr><td>の枠にマウスを当てることでマウスオーバー処理を
>>546參照。
>今度は文字の高さ分（縦）しかリンク範囲が出ておらず
a要素でやるならheightプロパティーで必要な高さを指定しませう。

>>562
単位指定するのをすっかり忘れてしました。申し訳ないです。
早速pxを付けて修正しました。

a要素にheightプロパティーをcssで指定するということですよね？
これをやってしまうと結局最初の問題に戻ってしまいます。
文字が左上にきてしまうんです。

メニュー1にだけリンクの横幅がテーブル枠幅になっています。
何度ソースを見てもわからないのですが、これはバグでしょうか？
メニュー2、メニュー3と同じ記述なのにメニュー1だけが違う処理になっています。

>>552
もしかして、brの代りにpで改行したいといふことなのかな？
p {margin:0;}

>特定の<P>のみ変更できるならばやりたいです。
class屬性やid屬性を振り、セレクタにしませう。わからなかったら>>4の解説サイトへ。

>>363
>文字が左上にきてしまうんです。
a要素にpadding指定して調節したらって教示されたでしょ。

>>546さんの方法で枠の中にマウスオーバーすることで
背景色を変えることはできるのですが、その処理にリンク要素をつけることは
出来ないのでしょうか？背景色が変わるということはマウスを感知しているという
ことだと思うので、なんとかそこにリンク要素もつけようと改変してみたのですが
上手くリンクさせることができませんでした。

上手くリンクをつける方法があれば、解決するような気がします。

>メニュー1にだけリンクの横幅がテーブル枠幅になっています。
>何度ソースを見てもわからないのですが、これはバグでしょうか？

>>563のソースをコピーした限りでは、そんなことにはならない。
どれも同じ幅になる。WinIE6にて確認。

だいたいソースが整理されてない。
何で無意味にtableを入れ子にしてるのか。なぜ表でもないのにtableなのか。
text-decoration:none;の二重指定は無駄だから削れる。
CSSソースの最後の２行は .dot th,.dot td { }で１行にまとめられる。

paddingの指定の件ですが、成功しました！どうもスペルミスだったようです。

>>567
ご指摘ありがとうございます。最終的な報告もこめて整理したソースを書きます。
tableにした理由は最初に書いたのですが、背景色での演出のためです。
入れ子にしたのは背景色を演出するテーブルの周りをドット表示してしまうと
きちんとした枠線が無いため、どうも締りがなく感じました。
そこで入れ子にして外側のテーブルにボーダーを付けたんです。
少し立体的な枠組みになり満足しています。とはいっても、現在こういう手法でしか
表現することを知らないためということもあります。

body { margin:0; padding:0; font-size:95%; }
td { font-size:95%; height:35px; }
.menu a { height:100%; width:100%; padding:10px; display:block; text-decoration:none; }
.menu a:hover { background-color:#999999; }
.menu a:link, .menu a:visited { color:#000000; }
.dot { border-bottom: 1px dotted gray; border-left: 1px dotted gray; }
.dot th, .dot td { border-top: 1px dotted gray; border-right: 1px dotted gray; }

.cssを作り始めて、文字色変更はうまくいったものの背景色がデフォのまま。

BOBY {
background-color: #000000;
}

どこかおかしなところありますか？

ヘイ、ボビー！　寒い日だね。

>>569
それじゃだめだよ、ボビー

＿|￣|○

ﾜﾗｯﾀ

>>569

×BOBY
○BODY

とマジレスしてみるテスト。

>>568
＞tableにした理由は最初に書いたのですが、背景色での演出のためです。
tableにする必要は、無い。下記のソースで同じ事が実現できる。

.menu ul {
width:18em;
margin:0; padding:2px;
border:1px solid #000;
}
.menu li {
list-style-type:none;
background-color:#f1f1f1;
border:1px solid #000;
}
.menu li a {
display:block;
text-decoration:none;
height:9em; padding:4em 6em;
border:2px dotted #999;
}
.menu li a:hover {background-color:#999999;}
.menu li a:link, .menu li a:visited {color:#000000;}
<div class="menu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
px指定はem単位にして相対指定にした。

よく見かけるHPの作り方で左側に案内（メニュー？）を置いて
右側にコンテンツ（内容？）を持ってきたいときはcssでfloatを使うらしいのですが
どう使えばいいんでしょうか？
メニューから続けて書いていくと下にそのまま出てしまうのを、右側に回りこませたいんです。

アドバイスあったらよろー

>>576　ＦＡＱなのでA4（>>6）を見ようね。

回答はや！って誘導でしたか（ｗ
floatの使い方わかりました。ありがとんー

苦笑いが止まらん…

これに２時間も費やすなんてほんとのヴァカだな俺は
>>570-574ありが�d

>>579
validatorを使ってみることをおすすめする

validatorでもプロパティのtypoはチェックできないけどね

×　プロパティ
○　セレクタ

吊ってくる

>>470
3つ目のページ見てたら、
Mozillaで文字に陰をつける方法っていうのが面白かった。
確かに:afterで可能ではないかと思ったことがあったが、実践してた人がいたとは。
雑談ｽﾏｿ
ttp://chitatopops.net/archives/2004/01/22/css_text_shadow.php

<table width="100%" height="100%">
<tr>
<td align="center">(・∀・)</td>
</tr>
</table>

↑
これと同じにプラウザの中心に配置するようCSSで指定するには、どう記述すればいいんですか？

>>584　↑ＦＡＱを読まないで質問するのはどうしてですか？　A6（>>7）

プラウザによって中央に配置されなかったりするからし・・
やっぱテーブル最強なのかな？

>>586
WinIEでもMozillaでもOperaでもできるのだが、一体どのブラウザを問題にしてるのか。
>>7のリンク先をちゃんと全部読んだのかな？

するからし……？　>>586

>>588
芥子を中央に配置してくれないブラウザがあるんだよ。

.001 {border:1px solid #333333;}
こう書いたときに横幅いっぱいに線が描かれてしまうのですが
これを横780pxにする方法ありませんか？

>>590
width:780px

ハイ次。

>>590-591
なんか、すがすがしいな。

>>590
.001 というクラスセレクタは不正。
.\30 01 などの様にエスケープする必要がある。

荒れてないが降臨〜
なかなかハイペースで良い感じじぇねーかよ
おまえら感謝されまくりだな。その調子でこれからも頑張れよ。

さすがの俺もボビーネタにはわらっちまったぜ　ちっ

BOBYの人ですがまた質問しにきますた。

デフォルト文字色を決めたいんだけどBODYの中にcolor:〜;と打ち込むと背景色がそれに変わってしまう。

文字色統一の（黒じゃなくて）やり方教えてください

>>595
ソース晒してください。

BOBY {

/*この間のやつ全部*/

}

>>595
ん？，背景色はbackground-colorの筈だが・・・
colorとbackground-colorを
それぞれちゃんと別の色で指定している？

スマン、確かめてテストしたら出来ちゃった。
おおかた;のつけ忘れだと思う。それか<H*></H*>の文章しか用意してなかったか。

申し訳ない一応ソース出しとく
BODY {
background-color: #000000;
color: #ffffff;
}

っつーかさ、スペルミス程度だったら何度も調べればわかるだろ。

ネタか釣りだろ。ほっとけ。

ﾎﾞﾋﾞｰ、しっかりしろよ！

スレ違いですが、適当なところがなかったんでお許しください。

みなさんのwebページの制作の環境はCRTですか？液晶ですか？

配色を詰めているいとき、この2つの発色が違いすぎて困っています。
みなさん設計なさるとき、どのように配色決定なさってますか？

>>602
色の違いはモニタどころか、ビデオカードによっても変わるんで、気にしてない。
コントラストに気をつけて配色するぐらいかな。他には色相環とか参考にする。

http://www.tanteifile.com/
こちらのサイトについて、ﾏｶｰ＆IEで落ちる現象が発生してます。

>411 名前：名無しさん＠ｺﾞｰｺﾞｰｺﾞｰｺﾞｰ！[sage] 投稿日：04/02/04 19:17 ID:DLBVs1vg
>レイプ魔スレでも一部書いたのですが…

>探偵ファイルを開くとブラウザが落ちてしまいます。
>正確には、トップページは開くのですが、
>そこから各リンク先に行こうとすると、かなりの確率で落ちます。
>（たまに落ちないページもある）
>リンク先に行かず、トップページを開いている状態で「お気に入り」から別ページに行こうとしても落ちます。
>MacOS9.2.2　IE5.1.7です。
>落ちた時に表示されるエラーはタイプ2かタイプ3です。

>こんなことが起きるようになったのは今日からです。
>どうしてこんなことになってしまうのでしょう。
>こちらの不具合でしょうか？それとも「探偵ファイル」のバグ？
>他にも同じような症状の方はいらっしゃいますか？？

ソースも一応見て見たのですが、
どれが該当するかさっぱりわかりませんです。

宜しくお教えください。
もし、スレ違いであれば申し訳ないです…

>>604
MacOSX10.3.2、IE:mac5.2.3です。たしかに落ちますね。
わかることは、フレームは使わない。

落ちたり落ちなかったりﾏﾁﾏﾁでした。

OSX10.1.5 , IE5.2.3

>>604

idは文書中一度しか使えないとの事ですが、
それは一ページ内にって事でしょうか？
それと全文書の中に一度という事でしょうか？

スレ違い。そりゃHTMLの話だろうに

windows2000で、IE6で見れるページを作ってます。

背景がオレンジのボックスの中に文字を二つおいて、
一つは左揃、一つは右揃で置きたいと思っています。


イメージ：
_______________________________________________
|　ほげほげ　　　　　　　　　　　ぐるぐる|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

どうしても、「ぐるぐる」が右端に表示されなくて困っています。
ボックスの中で左端に表示させる方法を教えてください。


参考までに、いま書いてるCSSです。

<div class="bar">
<span class="thread_date">ほげほげ</span>
<a href="test1.htm">ぐるぐる</a>
</div>


宜しくお願いします。

訂正です。

×　どうしても「ぐるぐる」が右端に表示されなくて〜
○　どうしても「ぐるぐる」が左端に表示されなくて〜

あれ、すみません。
訂正が間違ってました・・・汗


×　ボックスの左端に表示される方法
×　ボックスの右端に表示される方法


ゴミ書いてしまって、ごめんなさい。

{text-align:right;}

>>612
text-align:rightだと、
同じボックス内の文字を分けることができない気がするんですが、
やり方があるのでしょうか？

どうやっても、　「ほげほげぐるぐる」という文字がどちらも右揃えになってしまいます。

自己解決しました。


ほげほげに、

.left{
float:left;
}

ぐるぐるに、
.right{
text-align:right ;
}

をあてたら、イメージどおりになりました。

>>614
floatさせる要素（.left）にはwidthが必須。>>7を見よ。

tdに対して背景色などを指定していたのですが
同じページに別のtdを持ってきたら案の定、同じ処理になりました。

2つ目のテーブルのtdには、その処理を適用させたくないのですが
何か方法ありますか？

>>616
スタイルを適用させたいtdにだけclass乃至idを振り、それをセレクタにする。
基礎中の基礎だから、>>4の解説サイトで勉強しなさい。

>>616
ちょっとそういう方法は思いつかない。
ただ、自分が同じ状況になったら子要素に別の値を指定する方法をとる。

td{background-color:white;}
td td {background-color:transparent;}
みたいな要領で。

スマソ
質問の意味を勘違いして、「テーブルの中にテーブルがある場合」と解釈してしまった。
というわけで漏れの発言は無視してくれ。

>>617
td { background:#ffffff; }
#aaa { background:#000000; }

<td id="aaa">

例えばこんな感じでOKですか？

>>620
自分で試せば結果は見えるでしょ？
但し、id名は同じHTML文書中では一回しか使用できないから注意。
初心者でよくわからないのならclass名を使ってる方が無難。

>>620
いちいち全部のtdにidなりclassを振るのは面倒臭くないか？
こんなやり方も、ある。
td { background:#fff;}
.class1 td { background:#000;}
<table class="class1"><tr>
<td>１</td><td>２</td><td>３</td>
</tr></table>
<table><tr><td>４</td><td>５</td></tr></table>
１・２・３の背景だけが黒になり、４・５は白。

>>621
これだと出来なかったので、確認の意味で書きました。
idの同名重複が出来ないということも確認したのですが成功しません。

結果は何にも反映されません。

>>622
なるほど！こういうやり方もあるわけですね。
無事解決しました。

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

>>623
>これだと出来なかったので

出来ないはずが、ない。それは他の所で何か間違ってたんだよ。

本当は兄弟セレクタとかが使えればもっとスマートに解決できそうなんだけどね。

>>622
>スタイルを適用させたいtdにだけclass乃至idを
一つのテーブルまるまるいろ変えてどうすんの？

もまいのやり方なら同じテーブルにして、行にクラス与える、とかの方が適切じゃねえ？
＃てかなんで別のテーブルにしてんの？

＞＃てかなんで別のテーブルにしてんの？
>>616が「2つ目のテーブル」と書いてる。

>>615
ありがとうございました。
floatのあたりを勉強しているのですが、
widthで%は使っても大丈夫だったりしますか？

サイズを決めろとかいてあっても、単位の指定までは書いてないので、
ちょっと心配になりました。

＞widthで%は使っても大丈夫だったりしますか？

当り前。むしろ大丈夫でないと思った理由の方が不可解。

>>609
<div class="bar">
<span class="thread_date">ほげほげ</span>
<a href="test1.htm">ぐるぐる</a>
<br class="clear"><!--Mozilla・Opera対策-->
</div>
bar {
background:orange;
width:100%;/*WinIEバグ対策*/
}
.thread_date {float:left;width:5em;}
.bar a {text-aligh:right;}
.clear {clear:both}

わからなかったら>>7のリンク先を熟読。

>>605、606
有難うございます。
フレームがアウトですか…

文字の下線の色だけを変えたいのですがどうすればいいでしょうか？

>>633
デコレーションをなくして、ボーダーつける
ちっと脳みそ使おうとは思わないのか？

>>634
ありがとです。すまそ(;´Д`;;;

{ border-bottom:1px solid #rgb;} とか太さ、種類は適当に

>>636
そんな書き方したら「下線は黒以外選べないんですか？」とか言われる罠。

段組をマクロメディアのページみたいに
http://www.macromedia.com/jp/
中央に表示させるにはどうすればよいのでしょうか？
Q＆Aのも一通り試したのですが、うまく出来ません・・・・

>>638
上手くいかないのは、どこかが間違っているから。
よって、ソースを晒せ。
何をどうやったら上手くできなかったのか、書け。
話はそれからだ。

>>639
すみません、晒すためにソース整えてたら出来ました・・・
まだまだ修行が足りないようでつ・・・・

質問です。
selectのボーダーを変える方法は無いでしょうか？
フォームの他のオブジェクトにCSSを当ててもselectだけ当たらないので統一感が・・・。
やっぱりselectを使わない様にするしか手は無いんでしょうか？

>>641
バグリストぐらい目を通せよ。
http://members.at.infoseek.co.jp/cssbug/detail/winie/b112.html

>>642
いや、バグ自体は知っているんですが、
なんとか代替手段はないものか、と思いまして。。。

>>643
仕様なのだから仕方がない。

>selectを使わない様にするしか手は無いんでしょうか？
体裁表現のために、選択メニューを利用しないというのは本末転倒。
見栄えの美しさも大事だが、まずはユーザーの使い勝手を考えること。
制作者の自己満足によって、ユーザビリティを低下させてはならない。

あと余談だが、フォームを JavaScript と組み合わせている場合には、
スクリプトが無効でもユーザーが残念な思いをしないように工夫すること。

>>644
やっぱり諦めるしかないですか。。。残念。

＞体裁表現のために、選択メニューを利用しないというのは本末転倒。
これは全く同感です。
ので、なんとか打つ手は無いかな、と思って質問しました。

selectだけCSSが当たってない状態はどうにも浮くので、
結局フォームのパーツは全てCSS当てない事にしました。
レスありがとうございました。

tbodyにoverflowで、theadが動かない表を作ろうとしたんですが、うまくいきません。
これってできないんですか？

# 元々tbody、thead、tfootってそういう風に出来るために分離されてると仕様書に書いてたような気が。

>>646
Netscape6以降/Mozillaとかでは可能。
IE のバグ対策のため
tr { height: auto; }
を指定しておく必要がある。

>>647
サンクスコ。
高さの問題がめんどうくさいですね。

http://culater.net/software/PithHelmet/PithHelmet.php

↑このページのフッターの様に、前面に表示させつつ常に位置を固定させるのは、どの様なテクニックを使っているのですか？
フレームじゃないところがカッコイイと思って、ぜひ真似してみたいです。
色々と調べてみたんですが、どうも判りませんでした。
すみませんが、どなたか教えて下さい。
＜（。。）＞

>>649
色々と調べてみて、どうも判らないなら無理だと思う。

http://culater.net/software/PithHelmet/PithHelmet.php

このページのフッターの様に、位置を固定しつつ前面に配置する方法が知りたいです。
あえてフレームじゃないってところがカッコイイなと思いました。
ぜひ真似をしてみたいと思って、色々調べたんですが、どうも判りません。
どなたか、ご教示下さいませ。
よろしくお願いいたします。
＜（。。）＞

>>651
しつこいな。擬似フレームでぐぐってやってみて、わかんなかったらおいで。

二重投稿すみません。
649=651

>>652
擬似フレームで調べたんですが、>>651であげたページの様にスクロールバーがウインドウ単位ではなく
フレーム単位なのです。
ウインドウ単位にスクロールバーを表示する方法は判りませんでした。

>>654
ソース見て、CSSファイルを落として死ぬまで読めばわかるんじゃねえの？
「こうやったけど無理だった」ってのじゃないし、他力本願過ぎるな。

>>655
すみません、CSSファイルを落とす事は当然考えてトライしてみたんですけど、落とせないんです。

>>651
ページ見たけどお前の言うような動作はしないぞ？

>>656
落とせないわけがない。
落とせてなかったらCSSでのレンダリングがなされるわけないんだからな。
能書きたれんとやるだけのことやれよ。「できませんわかりません」じゃなくてよ。

>>654
固定してるだけやん。

position:fixed; ……？

>>660
ソース見てないけど、多分そうだね。

>>660
>#footer {
>font-size : smaller;
>color : #224a78;
>background-color : inherit;
>background-image : inherit;
>position : fixed;
>bottom : 0;
>width : 100%;
>text-align : center;
>border-top : 1px solid #224a78;
>padding-top : 0.5em;
>padding-bottom : 0.5em;
>}

こちらではネスケ６＆IE５を使って見ているんですが、どちらのブラウザで見ても、651で書いた様な動作をします。
ソースの８行目の
<link rel="stylesheet" type="text/css" title="default" href="/web.css" />
を元に、CSSファイルのダウンロードを試みたんですが、404になってしまい落とせませんでした。

WinIEだと意味無し。まあその代用として疑似フレームが編み出されたわけだが。

>>663
ソース書いたんやから見ろバカ

>>656
ttp://jigsaw.w3.org/css-validator/validator?uri=http://culater.net/software/PithHelmet/PithHelmet.php&warning=2&profile=css2&usermedium=all
こういう落とし方もある。

>>660
>>662
出来ました！
どうもありがとうございました！！
（＾o＾）

>>663
ネスケ６＆IE５……
NS7とIE6にヴァージョン・アップしろよ。あ、Macなのか？　それならちゃんとMacIEって書け。

Macの人って少数派の自覚が無いのかな。MacIEとWinIEが全然別物と知らないのか。

MacとWinでは同じIEでも全く別物と考えた方がいいからな。
特にCSSの実装に関しては。

マカーは馬鹿ばっかりだから仕方ないよ。

長いものには巻かれろ的ドザも馬鹿だけどな

Windowsを叩く奴は人気がある事に嫉妬してる。
コンピュータウイルスの作者も、ゲイツに嫉妬してる

linuxに慣れると窓には戻りたくなくなるよ。

降臨〜
くだらねー
>>652 >>655 >>658 >>665 >>671
同一人物かもしれないけどお前らもう答えなくて良いよ、ウザイだけだから。
頭悪い奴が返答すると無駄にレスが伸びるだけ。

お前ら別のスレたててそこでやれよ
/* そう簡単に教えませんよ！CSS･スタイルシート質問スレッド【27】 */

いまどきCSS何か使ってるなんてどうかしてるぜ

粘着が約1名いらっしゃる模様です

>>676
(ﾟｍﾟ*)ﾌﾟｯ

自動的にCSS書いてくれるホームページ作成ソフトってありますか？

メモ帳とおまえのやる気

>>679
もしあっても，ビルダーのどこでも配置みたいなトンデモCSSになりそうな気が・・・・

>>652
なんか俺はあんたに育てられたい！！！

>675
　>>671以外は俺だ。
だが、>>666も>>662も>>659も俺だ。

>682
　そんな甲斐性はない。

多分IEのバグだと思うし辞典にも未登録だと思う（背景で一覧検索しても
なかった）が「仕様規定外」かもしれないので辞典スレでなくて先にこちらへ

・確認したのはIE6標準モード
インライン要素へ背景画像を指定して repeat-x 表示させた時，
そのインライン要素が2行にまたがる場合に2行目（折り返した後の部分）の
背景が表示されない
Moz1.6とOpera7.23では全部表示される

例：
p { width: 7em; } /* 単に折り返させるためだけに指定 */
em { background: url(wave.png) repeat-x; } /* wave.png は10px*3pxの画像 */

<p><em>あいうえおかきくけこ</em><em>あいうえおかきくけこ</em></p>

例えばブラウザのレンダリングが
｜あいうえおかき
｜くけこ あいう
｜えおかきくけこ
（縦棒は見易さのため）となる場合，IEでは2行目の「くけこ」と3行目の
「えおかきくけこ」の背景が表示されない

また，backgroundの指定にbottomを追加する（本来インライン要素では
background-positionは指定できないが，やってみる）と
IE6では今度は「折り返す前の部分」の背景が表示されなくなる
MozとOperaでは表示される（なお，いずれのブラウザでもbottomに表示してくれる）

やりたかったのは強調語句に（画像で）下波線を引きたかったんだけど
インラインのbg-positionは本来指定できないならバグだろうとなかろうとダメだな
（ブラウザがよきに計らってくれてるから指定しておくという考えもアリかも）

>>684
じゃあバグ辞典スレで報告したらええのに

IE なんか使ってるからそうなるんだよ（w

iframeタグを使った際、外枠の角を丸くしたり、borderにデザインを
追加してかっこよくしたいんですが、どのように書けばよいでしょうか？

687の名前は間違いです

>>687
CSS2に「角を丸く」はなかったような。

＞追加してかっこよくしたいんですが
かっこいいか？センスを疑うぜ。

参考サイトなどありました教えてください。
お願いします。

>>690
参考もクソも仕様書嫁よ。
それとも仕様書読んだら寿命が縮む呪いでもかけられてるのか？

かっこいいかどうかはさて置き、-moz拡張かな。IE無理だけど。
画像でそれっぽくみせるのがいちばん無難かと思われ。

>>687
言ってるものとは違うが、こういうごまかし方もある。

ttp://www.en-en.net/pc.html

背景色と画像の色を合わせて透過してる「ふり」してる。
これで角を削ってるわけだが、いかんせん背景画像なので、一箇所しか適応できないけどな。

背景に画像を貼るのを試してみたけど、
ぴったりの画像がなくていまいちでした。
幅=660　高さ=450~600　色は深緑の四角い
フレーム画像ないでしょうか？

>>694
自分で作れよ。

>>694
正直、できないデザインをイメージして作りたがるよりも、
できることを駆使して作ったデザインの方がｶｺｲｲと思うよ。

「自分にできるかどうか分からないけどイメージしてみる」ってのは
大事だが、ここは自分でできないデザイン（の構成物）を人に探して
もらうスレではない。

同じIEでも、レイアウトが崩れて見えてしまう場合があるそうですが、
みなさんはどのように対処していますか？
また、使うと危険なプロパティなどあるのでしょうか？

↑肝心な事を核の忘れた・・・

MacとWinの話です。

overflow とか。

>>698
バグ辞典スレのまとめサイト見れ

>>698は>>1すら読まない、ト。
・ブラウザによって対応していないプロパティーやバグがありますので、
　【解説など】（>>4）の対応表や「CSSバグリスト」に目を通しておきませう。

CSSを勉強中の身でつまずいてしまい
どなたか教えて頂けないでしょうか？

セレクタの使い方なのですが、

---------------------------------------
DIV.menu {
background-color: #738BAB;
text-align: left;
margin: 0px;
}
DIV.menu A:LINK{
font-size: 80%;
}
---------------------------------------

menuの中のリンクのみＣＳＳを適用させる場合
これではだめなんでしょうか？
初歩的な事だと思うのですが、調べて理由がわからないので
どなたかご指摘お願い致します。

>>702
漠然としていて何がやりたいのか分からないよ。
menu内に属するa要素のfont-sizeを80%にしたいだけ？
君の狙ってる効果は何？
一度自分で試してごらん、それで80%にすることはできるけどそれだけだよ。

>>703
DIV.menu A:LINK,
DIV.menu A:VISITED { font-size: 80% }
という落ちではないだろうな。
あとブラウザの設定の所為だったり。

DIV.menu A { font-size: 80%;}
だったりして。
>>703がリンク先を訪問済みだったらa:linkだけじゃ反映しないし｡

705と思いきり内容かぶってますた…

ずみません〜VISITED でした・・・・問題なくできました(ToT
おさわがせしました

＜p＞文章＜/p＞とした時、文頭にのみ一文字分の空白を作りたいのですが、
paddingで設定すると、文章が折り返された場合

｜　あいうえお
｜　かきくけこ
｜　さしすせそ
｜　たちつてと

のように全ての文頭に空白ができてしまいます。

｜　あいうえお
｜かきくけこさ
｜しすせそたち
｜つてと

という風に表示する為にはどのようにCSSを書けばいいでしょうか？
（ズレてたらｽﾏｿ…）

>>709

P {text-indent:1em;}
数値は1.5emぐらいでもいいかもしれんが，そこは好みで調節する事

>>710

即レスありがとうございます！思った通りに表示されました！

>>708
お前誰?

>>712
そういうﾚｽ付けると必ず
「俺だよ俺、ｵﾚｵﾚ！」系のﾚｽが付いて
無駄に流れるから控えてくれ。

>>711
漏れもそれやったことあるんだけど、セリフから始まる段落がみょうちきりんになっちゃうのが難点。
p+qとかIEがタイオウしてくれりゃいいんだけど。

クラスセレクタでは駄目なの？
というか「p+q」って隣接セレクタの例？

>>715
あ、隣接だとp+qじゃ無理だな。使ってないから忘れてるわ。

セリフにclassつければいいんでない？

>>717
それもかなり微妙だよなぁ。

<p>文章文章文章<br>
「会話会話会話」<br>
「会話会話会話」</p>
とか。

>>719
＞セリフから始まる段落が
セリフからはじめるな、は根本的な解決じゃないなぁ。

“セリフ”って“台詞”のことだったのかぁ。
serif（髭つき）のことかと思ったよ【ピュア】

>>721
マジすか。
それだと話が繋がらんと思うんだが。

Sans Serif の事だと思った。

>>709
日本語文章の段落頭は全角スペースでもいいような。
テキスト原稿からそうだしCSS切られててもそれなり。

>>724
しかし、一マス空けるのは見栄えのためだよな。
「じゃあCSSで」となるわけだが、見栄え（段落の始めとわかりやすくする）なら、
First-letterでもいいんじゃないのか？と思うんだが、“「”がデカくなったり色が違ったりする問題（セリフからはじまる段落）は解決しないんだよなぁ。

transitionalでstrictよりのHTML書くのが好きな俺は、空白でも無問題なんだが…
Operaかなんかで、全角が半角で表示されるのが気持ち悪くて、CSSに変えた記憶が。

>>726
あ、そう解釈したか。
そうじゃなくてね、
作文用紙での１マス空けは、「段落だとわかるように」というものでしかないから、
って意味。HTMLでそれをやるなら別の方法（例えば色替え）でも問題ないわけで。

漏れも（strictDTDにとっての）1マス空け、はグレーゾーンだと思うし。

CSSでリンク背景を白、リンク上にマウスが乗った時は桃色と指定しました。
ﾃｰﾌﾞﾙﾚｲｱｳﾄで、透過gifを使った枠を作り
マウスが乗った時は枠が桃色になるようにしたいのですが

<a href="http://〜">
<table>〜</table >
</a>

としたら、WinIEでは思った通りに表示されたのですが
ﾈｽｹ7.1では何の変化もありませんでした。
そもそも、<a>で<table>を挟む事が、何か間違いな気もしてきました。
どの様に書けばいいのかご教授願います。

>>728
>そもそも、<a>で<table>を挟む事が、何か間違いな気もしてきました。

おっしゃる通り、間違い。ブロックレベル要素は含められない。
というかa要素を何だと思っているのか。
>>1
>土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
>正当(valid)なHTMLを心がけて下さい。
というかCSSスレでテーブルレイアウト云々以下略。

IEがa要素以外の:hoverに対応していない以上は、CSS以外の手段をとってはいかがでしょうか？

>>728
CSS よりも先ず HTML をしっかりと勉強されることを強くお奨めします。

>そもそも、<a>で<table>を挟む事が、何か間違いな気もしてきました。

A要素などはインライン要素と呼ばれ，ブロックレベル要素の行内に分散して挿入されるべきものです。A要素の中身にブロックであるテーブルが包含するということはあり得ません。

枠を付けたいのならば，CSS のボーダー関連プロパティによって指定可能です。
a:link, a:visited { padding: 1px; }
a:hover { border: solid 1px #ffc0cb; padding: 0; }

>>729-730
ﾚｽありがとうございます。
一端このﾚｲｱｳﾄは諦めて
ｽｷﾙを身につけた後、再度別の方法で試す事にします。

ありがとうございました。

すんません、英語圏向けのサイト作るんですけど英語版のWindowsXPの標準搭載fontは何かってどこで調べられますでしょう？

>728さん、Table内のtdつまりセル一つの中身全体を<a>対象にしたいなら、
td#idName a{display:block; width:100%; height:100%; }とかでどうですか？
display:block;で本来文字部分だけが<a>の対象であるものをセル内全体が<a>対象になります。
こうしておいて後は
td#idName a:link { }
td#idName a:hover { }
で変更内容を記述すればどうでしょうか。

>>732　フォントのことはフォントのスレッドで訊きませう。
>>733　そのやり方、既出。しかも、tableでやる必要ないと代案まで提出済み。>>575を見よ。

width, height をpx指定したdiv内に一行のtextが入る。
textをdiv内左右センターにするのはtext-alignでOKですが
天地センターは皆さんどうやってますか？vertical-alignはtd内では効きますがdiv内では効かない。
どうすればいいでしょう？

>>735　ＦＡＱをなぜ見ない？　A6（>>7）だ。

>>736さん、ありがとうございます。読みました。
結局できないのか？？？？？
またTableかよ。。。
（IE独自拡張は無視させていただきますです。）

>>737
できますって。最後まで読むべし。

positionとかpadding-topで上から50%乃至親要素の半分の高さを付与すればいいわけでしょ。

>>739さん、そうなんですけどなんかもう少しシステマチックな指定法がないものかと。
>>738さん、http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htmの23番が回答になるんでしょうか？
Mac safari/IE/NN7でもWinXP IEでもtext-align:center; が効かないですねえ。。。。

いわゆる<table cellspacing="0" cellpadding="0">のような、
まったく隙間の無いテーブルを組みたいのですが、

table { border-collapse:collapse; border-style:hidden; table-layout:fixed; }
table, tr, td { border:1px solid #000; }

<table>
<tr>
<td><a>1-1</a></td>
<td><a>1-2</a></td>
</tr>
<tr>
<td><a>2-1</a></td>
<td><a>2-2</a></td>
</tr>
</table>

としたところ、IE6,MZなどでは期待通り2×2のマス目が得られたものの、
Safariでどうしてもcellspacingが発生してしまいます。
どうにか解決策をお願いします。

↑aタグは無視してください。

>>740
strictモードなら効かなくて当然だが。ＦＡＱ（>>5）は読んだんだよな？

>>741
>border-style:hidden;
ナニコレ？　正しいＣＳＳかどうか、チェックしよう。
　W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

>>741
border-style:hidden;はWinIEも対応してないので、noneの方が無難では。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/box.html#border-style
Safariも未対応なのかな。

td {margin:0;}――は無意味か。

>>741さん、OSX10.3でsafari1.2(v125)最新版ですけど間あかずきれいに並びますよ。
逆にIEで間開いちゃいます。border-collapse:collapse; がだめみたいです。
NN7はsafariと同じですが全体位置が少し下に下がる。
winXP IEではtd width指定がないためかウインドウ全体に(width100%がデフォルト？)広がりますね。

みなさんありがとうございます。
どうもSafariはborder-collapse:collapse;が効かないようです。
border-spacing:0px;も入れることで解決しました。

border-spacing:0px;はborder-collapse:separate; が前提ですよね。
border-collapse:separate; border-spacing:0px;とすると（罫線2本分？）太くになりませんか？
border-collapse:collapse; border-spacing:0px;とするとborder-spacing:0px;は無視されるはずなのでは。。。
もう一度書きますけどsafari1.2ではborder-collapse:collapse; 効いてます。

>744
念のために言っておくが 正しいよ？

>>746
Mac 版の IE は border-collapse はだめぽ

<p>
<span style="background-color:red;float:right;height:100%">txt</span>
t<br>
x<br>
t
</p>

こんな感じのときに、<span>のheightが100%にならなくて鬱になりま。
どうしたらいいんでつかね。

>>751
何がしたいのかよくわかりませんが。縦方向の100%はブロック要素でも微妙。
px指定なら問題ないけど。

>751
height: 100%;
の100%が何に対しての100%か考えてみれ。

各文章の傍らに、画像やら個別メニューやらつけようと考えています。
height:100%;の100%は<p>に対してだと思うんですけど、違いますかね？
どうしてもautoと同じように表示されてしまうんですよ。

>>754
height: n%;の正しい仕様
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

before擬似要素が有効なブラウザでのみリストマーカーを
消したいのですが可能でしょうか?

>>755
なるほど、<p>のheightを固定しないと無理ってことですね。
参考になりまし

あ、<p>を100%にすればいいのか？

100%じゃ無理でした。
p{
height:1px;
}
とかで無理矢理やっても一応できたけれど、なぜかmargin-bottomに隙間が……

>>758
その 100% も>755の正しい仕様に従って決定されるぞ。

うーん<p>内の文字によってmargin-bottomが変化してるな。
文章の最後がうまい具合に終わると、綺麗にmarginが消えたりするし。うーん。
左の文章のwidthを固定すればなんとかなりそう

<p style="width:300:height:1px;">
<span style="background-color:red;float:right;height:100%:width:100;">txt</span>
<span style="width:200;">txt</span>
</p>

これで意図どおり表示できるけど、スマートじゃないな。ううむ。

>762
頼むから"width:300"みたいな信じられん指定はやめてくれ…
っつか本当に>755読んだのか？(´Д`;)
まず下手でも良いから絵描いてどんなのがやりたいか説明ｷﾎﾞﾘ

なんだかんだいって親切だな。
http://sil-d.s33.xrea.com/cgi-bin/uploader/src/up0013.bmp
こんな感じ。
左のテキストをspanで囲んでwidth固定すると意図したとおりにいくが、
固定しないと、右側のspanのmargin-bottomが狂う。

spanじゃなく、divで記述するようにしてfloatプロパティで回り込ませりゃいいんじゃないの。

spanじゃなきゃだめ？絵だけ見るとdiv内にpふたつって感じだけど。
<div style="border:solid 1px black;width:50%;">
<p style="margin:0; float:right; width:100px;background-color:lime;">froat:right内のコンテンツ</p>
<p style="margin:0; background-color:gold;">左に配されるコンテンツ</p><br style="clear:both;">
</div>

<div style="float:right; width:***;">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>

でいいじゃん。

>>765
divだとデザイン崩れました。
>>765
絵のようにborder-sytleが0じゃないから、それだとまずい。
>>766
マークアップについてはよくわからんのだけど、右側のメニューは本文というより、アップロードした画像とか、comment、trackbackとかへのリンクにしたいから、<p>はどうかなぁ、と。

土台のHTMLが間違ってるとCSS指定も意図通りに効きません。正当(valid)なHTMLを心がけて下さい。

つーか、無理やりなこじつけのHTMLソースだと余計わけがわからなくなる。
CSS適用のためにHTMLソースを汚くするのは本末転倒。

ふーむ。残念

divの何処でも配置のみでﾚｲｱｳﾄしたHPは
見る分には笑えるよな。

どうも何をしたいのかがわからん・・・。

div.box{
border : solid 1px black;
width : 50%;
}

div.text{
margin : 0px;
background-color : gold;
}

ul.link{
margin : 0px;
float : right;
width : 100px;
background-color : lime;
}

<div class="box">
<ul class="link">
<li>リンクA</li>
<li>リンクB</li>
<li>リンクC</li>
</ul>
<div class="text">
<p>本文</p>
</div>
</div>

とか？

>>751
trackbackとかいう言葉が見えるけどウェブログツール？
だったら、気に入るテンプレ（CSS)でも探して、それで満足しといたらどうか。
htmlが分かってなかったら、CSSを自分で作るとか無理。　> マークアップについてはよくわからんのだけど、

<p

style="width:300px;height:1px;background:#ee

eeee">
<span style="background-

color:red;float:right;height:100%;width:100p

x;margin:5 5 5 5;">aaa<br>aaaa<br></span>
<span

style="width:100px;">aaaa<br>aaaa<br>aaaa<br

>aaaaa</span>
</p>

こんなかんじ
みてみてください

右の行数の方が明らかに多いのならこんなのは？spanで赤の部分に相当するのはdiv1の背景色。p#leftの背景色で左側は別色にする。
<div id="div1" style="border:solid 1px black;width:50%;height:auto; margin-left:auto;margin-right:auto;background-color:lime;">
<p id="right" style="margin:0; padding:0;float:right; width:30%;background-color:transparent;">froat:right内のコンテンツ</p>
<p id ="left" style="margin:0; background-color:gold;width:65%">左に配されるコンテンツ一行目です。<br>
二行めです。<br>三行目です。<br>四行目です。</p></div>
その他、よくあるのはdiv1の右側だけ背景用イメージをrepeat-yすることで右側の要素の背景色に見せる。

HTMLはかけるけど、マークアップの本来的な意味とかね。
<h1>はただでかくするだけのものじゃないし。
CSSはチェンジャーつかって遊んでいるけれど、出来るだけvalidに書きたいという

>>775
右のやつ、>>774のようにmarginとりたから少し違うかもしれない。
うーん。>>774で出来ているのだけれど、
<p>
<span style=float;right>right</span>
left
</p>
のようにスマートにはならないのかな、と。

<div style="width:300px; background:#eeeeee; height:500px; padding:5px;">

<div style="background-color:red; float:right; height:100%; width:100px;">
<ul style="margin-left:0px; padding-left:20px;">
<li>リンクA</li>
<li>リンクB</li>
<li>リンクC</li>
</ul>
</div>

<p style="width:100px;">本文<br>本文<br>本文<br>本文<br>本文</div>

</div>


とりあえず、デザインを崩さぬように配慮してみた。

Windows IEでしか見てないのではないかな？
サイズ指定にはかならず単位を入れる。
backgroundじゃなくてbackground-color;
height:1pxの意味不明　　なんですけど。
いずれにしてももう少し入る内容がわからないとなあ。

＞backgroundじゃなくてbackground-color;
background : #xxxxxx;
という指定は仕様に沿っているが。

'background'
値： <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

＞height:1pxの意味不明　　なんですけど。
親要素の高さを指定しておかないと、子要素の高さが%指定では算出されない。
だから彼は1pxとしているんだろうが、間違いだな。

>>778
あ、出来てますね。ありがとうございます。
>>779
backgroundは正規だと思いましたが……。
http://hp.vector.co.jp/authors/VA013937/cssref/backgrou.html
単位はいれるべきですね。
height:1px;というのは、autoの場合、>>775にあるようにうまく出来ないのでいれました。

>>775→>>755

>>780
macだと1pxの赤いラインが見えますです。

うわ。それはクマったな

>>783
height:1pxと高さ1pxのBoxを生成しているわけだから、当たり前だろうね。
WinIEだと内容にあわせてBoxのサイズが変化するようだけど、
Boxをはみ出して表示するようにするUAも数あるな。

autoにしても機能しないし、うーむ。そこらへんは仕方ないのか。
background-imageで強引に右の文章の背景をもってこれば、出来ないこともないですけどねぇ

その問題は
-------------------------------------------------------------------
html,body{ height: 100%; }

<div style="width:300px; background:#eeeeee; height:100%; padding:5px;">
<div style="background-color:red; float:right; height:100%; width:100px;">
<ul style="margin-left:0px; padding-left:20px;">
<li>リンクA</li>
<li>リンクB</li>
<li>リンクC</li>
</ul>
</div>
<p style="width:100px;">本文<br>本文<br>本文<br>本文<br>本文</p></div>
</div>
-------------------------------------------------------------------
で問題解決だろ。

>>778さん、
これのパターンで、内容の量が変動し、その量に追随するために親divのheight:500pxがheight:autoにせざるをえない場合に
右の赤い背景色を下まで延ばすのってどうすればいいでしょう？

>>788
このままだと、無理なんじゃないか？ 正直。
うまくやる人がでてくればいいがな・・・。

>>787
</div>多くない？

>>788
画像使ってください。
最初のdivに背景画像いれてrepeat-y

javascriptで親divの描画された高さを取得して右要素の高さに反映させるって原理的に無理？

自己レスですがjavascriptスレでヒント教えてもらいました。こんな感じでどうでしょう。
div1の実際に描画される高さを取得し、右の赤いdivの高さに代入します。
<div id="div1" style="border-style:dotted none;border-width:2px;border-color: red; width:300px;height:auto;float:left;padding:10px;">
<p style="margin:0;">どんな長さの文章がくるかあらかじめわからない<br>
どんな長さの文章がくるかあらかじめわからない<br>
どんな長さの文章がくるかあらかじめわからない<br>
どんな長さの文章がくるかあらかじめわからない<br>
どんな長さの文章がくるかあらかじめわからない<br></p></div>
<script language="javascript">
var div_Height=document.getElementById("div1").offsetHeight;
document.write('<div style="margin-left:320px;width:120px;height:'+div_Height+'px; background-color:red;">');
</script>
<ul style="padding-top:10px"><li>リンク1</li><li>リンク2</li><li>リンク3</li><li>リンク4</li></ul></div>
<br style="clear:both;">

おつ
blosxomシコシコいじってます

なんか正しいプロパティなのに調べもせずに不正だとか言う奴増えたな

あと、「バグ」で済ます奴な

w3c勧告どおりに動くブラウザって何ですか？モジラ？

>>797
Amaya

画像のマージンを取り払うのに
img{margin:0px;}
ではダメなんでしょうか。

<P>のタグを普通に文の最後につけると、たて行の空白が30ptぐらいでてきます。
これをスタイルシートを使って空白の行を少し減らしたいのです。
<P style fontsize-10pt>みたいにやったら、左のは違いまして。

(´･ω･`)

>>800
htmlを基礎から勉強しな。話はそれからだ。

>801
beforeが有効なブラウザでリストマーカーを消す
→IEでのみリストマーカーを表示する、って事でよろしい？
隣接セレクタや属性セレクタを使って
IEでは無視される宣言ブロックを作って中にlist-style:none;を入れるとか。

んで、
<p>一<strong>行</strong>目<br>
二行目<br>
三行目…
</p>

p:first-line { background: #000; color: #fff; line-height: 1.5; }
p strong { background: #fff; color: #000; }

とすると、
IE6ではstrongの背景色がfirst-lineの高さより低い（地の高さになる）、
NN7.1ではstrongの背景色は適用されるのに文字色が適用されず読めない。

いずれもWinXP、標準モード。
NN7.1の方は下にline-heightを何でも良いから指定するとしっかり文字色も適用された。
これって正しい動作？　特にNNの方は明らかにバグっぽいんだけど。

文章1<P>
空白
文章2として、上の空白を短くしたいのです。
<BR>でやると、全選択したときに色が残るのが嫌で。

上の方を読んでいると<P style="height:10px;">で可能そうなんですが、できません。

>>804
<p>文章1</p>
<p>文章2</p>

な。

>>805
やってみましたが、空白のタテサイズは変わりません。

>>799
隙間をなくしたいのなら、paddingも0にしてみるか、
周りの要素のmargin、paddingを0にしてみることだね。
っていうか、imgはインライン要素だからmarginやpaddingを
指定しても意図どおり表示されるかはちょっとわからんけど。

<p style="margin-bottom:10px;">文章1</p>
<p style="margin-top:0;">文章2</p>
で10px開くんじゃないの？

>>806
>>805はHTMLが間違ってると言ってるだけ

>>808
ありがとうございます、できました。
>>809
そうだったとは、感謝

borderで引いた線、たとえば
tr　{border-bottom:thin solid black;}
と指定してtableを作ると、
ブラウザで見ると同じ太さなのに
印刷すると太さがまちまちになってしまうのは、
ブラウザの問題でCSSの書き方では解決できないんでしょうか？

ブラウザの問題っつーか、そもそもthinは

'border-style'
値: none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値: none
適用対象: すべての要素
継承: no
パーセント値: N/A

thinなんてプロパティ値は仕様にねえっつーの。
いい加減どいつもこいつも仕様書読め。

・CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・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

ってborder-widthか。
border-styleと勘違いしてたわ。