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

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

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

・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
26　http://pc2.2ch.net/test/read.cgi/hp/1072018825/l50
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1074845459/l50

【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・代替スタイルシートに萌え〜
　http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc2.2ch.net/test/read.cgi/hp/1038678267/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標準化Tips　（特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/webtips/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: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。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: 下記などを参照して下さい。
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/

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: 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

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

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

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

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

Q9.リンクした画像の線が消えません。
A9.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 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

【FAQ】
Q10.リンクを新しいウィンドウで開かせるにはどうしたら？
A10.ＣＳＳではできません。target属性かJavaScriptでやって下さい。
別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。

Q11．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A11．下記に書いてあります。テーブル・レイアウトは段組の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

ＦＡＱの追加と、順番を変更した。
次回からスレッド立てる人は、下記もよろしく。

■ ローカルルール等リンク先更新総合スレッド 9
http://qb3.2ch.net/test/read.cgi/operate/1071312042/l50

>>1-9
オツ

Z

456 名前：Name_Not_Found[sage] 投稿日：03/06/25 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

ネタはよそで。　特に、つまらんネタは。

質問どうぞ。

position:fixedによるフレーム風レイアウトを試みていますが、ページ内リンク<a href="#a">がうまくいきません。
上２段の黄色とオレンジ色部分がposition:fixedで固定されていますが、この下に隠れたままになります。回避策ありますでしょうか？
なお、当然ながらposition:fixedを使用していますのでmozilla系(macはsafariでもIEでもOKです)でご確認お願いいたします。よろしくお願いいたします。
ソースをつぎに書き込みます。

<style type="text/css">
body {margin:0; padding:0;background-color:gray;}
#Container_Top{position:fixed; top:0px;left:0px; width:700px; height: 250px;margin: 0px; background-color: gold;z-index:10;}
#Container_Navi{position:fixed;top:250px;left:0px; width:700px; height: 80px;margin: 0px; background-color: orange;z-index:11;}
#Container_List{position:absolute; top:330px;left:0px;width:700px; height: auto;margin: 0px; background-color:silver; z-index:1;}
ul#navi{margin:0;padding-top:60px;}
ul#navi li {display:inline; margin:1em;}
ul#list li {padding-bottom:40px;}
</style></head>
<body>
<div id="Container_Top"></div>
<div id="Container_Navi"> <ul id="navi">
<li><a href="#a">A</a></li> <li><a href="#b">B</a></li> <li><a href="#c">C</a></li> <li><a href="#d">D</a></li>
<li><a href="#e">E</a></li><li><a href="#f">F</a></li> <li><a href="#g">G</a></li> <li><a href="#h">H</a></li>
<li><a href="#i">I</a></li>
</ul></div>
<div id="Container_List"> <ul id="list">
<li id="a">albumNameA</li> <li id="b">albumNameB</li> <li id="c">albumNameC</li> <li id="d">albumNameD</li>
<li id="e">albumNameE</li><li id="f">albumNameF</li> <li id="g">albumNameG</li> <li id="h">albumNameH</li>
<li id="i">albumNameI</li></ul></div></body></html>

既出かもしれませんが、cssでボーダーの幅に1pxを指定して
tdにcssを割り当てた場合、印刷時に上手く印刷できませんよね？（半分になる）
これってやっぱり仕方ないのですか？ちなみにDWMXを使って作ってます。

>>15
ul#navi{margin:0;padding-top:60px;}
ul#navi li {display:inline; margin:1em;}
なのに#Container_Naviのheightは80pxだけ？

>>16　前スレッドを読むよろし。プリンターの問題かも。

>>17
これはリンクボタンをオレンジ色のNaviエリア内の下部に配するためにいれたpaddingで、あまり意味ないです。
結局どうもjavascriptでやらなければ無理なのかしら？
id="i"要素がウインドウ外にあるときに#iリンクボタンを押すと正常に機能しますが、#aとか#bボタンとか押しても隠れて見えない状態であっても既にウインドウ内にはあるのでってことなんでしょうかね。

absoluteを使うと他の要素を無視してしまいますよね
absoluteを使い尚、無視させない方法ってありますか？

>>19
Container_TopとContainer_Naviは、position:fixed;にした時点で
配置する際の計算からははずれている。
だから、アンカーでジャンプした場合のジャンプ先は、
Container_TopとContainer_Naviに関係なく画面の最上部になるんだと思。
ul#list li {padding-bottom:40px;} を、100px位にして試してみると分かるよ。
#aとか#bとかも、ちゃんと画面最上部に移動してる。

ジャンプ先を目的地より330px上にnameで設定すれば、見た目だけは意図どおりになるかも。

>>20
は？

スレ違いすいません。
ttp://www.cafedessin.jp/
ここはアクセス毎に背景画像が変わるみたいですけど、どうやってるんですか？
CSSファイル見たら複数のbody用のclassがあって、
あるときは<body class="body01">
あるときは<body class="body05">
ってなってました。

>>23
ttp://www.cafedessin.jp/index.php
htmlじゃなくてphp

というわけでスレ違い

>>21
確かに上部に天地サイズ固定のposition:fixedボックスがあるのでアンカーを対象エレメントの位置より330px上にするのが正解ですね。
ありがとうございます。さて、どうやってそれを実現するかですが、とりあえずid="Container_List"と同じものをvisivility:hiddenで330px上に配して
そのidをリンクとすることでおっしゃる通りうまくいきました。が、この方法ではあまりにアホなhtmlソースなので、、、やっぱjavascriptかしら？
エレメントの左上の位置を取得するプロパティが見当たらないのでoffsetHeight;で各ボックスの天地を取得して足していくしか思いつかないす。。

>>20
ﾜﾗﾀ

ttp://tohoho.wakusei.ne.jp/css/　みれ。

俺って優しいなあ

ブラウザによるCSS解釈の違いに関する質問です。
当方はWeb製作はあまりやらない素人ですが、あるページのCSSがブラウザによってヘンに表示されたので、原因や解決法を疑問に思いました。

当方はMac OS 9.2を使っており、該当ページはNetscape7.01において正しく表示されたようですが、Mac IE 5.1.6において、制作者の意図と異なる表示になるようです。

他人様のサイトなので晒すようなまねはいかんと思いますが
該当ページは
div.a
　h2　span.a　/h2
　div.b
　　div.c
　　　h3　span.b　/h3
　　　本文
　　/div.c
　/div.b
　div.d
　コメント
　/div.d
/div.a

というような構造です。
スタイルシートでdiv.aの定義にbackground-colorとbackground-imageが設定されています。（ほかにもたくさん細々）
で、見た目上、h2の部分を除いたdiv.bとdiv.dが一続きの囲みで囲まれるようにしてあり、背景の塗りと右の枠線に、div.aのbackground-colorとbackground-imageが適応されています。
ところがMac IEで見ると、h2の部分にもdiv.aの背景の塗りと右枠線が出ているのです。

これはMac IEの方が正しいような気もするんですが、どういうバグなのでしょうか？
素人なのでポイントを外しているかもしれません。

ページ全体を囲うクラスに背景色+height指定した時、その中の内容がheight値を越えた時
IEなどはheight値以上に勝手に伸びてくれるのですが、ネスケ7.1だけheight値固定になってしまい文字が背景色からはみ出た状態で表示されます。
HTMLは弄らずにCSSだけで回避する良い方法ってありますか？

height指定をやめる

>>27
何が言いたいか良く解らんがとりあえずDIV厨やめたら直るかもね

br要素にcssを割り当てるのはいいんでしょうか。
display:none;とか

>>31
いいよ。

OLリストで、番号の前に文字を置く方法はありますでしょうか？

<ol>
<li>××
<li>△△
<li>○○
</ol>

↓こうしたい

Q.1 ××
Q.2 △△
Q.3 ○○

以下の方法は、OperaではOKでしたが、IEでは無視されました…。

ol li { display: block; }
ol li:before {
display: marker;
content: "Q." counter(no) " ";
counter-increment: no;
}

ｶﾞｲｼｭﾂないしｽﾚ違いだったらごめんなさい。

>33
その方法が正しいはずだが、IEはdisplay:markerにもcounter関連にもcontentにも対応してない。

で、IEで質問の見た目を満たす方法は…
CSSだけじゃ無理じゃないかな、JavaScriptの力を借りないと。

>>27
CSSのソースを出してくれないとわからないな。
晒してもいいんぢゃない？　さもなくばコピー＆ペーストで該当箇所を引用する。

>>28
IEは間違ってます。
　Internet Explorer (Windows) CSSバグリスト
　ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)
　http://cssbug.at.infoseek.co.jp/detail/winie/b052.html

>>31
いいけど、注意。
　Internet Explorer (MacOS) CSSバグリスト
　ブロック要素化したbr要素をテーブル内で使用するとセル幅が異常になる(IE5)
　http://cssbug.at.infoseek.co.jp/detail/macie/b006.html

>>30
やっぱわかりませんか。
div厨っていう言葉、初めて知りました。
divばっかり使うのはあまり良くないという事でしょうか？

そのサイトは実はフリーのブログ系サービスを使って構築されているので、
CSSは自分で書けるけれど、divとかそのクラスなどのHTMLの構造はいじれないんです。

>>35
やっぱりそうですか。
ちょっとソースは長いんですよね。私が勝手に関係あると思ったのが以下の部分。

h2{
margin:100px 0px 0px 0px;
padding:0px;
background-image:url("ｈｔｔｐほげほげ");
background-repeat:no-repeat;
background-position:top right;
font-sixe:x-small;
}

div.a{
margin-right:10%;
background-color:#333388;
background-image:url("ｈｔｔｐもこもこ");
background-repeat:repeat-y;
background-position:right;
}

span.a{
position:relative;
z-index:1;
top:-100px;
left:-14px;
display:block;
padding-top:50px;
padding-left:60px;
width:490px;
height:110px;
background-image:url("ｈｔｔｐのこのこ");
background-repeat:no-repeat;
background-position:top left;
cursor:hand;
font-family:"System", monospace;
font-size:x-large;
}

これで、Mac IEだとh2とかspan.aの背景にもdiv.aの背景色やイメージが出てる状態です。

単純に言うと、「left」とか「red」とかいうclass名を使っていたらdiv厨 or span厨

>>34
そうですか…。わかりました。
JavaScriptはあまり好きではないので、別な表現方法を考えてみますね。
どうもありがとうございました！

スタイルシートって、
1.便利だし大概のブラウザは対応してるからガンガン使え！
2.便利だけど無理に使う、多用するのは避けたほうがいいんでない？
のどっちですか？

JavaやFlashみたいに使いすぎはウザイとか、機能を切ってる場合があるとか、
そういうのってありますか？

スタイルシートを切られていてもちゃんと読めるように作るのが正しい使い方

>>43
2. を奨める「ほーむぺーじ講座」はトンデモ。あきらかに無知。
というかブラウザは必ず一つスタイルシートを持っている。これは所謂デフォルトスタイルシートと呼ばれているものだ。文書構造がしっかりしていれば、制作者のスタイルが無効でも閲覧可能。

ある特定のブラウザのデフォルトスタイルに「パッチ」を当てる様な形で不完全なCSSスタイルシートを記述しないこと。制作者は常に、完全なスタイルを実現しておくべき。

致命的なバグは「バグリスト」を読んで避けるようにすること。著しく可読性が損なわなければ多少体裁が異なっても気にしないこと。常に正しいスタイルシートを記述するよう心がけること。

ちょっと質問を。ulにpaddingを指定したいんですがどうも上手くいきません。

<div id="submenu">
　<ul id="submenu-local">
　 <li><a href="./" class="now">Top</a></li>
　 <li><a href="./sitemap.html">Site Map</a></li>
　 <li><a href="./about.html">About</a></li>
　</ul>
　<ul id="submenu-grobal">
　 <li><a href="./intro/faq/">FAQ</a></li>
　 <li><a href="./intro/tips/">Tips</a></li>
　</ul>
</div>

図1) ttp://sobchan.no-ip.com/cgi-bin/wc/source/unko20040219033713.png

このソースにおいて、ulに対してpaddingを用いて
　1. 1つめのul(#submenu-local)の上部を30px空ける
　2. 2つめのul(#submenu-grobal)の上部を50px空ける
操作をしたいのですが、以下の図の通り失敗します。
図2) ttp://sobchan.no-ip.com/cgi-bin/wc/source/unko20040219033801.png
これはIE6標準での表示ですが、Opera6/NS7ではほぼ図1と同様の表示で失敗。

3大ブラウザでダメなら俺が間違ってるハズなんだけど…トリビアぐらいから考えてるけどわからん。
どうすればいいでしょう。
以下CSS。

/* 図1,2 ともに適用 */
#submenu {
　float: left;
　display: inline;
　width: 130px;
　font-family: Arial,Tahoma,sans-serif;
　font-size: 80%;
　background-color: #cc6600; }
#submenu ul {
　display: inline;
　list-style: none; }
#submenu ul li {
　display: block;
　font-weight: bold;
　border-top: 1px solid #999999;
　border-bottom: 1px solid #999999;
　border-right: 1px solid #999999;
　margin: 2px 3px 2px 0;
　padding: 2px 5px 2px 0;
　background-color: #666666;
　text-align: right; }
/* 以下 図2において適用 */
#submenu-local {
　 padding: 30px 0 0 0; }
#submenu-grobal {
　padding: 50px 0 0 0; }

>>46-47
ulはdisplay:inline;でインライン要素になったからmarginもpaddingも無効なんでないの？

何をどう言ってやれば良いのか・・・父さん頭痛くなってきたよ

>>48
インライン要素で無効になるのは margin-top と margin-bottom
margin-left/right と padding は有効。

>>48
あー…padding-top/bottomも無効になるのか。そうなのか。どうも。
でもblockにすると、意図したとおりに表示する方法がわからん…。

>>49
（*´〜｀）

>>51
違う。非置換インライン要素の垂直パディングは各行に存在する。
http://www.mozilla.gr.jp/standards/webtips0015.html

>>52
ほんとだ…。じゃあなにがおかしいんだろ。

参考: CSSにちょっと書き足してみた。

#submenu-local {
　background-color: #ffffff;
　padding: 30px 0 0 0; }
#submenu-grobal {
　background-color: #ff0000;
　padding: 50px 0 0 0; }

図3) ttp://sobchan.no-ip.com/cgi-bin/wc/source/unko20040219150447.png

なんだこりゃ。解説きぼん…。

なんだこりゃって、漏れ的には>>46-47の時点でなんだこりゃなんですが

あぁ…なんかネタかと思うような壮大なレベルでヘンテコさんなんですか俺は。
そうですか…。（*´〜｀）もう寝よう

>>55
なんだこりゃといいつつちゃんとしたCSS書けているのか不安ですが、
こういうことですか？ (HTMLは>>46)
#submenu {
float: left;
width: 130px;
font-family: Arial,Tahoma,sans-serif;
font-size: 80%;
background-color: #cc6600; }
#submenu ul {
list-style: none; }
#submenu ul li {
font-weight: bold;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
margin: 2px 3px 2px 0;
padding: 2px 5px 2px 0;
background-color: #666666;
text-align: right; }
#submenu-local{
padding:50px 0 0 0;
margin:0; }
#submenu-grobal{
padding:30px 0 0 0;
margin:0; }
もし違うならこんなふうに表示されてほしい！というのをグラフィックソフトで描いて
その画像をUPしたら適切なCSS書いてくれる人現れるかも

>>56
ああああー！！なるほど！！
左側にスペースが空くのは単にmargin:0で消せたんですね…。
それをムリヤリどうにかしようとdisplay:inlineを連発してたんです。
やっぱりそこが一番ヘンテコさんだったのね。

これで安心して寝れます。（*´∀｀）ノ旦~~ お騒がせしました。

IDとclassってどう使い分けるのですか？

IDとclassの違いは解るよな？
なら、聞くまでもないと思うが？

>>59
ごめん、わかんないっす。

答え出てるんだから検索すればいいんだよ。
ID Class CSS

ここで聞くよりも早いし、検索している途中で色々なことに気付くこともしばしば。

>>61
検索した結果、↓ここの説明でいいのかなと思いますが、どうでしょうか？

http://deztec.jp/site/tips/page/p0045.html

カンベンしてくれよ……
(>>61を代弁

すみません。今までテーブルレイアウト中心で作っておりましたが、
SEO対策にcss勉強しなくてはいけなくなりました。
お勧めの書籍って何かありませんか？

>>62
大体はそれで良いと思いますが。書き方の決まりとか厳密なことについては仕様書参照。

>>64　下手な書籍より、>>4だな。
『スタイルシートWebデザイン』のHTML化版もあるし。

>>65
サンクス。

ディレクトリのような表示で、リンクするようなのはどうやってつくるのでしょうか？
（例：http://www.pc-success.co.jp/pc/）
左側のようなのをつくりたいんですが・・・・。

ごめんなさい！誤スレ！！

>>67
あのページだけ読むと、かなり間違った知識になりそう。
あのサイト全部みると多少はまともになると思う。

>>70
そうですか。
頑張って読んでみます。。。

>>64
http://pc2.2ch.net/test/read.cgi/hp/992793435/l50
こんなスレがある。

自分のお薦めはこれ。
「詳解HTML&XHTML&CSS辞典」CD-ROMつき
http://www.shuwasystem.co.jp/SHOKAIdic/hxc/index.html

h2要素を5個並べてると、デフォでは5行で表示されますよね。
で、display:inline;を聞かせると1行にはなるんですけど、最初のh2要素の前で改行されてるんです。
どうなってるかはこんな感じ。
======================================
　 ______
　| 　 　|
　|　絵　|
　| 　 　|
　 ￣￣￣
　h2要素の内容がつらつらと（ｒｙ

======================================

imgにfloatを当てると、絵の横には行くんだけど、それだと絵の上端に並ぶ形になってしまう。

======================================
　 ______
　| 　 　|
　|　絵　|
　| 　 　|h2要素の内容がつらつらと（ｒｙ
　 ￣￣￣
======================================

こうしたいんだけど。
vertical-alignで下げるのはちょっとズレがでるし、Operaだとなんか効いてないっぽかった。
普通のインライン要素だと下図のような配置になるんだけど、置換h2だと上図みたいになる。
なんとか出来ませんか。

･･･ズレは突っ込まんといてやって下さい。

>>73
その前に、その構文は正しいの？
なんかどう考えても不思議ﾏｸｱﾌﾟなんだけど。

ごめん、解決した（汗）
<div class="head">
<p>
　<img id="title" src="./img/title.gif" alt="さくヲ" width="74px" height="45px" />
　<h2><a class="local" href=".html">■About</a></h2>
　<h2><a class="local" href=".html">■About</a></h2>
　<h2><a class="local" href=".html">■About</a></h2>
　<h2><a class="local" href=".html">■About</a></h2>
　<h2><a class="local" href=".html">■About</a></h2>
</p>
</div>

でやってたんだけど、p要素消したら上手くいった。
body直下にインライン要素置いちゃ駄目ってどっかで聞いたのを
「必ずP要素で囲わなきゃ駄目」って曲解しちゃったたみたいだ。
ほんと不思議ﾏｸｱﾌﾟ。

>76　divがある時点で、body直下（にインライン要素）ではなくなっている。
ところで、見出しが5個も続いて、はたして見出しと言えるのかどうか。
スレ違いではあるのだが。

ｈ2は文字を大きくするタグでしょ？
のﾖｶﾝ

>>78
それだな

>>79
でもimgタグの末尾に /> を入れて、XHTML仕様にしてるみたいだけど。

>>80
新しいドキュメントタイプを使っている≠HTMLドキュメントに精通している

XHTMLでテーブルレイアウトしてる阿呆は結構見るぞ。

リンク付きのタブっていうかメニュー部分のタグ付けがリスト（<ul><li>）にしてあるものが多いですが
これはcssが効かない場合の見え方を考えているのでしょうか？
なんで<menu>ってタグがないのかなと思って調べたら昔はあったのに廃止されて<ul>に統合されたわけですね。
ある<ul>要素がメニューリストであると明示できるのかな？
形のうえでメニューリストであると認識してもらえそうなのには
<div> | home | News | products | FAQ | Contact | </div>
というのも多いですね。

>>83
マークアップの仕方ならStrict HTMLスレッド向きの話題では？
それに、順不同リストだからulにしてるだけのことだろ。

cf.「パン屑ナビはパラグラフかも」
http://members.jcom.home.ne.jp/jintrick/Personal/d20035l.html#d28_3

>>83
　これはcssとはどういうものであるのかを考えているのでしょうか？
なんで<menu>ってタグがないのかなと考えてるのかなと思って推理してみたら「cssはホームページを素敵に変身させるもの」程度にしか考えていなかったわけですね。
見栄えと構造を分離させる、っていつか理解できるのかな？

>>85 「見栄えと構造を分離させる」の意味はわかっているつもりです。デザイン面をcssへ完全にまかせるにあたって
cssが効かない環境でも文書構造を的確に表現するためのhtmlのタグ付けとはどういうものなのかを調べてでてきた疑問です。
css適用とのからみで使いやすいからなのか、あくまでもメインメニューを意味するタグ付けとし意味があるからなのか、がわかならかったので。
＞「cssはホームページを素敵に変身させるもの」
ある面そのとおりじゃないのでしょうか？
私の理解に間違いがあるようであればまたご指導ください。

>>86
つまり、何が聞きたいの？

素敵な服を作っても、着る人が不細工なら意味がないのさ。

CSS3が普及してCSS3で段組を出来るようになるのっていつごろでしょうか？
今がんばってCSSでレイアウトして段組を試みているんですが、オペラとネスケが
言うこと聞かなくて切れそうです。

やっぱりテーブルか・・・もうﾀﾞﾒﾎﾟ…

IEの方が間違ってることが多い
オペラとネスケはたいていの場合正しい

段組を廃したレイアウトに徹する

>>90
ですよねぇ・・・
俺の脳味噌ががシェイクなプリンなのかもしれません。

>>91
男たるもの一度はポータルサイトなんかを夢見ちゃうじゃないですか！！



早くしろYOヽ(`Д´)ﾉCSS3

普及したとして、きちんと実装されるのかなぁ…？

>>89
どっかの雑誌に紹介されてましたけどここの段組みとかどうでしょう？細かい部分も興味深く見てます。
http://www.homelesspixel.de/remix/

亀で申し訳ないのだが、サイトのメニューバーだからh2でいいのかなと思い使った次第。
単にulで作るのも考えたけど、コンテンツへのリンクは見出しじゃないのかな云々と悩んだ訳で。

サイトのメニュー部分はこうしろってのがあれば教えて下さい。

>>87
1, メインメニューのタグ付けを<ol><li>..とする根拠。
2. 「cssはホームページを素敵に変身させるもの」の『素敵に変身』が
見栄え＝レイアウト／デザインを意味するであれば、その通りと理解してはいけないのか？
ということです。

>>95
メインメニューのタグ付けで私も悩んでます。CSSスレの話でないのかもしれませんが、
<h1> | home | <a href="">News</a> | <a href="">products</a> | <a href="">FAQ </a>| <a href="">Contact</a> | </h1>
でもよそそうな気もしないでもないし。

>95-97
メニューがリンクのリストであると考えるなら順不同リスト、
目次であると考えるなら序列リスト、
個々のリンクが見出しを兼ねると思うならリストの中でheadingを使えば良いじゃない。
自分の想定してる論理構造を素直にマークアップすれば良い、正解は自分の中にある。

>>97
ｳﾞｧｶじゃないの。見出しの中にナビゲーションが紛れ込むわけねーだろ。
見出しというのは，意味的な文章の纏まり（章や節，段落）を拾い読みし易いように，記述される標題だろうが。
見出し要素を抽出して目次を生成したりする場合に意味不明になるだろうが。

ttp://homepage1.nifty.com/VET06031/web/lint100.html
こことか読んでみてはいかが

NNは
li { display: inline;
margin: 0px;
}
<li>**</li>
<li>**</li>
での改行を半角スペースとして認識してしまうのですか？
marginを指定しても空白が出来るですが……

padding:0;

直りませんでした……htmlを
<li>**</li><li>**</li>
のようにすると直ります。やはり仕様なのですか？

>>101
そんなのNetscape7でなくともWinIEでも空くが？

>>104
あ、そうですね。borderの指定をしていたので気づきませんでした……


ﾉｼ

>>105
騙り

なるほど。勘違いしていたようです。すいませんでした。

>>101
改行文字を空白と見なすのはHTMLの仕様だと思ったが今は違うのかな?
inline要素の間に有るから単語間の空白と見なしてレンダリングしてるんじゃないか?

li {float:left; width:XXem; margin:0; padding:0;}でやれば？ >>101

>>107
RFCでは日本語内の改行は空白として扱わない方が望ましいと
されているようなことをFirebirdスレだったかで見た記憶が
あるが、記憶はあいまいなので詳細はぐぐってくれ。

漏れはけっこうどうでもいいから自分の曖昧な記憶のままでかまわんが。

手元の本に乗ってるの見て思ったんだが、
*#ID{};　ってIDの使い方すればおかしくないの？
文書中に一個だけでしょ、IDって。
#ID{};　以外は書くだけ無駄な気がするんだけど、そうじゃないの？

>>110
文書中に一個だけ…？
<div id="header">
<div id="menubar">
<div id="content">
<div id="footer">

こんな風に普通に使うよ。

>>111
あぁ、スマソ。同名IDは存在しえないって事を言いたかったんだ。
例えばそのソースにCSSを当てる時に、
div#headerって書くのと、#headerってするのとでは全く同じ意味になるよね？
なのに基本セレクタを指定する必要はあるのかなと言いたかった訳。

>>111
いや、それぞれ一個ずつってことだろ。

うわ、リロードしてなかった。

>112　div#headerであれば、
divに対して使われているということがすぐわかる。
idやclassだけで書かれているよりも、よりわかりやすくていいとは思う。
自分があとでCSSを編集するときも、作業がしやすくなるし。

あとは、優先度の問題もある。
（より具体的な指定をするほど、優先度が高くなる）

>>115
なるほど、分かりましたー。
作業面でのメリットですね。

>>116
> あとは、優先度の問題もある。
> （より具体的な指定をするほど、優先度が高くなる）

そこは納得いってなくて自分で調べてる最中。
後述の物ほど優先度上だと理解してたから。

>>118
外部ｽﾀｲﾙｼｰﾄの中で後述のものが優先度上、ってこと？

詳細度の計算
http://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity

#id より div#id の方が強いんだな

リンク先読んでみたけどやっぱわかんねぇ。
idが唯一無二である以上、それ以上優先度上げようが無意味に思える。

･･･俺が馬鹿なだけか。精進しまつ。

>>122
バーカ。精進しろ。















スマソ言ってみたかっただけ。

Netscape Navigator 4.x CSSバグリスト
要素名に続けて書いた一意セレクタを認識しない
http://cssbug.at.infoseek.co.jp/detail/nn4x/b018.html

idは重複可能（常識）

ハア？

>>122
例えば、a.html と b.html の両方が外部の x.css を参照
している時、

a.html:
<p id="foo">...</p>

b.html:
<span id="foo">...</span>

x.css:
p#foo { ... }

というような状況だと #foo と p#foo の違いは意味がある。

IDはそれぞれのHTMLでは唯一だが、そのCSSにとって唯一
とは限らない。

あえて心にもないことを言っているのではなく、本気でそういっているのなら重傷だな。
自覚症状がないようだから、病院にも行かず、ずっと直らぬ不治の病だな。

はあ？

J0rghUYj は何をしたいのか私にはよくわかりません

気にしないで質問をどうぞ

「なるほど、div囲みね」を、なんとなく思い出した風呂上りの麦酒タイム

>>130
確信犯か。死ねばいいと思うよ。

複数のシートを読み込むときとかかな

>>123のせいで誤爆

半透明のテーブルをつくると、
テーブル内の文字まで半透明になってしまうのですが
文字だけはっきり表示する方法、教えてください

>>127
めっちゃ合点がいった。さんくすこ。

>>135
どうやって半透明にするのか教えてキボンヌ。
transparentだと完全透過じゃん。アルファ数値の指定なんて出来るの？

>>135
禿げしくｶﾞｲｼｭﾂ。
ﾌｨﾙﾀｳｻﾞｲ。(ﾟ∀ﾟ)ｶｴﾚ! と言われて終わるのが落ち。
初心者が半透明テーブルを好む思考要因を教えて欲しい。

MSに「半透過PNGさっさと対応しやがれｺﾞﾙｧ」とか念じつつ
半透明のように見える背景画像を使う。あたりが落とし所か。
まあ地の背景にもよるが。

キャンバス以外の固定背景画像に対応してもらわんと。

ちょい質問。
http://www.w3.org/Style/CSS/Buttons/Menu
↑ってなんじゃろ？
翻訳しても今一意味がわからんのだけど
CSS使ってればロゴを使ってイイという意味なんかな？
このロゴを貼っているサイトを見かけるが
一体ナニを意味するものか正直全然ワカラン。
Valid ってなら例のアレがあるわけだしさ。

>>140
単に、オレサマ CSS ツカッテイル ということを示すものじゃね。

CSS対応が当たり前になった現在では必要を感じないかもしれないが、
以前はそうじゃなかったことを考慮してみて欲しい。
Netscape Communicator4.x使っているユーザにはそれなりに
ありがたい情報では。

阿呆だなぁ･･･

>>141
特に取り決めがあるわけでもなく、そんな感じだな。
ファンなら付けとけばって程度のもの。

>>140
＞If you use this button, you are claiming that your page's CSS style sheets have been checked for correctness. Go to the CSS validator and test your page: it will tell you whether you can use this logo and if so, how.
おまえんとこのCSSが正しけりゃ、それをみんなに伝えるためにもこれを貼ってもいいぜ（意訳）

http://pc2.2ch.net/hp/kako/1069/10692/1069216458.html
504 名前：Name_Not_Found[] 投稿日：03/12/03 11:27 ID:in8hHNnB
なるほどdiv囲みね。

はああ？

>>146
いいかげんウザイ
あぼーんしやすいようにコテハンで書いてくれ

>>141-144
そっか。ﾌﾑﾌﾑ
サンク

>>125＝>>128＝>>132・>>145のＮＧワード希望。

IDで削除すればいいじゃん。
わざわざ言わないでスルーしる。

>>150
>>1

NN4.xのシェアってどんなもんなのでしょう？
それはいいよっていうクライアント多いですか？

>>152
シェアは知らんが、うちは「見れるようにはしておけ」と言われてるからmedia="screen,tv"でNN4.xにデフォルトのレンダリングを提供してる。

>>152
もう1%以下、たしか0.6%ぐらいだっらと思う。個人サイトなら無視してもいい割合ではないかと。
>>153のようにしておくのがベストとは思うけれど。

>>152
漏れのサイトもここ一ヶ月で0.6%ぐらいだったぞ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
div#aaa
{
position: absolute;
top: 1em; left: 1em;
margin: 0; padding: 0;
}
div#bbb
{
position: relative;
width: 100%;
margin-top: 20em;
}
-->
</style><title>test</title></head>
<body>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
</body></html>

↑で、IE6だとbbbのmarginが効かないんですがバグでしょうか？

width: 100%;

>>152
NN4.xは対応してるがNN6.xは対応してないという
OSが多いのが一番の問題だな。

Mozillaプロジェクトが対応OSを絞りすぎたせいで、
いつまでもNN4.xが残ってると思う。

positon:relativeで移動させた後のボックスは、移動させたボックスが元あった場所の後ろの置かれるよね。
Aというボックスを移動させた後、BというボックスはAのheight分だけAの開始位置より下に記述される。

で、BをAの縦幅移動分と同じだけ動かして、Aの元あった場所に配置したいんだけど。
この場合に、例えば窓サイズを小さくして、Aが縦長になった場合、長くなった分だけBも下がっていってしまう。

これを回避する方法ってない？
AかBをabsoluteで指定するしかないのかな？

ttp://www.cybersaizensen.com/yokochin/2003/w04.html
ttp://www.cybersaizensen.com/yokochin/2002/w09.html

この勘違い馬鹿は何がいいたいんでしょうか？

>>161
厨房ウケ狙いだろ。イライラする。

　未だ私が不思議なのは、いくらコンピュータへ詳しくとも本職が作家であり、そちら(コンピュータ)の分野はしょせんアマチュアに過ぎない私でさえ思いつくアイデアが、
なぜ私より半年以上遅れてインターネット上へ現われ？ なぜマイクロソフトのようなメジャー中のメジャー企業からこの｢ハリウッド最前線｣にコンテンツのライセンスを打診してくるのか？
なぜ先々月(２月)で110万件以上の月間アクセス件数と30万件弱の日間アクセル件数を記録したのか？･･････結局は自分の｢こだわり｣が原点なのでしょう!?

　お互い、インターネット上で人を触発できるような｢いいページ｣を作っていこうではありませんか!!

>>161
そいつにしたら、馬鹿はお前の方。
単なる、思想と思想のぶつかり合いだな。

誰ぞに文句が有るのならそいつに直接言ってくれ。
ここは他人のサイトを評価するスレでもないし，議論するためのスレでもない。

馬鹿にしたいならこちらへどうぞ。真性のアフォがいますよ
↓
CSSでイケてるデザインサイト 20
http://pc2.2ch.net/test/read.cgi/hp/1074254818/

.blockquote {
FONT-SIZE: 12px;COLOR: #333333;BACKGROUND:#FFFFCC;BORDER:dotted 2px #996600
;MARGIN: 20px 10px 20px 10px;PADDING: 10px;BORDER-LEFT: 1px solid #003366;}

blockquote {
FONT-SIZE: 12px;COLOR: #333333;BACKGROUND:#FFFFCC;BORDER:dotted 2px #996600;MARGIN: 20px 10px 20px 10px;PADDING: 10px;BORDER-LEFT: 1px solid #003366;}

だと、<blockquote>で囲んだときに、左端がドットではなく線になってしまいます。全部ドット
で囲みたいのですが、どうすればいいのでしょうか？

>>167
solidで上書きしなければいいだけでは？

>>167
dottedってie5じゃ対応してないんだよね｡･ﾟ･(ﾉД`)･ﾟ･｡

>169
いやそういう問題じゃなくて。。

どうしてもうまくいかないのでアドバイスを！！

<div id = "main">
<div class="submenu">MENU1</div>
<div class="maincont">text</div>
</div>
---------------------------
#main {
width: 100%;
}
.submenu{
FLOAT: left;
WIDTH: 28%;
}
.maincont{
float: left;
width: 70%;
}
---------------------------
とやった場合。
ＩＥではうまくいくのですが、NN7ではmaincontの部分がsubmenuの下に
きてしまうのですがなんでなんでしょうか？？
回避策等アドバイスお願いします！！！！

IEでも標準モードにしてみ。崩れるから。

widthは内容領域の幅であって、マージンやらボーダーやらの部分の幅は含まない
（IEの互換モードはこの計算がおかしい）

submenuとmaincontのwidthを減らしてみよう。

>>168
solidを消すと、今度は左端に何も表示されなくなりました・・・。

おもっきり初心者が口出してみていいですか？いや、全然わかんないんだけど。
<div id = "main">←妙なところでスペース入ってるけど、これは大丈夫？

>>167
文盲で、言っている意味がわからんのだが。

あれだ。

BORDER-LEFT: 1px solid #003366;

これはなんだ。

>>176
それとったら解決しました。ありがとうございました。

http://www.itmedia.co.jp/
↑これみたいに、表示スペース全体をセンタリングするのはどうしたら
いいでしょうか？

>>178
FAQのブロック要素のセンタリング

>>179
ありがとん

>>171
#main {
width:100%;
}
.submenu{
float:left;
width:28%;
}
.maincont{margin-left:30%;}

>>175
スレ違いだが、レスしておくと、SGMLでは
http://www1.u-netsurf.ne.jp/~7l1rll/SGMLsec6_0.html#9
>属性指定並び = 属性指定 * 　　　　　　　　　　　　　　　　―(31)
>属性指定 　　= s*, ( 名前 ,s*, vi ,s*)?, 属性値指定 ―(32)
となっているので、問題なし。XMLでも同様。

カウンターなどをdisplay:none;　した場合は、
そのカウンターは動く(と言うと変ですが)のでしょうか？
display:none;がよく分からないもので…

ブラウザによる……かな？

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

すいません、もう一つ質問させてください。
では、visibility: hidden;　でもカウンターはブラウザによって変わるのでしょうか？

>>183 >>186
試してみれば、すぐわかることでないか。

>>187
よくよく考えたらそうですね。申し訳ありません。

>>188 試したら、結果報告して頂戴ね。

>>183 は分からないが、>>186 visibility:hidden で
width, height がautoの場合、内容を見ないとレンダリング
できないので、カウンタは動くはず。
width, height がautoでない場合はわざわざリクエストしないかも
しれないが。

about:<image src=a:\ style=display:none>

↑これをアドレス欄にコピペしてみろ。読みに行ったらガリガリする。

FDDがねぇよ

ちょっと調べてみたのですが不明だったのでお教え下さい。
現在FireFox0.8+UTF-8の文字コード指定でXHTML1.1を使って記述しています。
ファイルにBOMコードが入っていますがlinkでは減点されませんでした。
そこで以下のようなCSSを書いたところ
*{
　margin:0; padding:0;
}
html{
　margin:0 auto;
　width:50%;
　color:#000; background-color:#fff;
}
body {
　border:solid 1px #000;
　color:#000; background-color:#00f;
}
意図通り表示されたのですが、*の全要素指定を削除するとhtmlに対するCSSが解除されます。
こういう使い方が間違っているのか、はたまたそういう仕様なのか理解しきれませんでした。
htmlに対するCSS指定は間違いなのでしょうか？

大変申し訳ありません。
CSSファイルの先頭に@charset "UTF-8"にセミコロンをつけ忘れていたという些細な
ケアレスミスでした。
スレ汚し失礼致しました。

前スレくらいで出てたリストを使ったデザインの一覧がある海外サイトのURL控えてる人いない？
よければ教えてもらいたいんだけど…。

koreka?
ttp://css.maxdesign.com.au/listamatic/index.htm

>>196
おーそれです、ありがとうございます。

>>195-197
わぁー、すごい勉強になるわ〜。
サンクス。

>>196
まじで感動。リストってすごい！

<a>
<c>xxx</c>
</a>
<b>
<c>xxx</c>
</b>

こんな感じの入れ子になっていて、
a c { xx: xx; }
b c { xx: xx; }
とすれば重複しないものにも
それぞれ<c id="d">xxx</c>、<c id="e">xxx</c>として
c#d { xx: xx; }
c#e { xx: xx; }
とidやclassを指定したほうがいいのでしょうか？

>>200
その部分の性質を考えて、一意に特定すべきと思うならidを、
種類で分けるべきと思うならclassを指定すれば良いでしょう。

と、いうか、紛らわしい匿名のエレメントを出されても、みたいな。

あるtableのtrのみに二重線をすべて適用するという基礎的そうなことがどうしてもできません。
tableにcrassを指定するとtrにはに適用されず。。

table trとしてもその構成のすべてのテーブルが適用されてしまうため、悩んでいます。

>>202
.class tr

>>202
あるtableのtrのみにidかclass指定する、っていう手はどう？

失礼しましたm(_ _)m
tdにたいしてです。
.class tdだとすべてのtdに適用されてしまいます。
td一つ一つに指定しても良いのですが、なにぶん数が膨大で。。
また、あまりスマートじゃない気がします。

<table class="hoge">
でCSSを
table.hoge td{}

にすればとても簡単だと思うのだが何故そうしない？

>>201
idとclassの違いといいますか、
同じ要素が二個しかなく（<a>の中の<c>と<b>の中の<c>）、
しかも親要素がそれぞれ違うので（<a>と<b>）、
とくにclassなどで分けるまでもないのかな、と思ったわけです。

classとかidで指定しないといけないような場合、ユーザースタイルシートの汎用性に
欠けるかと思ったんです。
とりあえずclassやidを指定しておきます。


<a>とか<b>って、まぎらわしいですよね。すみません。

あと、>>205さんと似ているんですが、
ひとつひとつclassなどを指定するのは管理がわずらわしいし
「あまりスマートじゃない」と思ったわけです。

>>206
ビンゴです！ありがとうございますm(_ _)m
正直あきらめてtdにcrass付けまくろうとしていたのでありがたい限りです。

>>209
同じことを203が言ってくれていると思うのだが。

>>202ではcrassとか書いてるし、それが原因だったのでは…
>>206でいけるなら>>203でもいけるだろうに。

>>189
亀レスですが、visibility: hidden;ではカウンターが動きました。ありがとうございました。

写真サイトを作ってるんですが
サムネイルとタイトルを

┌─────┐　　　┌─────┐
│　　　　　 　 　|　 　　│　　　　　 　 　|
│　　写真　 　 |　 　　│　　写真　 　 |
│　　　　 　 　　|　 　　│　　　　 　 　　|
└─────┘　　　└─────┘
　　　タイトル　　　　　　　　タイトル

といった感じで並べるにはどうすればいいでしょうか。
いろいろやったんですがサッパリで参ってます…。

>>213
ttp://www.redout.net/data/osietekun.html
ttp://klablog.okiraku-pc.net/logs/current-bbs/161/xqqrlz.html

参考にしてみては？

>213　どんなふうに「やってみた」のか書いてみれ。

写真のサムネイルとそれぞれのタイトルを一つのボックスに入れて
それをどんどん並べていきたいんです。
divでくくったりリストにしたりいろいろやったんですが
改行されてしまったり表示がズレズレになったりして出来ません。

imgタグの後に改行を入れてるのがマズイのかなとも思って
widthでものすごく無理矢理やってみたんですが
違うブラウザで見たらやっぱりズレまくってしまいました。

それじゃテーブルでやれば？と思うかもしれませんけど
なんせ他のページは全部スタイルシートでやってるんで
そのページだけテーブルっていうのはちょっと…。

>>214
言葉の意味を汲み取れてなかったらごめんなさい。必死なんです。

>>213
たとえばリストの場合。

<li>
<p><img /></p>
<p>texttext</p>
</li>

で、
li { float:left; }

とかやってもだめなの？

>>213
今やってみましたができませんでした…。

｛display:inline｝
もやってみたんですけど、両方とも縦に並んでしまいます。

http://solvalou.net/
↑
ここみたいに、リンクの上にマウスをのせたら、文字がペコって凹むように
しようと思って

A:hover{ /* リンクの上にカーソルがあるとき */
color: #f00;
position:relative;
top:1;
left:1;
}

これをcssに記述してみたんですが、なぜか何も起きません。
当方、Movable Typeをつかっています。試しに、css内にある
A:hoverって記述を全部、消してみて上のだけにしてみても何もならないんです。
これは、htmlが悪いんですか？それともcssの別の部分に何か
間違いがあるんでしょうか。

どなたか、これが悪いんじゃなんじゃないの？ってのがあったら
教えてくれませんか？お願いします。

p { margin: 0; padding: 0; clear: right; float: right; width: 5em; border: solid 1px; }
ul { margin: 0; padding: 0; list-style: none; /* 単に見易さのため */ }

<ul>
  <li><p>A</p>
      <p>B</p></li>
  <li><p>C</p></li>
</ul>

<p>D</p>
<p>E</p>

WinIE6（標準）では
A
B
C
D
E

WinMoz1.6（標準）では
A
B C
D
E

正しいのはやはりMoz？

>219
そうなるかならないかだけならおそらくCSSの問題
a:hoverより後にa:linkやa:visitedがない？
とりあえずcolorの指定だけにして色が変わるかどうかを確かめるとか試すことはいくらでも

>>213
俺も同じ事やってるけど、そこだけはテーブルでやってしまってる。
テーブル使わずにできた方がいいけど…入れ子とかじゃないから
テーブルでやってもそんなに複雑になりすぎないし、別に良いかな、と。

>>221
そうなんですか…やっぱり難しいんですね。
それじゃ諦めてテーブルでやります。

>>214
もう何やってもだめでウワーッてなってました。
今は落ち着いてます。ごめんなさい。

>>217
>>218は私でした。アンカー間違えてますが…。
教えてくれてありがとうございました。

>>222

.thumb_nail li {float:left; list-style-type:none;}
.thumb_nail dt { margin:0; padding:0; text-align:center;}
.thumb_nail dd { margin:0.2em; padding:0.2em; text-align:center;}

<ul class="thumb_nail">
<li>
<dl>
<dt><img src="xxx" alt="alt1"></dt>
<dd>text1</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="zzz" alt="alt2"></dt>
<dd>text2</dd>
</dl>
</li>
</ul>

いささかくどいマークアップの予感。意味的にもテーブルでもよいような予感。

>>222
難しいかどうかはわからん。
ちょっとやってみたらブラウザ間での見え方の違いが出てきたので
まぁいいやと思って、あんまり考えずにテーブルにしちまったから。
HTMLソースは複雑ではないが、やはり汚い。

きっと良いやり方はあると思うよ。
模索してくれ。

>>222
javascriptスレでの質問のためにつくったページですが参考になりませんか？
http://homepage.mac.com/d130/javascript/List_javascript_limeLine.html
横方向に並べたli要素の天地がその内容量によって変動すると
2段目の並び方ががたがたになりますが、間にclear:both 属性を持つli要素（limeカラーで表示している線がそのli要素です）を
入れると次段の要素がきれいに頭ゾロエでならびます。

ところでWinIEのみ、width:600pxのdiv(白地)が右にのびちゃうんですけど原因わかりませんでしょうか？
各要素にborderつけたり背景色つけたりして確認してもどれもはみ出てないんですけど。

>>221
タイトルとその画像だったらtableで良いと思うのだけど、ダメなの？

>221
複雑になるからテーブルがだめ、というわけではない。誤解しないように。

<li onclick="parent.topFrame.location.href='url' "><a href="url" target="topFrame"><img src="url" alt="alt"></a><p>xxxxx</p></li>
このようにブロック要素liに対してjavascriptで別フレームに対してリンクを貼り、さらにliに内包されるimg要素にaタグでリンクをつけるという二重なリンクは禁じ手？
javascript対応UAはブロック全体がリンクエリアになり、そうでないUAでもimg部分のリンクで動くように考えているのですが、他にもっといいやり方ありますか？

>>228　全然CSSの問題ではないな。
http://www.ne.jp/asahi/minazuki/bakera/html/opinion/zannen2

>>228
JavaScript、要らない。
li a {display:block;}

http://cssbug.at.infoseek.co.jp/detail/winie/b071.html のバグ對策も參照しませう。

>>226
いや、駄目じゃないと思うよ。実際俺もそうしてるくらいだし。

>>227
マークアップが他の部分と比べて論理的じゃないから気に入らない。
でも、複雑というほどではないからいいかな、ということ。
そんな言葉尻を捕まえなくてもいいじゃん。

>>231
複雑でなければ論理的でなくてもいいのか。
と、突っ掛かってみる。

>>229さん、
確かにCSSの話じゃなかったですね。すみません。javascriptをOFFってる人ってけっこういるのかしら？
>>230さん、ありがとうございます。
ブロック要素の中に<a>でくくりたいインライン要素がひとつだけのときはその方法が有効かと思うのですが、
複数の要素があると<a>部分だけしか対象にならないので、やっぱjavascriptなのかなぁと思った次第でありまして。

NN4.xでの質問なのですが・・・

<div class="koumokumenu">
<div class="widt700">
｜<a href="#">menu</a>
｜<a href="#">menu2</a>
｜<a href="#">menu3</a>
<br>
｜<a href="#">menu</a>
｜<a href="#">menu2</a>
｜<a href="#">menu3</a>
</div>
</div>

.koumokumenu {
padding: 5px;
white-space: nowrap;
}
.koumokumenu a{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.widt700 {
width: 700px;
text-align: center;
}
とやると、ＮＮ4.xではリンク１つずつで改行されてしまいます。
これを防ぐ方法はないでしょうか・・・NN4使うな！以外で。

>>231
> マークアップが他の部分と比べて論理的じゃないから気に入らない。
> でも、複雑というほどではないからいいかな、ということ。
　いや、言葉尻じゃない。
テーブルである必要があるなら「論理的」だし、
使うべきところで使うなら「複雑」でも使うといいとし、
テーブルである必要がないなら「非論理的」だし、
使うべきじゃないところで使うなら「簡素」でも使うべきじゃない。

ということ。ここら辺がわからないならこの手の話題は静観して学ぶ側に回ろうな。
あんたはそんなに頭の悪い子じゃないと思うし。

>>235 ※　議論はよそで　※
>>234 http://cssbug.at.infoseek.co.jp/detail/nn4x/b020.html

>>236
議論と諭しとの違いくらいわかってくれ。

>>237
なんか詳しそうなので聞きたいんだけど
結局この議論の発端である>>213はどのように記述すればいいんですか？

>>238
<div>
<p><img></p>
<p>foo</p>
</div>
<div>
<p><img></p>
<p>bar</p>
</div>

これじゃ不満か？

そんで div {float:left; width:××;}　ね？　>>239

234です。誰かわかりませんか(ToT

>>241
正しいマーク付けがされてないからナントカしてやろうという気にもならん。

>>242
widt700 の事ですか？ＮＮ４.xの問題回避用なので・・・

>>241　
既に答が出てる。>>236のリンク先は読んだのかい？
＞ただし、要素の前後に改行が入るバグは回避できません。

>>238
http://homepage.mac.com/d130/csstest/photoList.html
こんな感じなのかしら？モジラとsafariでしか確認してませんが。
個々の写真の大きさと文章量の差をどこで吸収するのか決めてくれないと。
liにtext-align : center ;を指定して内包するimgをセンタリングするのって文法上OKですか？

>>245
文字サイズを小さく固定しないでほしい……。

>個々の写真の大きさと文章量の差をどこで吸収するのか決めてくれないと。

min-width:XXpx; width:20em;　で、いいのでは。

>>239-240
これなら簡単に実現できますね。
以前同じことを試したはずなのになんでtableレイアウトにしてしまったのかいろいろ調べてみたら
うちの環境では<p>の前後の改行の解釈がIEとopera、Mozillaで違うのが
気になったのを思い出しました。
>>238にあるプレーンなソースではその問題は発生しなかったので
他のスタイルと干渉してるか、いずれかのブラウザにバグがあるかどちらかだと思いますが
結局原因追求を断念した記憶が。
あと>>213さんには書いてませんが、個人的に全体をセンタリングしたかったというのもあります。

いずれにしろお答えありがとう。

>>247
「<p>の前後の改行の解釈」ってなんですか。
それは「p要素が生成したボックスの上下マージン」のことか。
それとも「ソース文書内におけるp開始タグ前後の CR か LF」のことか(w

真面に用語も使えない、知らない、マークアップもできない香具師が、
CSS を書こうというのがそもそも間違いなんだよ。HTML から勉強し直せ。

>>248
まともに html をかけないくらいのうちから、
（へんてこマークアップを覚えないうちに、）
css は勉強した方がいいと思うが、いかがか。

>>248
<p>の上下のマージン、
左のように解釈するものと右のように解釈するものがあるって意味じゃないの？

┌────┐┌────┐
│┏━━┓││┏━━┓│
│┃Ｐ　　┃││┃Ｐ　　┃│
│┗━━┛││┗━━┛│
└────┘│　　　　　　│
　　　　　　　　　└────┘
┌────┐┌────┐
│別の要素││別の要素│


…と俺は思った。

>>249
数ヶ月前から勉強始めましたが正直いってまずHTMLだけを学ぶのは無駄が多いような気がしました。
スタイルシートの使用を前提とした文書構造にそったマークアップを学べる教科書が欲しいですね。

>243
　必要以上なDIV要素を指摘してるんだよ。
それで上手くいかない、とか言われても自業自得としか。

>251
　最近だとstrict+validの作成講座多いよ。

>>246
min-width:XXpx; ググったら便利そうなプロパティですがIEで効かないのですね。

>>251
特に焦って作る必要がないのなら、まずは横着せずに、
HTML におけるマーク付けの本質を掴んでください。
情報のかたちを視覚化（音声化）するのが CSS の役目です。

土台としての HTML の認識・知識が不十分だと、
CSS における恩恵を享受することはできません。

是非『ユニバーサルHTML/XHTML』を読んで欲しい。
http://kanzaki.com/book/html/
http://www.amazon.co.jp/exec/obidos/ASIN/4839904545

あくまで例なんですが
.diary.topic h3{内容〜}
と
h3.diary.topic{内容〜}
って、具体的に何が違うんですか？

>>255
.diary.topicって、
class="diary.topic"ってこと？

>>256
そうです
本で勉強してるんですが前者の説明がいまいちわからなくて
・゜・(ノД`)・゜・

>>257
classに使える文字って、半角アルファベットと数字とハイフンで、
しかも最初はアルファベットだけしか使えなかったと思う。

ややこしいので、diary.topicをdiaryとします。

.diary h3 {〜}は、
<div class="diary"><h3>文字</h3></div>といったように、
classにiaryが指定された要素の中の<h3>だけに影響します。

h3.diary {〜}は、
<h3 class="diary">文字</h3>といったように、
classにdiaryが指定された<h3>だけに影響します。

本題とは関係ないけど、ちなみにこうすると2つのクラスを適用できます

<h3 class="date diary">もじ</h3> <!-- 赤の太文字 -->
<h3 class="date">もじもじ</h3> <!-- 赤文字 -->
<h3 class="diary">もじ</h3> <!-- 太文字 -->

h3.date{
font-color: #f00;
}
h3.diary{
font-weight: bold;
}

ちなみに、
h3.date.diary{border:solid thin red;}
などとすると、class属性値（のリスト）に、　date　及び　diary　を含むh3要素のみが
マッチする。というセレクタになる。但しCSS2での話。
この辺参照してみる。
http://hp.vector.co.jp/authors/VA022006/css/selector.html#class-selectors

Win/ie6

<h1>h1-1</h1>
<h2>h2-1</h2>
<ul><li>normal</li></ul>
<h2>h2-2</h2>
<ul><li>おかしくなる</li></ul>
<h2>h2-3</h2>
<ul><li>おかしくなる</li></ul>

上に
h2:first-letter { color: #rgb; }
と擬似クラスを使うとリストがおかしくなるのですが
ここらへんのバグについて、バグる条件や回避策なんかあったら教えてください。

>>261
はじめて見たな。
バグ辞典にもなかったし。
とりあえず、h2の次に何か要素をかましてやればいけるみたいだけど、
構文を書き換える、ってのは好ましくないしなぁ。

<!--リンク色-->
A { TEXT-DECORATION: none}
A:link { color:#00a3d2 ;TEXT-DECORATION: none}
A:visited { color:#095fa6 ;TEXT-DECORATION: none}
A:active { color:#006f8e ;TEXT-DECORATION: none}
A:hover { color:#f00000 ;TEXT-DECORATION: underline}

これで無事動作したのですが、一番上の一文が無駄なように思えます。
そう思って削除したのですが、（A:link　からの記述にした。）
そうするとアンダーバーが表示されてしまい、
linkの色も設定どおりの色で表示されません。
（でもなぜかvlinkは設定どおりの色で表示されている。）

とりあえず表示されればヨシ、でやっているのですが、
ちょっと気持ち悪い感じがしたので、
どうすればもっとスマートに目的の記述をできるのか教えてください。

すみません、頭に以下の文章が抜けていました。

「カーソルを近づけたときのみ下線が表示されるようにしたいと思い、
外部CSSファイルに下記のように記述をしました。」

すいません、初心者です。質問させて下さい。
文字サイズを％で指定したいと思っています。

font-size:12px
のようにまずは親要素を指定し、そのあと個別に％で指定するそうですが、
その個別に指定する方法が分かりません。

head部分に
body,tr,td{font-size:12px;}
という記述をしました。
その後body部分でこの親要素を元に％で文字サイズ指定する場合は
どのような記述方法を用いれば良いのでしょうか。

>>263
おかしいな，自分が試してみたらA:linkからでも上手くいったけど
・・・

>>265
普通にサイズを指定すれば良い。
.hoge {font-size:200%;}
<p class="hoge">hoge</p>

>>265
指定したい箇所にすればいいんだけど
そもそも body {font-size:100%}で考えないと意味が無いんだけど

>>265 フォント・サイズをpxで固定してはいかんよ。

220について sageてたから質問だと思われなかったのかな？
1日経っても反応がないのであげます
どなたかおわかりになるようでしたらご回答いただけますでしょうか

レイアウトを決めるときに従来の用途でない方法で仕方なくcssで書くのとテーブルでレイアウトを書くのと
どちらでもいいような気もするんですけど

>>270
じゃあ好きにすればいいじゃん。強要はしないよ。
お前のヘタレサイトなんか興味ないし。

>>220＝>>269
>WinMoz1.6（標準）では
>A
>B C

A
C B
でないの？　Opera7.23はIE6と一緒だけど。

これと関係あるかね？
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

まあバグ辞典スレッドの話題だね。

>>258-260
なるほど、理解できました
ありがとうございました〜
また何かあったらお願いします＿|￣|○

>>272

すんません、>>220 じゃないんだけど、220 の例について解説おながい
します。

どういう規則で C のブロックが B のブロックの隣にフローすることに
なるんでしょうか？
div のようなボックスで囲った時は C はフローしないですよね。

>>274
どうでもいいけどフローとフロートは違うぞ。

>>220
基本的に<li>の内容にブロック要素は禁止なんじゃないの？以下推察

IEはブロック要素入ってても一応適用。故に<P>があるため段落扱い。
もじら・operaは<P>無視。

Pに適用してるクラスの数値変えてみて<P>自体が適用されてるか実験して
報告よろしく。

>>276
>基本的に<li>の内容にブロック要素は禁止なんじゃないの？

仕様書ぐらい読みましょうよ。
というか無知にも程がある。

<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
<!ENTITY % flow "%block; | %inline;">
<!ELEMENT LI - O (%flow;)* -- list item -->

li要素の内容モデルは、#PCDATA、インラインまたはブロックレベル要素の0回以上の出現。

>>276
「<li>の内容」という表現は
「li開始タグの内容」ということになり意味不明。
この場合「li要素の内容」と表現しなければならない。

>>274-278
こっちでやってくれますか。

CSS/DHTMLバグ辞典スレッド 第３版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/904-

>>279
誰もバグの話なんてしてないんだけどな

279 = バグ

MozillaかIE・Operaか、どちらかがバグでしょ、>>220は。
それとも、どちらも仕様の許容範囲内なのかい。

>>279
バーカ
お前か、あっちのスレで確かめもしないで「バグですぅ〜」と質問しに行く知障は。

>>283
で、バグでないのだったら、仕様の範囲内なわけか？
＞どういう規則で C のブロックが B のブロックの隣にフローすることに
＞なるんでしょうか？
説明しておくれ。

向こうに持ってく前にもちっと煮詰めてからの方が良いんじゃないか、
と>283は言いたいんじゃないかと思うんだが。

取りあえず俺の思い通りに動かないCSSはバグだ、わかったか

うん、だから誰か説明して頂戴。こっちでもあっちでもいいからさ。

#バグだ！と報告するだけではなく、バグか？と訊くのもバグ辞典スレッドでいいんでない？

>>287
あっちは報告用。
最低限自分で仕様と照らし合わせてバグであることが確認できる人間用。
これはバグか？なんて人に聞かなければわからないレベルの奴の質問は
こっちで処理してくれ。

>>287
誰か説明して頂戴、って。
自分で仕様書読もうとか思わないわけ？

>>289
話の流れを読めよﾀｺ。

>>220で質問が出て、バグの話はバグ辞典スレに行けって言われて
バグ辞典スレは報告用だから低レベルな質問はこっちで処理しろっていちゃもんついて
んで287のレスがついたんだろうが。

仕様書読めしかいえない猿はどうぞ出て行ってくださいまし。

>>290
じゃあお前が答えろ。

仕様書も読めない奴に言われてもな･･･

とりあえず私見だが、>>220の件はC部分にもclear:rightが指定されてるから、
「それより以前に存在する全ての浮動ボックス下外辺より下に存在しなければならない」
のであるから、IE、Operaの挙動が正しいと思うんだが。
試しに<ul><li></li></ul>を<div></div>に置き換えてみたら、
IEMozOperaともに同じ表示のされ方をした。

つか偉そうに言ってる連中は何も自分の意見出さないのか。

×全ての浮動ボックス→○右浮動ボックス

>>290
おい結局自分がどう思うのかすら述べないで回答者に逆ギレかよ。
だから仕様書読めって言われてるんだろうが。
最近の厨は本当に性質が悪いな。

相手がずっとここを見てると思い込んでるアホが一人いらっしゃいますね


お前みたいのも厨って言うんだよ。とりあえずﾓﾁﾂｹ。

>>296
回答者が必ず仕様書を検討して回答してくれると思う方もアホだと思うが

誰がどう見てもサルなのは296の方だろ

>>290みたいに高圧的な態度で回答を求めるなら、
当然>>290の時点で自分の意見を述べるのが筋だろ。

第一「仕様書読め」なんて言われるケースは、
さんざん過去に既出の質問する奴とか
自分の無知を棚に上げて逆ギレする奴だから。

>>290は逃亡しました。
というわけで次の質問をどうぞ。

仕様書読んだりめんどくさいことは嫌
でも答えてくれないなら逆切れしちゃうぞー、か。

>>288　>あっちは報告用。
いつからそんなことに決まったのか。
バグ辞典スレッドで質問したっていいし、現にされてきた。
あまりに低次元の質問でなければそれでよし。

>>293の見るところもどうやらMozillaのバグらしいのだから、あちらですべき話題だったね。

じゃ今からそうしようぜ、向こうで質問されるとごちゃごちゃする

>>302
CSS/DHTMLバグ辞典スレッド 第３版
>ＣＳＳ（とDHTML）のバグ報告、お待ちしてます。
>※報告の際はブラウザ名・ヴァージョンを明記してください。
>再現条件をつきとめるため、必要に応じてソースを出して下さい。

別に向こうで質問禁止とは言わないが、
せめてどのOS、ブラウザで再現されるバグか、
仕様のどの辺りに抵触してると言えるかくらいまとめて欲しいわけだが。

ところで逆切れ>>290はどこ行ったんだろう…

バグの話ではないかの如く理不尽に排斥してきた>>280・>>283もどこに行ったのやら。

>>290はじめ何か勘違いしてるのがいるみたいだから言っておくが、
『IEではこうなのにMozillaではこうだからバグ』
『自分の意図した通りにならないからバグ』
じゃないからな。バグ辞典スレに報告する前に仕様書に目を通せ。
自信ないならこのスレで質問すればいいし。

>>306
で、お前さんは>>291のようにどういうバグと考えられるか意見したのかね？

バグかどうか判らないから質問したんだろ。
それを理不尽に排斥したのが>>280・>>283とかだった。
バグだ！と報告するだけではなく、バグか？と訊くのもいいんでない？

>>308
>>285

>>308
質問スレで質問するのは全く問題ない。
バグかどうか判らない状態でバグ辞典スレに質問するなということ
を言ってるんじゃないのか？どうせ住人もかぶってることだし、
わざわざスレを分けてるのだから分別をつけたほうがいいに決まってる。

そもそも仕様書すら読まない奴が何をもってバグだと思うのか
わからんが。

>>309
　>>287
で、今の所、バグでないとの説明は無く、バグであるらしいとの意見のみ出た。

そろそろ>>290の恥ずかしい「釣りでした」宣言↓

バグである蓋然性が高ければ、バグ辞典スレッドに提出して尋ねた方が、分担できてよいと思ふ。
今回の場合、>>293が正しければ>>280は誤りで>>282が正しかったわけだが、さて。

俺は仕様書読んだ上で>>293で書いた通りMozillaのバグだと思うんだが、
仕様書見落としてる部分もあるかもしれないし突っ込みが欲しいんだが。
バグで確定ならあっちに報告したほうがいいし。
つうか意見も言わずに>>290以降のしょうもない揚げ足取りや
逆ギレするだけならバグ辞典スレには来るなと言いたい。

あんまり初心者過ぎる質問も困るが、
無闇にバグ辞典スレッドの敷居を高くすることもないよ。（>>283とかね）

＞バグで確定ならあっちに報告したほうがいいし。
見てないの？　>>279既出だけど。
http://pc2.2ch.net/test/read.cgi/hp/1050844510/904-

>>316
そっちはまだIE/OperaのバグなのかMozillaのバグなのか断言されてないし。

だから>>279の言った通り、あっちに書けば？　私はMozillaのバグだと見る、ってさ。

結論
>>287=>>290のバグ（脳味噌）

厨の脳内は他人任せがデフォルトかつ質問者＞＞越えられない壁＞＞回答者

↑こういう風にバグという言葉を安易に誤用するから荒れやすくなる

正直どいつもこいつもいい加減ウザい。

春ですな。

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

287≠290なんだけど。

>>290

3カラムのページを作っているんですが、http://ascii24.com/みたいにしたいんです。
今やっているのは、CSSで

#contents { z-index: 3;margin-right:200px;margin-left: 200px; }
#right { z-index:2; position:absolute;top: 135px;right: 20px;width: 150px; }
#left { z-index:2; position:absolute;top: 135px;left: 20px;width: 150px; }

HTMLで
<body>
<div id"contents">メインコンテンツ</div>
<div id"right">右側のサブコンテンツ</div>
<div id"left">左側のサブコンテンツ</div>
</body>

と、いう感じですが、これだとブラウザの幅を小さくすると、メインコンテンツは
縮んで細く縦長になってしまいます。

で、#box{ width:800px; }として
<body>
<div id"box">中身全部</div>
</body>

とした場合、800以下では崩れず、スクロールしないといけないんですが、
800以上にしてもメインコンテンツは横に広がらないわけで・・・。
幅800以下では、横スクロールしないといけないけど、800以上だと、
それに合わせてメインコンテンツが、横に広がるようにしたいんです。
左右のカラムの幅は固定で。

どなたか、いい案、ご教授ください。
自分ももうちょっと実験してみます。

>>326
min-widthなんじゃないの？ブラウザがちゃんと対応してるかは不明だけど。

>>326
固定するならpositionよりも、
float:left(right)とmargin-left(-right)の組合せがおすすめ。

>>326>>327
min-widthはIEが対応してない。
だからJavaScriptでウインドウ幅取得して切り替えるしかないんじゃないかな。
ついでにHTMLの書き方間違えてるよ。
正しくは<div id="hoge">。

>>326
id"contents"は単なる=の脱字だとしても
だいたいpositionを設定してない#contentsにz-indexを指定して何の意味があるのやら。

floatでやるならこんな感じか。
<div id="left">左側のサブコンテンツ</div>
<div id="contents">メインコンテンツ</div>
<div id="right">右側のサブコンテンツ</div>
<p style="clear:both;">clear</p>
#contents {margin-right:200px; margin-left: 200px; }
#left {float:left; margin-top:135px; padding-left:20px; width: 150px; }
#right {float:right; margin-top:135px; padding-right:20px; width:150px; }

しかしpxの多用は感心しない。なるべくemとか%とか相対指定でね。

>308
規則の質問（>>274）
揚げ足（>>275）
勘違い（>>276）
指摘（>>277）
揚げ足（>>278）

発端がバグについてであれ、>>274からの一連の流れは「バグについて」ではなくて、「規則について」だ、って言いたかっただけなんだけどね。

せっかく正常な流れになってきたのに。
>>331は放置の方向で。って、わたしが一番放置できてないじゃーん！
と、同人サイトの管理人っぽく

>幅800以下では、横スクロールしないといけないけど、800以上だと、
>それに合わせてメインコンテンツが、横に広がるようにしたいんです。
>左右のカラムの幅は固定で。

眞ん中の#contentsにoverflow:auto;を指定して出來ませんか。
で、#contentsの中には何かwidth:800px;の要素（hrでもいい）をつっかへ棒を入れておくんです。

>>330
それだと本日の課題の最小幅800px固定で、ウインドウサイズを広げるとメインコンテンツは広がる、が実現できないようですが。。。
この課題は興味あります。皆さんがんばって。俺もやってみるです。

あ、駄目ですね。忘れて下さい。

>>332
ごめんなさい。悪意はなかったんです。

メインコンテンツのdiv内の右側に右コンテンツ入れればそれっぽく見えるかな？

337じゃだめだ。忘れてください。

min-widthが使えない以上スクリプトで動的にwidthを変化させないと
無理なんじゃないかなあ。

う〜む、縦方向のつっかえ棒は有効だが横方向はだめなのかな〜。

ＦＡＱにある、overflowによる疑似フレーム（疑似position:fixed;）で、どや？
http://www.fromdfj.net/html/sample/overflowsample04.html
http://kobit.info/files/frame.html

なんで800pxにするのかねえ。

横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
http://pc2.2ch.net/test/read.cgi/hp/1031302476/l50

>>331　だとしても、>>280は舌足らずに過ぎたな。

>>343
ごめんなさい。
ちなみに俺は>>275

326です。
みなさん、ありがとうございます。自分は、Movable Typeで初めてのHP作成、
HTML、CSSを勉強中です。
http://blogstyles.com/mt/3colview.html
↑
ここのmain indexとスタイルシートを改造しているところなんです。
>>330
まだcssもほとんどそのままなんで・・・。

>>343
横幅800に固定っていうよりは、ブラウザで、横の情報量が一度に表示出来る
最低サイズを、横800として、800以下の人は、スクロール or 見づらいなら
ブラウザ拡大（モニタ自体が、800以下の人は拡大しようがないけど・・・）で見て、
800以上の人はブラウザのサイズに合わせて、メインコンテンツの情報量が、
より多く一度に見れるように、ってしたいんです。

さらに、実験続行します。うまく行ったら報告します。

>>343-344
もういいよ。また>>290みたいな厨が戻ってきたらうざいから。

>>345
>最低サイズを、横800として
だからそれがいかんて。横スクロールが出るでしょ。
最低幅640位にしておけ。

>>343
あ・・・、自分が言っていることも、結局、横800固定ってことになりますよね・・・。
すみません、「横幅800固定っていうよりは」の部分、取り消します。

さっきの返事、>>343じゃなくて、>>342でした。
>>347
はい、それに気付いてなかったんです。640ぐらいがいいかなあと
自分でも思いました。

疑似min-widthの実現、、、できないなぁ。

javascriptでoffsetWidthかなんかですかね。

min-widthの使い方って
<div style="min-width:500px;max-width:1600px;border:solid 10px gray;">
こんな感じでいいのでしょうか？
Mac OSX safari1.2, mozillaFireFox, NN7.1 以上は正常動作
OSX IE ウインドウ・リサイズでクラッシュ、OS9-IE 無効
です。

>>351
クラッシュすんの！？

osx opela 6も正常動作しますね。winIE macIEだけ別に対策すればいいんでしょうかね。

OSX10.3 IE5.2ですが、ウインドウリサイズをぐりぐりしていると確実にクラッシュします。
<div style="min-width:500px;max-width:1600px;border:solid 10px gray;">
123<br><br><br></div>
書き方が違ってますか？1600pxはモニター最大解像度。1500pxと書き換えて試しても落ちます。

>>345
高解像度環境では無駄なスペースを強制されることになり、
画面の広さを有効に使えないので残念な思いをすることになる。
パーセンテージかem値でバランスを取れないものか、考察して欲しい。
ユーザ自身が読み易い幅にリサイズして閲覧する自由を与えて欲しい。

マルチカラムは画面に表示する情報量を多くしてくれる。
その反面、キャンバスの大きさが一定しない
ウェブコンテンツにおいては余り好ましくないとも言える。

この状況は、CSS3 では改善されるだろう。
Media queries
http://www.w3.org/TR/css3-mediaqueries
Multi-column layout in CSS
http://www.w3.org/TR/css3-multicol

http://www.w3.org/TR/css3-multicol/multicol-flow
これは早く実現したいものです。

質問です。
<table align="center">
<tr><td><a href = "./hoge">hoge</a></td><td rowspan=2><img src="hoge.jpg" alt ="hoge.jpg"></td></tr>
<tr><td><a href = "./hoge">hoge</a></td></tr>
</table>

を

<table style="margin-left:auto; margin-right:auto; widht:100%">
<tr><td><a href = "./hoge">hoge</a></td><td rowspan=2><img src="hoge.jpg" alt ="hoge.jpg"></td></tr>
<tr><td><a href = "./hoge">hoge</a></td></tr>
</table>

に書き換えたんですがセンタリングが消えてしまいます。どこを直せばテーブルをセンタリングできますか？

>>357

>>1から戻って調べろ。
どうしてもわからなければ>>4の下から３番目のサイトに飛んで虱潰しに読み漁れ

>>358
見てきます。

それと>>357でのスペルミスは直してみましたが、原因はそれじゃないんですよね。。
<table style="margin-left:auto;margin-right:auto;width:100%">

また後で来ます。

調べる前に聞きたいことがあります。
357のは文法ミスですか？それともIE6ではちゃんと表示されないだけですか？

なんか基本的なとこで勘違いしてた。
そのままスルーしてください。

>>360
tableをセンタリングしたいんでしょ？
センタリングってことは左右にマージンを設けたいんでしょ？
それで "width:100%" なんて指定したら "幅めいっぱい" になるのは当たり前だと思うんだけど。
widthの意味わかってますか？
調べる前に聞くんじゃなくて調べてから聞くのが普通の質問者の態度じゃないかい？

>362　それ以前に、テーブルを使う理由がないよ。
p要素が2つもあれば済みそうだ。
そっちの方がCSSを書くにも簡単だろうし。

まあ、スレ違いなわけだが。

<dl>
　<dt><img src="example.jpg"></dt>
　<dd>
　　<a href="foo.html">foo</a><br>
　　<a href="bar.html">bar</a>
　</dd>
</dl>
dt { float:right; width:50%; }
dd { padding-right :50%; }
漏れならこんな感じでﾏｸｱﾌﾟする。
ｽﾚ違いｽﾏｿ

背景に少し縦長の画像を中央にひとつおいて、
それを画面を小さくした時に下の方が画面から切れても
クロールバーで全部見ることができるようにする方法ってありますか？

>>365
特に何もしなくても普通にできますよ。
とりあえず質問する前にどう試したのかな？

>>366

body{
background:url("img.jpg") center no-repeat;
}

でやってたんですがこれでは画面が小さくなって画像が切れても
スクロールバーは出ませんでした。
もしかして根本的なことから間違ってますか？

よく考えたらcenterだと画面小さくしたら下だけじゃなくて
上も同じだけ切れるか…。
なんかぐだぐだなのでもう一度悩んできます、すんません。

>>367　根本的に間違ってます。背景なんだからスクロール関係無し。

>>367
bodyの内容がスクロールさせるだけの量がないならそりゃそうだ。
背景画像を指定してる要素に画像分のheightを指定してみてはどうでしょうか。

>>369-370
なるほど。
なんか自分の人生の敗因がわかった気がします。
参考にします、ありがとうございました。

>Q10.リンクを新しいウィンドウで開かせるにはどうしたら？
CSS3 Hyperlink Presentation Module なる草案が存在したりする。
http://www.w3.org/TR/css3-hyperlinks
http://www.toybox.jpn.org/studio/css3-hyperlink/
ターゲットの制御が CSS の範疇なのか疑問だが、
ユーザースタイルシートで制御できるのは有り難い。

お世話になります。
ページの左側に常時メニューを表示できるよう（フレームを使ってるような）
にさせたいのですが、どうしたらいいのでしょうか？

>>373
書けばいいじゃん

フレーム使いたくないんだろ。
fixedしか思いつかんが。

すみません。。。
あのぅ〜、どのように？

>>375
そうです。
事情がありフレームは使いたくないのです。
よろしくお願いします。

div　{border : solid ;
　　　width : 100% ; }
dt　{float : left ; }
.b　　{height : 100px ;
　　　overflow :auto ; }
<div>
　<dl>
　　<dt><img height="300"></dt>
　　<dd>
　　　<p><br>あ</p>
　　　<p class="b">（長い文章）</p>
　　</dd>
　</dl>
</div>

WinXP+IE6で、画像の下が切れてしまうのですが、全部表示するにはどうしたらいいんでしょうか？
divの枠の中に納まるようにしたいんです。

>>376
その１、IE対策
左部分をAブロック,右部分をBブロックとするなら
bodyのスクロールバーを非表示にして、Bブロックに対し、
overflowで適当な高さにし、スクロールバーを出させる。
相対的にAブロックは固定になるはず。

その２IE対策しない
>>375も言ってるとおりAブロックをfixed配置。ただしIEに対しては
obsoluteで配置する必要あるので

position:fixed !important;
position:absolute;

--
個人的におすすめはその２だ。

>>376
全てのhtmlファイルにメニューを書き込む。
cssで自動挿入する方法を聞きに来たのだと思ったんだけど、違う？そういう方法はない！

>>377
擬似フレームあるいは擬似positon:fixed
http://members.jcom.home.ne.jp/jintrick/Personal/d200109f.html#d2001_09_03a5

>>380
http://pc2.2ch.net/test/read.cgi/hp/1005633760/673

>>378
floatの使ひ方がよくわかってゐないやうです。
ＦＡＱ（>>6）のA4を讀んでから質問しませう。

>>383
すみません、floatはdtではなくimgのつもりでした。

それと、ddを100％にするときちんと表示されるんですが、
そうすると文章が回り込まなくなるんです。
どうか教えてください。

>>384
結局何がやりたいのかわからない。
書き直したソースと、どんな表示にしたいかを、出してくれない？
dt・ddを横並びにしたいのならＦＡＱのA8（>>7）既出。

>>382
そりゃSSI使ってincludeでしょー。それは漏れもやってる。
漏れがいったのは、「CSSを使って」メニューを自動挿入する方法はない！だよ。

って、ないよね？
あるならやりたい。

>>378　>divの枠の中に納まるようにしたいんです。
既に>>383指摘済みだが、>>6の「浮動要素の高さもheightに含めさせる方法」は見たのかね。

>>373
元の質問はフレームのように全てのページで同じメニューを表示させたいのか、
フレームのようにメインのコンテンツが下にスクロールしてもメニューを表示させたのか、
どっちなの

>>385
div{border : solid ;
　　width : 100% ; }
img{float : left ; }
.b　{height : 100px ;
　　overflow :auto ; }
<div>
　<dl>
　<dt><img height="300"></dt>
　<dd>
　　<p><br>あ</p>
　　<p class="b"><br><br><br><br><br>
　　　　　　　　　<br><br><br><br>（長い文章）</p>
　　</dd>
　</dl>
</div>
できたらこのソースをIEで見てほしいのですが、
ウィンドウサイズを変更すると意図したレイアウトになります。
（画像の切れていた部分が表示される）
これを、最初からこの状態にしたいのです。

>>387
確かにclearすると意図したレイアウトになりますが、
レイアウトのために要素を追加するのは違う気がするのですが…
そういうことではないんでしょうか？

>>389　
次のこと、ちゃんとわかってるのか心配だな。

float:left;で回り込むのはテキスト（imgを含む）だけです。
ブロックを横並びにするには、後続要素にも“float:left;”なり
“margin-left:（浮動要素のwidth）;”なりを指定しなければなりません。
WinIEの間違った実装で誤解しないで下さい。
　フロートに後続する要素のボックス幅がフロートに合わせて短縮される(IE6)
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

>>389
dt・ddを横並びにしたいのならＦＡＱのA8（>>7）既出と言ったでしょ。
結局何がやりたいのか不明だが、これでいいの？　（IE6、NS7で確認）
div {border:solid; width:100%; height:300px;}
dl {margin:0;}
dt {float:left; width:200px;}
dd {margin-left:200px;}
.b {height:100px;overflow:auto;}
<div>
<dl>
<dt><img height="300" width="200"></dt>
<dd>
<p><br>あ</p>
<p class="b"><br><br><br><br><br><br><br><br><br>（長い文章）</p>
</dd>
</dl><!--br style="clear:left;"-->
</div>

>>389
>レイアウトのために要素を追加するのは違う気がするのですが…
それを言ったら、そもそもfloatは段組レイアウトのためのプロパティではない。
裏技として応用してるんだから。

float:left;とかやるとほぼ必ずその後でclear:left;の要素をいれなきゃならない。
例えば、<br style="clear:left"> って文書構造と関係ない要素ですよね。
でも、例えば<li><a style="display:block;"><span style="display:block;width:100px;float:left; padding:3px;">ほげ1</span>
<span style="display:block;width:100px;float:left; padding:3px;">ほげ2</span>
<br style="clear:left"></a></li> とかしなきゃいけないし、IEでは<a>がdisplay:blockでもクリックするとその中身のそれぞれの矩形を
描画しちゃって汚いから、<a>内の要素全てを<span style="display:block;"></span>で囲わなきゃいけない。
なんか文書構造とレイアウトの分離ってまだまだなのかな？皆さんfloat:leftの後のclear属性は何につけてるの？

なんでspanにdisplay:blockなんて適用してるんだ…ｷﾓｲﾖ

>>393　そのソース、何がしたくてそんな面倒な指定してるのか、見えない。

>>393
気持ち悪いソースだな

>>393
ＹＯＵ！すべてのスタイル指定をはずしなさい

>>390
理解できてませんでした…
でもDDをfloatすると、文章（先のソースの「あ」とあるところ）が画像の高さを超えたとき
画像の右から下へ回り込みませんが、これは仕方ないんでしょうか？

>>391
DT・DDを横並びにするだけではなく、文章を回りこませたいんです。
<div>〜</div>は1ページに複数あって画像のサイズ・文章の量はまちまちなので
DIVの高さやDTの幅を固定することはできません。

折りたたみ式の物を作っていて
<div id="base1" style="display:block;">
[ <A href=# onClick="e600.style.display=(e600.style.display=='none')?'block':'none'; return false;">631</a> ]
[ <A href=# onClick="e700.style.display=(e700.style.display=='none')?'block':'none'; return false;">651</a> ]
</div>
<div id="base2" style="none">
<div id="e600" style="display:none">600600600</div>
<div id="e700" style="display:none">700700</div>
<div>
という状態なのですが
[600]をクリックして[700]をクリックしたときに
600600600の表記を消したい(折りたたみたい)のですが
それを可能にする事は出来るでしょうか？
環境はWINXPでIE6.0です。
スレ汚しでしたら申し訳ありません。
どうかお願いします。

<div id="base1" style="display:block;">
[ <A href=# onClick="e600.style.display=(e600.style.display=='none')?'block':'none'; return false;">600</a> ]
[ <A href=# onClick="e700.style.display=(e700.style.display=='none')?'block':'none'; return false;">700</a> ]
</div>
<div id="base2" style="none">
<div id="e600" style="display:none">600600600</div>
<div id="e700" style="display:none">700700</div>
<div>

すいません。
一部間違ってました。

>>399
onMouseoutで非表示にさせるとか？

>>398　
ddのブロックを回り込ませたいのでなく、ddの中の文字列のみ回り込ませたいのなら
別にddに何も指定しなくてもよいが。
あとは>>389のソースで、</dl>の後ろに<br>でも<hr>でも入れてclearかければよし。
hrの場合はMozillaのQuirksモードでのバグ除けに　hr {display:block;}を追加。

>>394,395,396,397
spanにdisplay:blockしてるのはテーブル風レイアウトにするために横幅の指定をしたいからで、
この場合には<li>が<tr>であり、<span>が<td>であるみたいな感じです。
li内の要素の区切りにspanを使うのは<li>内全体を<a>適用させてクリックしやすいようにしたいからなんですけど、変でしょうか？
ひとつのhtmlソースからスタイルシートでいろんなレイアウトをできるように、試行錯誤してるのですが。
ベテランの皆様、ご指導くださいまし。
http://homepage.mac.com/d130/csstest/span_display.html
（IE用の細かい対策はまだしてません。IEではa:hoverの背景色サイズが変ですね。）

あと、IEでは要素:before{content:"●"}が効きませんからjavascriptで入れるか、最初から入れといてレイアウトによってはdisplay:none;するかでしょうか。

>>403-404
マークアップから見直した方がいいと思われ。
今やってみたが同じようにできた。ソース全部はっつけるわけにゃいかんから概要だけ。
<ul class="item">
　<li>製品名</li>
　<li>寸法</li>
　<li>色</li>
　<li>価格</li>
</ul>
テーブルっぽくする
ul.item {
　margin:0; padding:0;
}
ul.table li {
　display:inline;
　float:left;
　width:20%;
　border:solid 1px #000;
}

すまん、>>405のul.tableはul.itemに置き換えてくれ。

リストっぽくする
ul.item {
　margin:0; padding:0;
　width:50%;
　border-top:solid 1px #000;
　border-bottom:solid 1px #000;
}
ul.item li {
　list-style-type:none;
}
リストでさらに横に並べる
ul.item {
　margin:0; padding:0;
　width:50%;
　border-top:solid 1px #000;
　border-bottom:solid 1px #000;
}
ul.item li {
　display:inline;
}
ul.hlist li:before { content:'●'; }
ul.hlist li:after { content:'／';}

あーたの言ってるのはつまりこういうことじゃないのか？
FireFox0.8で確認。

漏れも今勉強中の身だが、<li>1つに4つも要素を含めるのはなんだかなぁと思う。
最初のテーブル的レイアウトのために書いた気がする。
さらに元のhtmlソースに近づけるなら
<ul class="items">
　<li>
　　<ul class="item">
　　　<li>製品名</li>
　　　<li>寸法</li>
　　　<li>色</li>
　　　<li>価格</li>
　　</ul>
　</li>
　<li>
　　<ul class="item">
　　　<li>製品名</li>
　　　<li>寸法</li>
　　　<li>色</li>
　　　<li>価格</li>
　　</ul>
　</li>
</ul>
こうするんじゃないのかねぇ？

>>394さん、ありがとうございます。
<li>要素をdisplay:inline;にして横にならべた場合、テキストの量によって幅が変わりますので
各行でtdに相当する部分がそろわなくなるため、span{display:block}とした次第です。
あと、複数の<li>要素をまとめて<a>で囲むことはできないので、こな場合は<ul id="item">にjavascriptでonclick="..."となり
ブラウザの「戻る」ボタンが効かなくなるのが痛いところで、、、、いづれにせよ、普遍的に使えるhtmlマークアップと
変幻自在なスタイルシートのノウハウを課題として、もう少しがんばります。

確かに<li>に4つも入っているのが気持ちわるいんですよね。

>>407
意味的には確かにそうでございまして、最初そうやってたんです。
<a>タグがブロック要素だったらいいのにと、、、

>>408
んじゃあもうテーブル使っちゃっていいんじゃない？
サンプル記述を見ると製品表みたいだし、ちょっとやってみる。

ｽﾏﾝ、漏れには手に負えなかった…。
<table summary="製品" class="item">
　<tr><th>製品名</th><td>example</td></tr>
　<tr><th>寸法</th><td>30x20x10</td></tr>
　<tr><th>色</th><td>White</td></tr>
　<tr><th>価格</th><td>¥3000</td></tr>
</table>
なマークアップにして同じようにテーブル、縦リスト、縦の横リストには出来たんだが
javascriptがうまくいかんかった…。
漏れもこういった場合はどうすればいいか興味あるので誰か助けてやってPlz…

漏れ的解決案で頭に浮かんだのはこれ。これならﾏｸｱﾌﾟ的にも問題ない予感。
テーブルっぽいレイアウトもリストっぽいレイアウトも縦リストの横リストっぽいのも出来る。
しかしなんか釈然としないのでもっとｲｲ解決法があれば教えて下さいorz
<ul class="item">
　<li>
　　<a href="#">
　　　<span class="header">製品名</span>
　　　<span class="header">寸法</span>
　　　<span class="header">色</span>
　　　<span class="header">価格</span>
　　</a>
　</li>
</ul>
ul.item {
　margin:0; padding:0;
}
ul.item a {
　color:#000; background-color:transparent;
　text-decoration:none;
}
ul.item span.header {
　float:left;
　width:20%;
　border:solid 1px #000;
}

ありがとうございます。確かに行全体をA対象にするのを別にすればtableにするのも順当な線ですね。
やってみたら
table.nariyuki td {display:inline;}
table.nariyuki td:before{content:"●"; }
table.nariyuki td:after{content:"／"; }
とかちゃんと思い通りになりますね。
しかし、もしかしたらもう「xmlへ行っとけ！」という神の啓示なのかも。。。

>>414
批判したのに力になれなくてｽﾏｿ…。
もっと修行してくる。

>>415
<table><tr><td>に対してdisplay:inline; display:list-item; などを適用して表示形態を大胆に変更できるというノウハウの習得がありました。
trは通常border指定しても線を表示しませんが、trにdisplay:block;属性を与えると線を表示するようになりますね。
テーブルレイアウトからの脱却というご神託のもとでlist要素ばっかり使ってたので、いろいろ発見できましたよ。

>>403
>li内の要素の区切りにspanを使うのは<li>内全体を<a>適用させてクリックしやすいようにしたいからなんですけど、変でしょうか？

変です。
レイアウトでなくて表ならtableでよし。
クリック可能な面積をふやしたいなら
<td><a href="">123</a></td>でa:{display:block;}で十分。

>>399-400
これでいいのかな。
<div id="base1">
[ <A href=# onClick="e600.style.display=(e600.style.display=='none')?'block':'none'; return false;">600</a> ]
[ <A href=# onClick="e700.style.display=(e700.style.display=='none')?'block':'none'; e600.style.display=(e600.style.display=='block')?'none':'none'; return false; return false;">700</a> ]
</div>
<div id="base2" style="none">
<div id="e600" style="display:none">600600600</div>
<div id="e700" style="display:none">700700</div>
<div>

divである#base1に style="display:block;"は不要だから省いた。

>>417
><td><a href="">123</a></td>でa:{display:block;}で十分。
この場合に、<tr>（行）全体を<a>対象とするには各<td>内全てに<a>を記述する？
<td class="製品名">内だけ<a>入れて他は<tr>にjavascriptで補う？

> <tr>（行）全体を<a>対象とする
だから、なんでそんな必要があるのかが、全然わからない。
> 各<td>内全てに<a>を記述する？
やりたければそれでいいのでは？

>>418
ありがとうございます。
そうですよね、二つだったらコレになるんですよね。
ただリンクが増えていった場合なんですが
[600][700][800][900]とした時に
[600]→[800]で600の表記が消えて
[700]→[800]で700の表記が消えるといったような感じで
前に表示されたものが消せるといった方法はありますでしょうか？

すみません、簡単なことだとは思うんですが、いろいろ調べてみたけどわからなくて・・

インラインフレームを使用しようとしています。
それで、最初は一つの予定だったので、

<style type="text/css">
<!--
iframe {
margin: 5% 10%;
border-color: #FF00CC;
border-width: 3px;
border-style: dotted;
}
-->

ってやっててうまくいってたんですが、もう一つ右側に作ろうと思いました。
で、その配置をスタイルシートで指定したいんですが、
一つ目のインラインフレームとの区別はどのようにすればいいんでしょうか。
どなたかお願いします。

超基本なので>>4見て勉強しれ

>>421　DOMのことはJavaScriptスレッドで訊いた方がよいかも。

はい。すみませんでした。
一応全部見てみたんですが…。
関連しそうなところを探して見てるからわからないんでしょうか。
スタイルシートそのものの基本からやるしかありませんよね。
もう一度基礎から見直してみます。

>>425
classやidを指定しる！

テーブル使わずにできたよ！
<div class="box">
<div class="menu">
<a href="./hoge1">hoge1</a><br>
<a href="./hoge2">hoge2</a>
</div>
<div class="img">
<img src="hoge.jpg" alt="end.jpg">
</div>
</div>

.box{width:700px;margin-left:auto;margin-right:auto}
.img{float:left;width:650px}
.menu{float:left;width:20px}

ｳｯﾋｮｰ

>424
やっぱしもうそっちいくしかないですかね・・・。
とりあえずいってきます

すいません、初心者で質問なのですが。
MacのIEとsafariから確認してます。

リンク上にカーソルが乗ったときに、リンクの周りに
dottedの枠線を出したいんです。

a:hover{
border-style: dotted;
border-color: red;
text-decoration:none
}

で出たんですが、出てきた枠線に押されてリンクの文字が
すこし左にずれてしまって、枠線をずらさずに出す方法が
わからないんです。

http://internet.impress.co.jp/maniax/200301/tips1-3.html
みたいにしたいんですが・・・。


メニュー内でつかっているのが悪いみたいなのですが・・・
これがHTMLソースです

<div id="menu">
<p><a href="photo.html">Photos</a></p>
</div>

他にはどんなのがあんの？

>>429
paddingで枠線分のスペース確保すれ。

>>431
> paddingで枠線分のスペース確保すれ。

えっと、CSSファイルの中の、p のところに
padding-left: 1em
とか入れてみたりもしたんですけど、やっぱりborder-left-widthの分だけ
リンクの文字が右に押されちゃうんです。
border-left-widthを1pxとかにすると、
ボタンを押しているみたいに見えて、まぁそれはそれで見た目は悪いわけではないんですが・・・

コピペし忘れたんですが：

div#menu{
float: left;
margin-left: 20px;
margin-right: 10px;
width: 15%;
border: 1px solid black; }

ul{
list-style-image: url("images/menu_arrow.gif");
list-style-type: none;
padding-left: 1em}

li{
margin-left: 30px;
margin-top: 10px;
margin-bottom: 10px;}

というメニューの中で、<li> </li>で囲まれて使っているんですが・・・・。
長文すいません

a { text-decoration: none; border: 4px dotted #B0FFB0; }
a:hover { border-color: red; }

>>429 見本にもあるようにaは最初からborder4pxがあり、平時は背景色と同色。
hover時にborderカラーを変えるだけなので動かない。

>>433

ああ！　なるほど！
そういうことだったんだ、ありがとう！

同じようにしたら動かなくなったよ。

けどなんでa{} が２つも <style></style>の中にあるのかイマイチ分かってないので
ちょっと勉強しきまつ・・・

ありがとぅ

うん、なんかきっつい所に居るようだから適度に勉強がんばってきてね

1200行ほどあるテキストに行数をつけ、さらに10行ごとに２色の背景色を交互に変える必要があります。
また、10行ごとに隙間をあけたくないのでolにマージン指定しました。

.color1{background:背景色1;}
.color2{background:背景色2;}
ol{margin-top:0px;margin-bottom:0px}

<div class="color1">
<ol>
<li>1行目</li>
・
<li>10行目</li>
</ol>
</div>
<div class="color2">
<ol start="11">
<li>11行目</li>
・
<li>20行目</li>
</ol>
</div>
というふうに設定したところ、divとdivの隙間は消えたのですが、
ネスケではうまくいくのですがIEだと1000行目以降の4桁目（千の位）が
divから左にはみ出してしまいました。
かといってolにmargin-leftを指定して、IEでキレイに出る程度に指定すると
今度はネスケで表示が崩れます。（margin-left:50pxでした）
divとdivの間に隙間を作らず、かつ、1000行目以降までキレイにdivの中に納めるには
どのように指定したらいいのでしょうか。
アドバイスお願いします。

>>436
>margin-left:50pxでした
px単位ではなく、em単位を利用しましょう。
現在のフォントサイズに対して相対的であるため、
それに合わせた程よい距離に表示することができます。

IE と Mozilla では UL, OL の標準スタイルが異なり、
Mozilla では「左パディング」で余白を調整しています。

以上のことを踏まえると、
次のように設定するとよいでしょう。

ol {
margin: 0 0 0 4em;
padding: 0;
}

Mozilla Classic（Netscape 4.x）ではどうなるか知りません。

あと、DIV で OL を括る必要はないと思います。
上述の例のマージンとパディングの余白設定を逆にして、
背景指定すれば、番号も含めた領域に背景が描画されます。

ol {
margin: 0;
padding: 0 0 0 4em;
}
ol.foo {
backround: #fee;
}
ol.bar {
backround: #eef;
}

すいません。スペル間違えました。
「backround」ではなくて「background」ですね。

教えていただいたやり方でネスケIEともにうまく表示できました。
また、marginとpaddingについて今ひとつ理解できずにいたのですが、
これで理解できました。

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

また荒れてたな。ホントおまいら成長しないな・・・
初心者やら厨やらHTML知らない奴ら排除したければスレタイにマニアでも上級でも付けとけよ。
もういい加減おまいらマニアの閉鎖的空間キモイだけだって。

質問しに来てるやつらもCSS・HTML書式にこだわる必要性を考えてみろよ。おまいら何かのプロでも目指してるのか？
言っておくが俺の周りにいるWebの仕事やってる奴で、HTMLまともに書ける奴なんて正直いないぞ。
まぁここで偉そうな事言ってる奴も基本的にソースで巡回ページなんて決めないだろうし、
2chのcgiが吐き出すソースもこいつらから言わせればおかしいだろうが普通に使ってるしな・・・ははは

煽りｷﾀｰ

恥ずかし気もなく
> 言っておくが俺の周りにいるWebの仕事やってる奴で、HTMLまともに書ける奴なんて正直いないぞ。
こんなこと言えちゃうんだ

釣られちゃったｽﾏｿ

>>441
　釣りを承知で。

> 言っておくが俺の周りにいるWebの仕事やってる奴で、HTMLまともに書ける奴なんて正直いないぞ。
　俺と、俺の知人はそれぞれ別の場所でウェブデザイナやってるけど、HTMLまともに書けるし、CSSもまともに書いてる。
自分の周りが世界だと思うのはどうかな。

余談だけど、連れのとこは社長が頭が固いんでいやいやテーブルレイアウトしてる。
うちの社長は俺の意見に理解を示してくれてるんで自由にやらせてもらえてる。
「使える」か「使えない」かじゃなくて、「使わせてもらえない」という制約は存在するけどな。

釣りというかコピペですね

>>446
あ、そうなんだ。
で、思うんだが、セマンティックを否定する人ってよく企業サイトを引き合いに出すけど、
企業サイトが依存要素とか使いまくり→ウェブデザイナーがそういうのを推奨してる
と妄想するのかな。「知人のウェブデザイナーが」って発言は本当に知人とは思えない。
本当に知り合いにいるなら「やりたいようにやらせてもらえない」と嘆いてる姿を見るはずなんだが。
#実際、蔵の言う通りにやってる所為で第二、第三の問題が浮上して困難になることも多いし。

CSSでイケてる商用サイトって何処よ？

議論はよそで。

仕事でCSS段組なんて考える人いるんだ。凄いね〜

まあ、大抵の質問はテンプレをちゃんと読めば解決するから
質問が来ないのなら、それはそれでよいことなのだろうが
関係ない話をはじめられるのが困り者。

>>450
まあ、想像を絶する苦労（蔵説得）があるけどな。
それさえクリアすれば蔵には何にも言われなくなる。

素朴な質問です
みなさんのページ作製過程はどんな感じでしょうか？また、膨大なページを作製する場合の過程は？

私の場合本文をすべて書き出した後に<div>等を追加しているのですが、結構時間を食います。
テンプレートなる物を1つ作って文章を上書きなんてのは駄目でしょうかね？

質問です。
ひょっとしなくても、初歩的な気がするんですが、よくわからないので

ページの一番上に画像(例えば600*300)を置いて、下にメニューとコンテンツ(例えば更新記録)を置くとします。
その場合単純に<div>でくくって、floatで左にメニュー、右にコンテンツってのはできるんですが、上の画像の幅(この場合600)の間に収めるにはどういうふうにすれば良いのでしょうか？

んー、説明、判りにくいですか？
折角なんでCSSで組みたいなぁ、と思ってるんですけど…

http://www.macromedia.com/jp/
http://studio.adobe.com/
http://shikaku.impress.co.jp/
http://konicaminolta.jp/
http://www.aol.com/

>453
スレ違い。

>454
＞その場合単純に<div>でくくって、floatで左にメニュー、右にコンテンツってのはできるんですが、上の画像の幅(この場合600)の間に収めるにはどういうふうにすれば良いのでしょうか？

┌─────────┐
｜　　　　　画　像　　　　｜
└─────────┘
┌───┐┌────┐
｜メニュ｜｜コンテンツ｜
└───┘└────┘
てことか？

>>454


┏━━━━━━━━━━┓
┃　　　　　　画像　　　　　　┃
┗━━━━━━━━━━┛
┏━━━━━━━━━━┓Ａ
┃┌───┐┌───┐┃
┃│　　Ｂ　　││　Ｃ　　│┃
┃└───┘└───┘┃
┗━━━━━━━━━━┛

div.a { width: 600px; }
div.b { フロートさせる }
div.c { }
こんな感じ？

恐らく初歩的な事だろうと思いますが自分で調べた所解らなかったので質問失礼します。

div.titlebox{margin-left:auto;
margin-right:auto;
text-align:left;
border-width:0px;
background-color:#B0AC80;
height:10px;
width:50%;}

画面の中央（ど真ん中というわけではなくcenter)に高さ10px横幅50%のボックスを表示させたいのですが↑を入れた所
高さが18pxに表示されるようです、18px以上なら指定通りに表示されるのですが…。

解決策を教えて下さい。

>>458
そのdivの中に10px以上の高さを持った要素が入っているなら、
ブラウザがIEの場合勝手にdivの高さを変更するはず。

>>459
なるほど、そういうことがあるんですね。
<div class="titlebox"></div>
と、していたのになんでだろう??と思ってました。
1pxのスペースを入れてみたところ指定通りのサイズになりました。

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

>>456
>>457
ありがとうございます。
そのとーりです。

tableでしか組んだことないから、変な考え方してたみたいです。
よく考えたら、入れ子にすればすむ話でした。

恥かしい…

>>461
div.aの最後でclearするのを忘れずにね。（既出）

>>462
(つд`:)　ｶﾞｲｼｭﾂﾅﾉﾆ、ｲｲﾋﾄﾀﾁﾆﾃﾞｱｴﾃｳﾚｼｲﾃﾞｽ

strict.DTD で
hr {
height:1px;
margin:0px;
}
としてもIE6.0でみるとhrの上下に空白ができてしまいます。
この空白を埋めるにはどうすればいいのですか？

>>464
hr要素へのスタイル指定
http://cssbug.at.infoseek.co.jp/misc/hr.html

リストの画像をvertical-align:middle;にしたいのですが上手くいきません。
LI{
list-style-image:url("hoge.png");
vertical-align:middle;
font-size:80%;
}
としているのですが何故でしょうか。
どうすればよいのでしょうか？

vertical-align:middle; の意味を誤解してませんか。
liの中味に原因があるかもよ。HTMLもソース出して。

>467
回答ありがとうございます。
HTML部分ですが、<body>内に
<UL>
<LI>aaaa</LI>
<LI>bbbb</LI>
</UL>
のみです。
中身に原因があるかとおもったので、他のソースは外してやってみたのですが駄目でした。

リストの画像がmiddleというよりもtop気味の位置になります。
画像のサイズは10×10です。

ＯＳ・ブラウザとそのヴァージョンは？　
IEとMozillaとでは違って見えたりしないか。>>468

>469
すいません、書くのを忘れていました。
OSはw2kで確認ブラウザはOPERA7.23です。
IEで見てみましたが、
IEでは自分の思った通り、middleの位置にあるような気がします。

li {line-height: 1;} と指定してみるとか
にしてもvertical-alignでlist-imageが影響を受けるのは
単にブラウザがよきに計らってくれてるだけじゃないかな？仕様上は未規定じゃない？

>471
li {line-height: 1;}で思った通りのことが出来ました。
ありがとうございます。

おかけで安眠できそうです。
色々、調べてもかかれてなかったので感謝。

>>472
そのまま永眠すんなよ。

<table border="1">
<tr><td>あいうえお</td></tr>
<tr><td>かきくけこ</td></tr>
</table>


はCSSで書くとどういうふうになるんですか？ボックスを使うと出来ると思うのですが
2行にする方法がわかりません。
.body{
width: 500px;
}

>>474
ＣＳＳで書くのではなく、HTMLで書きます。
段落ならPで、リストならliで、その他divやbrなど、適切にマークアップして下さい。

<hr noshade>をCSSで記述するにはどうしたらよいのでしょうか。

>>476
>>1

出来ました。ありがとうございます。
http://deztec.jp/site/tips/page/p0037.html#others
ここが参考になりました。

既出。
　hr要素へのスタイル指定
　http://cssbug.at.infoseek.co.jp/misc/hr.html

>>457
入れ子にしなくても、B,CのTOPのマージンを画像の高さにすればいいだけのような。

やっぱり最近はCSSも勉強しないといけないのかね。。

覚えといて損はないって感じじゃないのか

いまどきCSSも知らないでよくやってきたね。

もしかしたらCSS以外のスタイルシートで作ってきたのかもしれないぞ

ﾃﾝﾌﾟﾚのﾘﾝｸ見てて疑問に思ったこと…
ブロックレベルのセンタリングのところで

<div style="text-align:center;border:black;">
<div style="margin-left:auto;margin-right:auto;text-align:justify;border:red;">
ブロックレベル要素
</div>
</div>
とあるんですが…
<body style="text-align:center;">
<div style="margin-left:auto;margin-right:auto;text-align:justify;border:red;">
ブロックレベル要素
</div>
</body>
でも同じようにIE、operaとかでもOKなんですかね？
やってみれば？と言われそうだが、IEしか入れてないんですよ

いや、他のブラウザもいれれば、といわれそうだけど



>>480
>入れ子にしなくても、B,CのTOPのマージンを画像の高さにすればいいだけのような
下のコンテンツ部分をボーダーで囲みたいときは入れ子にしないといけないのでは？
他に方法あります？

* { font-weight:bold; }
こう記述すると全てのフォントにboldが適用されるのでしょうか。

>>486
そう記述したらどうなったのか、まずそこから聞かせてください！

ブロックレベル要素をセンタリングする場合の、
text-align:center;
margin-left:auto;
margin-right:auto;
でセンタリングしてその中の文章を
text-align:left;
で左に寄せるやり方は、
http://www.mozilla.gr.jp/standards/webtips0004.html
によると「国際化において問題がある」らしいけど
それ以外になにか問題はありますか？

誘導されてきました。ヨロシクお願いします。
以下のようなフレームを組んだのですが、
<FRAMESET cols="*,750,*" frameborder="NO" border="0" framespacing="0">
<FRAME name="left" scrolling="NO" noresize src="left.htm" marginwidth="0" marginheight="0">
<FRAMESET rows="100,*,100" frameborder="NO" border="0" framespacing="0">
<FRAME name="up" scrolling="NO" src="up.htm" frameborder="NO">
<FRAMESET cols="160,*" frameborder="NO" border="0" framespacing="0">
<FRAME name="sub" scrolling="NO" noresize src="sub.htm" frameborder="NO" marginwidth="0" marginheight="0">
<FRAME name="main" src="main.htm" frameborder="NO" scrolling="AUTO" noresize marginwidth="0" marginheight="0">
</FRAMESET>
<FRAME src="bottom.htm" name="bottom" scrolling="NO" frameborder="NO">
</FRAMESET>
<FRAME src="right.htm" name="right" scrolling="NO" frameborder="NO" marginwidth="0" marginheight="0">
mainとsubフレームに枠を付けたいのです。
cssを使ってそれぞれに枠を付けると、接する部分の枠が2重になってしまいます。
mainとsubをグルっと囲むような枠を付ける方法はありますか？
mainとsubの部分をとりあえずcenterとして、それをさらにフレームに分ければ
出来そうなんですが、フレーム設定ページを増やすのがいやなので、
いい方法があったら教えて下さい。
style="border-width : 1px 1px 1px 1px;border-style :
solid solid solid solid;
で、FRAMESET cols="160,*" frameborder="NO" border="0" framespacing="0"
の部分に属性を付けてみましたが、上手く反映されませんでした。

ＣＳＳでスクロールバーの色を変えようとしたのですが上手くいきません。
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {scrollbar-base-color:white;
scrollbar-face-color:white;
scrollbar-arrow-color:#708090;
scrollbar-highlight-color:white;
scrollbar-3dlight-color:white;
scrollbar-shadow-color:white;
scrollbar-darkshadow-color:white;}
-->
</style>
としているのですが、
どのあたりが間違っているのか御指摘お願いします。

>>489　なぜ四辺に指定してるのかね。接する辺にborderを指定しなければよい。

>>491
なるほど・・・。
目から鱗とはまさにこのこと。
言われてみると当たり前ですが、気づきませんですた。
ありがとうございました！

>>489
根本的に解ってないようだ

>>490
どう「色を変えようとし」てどう「上手くい」かないのかな。
そんな全部白にするのは見づらいから止めておけ。
まさかIE以外で効かないんですとか言ったりしないよね？

>>485
ブロックレベル要素のセンタリングについて。
何がOKなのか意図してることが良くわからないのですが、後者の例でwindowsの
IEでもOperaでもセンタリングされるみたいですが。
IEを聞いているということは、IEを使えない環境なのですか。

>490　嫌われるようなことをわざわざ指定する意味は何か。
まずはそこから問いたいな。
それでも変えたいのなら、とほほにでも行ってみればわかるだろう。

>>485
タダなんだからNetscape7を入れなさい。
Mozillaに合せて作って、IEのバグ対策で修正した方がいいよ。

>>488
それ以外にあったら書いてあるはず。

三角の部分だけ色を残して後は真っ白にしようと思っていたのですが、
デザインはまた考え直すとしても基本のグレーから全く変わらないのですよ。
環境はＷｉｎ９８、ＩＥ６．０です。
他のサイトのスクロールバーの色が変わっているのは分かるので
環境のせいということは無いと思います。…多分。

>>496
タラタラ書いているうちにレスが！
申し訳ありません、とほほ逝ってきます

>>498
スクロール・バーをつかめないデザインは絶対によした方がいい。
あと、CSSソースに問題は無いみたいだから、HTMLをチェックしなさい。

とほほ逝ってきましたが原因分からず、>>500さんの助言どおり
ＨＴＭＬをチェックしたところ</body>が抜けていました。アホだ。
それを直しても上手く変わらなかったので思い切って
<!DOCTYPE>のＵＲＬ部分を消したら上手く表示されるようになりました。
ＨＴＭＬは奥が深い…。

スクロールバーのデザインはやっぱり考え直そうと思います。嫌われたくないので…
ありがとうございました。

>>501はDOCTYPEスイッチについて勉強しませう。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

http://cssbug.at.infoseek.co.jp/detail/opera/b049.html
>WinIE6.0互換モードとWinIE5.5ではOpera7同様、body要素に宣言した
>スタイルが閲覧領域のスクロールバーに反映されます。

要するに、scroll-barプロパティはhtml要素に対して指定しておけばいいのだ（IEでは）。

http://www.bibouroku.jp/hp/scroll_bar.shtml
>※ IE5.5ではHTMLタグに対してのスタイル設定は無視されます。

>>495
ごめんなさい
要するに、コンテンツ全体をセンタリングしたいのですが、
１）全体をｄｉｖでくくってセンタリングするのと
２）ｂｏｄｙタグにスタイル入れてセンタリング　中味のdivに左右auto
とするのと違う結果になるのか？ってことです。
ＩＥではtext-alignでセンタリング出来るけど、他は違う、って見たので…
divとbodyの場合では違うのだろうか？と…

tableよりも直感的でないい部分が多くて、なかなか把握できずにいます

長々とすみません。

divもbodyもどちらもブロックレベル要素。結果が異なるわけがない。
直感的にわからないかな。
それに、試せばわかることでしょ。

>>485
>border:black;
なんでborderのwidthもstyleも指定してないの？　思った太さや線で表示されなくても知らないよ。

http://design.xwd.jp/temp8/index.html
http://design.xwd.jp/temp2/index.html
http://design.xwd.jp/temp3/index.html

こういったレイアウトってテーブル使わなくても可能だったりするんでしょうか…？

>>508
余裕で可能。

ほとんど同じ質問になってしまうかな…
http://www.gentoo.gr.jp/
のページは、左側の列の背景色が一番下まで続いてますが、
これってテーブルじゃないと無理ですか？
左と右でdivを使ったら、背景色が文字のあるところまでしか入れられなかったので。

俺はそういう場合、そこで言う左側divの余った下に背景色が…
だみだ。説明でけん。

┏━━━┓┏━━━━┓
┃ 左div .┃┃　　　　　 .┃
┗━━━┛┃　　　　　 .┃
┃　　　　.┃┃　右div　 .┃
┃ 背景　┃┃　　　　　 .┃
┃　　　　.┃┃　 　　　　 ┃
┗━━━┛┗━━━━┛

こんな感じに左divの下に背景が見えるようにして、左divと背景の色を統一してる。
でもこれだと右divの方が左より小さくなった場合にぶっ壊れる罠…。

どうすればいいですか？(結局便乗質問)

>>510
左と右をdivで囲ってしまえ

スタイルシートを使って5×5のテーブルを枠の太さ1pxで
中の線も表示したいのですが、ぜんぜんやり方がわかりません。
どなたか教えてください。

>>512
divで囲むまでもない、bodyで囲まれてるではないか。
>>513
　少しは自力で學習しなさい。>>4は見たのかな？
　　table, th, td {border:1px solid #000;}

>>512
左divをleft
右divをright
全体を囲むdiv(bodyでもいいが)をwrap
表示する背景（左divにあわせたもの）をbg.pngとする

/* CSS */
#wrap {background:#fff url("bg.png") repeat-y;}
#left {
width:200px;/*幅　自由*/
background:transparent;/*透明*/
float:left;回り込み
}
#right {margin-left:220px;/*左の幅＋α*/}
<!-- HTML -->

<div id="wrap">
<div id="left">左テキストの文章</div>
<div id="right">右テキストの文章</div>
</div>

こうすれば回り込みも問題ないはず

>>515
#wrapにborderをつけてごらん。#leftと#rightを囲んでくれるのはWinIEだけ。
floatで段組したら、親要素の末尾にclearを指定した要素を入れないと駄目。
これ既出ね（特に>>6のA4「浮動要素の高さもheightに含めさせる方法」）。

註：>>516は左テキストの方が右テクストより高さがある場合に顕著。

>>514
これだと結局見た目が2pxの線になってしまうんですよ1px＋1pxで、、

>>518
だから>>4を見なさい。
http://hp.vector.co.jp/authors/VA022006/css/tables.html#borders
http://msugai.fc2web.com/web/CSS/tables.html#coll

>>518
table{border-collapse:collapse;}
table,td,th{border:1px solid #000;}

これでよか？

CSSで

第６条　○○○○○○○　（改行）
　　　　　○○○○○○○

のような、右の部分だけ改行すような場合。
どのように指定すればよいのでしょうか？

<br />

>>521
７文字で折り返したいんだね？
<dl>
<dt>第６条</dt>
<dd>○○○○○○○<!--折返し-->○○○○○○○</dd>
</dl>
dl {font-family:monospace;}
dt {clear:left; float:left; width:3.5em;}
dd {margin-left:4em; width:7em;}

>>520
ありがとうございました。マックで見てたので解りませんでしたが、
隣のウィンで見たら表示されました、
border-collapsってマックはダメなんですね、、、

有り難うございます。
できました！！

一つ疑問があるのですが、
dl {font-family:monospace;}
で指定しているのは、等幅フォントの事でしょうか？
初歩ですみません・・・

border-collapsはWindでも駄目です。
border-collapseならMacでもMozillaが対応してますが。
border-collapseでもMacIE5は駄目です。

＞・OSやブラウザの種類とヴァージョンについては必ず明記してください。

>>4の対応表を見てから質問しようね。。

>>525
そうです

>>525　>>4の解説サイトに説明があります。

>>524
border-collapse使わない方法がありました。

table,td,th{border:1px solid #000;}
table{border-width:1px 0 0 1px;}
td,th{border-width:0 1px 1px 0;}

まだ試してませんが

>521は本文の２行目以降のインデントのことを言ってるんじゃあないかな。

dl要素工夫すりゃあ何とかなるんじゃないかな。
別に規約のようなものはtableマークでもいいと思うけど。

喪舞らのブラウザのフォントサイズいくつにしてるんだ？
漏れは「小」だけど・・・・

結局薬局フォントの大きさはどれがいいの？

ベターでなくベストを教えてくれ！！！！！！！！！！

スレ違いでは？

基本的に「中」
速読する上で小さい文字は読みにくい

つーかcssの質問じゃないじゃん >>531

＞結局薬局
＞ベターでなくベストを教えてくれ！！！！！！！！！！

寒い。

俺はmediumぐらいのが読みやすいと思うけどね。

おまいらはfont指定しないのかと・・・（ｒｙ

chihiroﾀｿ嫌われちゃったみたいよぉ・・・
ttp://www.okiraku-chat.com/bbs_k/k3/joyful.cgi

スレ違いだけど、馬鹿が多いので突っ込んでおく。

「中」とか「小」とか WinIE でしか通用しないローカルな表現は止めろ。
WinIE でもデフォルトのフォントサイズが常に一定とは限らない。
[画面のプロパティ]→[詳細]→[全般タブ]→[画面] で解像度を変更できる。
http://www.kanzaki.com/info/readable.html#win-font

本文は無指定、もしくはbody {font-size:100%;}が最適。
議論はこっちで。
http://pc2.2ch.net/test/read.cgi/hp/1077185914/

>>537-8
thx

WindowsIE6のみに於いて、<div style="height:1px;clear:left;"></div>など、ブロック要素に1pxの高さを与えると
10pxくらいで描画されてしまいます。とりあえず、文字は入っていないのですがfont-size:1px;または0px;を与えると
2pxくらいにはなります。解決方法ご存知ないでしょうか。よろしくお願いいたします。

空divは、よくない。>>540
http://www.mozilla.gr.jp/standards/webtips0021.html

>>541さん、 ありがとうございます。このページは何回も熟読いたしました。
<br style="clear:left">は確かに有効なのですが、１行分の高さを追加したうえで親ブロック要素の底辺を配置することになってしまうので困っております。
デザイン的にこの空きが容認できない場合の方策で困っております。
<div class="親box" style="padding:1em;border:solid 1px gray;"><img style="float:left;width:50px;height:50px;"><p style="float:left; width:20em;">内容</p>
<br style="clear:left"></div>
上記のようにimgとpが共にフロートで最後にbrで止める場合は空白ができません。

<div class="親box" style="padding:1em;border:solid 1px gray;"><img style="float:left;width:50px;height:50px;"><p style="margin-left:55px; width:20em;">内容</p>
<br style="clear:left;"></div>
しかし、上記のようにフロートでない要素をbrで止める場合には親BOXの高さが一行分程度増加します。
さて、どうしたものでしょう？悩んでます。

<div class="親box" style="padding:1em;border:solid 1px gray;"><img style="float:left;width:50px;height:50px;"><p style="margin-left:55px; width:20em;">内容</p>
<img style="display:block;clear:left;height:1px;width:100%;"></div>
1px/1pxのimg要素を横に延ばして使い、display:block;clear:left;　これってちょっと何ですよね？

>>531
http://pc2.2ch.net/test/read.cgi/hp/1076926917/159
http://pc2.2ch.net/test/read.cgi/hp/1076926917/171
http://pc2.2ch.net/test/read.cgi/hp/1076926917/206

http://pc2.2ch.net/test/read.cgi/hp/1077185914/34-35

>>542
次に来る要素でクリアするのではいかんの？

>>542さん、
>>542の場合は親DIVが要素を囲うように生成されるためには親div内でclear;leftされる必要があります。
WindowsIEではこれが無くても親divはちゃんと生成されますが、規格通りに非表示するほとんどの他の
ブラウザでは親divの天地が変なところにきます。（pがfloatでない場合はpの底辺まで、imgの底辺は無視される。
pがfloatの場合は親divは高さを持たない。）

規格通りに非表示する >>規格通りに表示する

>>540
良いか悪いか知らんが，<div style="height:1px;line-height:0"></div> とかするとか。

>>542
良いか悪いか知らんが、<hr style="clear:both;margin-top:-15px;"> とするとか。

h2以外ほとんどdivに頼ってる俺はdiv病患者のようです。
ﾀﾞｯﾃﾐｱﾀﾗﾅｲﾖｳﾅﾝﾀﾞﾓﾉ

>>542
そもそも規格うんぬん言うのなら,
div の子にブロック以外もってくんなよ。

>><div style="height:1px;line-height:0"></div>
これだとWindowsIE6ではやはり高さがぶっとくなります。font-size:1px;とすると2〜3pxになります。
<hr style="clear:both;margin-top:-15px;">
clear:both;やvisibility:hiddenを前提とした場合には<hr>は魔物です。UAごとの差が大きくかつ属性値変更が効かない場合が多いようです。

>>550さん、
>そもそも規格うんぬん言うのなら,div の子にブロック以外もってくんなよ。
初めて効きましたが、divがインライン要素を包含できないのですか？

>>551
バージョンにもよるが。仕様書読もう。
あと、名乗ろうよ番号でいいから。

>>551
そう？漏れは
IE5up、NN7up、でいつもそうしているけど。
ピクセル単位での精度がほしいときは振り分ければいいし。

>>552さん、HTML4.01 strictでは<body>〜</body>間にはブロックレベル要素のみ許されると
知ってましたが、<div>〜</div>間にインライン要素を入れてはいけないバージョンとは何でしょう？
<div> <a><img><a> <a><img><a> <a><img><a> </div>みたいなことができなくなりますよね？(冷汗)

>>553さん、MacOSXやXP上で確認しながらhrをclear:both属性の為に使おうと試したのですが
UAごとに周りの空きがかなり違って難儀しましたですよ。
div height:1pxが10pxるらいになってしまうのはIE6だけですけど。IE5はもってないす。XPに入れられるのかしら？

<div> <a><img></a> <a><img></a> <a><img></a> </div>みたいなことができなくなりますよね？(冷汗)
に訂正します。（爆死）

>>554
div直下にインライン要素や生テキストをいれるのは、望ましくない、という話でせう。

<ul>
<li>unko</li>
<li>unko<li>
</ul>

リストのマージンを左に少しずらしたいのだけど
cssでulとliのどっちを指定すればいいっすか？

>>558
質問する前にやってみよう

>>556
爆死ってあんた…。

UAによって違うかもしれないけどliの頭につく黒丸はliの中にあるんでなくて、
ulの左paddingの中にあるんじゃないでしょうか。

>>558
ul。
ただしブラウザによってデフォルトスタイルシートは異なるから，
marginだけじゃなくてpaddingもいじったほうが良いだろうが。

ともかくulやliにbackground-color:で背景色つけてみて構造を見てみるのが一番じゃないでしょうか。

実は
IEでみるとばっちりな位置でも
ネスケみるとズレズレだったもので・・・・

いろいろやってみまっす

>558　ttp://www.mozilla.gr.jp/standards/webtips/webtips0034.html
ここも参考になるかも。

というか UL, OL のデフォルトスタイルの違いは激しくｶﾞｲｼｭﾂ。
margin や padding とか弄ってれば直ぐに気づくと思うのだが。
これも FAQ に追加しなければならいのかね。

>>555
自分はVMWareを買ったけど、
複数バージョンをインストールすることも出来るみたいよ。
http://www.insert-title.com/web_design/?page=articles/dev/multi_IE

例えばこういう事ってできるのでしょうか？

ナビゲーションバーですが

トップ｜利用規約｜商品一覧｜送料・支払｜会社概要｜お問合せ
（100）　　（100）　　　（120）　　　　（120）　　　　（140）　　　（140）

下のかっこはテーブルのセルの幅（widthのpx値）です。
テーブルのセルの幅を固定するのはテーブルに直接記述する方法
以外にCSSでは指定できないのでしょうか？
また、マウスオーバーすると背景に色がつくようにしたいのです。

>>568
class なり id なり振って、
width を書けばよろし。

>>568
やってみたんか？
答えだけ欲しいなら「できる」

>>568
横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
http://pc2.2ch.net/test/read.cgi/hp/1031302476/l50

>>569-570
やってみましたが、できない・思いつかなくて・・・。
どういう風に書けば言いか分からないと言うのが質問です。
ちなみにDW　MXで書いてます。

>>571
実際は800固定ではないです。上のは例です。

>>568
>また、マウスオーバーすると背景に色がつくようにしたいのです。
a要素にdisplay:block;でa:hover{background:#f00;}。前スレッド既出。

>>572　
800でなくてもpx固定が迷惑なのは一緒。なるべく単位はemか%でレイアウトして頂戴。
>>4は読んだの？

おながいします
cssのみで2chスレのデザインをストリクトに記述出来ますか？

かつてCSSでイケてるデザインサイトリンク集かイケてるスタイル発表所がやってたはず。>>575

>>575
これか？
http://ike.s33.xrea.com/2ch.shtml

>>575
訳：StrictなHTMLと、validなCSSで2chスレのデザインを実現できますか？

>>572
>やってみましたが、できない・思いつかなくて・・・。
思いつくモノでなければ勉強することだ

<div class="box">
<div class="menu">
<a href="./hoge1">hoge1</a><br>
<a href="./hoge2">hoge2</a>
</div>
<div class="img">
<img src="hoge.jpg" alt="end.jpg">
</div>
</div>

.box{width:700px;margin-left:auto;margin-right:auto}
.img{float:left;width:650px}
.menu{float:left;width:20px}

この <div class="box">の後にもう一つ<div>を横並べせずに下に表示させたい時ってその <div> にはclear:left無くても問題ないですか？
WIN IE6ならつけなくても大丈夫っぽいんですけど、他のブラウザでも大丈夫？

<div class="box"> 略</div>の後ってことです。

>>580-581
img要素をdiv.imgで括る必要が無いな。img {float:left;}で済む。
いや.menuにfloat指定があるからそれすら要らないか。

で、clearだが、これは要る。IEでも要る。
ウィンドウ幅をうんと拡げるか、.boxのwidthを100位にして試してごらん。
それとIEで表示確認しながら作ると誤りやすい。Mozillaを入れなさい。

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

オマエラさ質問する前にちとは勉強しろや

ところで、クラス名についてなんですが、
>>580 のように、divにclass="box"や"frame"などのクラスを指定しているのを
結構よく見かけるのですが、これは正しいのですか？
HTMLはあくまで論理構造をマークアップする為のものなので、
クラス名も、ちゃんと論理的な意味を持つべきなのでしょうか？
（それともクラス名はスタイルシートの管轄？）

もし駄目なら、例えば、ページ全体の幅を決めたり、枠で囲ったりするdiv要素は、
どんなクラス名（ID名でもいいですが）を指定するべきでしょうか？

>>585
＞クラス名も、ちゃんと論理的な意味を持つべきなのでしょうか？
　そう。
＞class="box"や"frame"
そこには「箱について」の記述と、「枠組みについて」の話題が記載されてるので問題ないです。

＞もし駄目なら、例えば、ページ全体の幅を決めたり、枠で囲ったりするdiv要素は、
　もし駄目ならそういう行為自体おかしいと言うことも分かると思うんだ。

>>585
それは作成者の任意の名称

>>586-587
なるほど、納得しました。
これで、心置きなく名前を付けれます。
ありがとうございました。

>>588
> これで、心置きなく名前を付けれます。
　なんでやねん。

こうして585は立派なdiv厨になっていくのでした

>>585
left とか red とかはあまり好ましくない（文書の論理構造に関係がない）

>>591
サヨについて、アカレンジャーについて、だったら問題ないけどな。

>>586って論理的構造と視覚的構造を勘違いしている
と思われ・・・

>>593
根拠を述べろよ。

>>593が論理的構造と視覚的構造の意味を理解していないとおｍ（ｒｙ

HTMLの話題はスレ違いだ糞ども。

W3C検証サービスでのエラーなのですが

行番号: 0
Parse error - Unrecognized : } 直訳＝品詞分解エラー − 認められない

とは、基本的に何の事でしょう？

「品詞分解エラー 」ってどういう訳だよ。
普通は「解析エラー」とか訳すだろう。

翻訳の文句ならlogovistaへどうぞ

翻訳ソフトになすりつけかよ

>597　* {-moz-box-sizing: border-box;}
これとか指定した？
検証に対応していないか何かの原因で、
エラーになるんじゃないのかな。

XOOPSのデフォルトのコンテンツリンクのように
テーブルのセルにオンマウスさせると
背景に色がつくｃｓｓを作りたいのです。

↓のようにしてみましたが、これだとテキストにオンマウスしたらセルに色が付きますが
セルにオンマウスしても変化がありません。アドバイスお願いします。

#testblock a:hover{
font-color: #000000;
background-color: #FF0000;
display:block;

}

>>602
ttp://css.maxdesign.com.au/listamatic/vertical08.htm

>>603
まさしくこれです！ありがとうございました。

＞テーブルのセルにオンマウスさせると
これって激しくダサいのに、なんでみんなやりたがるの？
中高生に「すごい！管理人さん、どうやってるんですか！！？？」って言われたいのかな？

>>605
禿胴、こんなところにテーブル使っている事態イモだね（w

表が大きい場合は見やすくなるよ。

>テーブルのセルにオンマウスさせると
>背景に色がつくｃｓｓを作りたいのです。
↓この表みたいにやるなら便利だよね。ソース見て真似したら？
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/text.html#text-indent

>>608
そのサイトの表のとこ意味もなくカーソル動かしたくなった。
てかブラウザのバージョンが書かれてるとこにマウスもってくと
カーソルに「？」つくけどそういう設定にしてるのかな
だとしたらめちゃくちゃうざいな。

でもこのテーブル自体は見やすいと思う。

>>609
オンマウスで注釈が出るようになってる所は全部そうなってる。
意味のあるカーソル変更だから全然気にならないんだけどな、俺は。

>>609
カーソル変わらないと何の略になってるか分からないでしょ。

>>602
#testblock td:hover{
font-color: #000000;
background-color: #FF0000;
display:block;
}
でどうよ？

質問です。

<html>
<head>
<title>a</title>
<style>
p, ul {padding-bottom:10px; border-left:5px solid #ddd;}
</style><head>
<body>
<ul><li>a</li></ul>
<ul><li>a</li></ul>
<ul><li>a</li></ul>
<ul><li>a</li></ul>
</body>

このように記述すると、IEで表示がおかしくなってしまいます。
OperaやMozillaでは無問題でした。
padding-bottomとborder-leftを同時に指定した時に起こるようです。
バグなのでしょうか？

>>613
http://cssbug.at.infoseek.co.jp/detail/winie/b009.html

>>614
ありがとうございました、おかげさまでなんとか治りました(*´∀｀*)

movable type のようなweblogツールを使い、動的にサイトが更新される
場合で、左右2段の段組を組むと、当たり前の事ですが更新される度に
左右の高さが変わってしまいます。
これをCSSで、動的にサイトが変化しても自動的に左右の高さを合わせる
というような事は出来ないでしょうか？
今までCSSはあまり使った事がなかったもので、勉強不足で申し訳ないの
ですが、ご教授お願い致します。

テーブルを真中に表示させるためのスタイルシートはないですか？
HTMLでの<table arign="center">のような・・・。

調べたのですがそれらしきものがのってるのを見たことないので
すが・・・。

>>617
table { width:640px; margin:0 auto 0 auto; }
標準モードでね

>>618
＞width:640px;
ｲﾐﾌ

<body>
<div class="main">
<p>内容</p>
</div>
<div class="side">
<p>メニュー</p>
</div>
</body>

こんな感じのhtmlを
・左がメニュー（100px固定）
・右が内容（画面幅-100px）
といった感じの段組にしたいのですが
どうにかabsolute使わずに出来ないでしょうか？

>>620
float。FAQの3

あ、メインは可変サイズなのか。読んでなかったｽﾏｿ

引用ブロックの中のフォントの変更についてお聞きします。

blogの”はてな”で僕が使用しているテーマの引用ブロック内のフォントを
次のように変更したいと考えています。

　1.　「イタリック」から「ノーマル」に変更。
　2.　「茶色」から「緑」。
　3.　枠線の左上の三角装飾を消す。

使用しているテーマは以下のやつです。
http://joram.agz.jp/hatena/thumbnail/body.php?name=earth-brown

HTMLは少しわかるのですが、CSSはサイトの解説を読んでもわかりませんでした。
どうかよろしくお願いします。

>>4の解説読んでもわからない人に、どうやって説明すればよいのか。

>>623
div.body blockquote {

background-image: url(earth-brown_bq.png);

background-position: left top;

background-repeat: no-repeat;

background-color: #fffff0;

color: #8B4513;

border-style: solid solid solid solid;

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

border-color: #8B4513;

padding: 3px 3px 3px 2em;

font-style: italic;

}


上に書いたものがデフォルトで指定されているみたいですから、
テンプレを読んだり検索したりしてなんとか変更してみてください。
1. は font-style
2. は color
3. は background-image
にそれぞれ関係しています。

ありゃ……無駄な改行が入ってしまった。

>>623
1. $font-style =~ s/italic/normal/g;
2. $color =~ s/brown/green/g;
3. $background-image =~ s/triangle/none/g;

>>622
やっぱりabsolute固定しかなさそうですね
ありがとうございました

>>628
「残りの部分を目いっぱい使いたい」ってこと自体ダサいからなぁ。

>>629
まあ、適当にmarginは取りますが。
可変って事です。

>>628
float:left;とmargin-leftでできるのに。既出。

ほぉ…

>>625>>627さん
ありがとうございます。
625のkaiさんのやり方でできました！

僕がやって見た時は、一行目の
div.body blockquote
で、
body
が入ってなかったので駄目だったようです。

すごく初歩的な質問に丁寧に答えていただきありがとうございました。

オマエら質問する前に本買って勉強汁

本を金出して購入せずとも>>4見れば済む。

>>635
それも一理あるがこの程度のレベルの香具師って
タダより金払って本でも買って勉強する方が身になるって意味だ。

>>636
正しい本を読まなければ遠回り。
むしろ仕様書を奨めろよ。

あー、引越しのどさくさで、
すみけんの本なくしちまった。
鬱

<!--
body{background-color:white;}
iframe{position:absolute;
width:200px;
height:525px;
top:30px;
left:700px;}
div.img{position:absolute;
top:30px;
left:30px;}
-->

iframeとimgの同じ高さで作成し、縦位置も同じ高さに配置したいので
CSSで上記の様に設定しました。
ところが、iframeが丁度30px分下がってしまいます。
そこでiframeのtopを0pxにすると同じ縦位置になりました。
これは、imgのtopがiframeに影響しているという事でしょうか？
※左にimgを右にifameを並べています。

>>639　htmlのソースも出してくれないとわからんよ、位置関係が。

>>639
htmlのソースも書きませう。

>>639
>left:700px;
横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
http://pc2.2ch.net/test/read.cgi/hp/1031302476/l50

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 TRANSITIONAL//EN">
<html>
<head>
<title>インフォメーション</title>
<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS">
<style type="text/css">
<!--
body{background-color:white;}
iframe{position:absolute;
width:200px;
height:525px;
top:0px;
left:720px;}
div.img{position:absolute;
top:30px;
left:30px;}
-->
</style>
</head>
<body>
<div class="img"><img src="img.jpg" alt="インフォメーション">
<iframe src="info.html" name="info" scrolling="no" frameborder="0" framespasing="0" border="0" noresize>
このページはインラインフレームを使用しています。
</iframe>
</body>
</html>

すいません、宜しくお願いします。

>>620
.side {float:left; width:100px;}
.main {margin-left:105px;}
<body>
<div class="side">
<p>メニュー</p>
</div>
<div class="main">
<p>内容</p>
</div>
</body>

>>643　<div class="img">に對應する閉ぢタグがありません。

>>642
あ、固定はしてないです。
ただ、imgにiframeを並べたいのでこの値で指定しました。
よく分からないまま使用していますが、この使い方って問題有りでしょうか？

>>645
あ、本当だ、、、
まさしくhtmlを見て頂かなければ分からなかったですね
スイマセン。単純なミスでした
助かりましたm(__)m

>>643
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">

img{
float:left;
margin:30px 20px 0 30px;
}
iframe{
float:left;
width:200px;
height:525px;
}

<body>
<img src="img.jpg" alt="インフォメーション">
<iframe src="info.html" name="info" scrolling="no" frameborder="0" framespasing="0" border="0" noresize>
このページはインラインフレームを使用しています。
</iframe>
</body>

>>648
適当すぎ。

>>646
left:720px;とwidth:200px;を足してみな。横幅800pxどころでないだろ。
小さい画面のノート・パソコンとかで見づらいから止めてようね。

>>649　そんな適当かな？　要件は満たしたはず。もっといいのがあるなら書いて。

>>648
ありがとうございます。
こんなに簡潔になるんですね。
css専門の本を買おうかな・・・

>>650
1024*768で考えていましたが、やはり800*600を基準にします。
まだトップページ作成中なので、いくらでも変更可能です。

>>652
>css専門の本を買おうかな・・・
その前に>>4を読むべし。

>やはり800*600を基準にします。
640*480にすれば？　あと、単位はpxよりなるべくemと%にするがいい。

>>631
あー、よく見たらhtml間違ってるっぽいです・・・
内容とメニュー囲ったつもりのdivが、内容しか囲んでないOTL

>>652
ついでにhtmlも、もうちょっと深く知っておくと便利かと

あんた誰？　>>654

あれ、やっぱり間違って無かったです
大体ですが、こんな感じで合ってますか？

<div id="main">
　<div id="naiyou">
　</div>
　<div id="waki">
　</div>
</div>

* {　margin : 0 ;
　padding : 0 ;
}
#main {　width : 100% ;
}
#naiyou {　margin : 0 0 0 15em ;
}
#waki {　float : left ;
　width : 15em ;
}

>>655
ｽﾏｿ、620です

>>656よ、>>644を見よ。何が変更されたかわかってる？

>>656
div#mainなんて必要無い。bodyで済む。
それに#naiyouと#wakiの記述順序が逆でないか？

>>651
適当すぎは言い過ぎか。CSSはimgのfloatにwidthが無いのを除けば
（あと広いピクセル指定なのを除けば）、別に良いと思うが、htmlソースの記述あたりがどうかと。
省略のしかたも変だし。

--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>インフォメーション</title>
<style type="text/css">
<!--
p.image1{
width:xxx; float:left;/*略*/
}
/*略*/
-->
</style>


<p class="image1"><img src="img.jpg" alt="インフォメーション"></p>
<p class="information_frame">
<iframe src="info.html" name="info" title="information">
<p>インラインフレームが表示されない環境の方は
<a href="info.html">別ファイルのインフォメーション</a>でご覧ください。</p>
</iframe>
</p>

--

>>659
p要素の組み合わせが変。

>>659
>imgのfloatにwidthが無いのを除けば
img要素（置換インライン）は内在幅があるからwidth指定は不要。
またTrannsitionalならばbody直下へimg要素を置いても誤りでない。

>>657
ｽﾏｿ、ﾏｼﾞｽﾏｿ、見逃してた
>>658
mainは他にheaderとfooterがあったので残ってるだけです。

やっぱりメニューは初めの方に持ってくるべきでしょうか？
携帯などの表示範囲が小さいブラウザなどの事も考えると
内容は初めに持ってきた方が良かれと思って。

>>662
htmlソースでmenuを後に記述するなら、float:left;では駄目だってわかってないのかな。

>>659　誤りすぎ。

>>663
よく考えたら当たり前のことですね、
お恥ずかしい・・・
本文をfloat:right;してみたり、色々試行錯誤はしてみたんですが。

>>665
なんでメニューがあとにくるの？きじるし？

CSS厨のスレだな。糞スレもいいとこ。

>>667
じゃあくんなばーか

>>666
考え方は様々あるだろうが、ナビゲーションそのものが主であるような（例えばインデックス）以外の
ページにおいて本文がまず最初に記述し、最後に補助的なナビゲーションを付ける事は自然な書き方。

>>669
は?
バカはWEB制作に携わらないで欲しいです

これ俺も知りたいのでみんなで考えてくれ。知識の見せ所ですよ。何ならコテハンで・・・

616 ：Name_Not_Found ：04/03/08 01:08 ID:shWdIMQ2
movable type のようなweblogツールを使い、動的にサイトが更新される
場合で、左右2段の段組を組むと、当たり前の事ですが更新される度に
左右の高さが変わってしまいます。
これをCSSで、動的にサイトが変化しても自動的に左右の高さを合わせる
というような事は出来ないでしょうか？
今までCSSはあまり使った事がなかったもので、勉強不足で申し訳ないの
ですが、ご教授お願い致します。

これをCSSで、動的にサイトが変化しても自動的に左右の高さを合わせる
というような事は出来ないでしょうか？
今までCSSはあまり使った事がなかったもので、勉強不足で申し訳ないの
ですが、ご教授お願い致します。

>>671
おまい、偉そうだな。
漏れは知識ｾﾞﾛだけど。

>>671
movable typeってのの詳細は知らんが
<div id="左"><div id="右">
で中身をくくっちまったら良いだろ。CSSの問題か？

>>670
音声ブラウザでは、ページが変わるごとにメニュー読み上げて
非常にｳｻﾞｲ事になりますよ。
バカはアクセシビリティ・ユーザビリティを勉強してから来てください。

>>674
@media aural {
display:none;
}

>>674
@media aural {
.menu {display:none;}
}

>>675
ﾌﾟｹﾞﾗ

>>676
それでは、他の関連コンテンツへ移動できないではないか。
簡潔なナヴィゲーションを用意して、
煩雑なナヴィゲーションを隠す、とかならいいけど。
というか、音声スタイルシートを理解できる UA 少ないから意味ない。

ttp://www.medic-web.jp/

のサイトのように印刷プレビューしたら背景のイメージが表示されない
方法を教えてください。（ブラウザの設定ではないようです。）

と制作初心者スレで質問したら「CSSじゃない？」と言われたのですが
このようなCSSの設定の仕方がわかりません。ご存知無いでしょうか？

ttp://kobit.info/tips/print_css.html
こーゆーので？

>>676
音声ブラウザ試してみようと思って
IBM HOMEPAGE READER ってのを買ってみたんだが、
てんで使い物にならん。
なんか、良いの知ってる？

>>681
とりあえずリストだけどうぞー
http://memo.imagines.jp/index.html#aural
誰かcss2への対応状況とかまとめてくれると神

>>681
スレ違い。HPR は音声スタイルシート理解できないし。
っていうか、買う前に体験版を利用してみるだろう。
けっこう値が張るソフトだし。金に余裕がある人なのね。

HPR の機能として「見出し読み上げモード」とかは有益。
H1〜H6要素で構造化する意義が発揮されて幸せになれる。

>>682
音声スタイルシートに対応している UA って
Emacspeak ぐらいしか知らないけど。他にもあるのかね。

q {content: "\"";}

と言う風に、\を用いて " を表現するやり方は正しいですか？

↑すいません。Validatorで調べて解決しました。

>685
どう解決したか書いてくれると、他のわからない人に親切かも

a.x:link { color: #0000ff; }
a.x:visited { color: #ff0000; }
a:hover { color: #00ff00; }

と書いたときに、<a class="x" href="...">がhoverで色が変わらないのですがなぜでしょうか？
:hoverなどを指定するときは、クラス名まで一致しないと適用されないのですか？

>>687
>hoverで色が変わらないのですがなぜでしょうか？
:hover {} の詳細度が他のセレクタより低いから。
最重要指定をつけて優先度を高くすればよい。
a:hover { color: #00ff00 !important; }

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#specificity

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

これでtestの縦位置が真ん中にならないのですがなぜでせうか？

<!--
#test{background-color:gray;
width:280px;
height:210px;
padding:0px;
border:10px solid #99cc66;
margin:0px;
position:absolute;
top:50px;
left:30px;
}
p{color:white;
font-size:5em;
text-align:center;
vertical-align:middle;
}
-->
</style>
</head>
<body>
<div id="test"><p>test</p></div>
</body>

>>690
>vertical-align:middle;
またこの勘違ひですか……。ＦＡＱを見ませう。A6（>>7）です。

少し上で既出でしたねｽﾏｿｯｽ
A6を見てきます。多謝。

vertical-alignはテキストが対象です。インライン要素、td要素、th要素にしか適用できません。
>>690の場合、pの行内で文字列が垂直位置中央になるだけです。

movable type のようなweblogツールを使い、動的にサイトが更新される
場合で、左右2段の段組を組むと、当たり前の事ですが更新される度に
左右の高さが変わってしまいます。
これをCSSで、動的にサイトが変化しても自動的に左右の高さを合わせる
というような事は出来ないでしょうか？
今までCSSはあまり使った事がなかったもので、勉強不足で申し訳ないの
ですが、ご教授お願い致します。

これをCSSで、動的にサイトが変化しても自動的に左右の高さを合わせる
というような事は出来ないでしょうか？
今までCSSはあまり使った事がなかったもので、勉強不足で申し訳ないの
ですが、ご教授お願い致します。

>>694
しつこい。>>673を見よ。だいたい質問の意味がハッキリしない。説明不足ですよ。

>>694
しつこいのでこれにて終わりにしてください。
言いたいことはなんとなくわかりましたが、
無理です。
行数が変わるんですから

>>688
>>687 では無いのですが、先祖が少ない要素への
セレクタの精細度を上げる方法って、最重要規則しかないんですかね？
たとえば、

<body>
<p><a>content</a></p>
</body>

の場合、クラスやidを振らない限り、
html body p a で精細度 4 が限界になる（よね？）
で、a.hoge ってのがあると、こっちはそれだけで 11 あるんでまけちゃう。

極端な例だけど、意図的に精細度を上げる方法って無いですかね？

>697
クラス付ける所逆にしたら？
なんかこう、変な感じがするなあ。

汎用の指定をクラスセレクタ無しで指定して、
一部変えたい所はクラスセレクタ付けて、の方が
論理的にも適ってる気がするし。
その例だったら<p>にid="content"なりなんなり付けれるしさあ。

http://pc2.2ch.net/test/read.cgi/hp/1078914611/15
初心者スレから誘導されてきました、よろしくお願いします。

>screen用のCSSファイルとprint用のCSSファイルを準備したのですが、
>screen用のはlink要素がstylesheetで良いとして、
>print用のはalternate stylesheetでなくて良いのですか？
>いくつか記述しているサイトを見て回ったらstylesheetで記述してあったのですが。

>>699
逆に、なぜ代替シートにしなくてはならないのか？
rel="stylesheet"でよし。
linkタグのmedia属性か、スタイルシートの@mediaでprintを指定しておけばよし。

699に便乗で質問です。
rel="alternate stylesheet"を指定した場合、
そのCSSを呼び出すまでは読みこみをしないのでしょうか？

printにしか使用しないCSSを毎回読みこませるよりも、
印刷するときにだけ読みこませることができればよいと思うのですが。

>>701
>そのCSSを呼び出すまでは
って？　HTMLファイルを開いた時点で全て外部シートも呼び出されますけど。

毎回読みこませるなんてことはない。外部cssはキャッシュされるから初回だけで濟む。>>701

>702　rel属性の値のうち、
"stylesheet"と"alternate stylesheet"は
どのように使い分けたらよいのかわかりにくいと思っています。
それを明らかにしたいと思って質問しました。

IEでは、"stylesheet"と指定したものが2つあると、
両方のCSSが画面に反映されます。
Firebirdでは、"stylesheet"と指定したものが2つあると、
ソース内で先に指定したCSSのみが画面に反映されます。
（これもIEが間違っているのかな）

>703　ああ、なるほど。
キャッシュが使用できれば、むだな負担は避けられそうですね。

IEはIEでも、WinIEでした。
番号も抜けてしまったし、
かちゅには「もうすこし落ち着いて」とおこられるし・・・。
ｼｮﾎﾞｰﾝ

>>701
どのみちブラウザの実装次第じゃないか?
でも、印刷時まで読み込まないとすると、オフラインで印刷しようとしたときに印刷用のスタイルシートが読み込めなくて不幸だよな。

>>704
>Firebirdでは、"stylesheet"と指定したものが2つあると、
>ソース内で先に指定したCSSのみが画面に反映されます。

そんなことはない。
固定（永続）シートと優先シート（titleあり）はわかってますか？
そもそも代替シートで指定しておいたところで、どうやって切替するつもりなのか。
下記参照。
http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
http://cssbug.at.infoseek.co.jp/detail/winie/b108.html

お答えありがとうございます。

>708　title属性がついているかどうかで
違いがあるという話は知っていましたが、
具体的にはそういうことだったのですね。
ttp://www.xinada.ne.jp/~handa/tech/CSS/StyleChange/#ServingStyleSheets
こちらにも書かれていました。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3.2
>もし2つ以上のLINK要素が優先スタイルシートを指定している場合は、最初のものが優先する。

>>700
alternnateにしないとmedia指定しても反映されちまうものだと思ってました。
printに指定すればscreenには表示されないようになってるのですね。すっきりしました。
どうもありがとうございました。

>>686
正しかったです

Webサイト製作初心者板から誘導されてきました。
質問させてください。
左側のボーダーだけを表示するように宣言って、どうすればいいんでしょうか？

？border-leftだけ指定すればいいんでない？

>>713　
まづ>>4の解説サイトを読みたまへ。それでもわからなかったらまたおいで。

.sao {
border-left:solichin 35cnp #000;
}

質問です。場違いだったらすいません。
例えばtableをalphaで半透明にしたとして、その中のテキストは半透明化しないようにする方法ってあるんでしょうか？

テキストを<span>か何かで括って、background:transparent;color:#000;……とか指定したら？

>>718
素早いレスありがとうございます。
早速試してみます。

ブラウザ負荷、表示速度、マイナーブラウザでの再現等を考慮する場合
H1 { text-align:center; color:#000000}
P {text-palign:center; color:#808080}
とするのと
H1,P {text-align:center}
H1 {color:#000000}
P {color:#808080}
とするのでは、どちらが良いのでしょう？

>>720
大差無い。そんな些細なこと気に病む前に、color:#000;にでもしな。

>>720
将来的にh1とpのtext-alignを、相違する値にする可能性があれば、前者の方がやり易いとはいえる。

>>721
いや、>>720のは例ですから・・・
編集のしやすさで言うなら両者それなりに
利点も欠点もあるんで、
それ以外のところで差があるかな？と思いまして。
大差ない　ということなら使い分けるから問題ないんですが、
ひとつのファイル内に何度も描写させる部分がある場合は
PCスペックが低いとそれなりに差が出るんじゃないですか？

何万個と宣言すれば差は出てくるんじゃない？

アンカー打ち間違いがい。>>723の「>>721」は
「>>721-722」です。

div { cursor: crosshair; }
のようにしてカーソルを変化させているページをよく見ますが、、
他のスタイルを残したまま、カーソルの指定だけを無効にするには
どのようにすればよいでしょうか。

>>726

* { cursor:auto !important ;}

>>727
ありがとうございます。
鬱陶しいカーソルからやっとおさらばできます。
心から感謝します。

>>723
どこで表示速度に影響が出ると思うのか、そこが聞きたい。

ファイルサイズがでかくなってDLするのに時間がかかって表示速度の影響が、ってんなら解るけど
PCのスペックとか言ってるもんな。

>>723
CSSスタイルシートの解析ごときの負荷なんて微々たるもんだろ。
一般に宣言する量で差がでるとしたら、相当糞な UA だな。
むしろ解析結果をレンダリングする過程の方が負荷がかかるだろう。

このスレのQ&Aやテンプレのリンク先を色々見て回ったのですが
TABLEデザインをCSSでやろうとすると、ある程度DIV厨になるのは仕方がないことなのでしょうか？

もっとよくいろいろ見て回った方がよいと思われ

>>733
釣られちゃだめだYO!

>>732
やっ、やめたほうがいいよ！
ＴＡＢＬＥレイアウトなんて単語を肯定的につかったら
このスレの気持ち悪い連中がだまってないよ！！

やばいよ！！
削除！！





あ

>>735
驚くほどつまらんな。

スクロールバーの色を変えたいので、CSSで指定したのですがうまくいきません。
問題箇所を指摘いただけるとありがたいのですが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>○○○○</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body{scrollbar-3dlight-color:black;
scrollbar-arrow-color:black;
scrollbar-base-color:gainsboro;
scrollbar-darkshadow-color:black;
scrollbar-face-color:lightgrey;
scrollbar-highlight-color:lightgrey;
scrollbar-shadow-color:black;}
-->
</style>
</head>
<body>
省略
</body>
</html>

>>737
html, body {}
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4

ちなみにそれはCSSじゃないな

ヽ(`Д´)ﾉよくわからんです助けてください！

一番下に背景画像（右下固定）
真ん中にテキスト（上下にスクロールする）
一番上に半透明画像（テキストと一緒にスクロールする）

を作りたいのですが、一番下はできるのですが、
さらに一緒にスクロールするテキストと画像を載せるにはどうしたら良いでしょうか？
お願いします。IE６です。

<STYLE type="text/css"><!--
BODY {
background-image : url("bg.jpg");
background-attachment: fixed;
background-position:100% 100%;
background-repeat: no-repeat;}
-->
</STYLE>

background-attachment: fixed;だとスクロールしなくて当然。
一番上の半透明画像にはどんな指定をしたのか。
あと、ＦＡＱのA7（>>7）は当然承知してるね？

>>741
＿|￣|○
>>7は2回くらい読んだけど意味不明でした。
もうちょっと戦ってきます。ｻﾝｷｭ

半透明のimg要素にposition:absolute;top:0;z-index:-1;で、いいだろ。
body {position:relative; z-index:0;}を基準にしておくこと。

>740
テキストを載せる要素（pとか）に背景を指定すれば良い。
というのが>7の大まかな意味。
ただbody以外の背景の固定はIEが対応してない。
一緒にスクロールって事は固定はしなくて良いのかな。

なんで新規質問をsageるかね。見て欲しくないのか。

>>738
"http://www.w3.org/TR/html4/loose.dtd"を削る事で解決しました。
これでトップページが完成出来そうです。
助かりました。ありがとうございます。

>>746
なぜ既出（>>501-504）を見ない？　なぜ>>738みたいにhtmlにも指定しない？

>>737
> スクロールバーの色を変えたいので、
　変えるな、というか。独自拡張、というか。変えるな。
キモがられてるよ。そういうことやって悦に入ってる子は。

>>748
別に指定してもいいと思うけど？
勝手にキモがられてるとか決め付けるなよ。
色設定が変でスクロールバーが見えにくいとかならともかく
単に色設定してあるだけなら、俺は別に気にならない。

>>749
＞俺は別に気にならない
お前が気になるかどうかこそどうでもいいことなり

「独自拡張をやるなんて邪道だ、俺は独自拡張がよくないことを知ってるんだぜ！」

って気取ってるやつのほうがよっぽどキモい

>>748
質問スレに相応しくない香具師。

>>749-752
独り善がりのキモいヤツはほっとけよ・・・

>>749が気になるかどうかこそどうでもいいことなり

>>748が気になるかどうかこそどうでもいいことなり

>>749が気になるかどうかこそどうでもいいことなり

WinXP使っているやつにスクロールバーが
Lunaじゃなくて旧タイプになるのは許せんって儲もいたりしてな（ｗ

スクロールバーの色を全部同じ色にするとか
ユーザビリティが著しく悪化しない限り
個人が使うくらいのことでそこまで言わなくてもいいんじゃないかと。
ただ-moz-とか独自拡張ということを知らなさそうな香具師とか
ユーザビリティに良くない場合は言ってもいいけど

と俺の意見。

ＩＥ６で
position:absolute;
bottom:0px;
を指定すると下に1px隙間が空くんですけど、どうしたらよいですか？

>>758
マルチしないで下さい。

>>758
ﾎﾟｼﾞｼｮﾝ指定してるもののﾏｰｼﾞﾝは0になってますかー？

>>759
質問するスレ（物質）では答えられる人が残念ながらいなかったので。すいません
>>760
はい、なってます。
ちなみにmozillaだと隙間無く表示されています