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

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-3
【関連スレ】【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-9

【まとめサイト】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://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html
16 http://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17 http://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18 http://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19 http://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20 http://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21 http://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22 http://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23 http://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24 http://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25 http://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26 http://pc5.2ch.net/test/read.cgi/hp/1072018825/
27 http://pc5.2ch.net/test/read.cgi/hp/1074845459/
28 http://pc5.2ch.net/test/read.cgi/hp/1076968824/
29 http://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 http://pc5.2ch.net/test/read.cgi/hp/1082785026/
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/

32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/
【前スレッド】
36 http://pc5.2ch.net/test/read.cgi/hp/1098720757/
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
　http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
　http://pc5.2ch.net/test/read.cgi/hp/1097724119/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
・ばけらの 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の実装の誤りです。詳しくは下記（特に5.）をご覧ください。
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.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
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

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。
ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
　http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

【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
レイアウトサンプル 擬似フレーム
　http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

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

以上です。

URLの変更等があっても知りません。

テンプレ追加


リストを用いたレイアウト
http://css.maxdesign.com.au/index.htm

リストってそういうふうに使う物なのか……？

質問ですどなたかヨロシクです。

インラインフレームのページを作ったのですが（初心者ではありませんが場数はこなせておりません）
そのフレーム内の入れ子にしたファイルの内一つだけどうやっても「指定の背景色が消えて真っ白」になってしまうんです･････
その謎のファイル単独でを開いて確認するとしっかり指定通りの背景になってるのに。
タグも確認し直しましたが全く原因がわかりません･･･ブラウザで見え方が違うとかなら納得できますけど･･･


そんな事ってあるんでしょうか？
解る方いたらヒントだけでも教えて下さいー(超切実)




･･････ソース公開しないで回答貰うのは無理かなｗ

css-validator で検証してきました。

背景指定自体には全くタグミス無しの結果出た･･････････
他のタグエラーはいっぱい出てきたけど･･･････

il||li _|￣|○ il||li

body要素にstyle要素直書きからノーマルCSSに鞍替えしたら直りました･････････
外部CSSファイルも作ってたので貧乏根性で敢えてbody内に入れてみてたんですが･････

なんか外部ファイルますます意味なしil||li _|￣|○ il||li


何はともあれお騒がせしましたm(__)m

>意味なし
そりはオマイの頭だ。

clearを忘れる人が多いと思うので、今度のテンプレには
以下の一文を付け加えることを提案します。


Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかをを確認してください。
　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ある要素の直下に連続する同一要素に、再帰的にスタイルシートを割り当てる
ことは可能でしょうか？

具体的には
<h2>節1</h2>
<p>テスト1</p>
<p>テスト2</p>
<p>テスト3</p>
<h3>小見出し1</h3>
というhtmlを書き、<h2>と<h3>にはさまれている<p>に
同一スタイルシートを割り当てたいのですが、
h2 + p {left-margin: 10px;}
とやると、<p>テスト1<p>の部分にしか割り当てられません。
かといって、
h2 + p {left-margin: 10px;}
h2 + p + p {left-margin: 10px;}
h2 + p + p + p{left-margin: 10px;}
とやるのは、<h2>の下にいくつ<p>が入ってくるかわからないというのと、
ちょっとださいやり方かなと思います。

「<h2>の直下に連続して続くpはすべてこのスタイルシートを適用」
というような指定をしたいのですが、何か良い方法はあるでしょうか。
よろしくお願いします。

>>16
現状の実装状況では難しいのでdivとかでくくってください。

>>3
岡橋氏のCSS1およびCSS2勧告邦訳は消滅している。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

各自でキャッシュを参照せよ。
http://web.archive.org/*/http://www.fan.gr.jp/~kaz/rec-css1/rec-css1.html
http://web.archive.org/*/http://www.fan.gr.jp/~kaz/rec-css2/cover.html

CSS2勧告邦訳のアーカイブはここら辺でゲットできる。
http://web.archive.org/web/20011021231417/http://www.fan.gr.jp/~kaz/rec-css2.zip

次スレでは対応をよろしく。

W3Cって日本語サイトはないの？

前スレ1000ﾜﾗﾀ

自演、ご苦労。

>>17
そうですか、そういう実装はないですか・・・ﾄﾎﾎ。
回答ありがとうございました。

>>6
float に width は必須じゃないんだが。いい加減気付け。
そのサイトの管理人は仕様書エラッタを追っかける英語力すらないわけで。

>>23
文句を言うだけなら豚でもできることですので、
エラッタを追っかける英語力のあるエロイひとなあなたが、
訂正を書いてあげてください。

まいったな

>>23
「float に width は必須ではない」というはのは近い未来のことだ。
CSS2.1 への転換期である現在においては width を明示しておくべきだ。

確かにCSS2.1勧告候補では width を明示する必要はない。
http://www.w3.org/TR/CSS21/visudet.html#q8
この記述が登場したのは2003年1月28日付けの草案からだ。
だが、Errata in REC-CSS2-19980512 にはその旨は書かれていない。

モダンブラウザであればCSS2.1準拠で設計されているから、
width を明示しなくともうまく整形できるかもしれない。

だが、その計算アルゴリズムが巧く機能するかどうかはわからない。
CSS2.1 が一般化しても、CSS2.0適合UAを考慮する必要もある。
整形の正確性や後方互換性を確保したいのなら、width を明示するべきだろう。

従って、中途半端に CSS2.1 についての解説をおこなうよりは、
とりあえず、「width は必須」と覚えさせた方が無難かもしれない。

うむ

>>26
おみそれしました○|￣|＿ =3 ﾌﾞｯ

中央寄せです。
｜￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣｜
｜　　　　タイトルと番号　　　　　｜
｜￣￣￣￣￣￣￣｜￣￣￣￣￣￣￣￣｜
｜　　　　　　　｜　　　　　　　　｜
｜ストーリー　　｜　　写真　　　　｜
｜　　　　　　　｜　　　　　　　　｜
｜　　　　　　　｜　　　　　　　　｜
｜　　　　　　　｜　　　　　　　　｜
｜＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿｜
｜　　　次ページへのリンク　　　　｜
｜　　　　コピーライトなど　　　　｜
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
↑
当方MacOS9.2.2です。
単純な構造なのに、IE5.1では大丈夫なのにNetscape7ではダメなど、不具合が出ています。
.story { float: left; width: 50% }
p.image { float: left; width: 50% }
でやっていますが、表示されたときは良いのですがウィンドウを動かすと縦に並び、
imgをmargin-left: 51%にすると右下にいってしまい、
色々と試していくうちに何が何やらorz
最初はネスケで画像が下にまわりこみ解除されるのに対処しようとしていたのにorz
参考サイト様は読ませて頂きましたが、Macブラウザでの表示の方が問題なのでしょうか？
よろしければ解決法、参考URL、タグの修正を教えてください。

ちなみにiCabではcss自体あまり実装されていないらしく、
ぼろぼろでした。
どうぞ宜しくお願い致します。

>29
MacのIEだしなぁ　SafariだとどうなのってOS9か
N7で大丈夫なように作らないと修正が面倒じゃないかな

ソースをもう少し詳しく出さないとわかんないゾ

参考サイトの
ttp://aor.ktplan.jp/hms/tab2css2.htmlに
img要素はbody要素直下に置けない
と書いてあったのでimgを<p>の中に入れたのですが、
そこからおかしくなったのでとりあえず
<div>に直しましたところ、出来ました・・・。

テストページを
http://hysaria.hp.infoseek.co.jp/csstest2ch.html
にアップしてみました。
ソースの記述は合っているでしょうか。

それと、IEでは大丈夫なのですが、
ネスケで見るとウィンドウを小さくしたときに
画像が下にまわりこんでしまいます。
<br clear="all">では回避出来ませんでした。
こちらもどうぞ宜しくお願い致します。

>32
MacOSXのIEでウィンドウサイズ小さくするとIEが落ちる……
左のdiv45％の残り55％を右の画像の幅（338）が超えると
右に回り込まなくなるので
並べたdivの親要素（body）に固定幅（width:640pxとか）指定でどお？

clear="all"で回避ってのは意味が分からん

>>32
実はdivの子にimg（というかインラインレベル要素）を持ってくることも、
オススメされていないよ。
pはmarginを定義すれば、divとレンダリングの差はないので、その辺をふまえて
見るのもいいかもしれない。

書き込みありがとうございます！助かります。

clear="all"で回避というのは
http://www.skipup.com/~l-_-l/web/
こちらのサイトさんに書かれていましたのでやってみました。

>34さんの言うようにpに直しました。が、
これを簡単にいうとアルバムです。
十何ページもあり、写真のサイズが統一されていないので、pxではなく%にしたのです。
この場合この書き方ではなく、別の方法が良いのでしょうか？
別の方法が思い付かないのですが、何かあれば御教授ください。

こんばんは、質問させていただきます。
ttp://www.adaptivepath.com/
の上部にあるメニューをマウスオーバーすると太い下線が表示されるのですが、
これの作成方法を教えていただけませんか？
よろしくお願いいたします。

キャプション付きのサムネール画像を、適度な隙間を空けつつ
例えば、３列×３行とか配置するにはどうすれば良いんでしょうか？

こんな感じで…。
┌───┐┌───┐┌───┐
│　　　││　　　││　　　│
└───┘└───┘└───┘
　hogee　　hogee　　hogee
┌───┐┌───┐┌───┐
│　　　││　　　││　　　│
└───┘└───┘└───┘
　hogee　　hogee　　hogee
┌───┐┌───┐┌───┐
│　　　││　　　││　　　│
└───┘└───┘└───┘
　hogee　　hogee　　hogee

>>36
#nav a:hover {
border-bottom:5px solid #9c3;
padding-bottom:2px;
}

あとは>>1

>>37
ttp://movies.aurum3.com/
参考にどうぞ。

Firefox で困ってます。具体例は以下。

<div id="wrap1">
ほにゃらら。
<div id="wrap2">
<div id="left">左ああああ</div>
<div id="right">右ああああ</div>
<div id="clear"><span></span></div>
</div>
めへへへ。
</div>

#wrap1 { background:url("img/back.gif"); }
#wrap2 { width:200px; }
#left { width:100px; float:left; }
#right { width:100px; float:right; }
#clear { clear:both; }

こうすると，「ほにゃらら」の部分だけ back.gif が表示され，
その下の #wrap2 以降には表示されないのです。
「めへへへ。」は #wrap2 とは重ならず，#wrap2 の下に表示されます。
つまりボックスはちゃんと生成されてるようなのですが，
そのウラに back.gif が表示されないんです。IE は大丈夫です。
どなたか解決法ご存じですか？

>>39
いやん、めっちゃ参考になりました。
ありがと。

>>38
ありがとうございます。感謝です。

>>40
> <div id="clear"><span></span></div>
中味が何も無いんだから、當然の結果でせう。IEが間違ってゐます。
よくFAQを讀みたまへ。>>6の「浮動要素の高さもheightに含めさせる方法」です。
解らなかったら、#wrap1 に大きめのpaddingを設定して實驗してみたまへ。

>>35も、よく>>6のＦＡＱを、読め。
だいたい<br clear="all">なんてのは、「NN4.xに対応させる際」の邪道に過ぎん。
widthの合計を100%ピッタリにせず、95%位にしておけ。
いや、それよりも横並びにする方法を変更しろ。
左のテキスト幅はem指定（px固定はよくない）にしておいて、
右のimgはfloat:left;でなく margin-left:〔左ボックスの幅〕 にしろ。
これもＦＡＱに出てることだぞ。

質問失礼します。
下記のソースをブラウザでプレビューすると、
背景に指定している色と、line-heightが適用されません。
ブラウザはIE6です。
宜しくお願いいたします。


.box {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
line-height: 10px
background-color: CCCCCC;
width: 160px;
}

>>45
10pxの後ろに；が抜けている、
CCCの前には＃が抜けている。

>44さん
アドバイスありがとうございます。やってみます。
長々と失礼致しました。

本当に理解したのかね。不安だなあ。 >>47

>>45
なんで>>3のvalidatorを使って自分で検証しないのか。
そもそもline-heightをpx単位で指定するのが感心しない。
line-height:1.5; とか、行高は単位無しの実数値指定が好ましい。

言葉足らずですみません。
理解した、ではないのですが、よく読めとあったので、
もう一度仕様書や参考サイト様をまわって最初から考え直そうと思い
やってみますと書きました。
ありがとうございました。

↑追記。もちろん提示して頂いたものもやってみます。

以下の様なモノを作った際、
IEで表示するとBOX2のpadding-topが2倍になってしまいます。
NN、Operaでは普通に表示されました。
BOX1内のpにかけたfloatを外すと正常に表示される様です。
これはIE側のバグでしょうか？

<html>
<body>

<div style="clear:both;" title="BOX1">
　<p style="border:1px solid #000; float:left;">a</p>
　<p style="border:1px solid #000; float:left;">a</p>
</div>

<p style="border:1px solid #000; clear:both; padding:15px;" title="BOX2">a</p>

</body>
</html>

>>52　修正
BOX1内のpの前に全角SP入れると正常に表示される…？

<html>
<body>

<div style="clear:both;" title="BOX1">
<p style="border:1px solid #000; float:left;">a</p>
<p style="border:1px solid #000; float:left;">a</p>
</div>

<p style=" clear:both;border:1px solid #000; padding:15px;" title="BOX2">a</p>

</body>
</html>

>>52-53
BOX1へのclear:both;指定は無意味だから削る。
p要素へのfloatさせるなら、widthを指定すべき。

>BOX1内のpの前に全角SP入れると正常に表示される…？
BOX2をpでなくdiv要素にすると、全角スペースの有無は表示に影響しなかった。
IE6/Win98SEにて確認。

あとは、こちらへどうぞ。
　CSS/DHTMLバグ辞典スレッド 第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

テーブルのボーダーを点線枠で作成したいのですが、
両隣になる部分（下記の図）の点線が重なりあって不細工になってしまいます。
これを重なり合わないようにしたいのですが、どうすればよいでしょうか？


この両隣（縦棒が隣り合わせになる）部分
　　　　　　↓
 - - - - -  - - - - -
|            ||            |
   ﾃｰﾌﾞﾙ     ﾃｰﾌﾞﾙ
|            ||            |
 - - - - -  - - - - -


よろしくお願いいたします。

margin でやってね。

<select>
<option value="1">あいうえお</option>
<option value="2">かきくけこさしすせそ</option>
</select>

上記のような、selectボックスを置くと横幅が「かきくけこさしすせそ」にあわせて横に
伸びてしまうのですが、「あいうえお」の横幅で固定することは可能なのでしょうか。
教えてください。

>>43
<div id="clear"><span></span></div>
を
<br class="clear">
br.clear { clear:both; height:0; }
にして理想の結果が得られました。ありがとうございました。

　　<div id="clear"><span></span></div>

こんな書き方を教えてるところが有るのだろうか？

>>56
ありがとうございます。
マージンのボーダー設定を行うということですか？
宜しければ詳しく教えてください。

>マージンのボーダー設定を行うということですか？
　なんじゃこりゃ？

右のテーブルに　style="margin-left:***;"　とでもやって。

後は自分でベキョウ汁

テーブルの背景に色を付けてheightを100%にすると、
IE6の場合、文字のないところ（画面の下）までテーブルに
背景色がつくのですが、operaまたはfirefoxだと
うまくいきません。
operaまたはfirefoxでもIE6のように実現するには、
どうすればよいのでしょうか。

もともとテーブルにheightなんて無いんだよ。
opera　firefox　が正しいのよ〜〜ん

>>63
ありがとうございます。
あきらめるしかなさそうですね。

>>64
jsを使ってやるのもよし、
body の背景画像を使うもよし。
そんな感じでみなさん、うまいことやってます。
がんがれ。

わ　が　ん　ね

>>62
CSS での height: n%; は、包含ブロックの高さが明確でないと 'auto' になる。
基準となる高さが不明確では、レンダラがどのように計算するかが環境依存になってしまう。
処理系にも大きな負担となる。たとえばリサイズの度に height を算出し直すのは大変だ。

実現する方法としては、table の祖先すべてに height: 100%; を指定することだ。
html, body { height: 100%; }
うまく機能するかどうかは環境依存であるし、整形処理が重くなるかもしれない。

参考：http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

>>65,>>67
ありがとうございます。
htmlとbodyにも
height: 100%
を追加することでうまくいきました。
背景画像を使った方法も勉強してみます。

>>57
<select style="width:6em">

>>58
><br class="clear">
>br.clear { clear:both; height:0; }
それだとWinIEではうまくゆかないっての。FAQにあるだろが。
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
MacIEとWinIEは別物なんだから、Mac使用者は少数派であることを自覚して、
せいぜいここ↓でよく表示確認しておかないとダメだよ。
　ieCapture
　http://danvine.com/iecapture/

違うスレで聞いたら
CSSスレで聞けよ・・・って言われたんで　まるちんぐご勘弁っ

CSSで文字列に合わせて破線を引く方法ありましたら教えてください！
ボーダーを文字列と同じ長さに設定とかできませんか？

最近はテーブル属性を使用しないで作成するという方法があるようですが、
テーブル以外に段組を組む一般的な方法は何でしょうか？

>>72
>6嫁

>>71
段落全部ならclassを振る。
段落の一部なら　<span style="text-decoration:underline;"></span>
ボーダーは×

訊くだけじゃなく自分でも調べろ。

>>71向こうで解決　こりゃ失礼。

○|￣|＿ =3 ﾌﾞｯ

>>70
私はWinIEがメインですが。
ちなみにMacのIE5.1，Netscape7でも確認しましたが問題なし。
Safariはどうだろ。MacOS X まだ入れてないんだよなぁ。

すいません、質問です。
p {text-indent:-1em; }
というのはアリなんでしょうか？

Javascriptは必要なもの？？

>>78
推奨されるかどうか、ブラウザに実装されてるかどうかはともかく、
仕様上はアリみたい。翻訳は怪しげ。御免。
http://www.w3.org/TR/CSS21/text.html#indentation-prop より

text-indent はマイナスの値を取りうるが、実装によっては制限があるかもしれない。
もし text-indent の値がマイナスだったりブロックの幅を超えていたりすると、
first box（ブロックの最初の行ボックス）はブロックから溢れ出す。
そういった、ブロックから溢れ出した文字が表示されるかどうかは、
プロパティ overflow の値に影響される。

>>80
レスありがとうございます。
モジラ系やMacのIEだと頭の文字が見えるのですが、
IE6で見たら消えてなくなっているので、ここでマイナスの
値を入れること自体が間違いなのかなと思っていました。

さらに工夫することにします・・○|￣|＿ =3 ﾌﾞｯ

初めまして、質問させてください。

bodyのマージンを　30px　に設定してulだけを端から端まで
引くことは可能ですか？
またその逆（マージン0px,ul30px）でも構いません。
すみません、探してみたつもりなのですが一向に出来なくて・・・。
ちなみにテーブルなどは使わない方向で探してます。よろしくお願いします。

追記です。
html4　strictでお願いします。

>>82
margin: 0 -30px; とか?

馬鹿な俺にも解るように、何がやりたいか書いてくれ。

>85
上帯（リスト/background-colorを端から端まで/margin:0px）、中（本文/margin-left:30px）、下帯（リスト/background-colorを端から端まで/margin:0px）という形をフレームを使用せずに作りたいのです。
言葉がわかりにくくてすみません（ ´・・）

>84
出来ませんでした・・・

>>86
貴方、自分で答え書いてますよ。そのままやれば良いんです。

html4　strictでお願いします　とのことなので答えはここまでです。
　　がんがれ

何度もすみません。

>86のことを　body{margin-left:30px:}　に設定すると不可能なのでしょうか？

大元が0でなかったら出来んだろう

body{margin:0px:}

おまいさんはこう書いている
　上帯（リスト/background-colorを端から端まで/margin:0px）

わかりました。長々とすみませんでした。
ありがとうございます、がんばります。

| TOP | CONTENTS | LINKS | BBS | とWeb上に表示させたい場合やはり<ul><li>リスト</ul></li>になるのでしょうか？
しかしリスト表示を上記のように水平表示させようとした場合、無駄にCSSの記述が増えてしまうのですが・・・
<p>| TOP | CONTENTS | LINKS | BBS |</p>なんて妥協してしまうのはダメでしょうか。

>>91
まず記述の仕方がおかしいが、
ulをインラインにして、左にパディング。で、背景画像（｜）をノーリピートで表示。
これじゃ不満か？

>>91
漏れが使ってるのは、こんな感じ

.navigation li {
display: inline;
background: url(arrow.gif) no-repeat;
padding-left: 1em;
}
.navigation {
position: absolute;
top: .1em;
left: 65px;
}

下部においたナビを頭にくっつけた。

WinIEではposition:fixedが実装されていないのは知っているんですが、
実際記述されていると、どのように表示されるんでしょうか？
無視されてstaticになるのか(ずっとこれだと思ってた)、
あるいは表示してくれないのか、めちゃくちゃになるのか、
一体どうなるのか教えてください。

やればすぐ解ることを訊くな。

>>95
実機が無いとか考えられないかな。

さっさと質問に答えろよ

>>97
>>95

これからCSSに挑戦しようと思っています。
手元ですぐ見られるように、また、資料としても持っておきたいので
CSSの本をお薦めしていただけませんか？

>>98
CSSの本は良い！太鼓判押すよ。
資料として手元に置いておけば、すぐに確認出来て便利！
絶対おすすめ！間違いなし！

俺もCSSの本はいいと思う。

ページ全体を中央寄せにしたいです。
レイヤー１も中央寄せ、その一部にレイヤー2を重ねたいです。

レイヤー2をposition:absoluteにすると、重なりますが、
そうすると、中央寄せにした中に入ってくれません。

レイヤー2をposition:relativeにすると、重ならず、
レイヤー1のボックスの下（裏面ではなく）にレイヤー2が表示されてしまいます。


z-indexは正しく指定しています。

どなたか、教えてください。

外部CSSで、背景画像の固定＆画像が及ばないところの色の指定を
行いたいのですがどうしたらうまくいきません…。

ご指導よろしくお願いします。

>>102 >>103
悪いけど、漏れらは藻前らの思考を推察できるほど賢くない。
的確な回答が欲しいなら、必要事項を的確に提示しなさいよ。

>>102
いきなり「レイヤー1も」とはなんですか。
物事には順序というものがあるでしょう。
まずはどういう文書構造なのか、説明しなさいよ。

それから、現時点でのソースを晒すなり、
アスキーアートで図を描くなりしなさいよ。
こんな不明瞭な文章だけでは、よくわからない。

>>103
「及ばないところの色」とはなんですか。
他人にも理解できるように説明してください。
それから >>102 と同様、ソースを晒しなさいよ。

・・・うわぁ・・・イヤな性格・・・

>>102 >>103
それから「OSやブラウザの種類とバージョンについては必ず明記」すること。

>>104
おまいの理解力がおかしい。
どちらも言ってる事がわかるよ。

でも漏れはスキル値低いんで回答できない（ｹﾞﾗ

なんだそりゃ

>>103
>>4

>>107
天才。

>>102
「ページ全体」――具体的にどこ？ body要素？ html要素？
「中央寄せ」――水平方向と垂直方向どっち？
「…その一部にレイヤー2を重ねる」――「一部」とは？ どのように？
「レイヤー1」「レイヤー2」――これらの関係は？ 兄弟？ 親子？
「position:absolute」「position:relative」――包含ブロックはどこ？

>>103
「外部CSSで」――色と背景の指定に何か関係があるのか？
「背景画像の固定＆画像」――「＆画像」？ 背景指定はどの要素に？
「及ばないところの色」――どこ？ 背景色？ background-color？

下記のソースの段組レイアウトの枠を点線表示にしたいのですが、
方法をご教授願えますでしょうか？

<!--CSSの部分-->
.column{
width:33%;
padding:5px;
float:left;
border:1px solid #333333;
background:#ccffff
}

<!--HTMLの部分-->
<body>
<div class="column" id="column1">
<h1>1段目</h1>
<p>適当な内容…</p>
</div>
<div class="column" id="column2">
<h1>2段目</h1>
<p>適当な内容。…</p>
</div>
<div class="column" id="column3">
<h1>3段目</h1>
<p>適当な内容。…</p>
</div>
</body>

>>111
border-style: dotted; dashedでも

>>111を見てたら、おじさんは悲しくなってきた。

どっかの参考書を丸写しなんじゃないか。

>>113-114
ただ、「ここで質問すべき内容なのかそれは？」っていう大前提を棚上げすれば、
何かを質問するにあたっての姿勢としては、>>111はむしろまともな方だろう。
すぐ片づくしね。

>>102＝>>105みたいな卑屈なお子様ぽい香り漂う奴よか、正直マシに思う。

>>111
でも、次は質問の前に>>4あたり見てくることを勧める。

alpha { filter:Alpha(opacity=85); }

で、テーブルを透明化しましたが、その中の画像までもが透明になってしまいます。
テーブルのbackは透明にしながらもテーブルの中の画像は
透明にならない方法ってあるでしょうか？

>>116
opacity=85 だから「不透明度85%」ってことだろうけどさ。
「透明」って言ったら何も見えないってことにならんか。
正確には「半透明化」だとｵﾓﾜﾚ。（とか下らん突っ込みw）

しかし何度もウンザリする質問だなぁ……。
それが MSIE の仕様なんだろう。知るかよ。

っていうか、テーブル云々とか言ってるのに
謎のalpha要素とマッチングしてるし、ネタか？

うわぁ

質問しにく…（;´д｀）

昔はこうじゃなかったんだけどね。なんか嫌味なヲタが増えたみたい。
超初心者用スレたてても来るだろうしね。
俺で良ければ優しく答えよう。

スタイルシートでフレームってどうやるんですか？

>>121
フレーム作りにはスタイルシートはいりません

>>119
ぶっちゃけ、なんだかんだで、最終的に教えて貰えずじまいってことは少ないように思うし、
偏った物言いをあまり深く気にしても仕方ない（てか気にするだけ損）と思うよ。

ただ、同時に思うのは、理由もないのに無駄に煽る回答者ってものあまり居ないってことで、
テンプレすら見てないとか、自分で少しコード書けば試せるのにそれすらしないとか。
質問する側にだってそれなりの態度ってもんがあるだろう？っていうことでしょ。

まあ、本気でわからないことがあるってんなら、遠慮せず堂々と聞けばいいんでない？

>>121
何をしたいのかの具体がちょっと解りかねるけど。
まず「CSS フレーム」でググって一番上に出てくるサイト見てみるといいよ。

ブロック要素の前後の改行をなくすには
どうしたらよいですか？

>>124
* {
display: inline;
}

>>124
補足だけど、ブロックレベル要素は「前後に改行」じゃなくて、「新しい行を生成」だからね。
終了で改行してるわけではなく、次にブロックレベル要素しか出現しないから結果的に後方にも改行があるように見えるけど。

> 125
ありがとうございますー

しかし <p> と <h3>を接近させたいのですが、<p>にinline をあてても
スペースが変化しないような？？

<p>文章</p>

<h3>hoge</3>

＜希望の表示例＞

<p>文章</p>
<h3>hoge</3>

>>127
それ、改行じゃなくて、マージンだね。
h3 {
margin-top: 0;
}
p {
margin-bottom: 0;
}

質問です。
携帯ではリンク、PCでは画像が表示、となるように、

<p><a href="foo.jpg" class="foo bar">foo</a></p>

として、

.bar {
display: block;
}
.foo {
background: url(./foo.jpg) no-repeat bottom;
width: nnpx;
padding-bottom: yypx;
}

とやりました。Firefoxではちゃんと思ったように描画されてるのですが、
IEだと、画像がでないのです。
本来画像が存在すべき、nnpx*yypxの空白が存在して、それがアンカーになっています。

画像が出ない原因分かる方、お教えくださいますようお願いします。

自己解決とは言えないんですが、
a:link, a:visited, a:active {
background: transparent;
}
が原因のようです。
スタイルシートの順番は、a要素の背景よりもあとに、.fooの背景が来るようにしてるんですが、
そこらへん無視されているのでしょうか？

解決策としては、a要素に指定しない、とかしか思いつかないんですが、
他に良策は御座いませんでしょうか？　お教えいただけると幸いです。

何度もすみません。
書いたあとに思いついて試したんですが、
a:link, a:visited, a:active {
background-color: transparent;
}
にしたら、背景画像が優先されました。

板汚しごめんなさい。

これ、ってバグですかね。

>>129-131
えっとまず簡略化プロパティは他のbackground-*をリセットしてしまうということ。
あとはセレクタの詳細度(specificity)の問題だと思われ。
セレクタを a.foo にするとまたカスケードの順番が変わったりしてな。

>>132
そうなんですか。参考になります。
ただ、aのbackgroundと.fooのbackground（同じ簡略化プロパティ）では、.fooの方が後に記述してあるんですよね。
Firefoxの挙動の方が正しいと思うんですが、勘違いでしょうか？

>>133
a:link, a:visited, a:active { background: transparent }
.bar { background: url(foo.jpg) }

だと手元のIE6、Firefox1.0ともに背景画像は出ないようだぜ。
.barをa.barに変えると出る。

ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#cascading-order
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity

>>134
ということは、後から出てきてても、詳細度が違う、ってことですね。
勉強になります。
一応、body .barにしてたので、詳細度が勝っていた、ということに気付いてませんでした。
body .barでもIEではa要素のbackgroundが有効みたいなので、background-colorでいく事にします。

わざわざ有難う御座いました。
もっと精進せねば。

元に戻ったね。
昨晩の糞オタ共はもう来ないで欲しい。

>128

ありがとうございました

>>126
>補足だけど、ブロックレベル要素は「前後に改行」じゃなくて、「新しい行を生成」だからね。
>終了で改行してるわけではなく、次にブロックレベル要素しか出現しないから結果的に後方にも改行があるように見えるけど。

CSS仕様書の "Visual formatting model" を読んだことがあるのか。
ブロックレベル要素は「改行」でもないし、「新しい行を生成」でもない。
“Block formatting context” に基づいてボックスが生成された結果、
包含ブロックの上部から下部へと垂直方向にボックスが積み重なるのだ。
2つの兄弟ボックス間の縦の距離はマージンのプロパティによって決まる。

CSS でいう「行」とは、“Inline formatting context” における “line box” のことだ。
“line box” とは、1行を構成する複数のインラインボックスが含まれている矩形領域である。
テキストを含むブロックの内部は “line box” を縦に積み重ねたものから構成されている。

ちなみに「改行」とは、いわゆる改行コード(CR, LF)を指すか、
CSS2 であれば生成内容で "\A" を記述された位置のことだ。
br要素のスタイルは br:before { content: "\A" } で説明がつく。
それから、自動的なテキストの折り返しは「改行」とは呼ばない。

>>119-120 >>136
多くの質問者は、自分の意思を伝達するための能力に乏しい。
更に CSS や HTML の基礎を知らないから、明瞭な質問にならない。
そもそも彼らは回答者に何を伝えべきなのかすら理解していない。

こういう状況の中で回答者は、あれこれ質問者の考えを推察し、
解決しそうな手がかりを探り、少しずつ情報を求めていくのである。
回答者が皆親切なわけではない。時には嫌みぐらい言いたくなる。

>>124 がダメな質問の典型だ。無知は無知なりの説明の仕方があるだろう。
>>127 を最初から投稿すれば、直ぐに回答を導きだすことができるというのに。
少なくとも >>125-126 >>138 みたいな余計なレスは避けられたはずだ。
それにこの『レス』も本来は不要なはずだ。

それから >>129 は良い質問者だ。
理解してもらおうと努力している。これなら回答しやすい。

CSSには条件別処理とかできませんか？
もしA=0ならB=1、A=1ならB=0と、If〜End Ifって感じで

>>140
残念ながら出来ない。
セレクタを徹底的に活用すれば似たようなことは出来るかもしれないけどね。

文字にリンク貼ると下線つくんだけどどうやって消せますか教えてくださいまし

あら、ageなくちゃならんのですね
ついでにa:hoverの時、背景色を透明にできませんでしょうか…？

俺は釣られないぞ！

>139
がっかりするようなことをいうけど、
>>129は>>125-126 >>138 みたいな余計なレスをつけた人なのです。ごめんなさい。

>>138
絡む気はないんだけど、
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3
＞一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
を参照した答えなんだ。

別に「見栄えはこうなるべき。こうなるもんだ」と言いたかったわけじゃなくて、
改行が施される、という思い込みを払拭して欲しかっただけなんだ。

質問です。
黒背景の段を、ﾃｰﾌﾞﾙを<center>〜</center>タグで囲んだように、
綺麗に中央配置したいと考えております。
下記の記述だと、黒背景の段が大体真ん中には来るのですが、
画面の横幅を広げると余計な余白が出てきてしまい、見栄えがよくありません。
ブラウザ画面の横幅を伸縮してもそれに対応できるように
画面の中央に配置するにはどうしたら良いでしょうか？
ご教授お願いします。

#main {
    width:720px;
    padding:50px;
    position:relative;
    top:0px; left:50px; right:50px; bottom:0px;
    background:#000000;
}

wikiのcssを作るのに興味ある方いますか？

>>147
ＦＡＱも読まないで質問するのはやめて下さい。

>>147
>>5 のQ.2/A.2

>>147のスタイル指定の仕方を見ると、根本的にわかってない感じ。>>4で勉強し直せ。

>>146
HTMLの仕様書を持ち出している意図がわけわからん。
同じフレーズが使われているが、HTMLの仕様書とCSSの仕様書では意味が違う。

>>146
下らん言い訳を発言するために、わざわざ無駄な投稿をするな。

>別に「見栄えはこうなるべき。こうなるもんだ」と言いたかったわけじゃなくて、
>改行が施される、という思い込みを払拭して欲しかっただけなんだ。

あなた『も』可笑しな「思い込み」をしているから、批判したのだ。
要素の整形方法は、UA が実装しているスタイルシートに依存する。
テキストベースであれば本当に「改行」を挿入するだけかも知れない。
CSS適合であれば “Visual formatting model” に基づいて整形される。

HTML の仕様書は要素の整形方法について、詳細に規定したりはしない。
視覚系UAの整形結果の印象から便宜上そのように解説しているだけだ。
CSS の整形上の問題に対してHTMLの仕様書を参照するなどナンセンスだ。

よくわかった。だから、一緒にストリクトスレに帰ろう。な？





次、ﾄﾞｿﾞｰ

邪魔だからどいてくれない？　ご両人

え、俺?

俺とオマイか？

貴男と私よ。　ｳﾌｯ

一、質問者は必要事項を明確に伝えるよう努力すること。
一、質問に回答するだけの技量のない者は静観すること。
一、知識もなく揶揄ばかりの者は不快だから投稿するな。

http://piro.sakura.ne.jp/latest/2004/12.html#d6-70F9AE40-1
この記事の言いたい事は、ダメな質問に対する回答者の苦労とよく似ている。

一、無駄な自治はしないこと。

WIN95で動作するDVDのCSSを解除できるフリーのツール
あったら教えてください。

あ、はい?

ああ、はい?

cssを何とかするツールを作った少年、結局無罪だったんだっけ？

>>161
＞WIN95で動作するDVDのCSSを解除できる
　 　 　 　 　 　 　 　 ~~~~~~
DVDに限定する理由は何だよ！
ソフトが欲しけりゃソフト板に池
炎狐使えばCSSはローカルで簡単に切替可能

>>165
あ、いやいや。板違いなのはその通りなんだけども。
大雑把に言うと、DVDのコピーガードみたいなことをしているヤツもCSSって名前なんですよ。




次、ﾄﾞｿﾞｰ

○|￣|＿ ｷﾞｬﾌﾝ

質問です。
絶対配置したにもかかわらず、
WinIE6だと親要素の左上からの位置に表示されてしまいます。
FirefoxやNNではbodyからの位置で表示されます。

#leftbox {position:absolute; left:0; top:0; width:150px;}
#mainbox {margin-left:150px;}
#Layer1 {position:absolute; left: 200px; top: 100px; width:173px;
height:129px; }
#Layer2 {position:absolute; left: 300px; top: 200px; width:173px;
height:129px; }
#Layer3 {position:absolute; left: 400px; top: 300px; width:173px;
height:129px; }

<div id="mainbox">
<div id="Layer1" ><img src="image1.gif"></div>
<div id="Layer2" ><img src="image2.gif"></div>
<div id="Layer3" ><img src="image3.gif"></div>
</div>

<div id="leftbox">
〜〜〜
</div>

つまりIEでは#Layer1のleftの位置が350px

leftboxはPHP includeで他のページと同じ物を読込んでいます。
mainboxに関しても他のページと共有しているので変更しない。を前提にして

mainboxの中に表示させたいのは全て画像で、
ランダムな感じに微妙な位置に表示させてたいのですが、
IEとmozillaで同じ位置に表示させる事は可能でしょうか？

上の補足です
HTMLのバージョンはHTML 4.01 Transitionalでloose.dtdは指定しない条件でです。

html4.01,strict/IE5/Mac9にて確認。

ddを横2列と縦に並べたいのですがやり方がわかりません。
申し訳ありませんがｱﾄﾞﾊﾞｲｽをお願いします。

●　●
●　●
●　●
●　●
●　●
●　●

↑こういう感じにしたいのですが・・・。

すみません、ID出てませんでした。

何度もすみません・・・。

縦1列をふたつ並べればいいだろ

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

<td valign="bottom">あああ</td>　は、
cssではどう書けばいいのでしょうか？

>>175
ha?

ボックスの枠を点線表示にするにはどうしたらよいですか？

>>177
>>124に対する>>139を読んで己の身を振り返ってくれ。

>>175
vertical-align なんだけど、tdのは他のそれと働きが違うのでご注意を。

質問です。

<div><img><img><br><img><img></div>

のように記述して
Firefox で閲覧すると（Operaもそうだったと思う）
画像の上下に隙間があいてしまいます。
IEでは大丈夫。

実験ページ
http://www.geocities.jp/sugi103/css-sukima.html

body に　line-height : 1em;　と書いたら若干狭くなったのですが、
Firefoxで画像を完全にくっつけるのは無理ですか。

>>180
imgのmarginはどうなってんだ?

>>180
vertical-align:bottom;としてもだめですか？

>>178
失礼しました。
ソースもなしに訳のわからない事をしてしまいました。

#leftbox {
    width:150px;
    height: 300px;
    background:#666666;
    float: left;
}

#rightbox {
    width:150px;
    height: 300px;
    background:#cccccc;
    float: left;
}

上記の様に隣接している2つのboxの外枠、及び隣接部分を点線表示にしたいのですが、
方法のわかる方いましたらご教授願います。

#leftbox {
width:150px;
height: 300px;
background:#666666;
float: left;
border-right: 1px dashed #000000;
}

#rightbox {
width:150px;
height: 300px;
background:#cccccc;
float: left;
border: 0px;
}
これでいいか？

後は自力で頑張ってくれ

#leftbox {
width:150px;
height: 300px;
background:#666666;
float: left;
border: 1px dashed #000000;
}

#rightbox {
width:150px;
height: 300px;
background:#cccccc;
float: left;
border-top: 1px solid #0000ff;
border-right: 10px solid #0000ff;
border-bottom: 1px solid #0000ff;
}

これでなると思う

>>184
ありがとうざいます。
思い通りにできました。

おねがいします。

【html部分】
<body>
<div id="layout">
<div id="sub">あいうえお</div>
<div id="main">かきくけこ</div>
</div>
</body>

【css部分】
body{
font-size : medium;
font-family : "MS UI Gothic",sans-serif;
text-align : center;
color : navy;
background-color : #dcedc5;
margin-top : 0px;
margin-bottom : 0px;
}
#layout{
background-color : white;
border-right-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-right-color : green;
border-left-color : green;
width : 748px;
text-align : left;
margin-top : 0px;
margin-bottom : 0px;
margin-left : auto;
margin-right : auto;
}

#sub{
width : 130px;
background-image : url
height : 610px;
float : left;
background-position : center;
background-repeat : no-repeat;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
padding-bottom : 5px;
}
#main{
float : left;
width : 590px;
height : 610px;
background-image : url
background-repeat : no-repeat;
background-position : center;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
padding-bottom : 5px;
}

こんな感じで書いているのですが、NN7でlayout部分の白背景と左右のボーダーが出ません。
IEとオペラとsleipnirはきちんと表示されます。
何処が悪いのか煮詰まってしまい全然分かりません。
よろしくお願いします。

186氏もありがとうございます。
取り合えず下記の様にしました。
所で、点線の切れている部分(白い点線の部分)は背景色に依存するようですが、
この点線の切れている部分の色をBOXの背景色と同一にすることはできないのでしょうか？
度重なる質問申し訳ないです。


#leftbox {
width:150px;
height: 300px;
background:#666666;
float: left;
border: 1px dashed #000000;
}

#rightbox {
width:150px;
height: 300px;
background:#cccccc;
float: left;
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;
}

>>180での、Firefoxで画像の上下に隙間ができる問題ですが、

>>181
imgのmargin　無指定だったのを0pxに指定しても直りませんでした。
>>182
vertical-align:bottom;としたら見事にくっつきました。
素早いレス、サンキュウでした。

>>193
原因もちゃんと調べておこう。

質問させて下さい
CSSで｛position｝の領域を枠線で表示してくれる
補助ソフトがあったのですが、そのソフトの名前が分かる方
いらっしゃれば教えて下さい、お願いします。

｛position｝の領域
とはなんぞや？

>>196
CSSのpositionプロパティを説明したかったんです。

positionでセレクタで囲んだ内容の表示位置と寸法を絶対指定したときに
その大きさを枠線で表示してくれる補助ツールをどこかで見たんですが
ツールの名前分かる方、重ねてお願いします。

ツール？
そんなもん使わなくても、
全称セレクタに、ボーダー指定すればすむのでは？
確認したら消す。

>>198
良くやるよね、それ。
ボーダーの1pxが気になるときはbackground-color使ったり。

>>188-191
#layoutのheightを明示するか、もしくは
>>6「浮動要素の高さもheightに含めさせる方法」

>173
レスありがとうございます。

<dl>
<dt>あいうえお</dt>
<dd>●
<dd>○
<dd>●
<dd>○
<dd>●
<dd>○
</dl>

あいうえお
●　○
●　○
●　○

縦を横にふたつ並べるのではなく、横2列を二行に、という方法はないでしょうか？
●/○にはリンクバナーを貼りたいのですが・・・。
縦1列を横に並べる方法も基本でいいので教えて頂けると助かります。
たくさん質問してすみません。

>>201
だったら "●　○" を縦に三つ並べればいいんじゃないかな。

>>201
<dl>
<dt>あいうえお</dt>
<dd>
　<div>
　　<ul><li>●</li><li>●</li><li>●</li></ul>
　</div>
　<div>
　　<ul><li>○</li><li>○</li><li>○</li></ul>
　</div>
</dd>
</dl>

強引かな？

<img>←横幅600pxほどのタイトル画像
<div></div>←600×40ほどのメニューバー
<div></div>横幅600のメインコンテンツ
こんな感じのをmargin:0pxで縦に並べたレイアウトの
サイト作ってるんですよ。
それで、これ全体を中央に表示したいのですが。

<table align="center" cellspacing="0" cellpadding="0" border="0" width="600">
<tr><td></td></tr>
</table>
ってやってセル一つのテーブルつくってその中にほりこんじゃんたらいいんですが
テーブル本来の使い方じゃないし、ほかに方法があればそっちを試してみたいのです。

>202,203
ありがとうございます。>202さんのやり方にて解決しました。
応用ですね。

>>204　またＦＡＱも読まないクソ質問ですか。

IEとopera+firefox(以下opera群)の widthとpaddingの組み合わせでの長さの違いに悩んでいるのですが、
これはやはりどうにもならないでしょうか。

あと、テーブルの様な配置でリンク集を作っているのですが、
<div>
<span style="width : 150px ; padding : 1px 10px 1px 10px; border-bottom : 1px solid gray;">
nullpo
</span>
<span style="width : 250px ; padding : 1px 10px 1px 40px; border-bottom : 1px solid gray;">
gatz!!
</span>
<br>
<!-- 以下同様・・・ -->
</div>
とすると、opera群はwidthを無視しているのか、IEとopera群では全く違った見栄えになります。

<dt><dd>や<div>をfloatで繋げていけばOpera群では問題なくなりますが、IEでは隙間が出来ます。
見た目の一行一行を<dl>や</div>で区切ればどちらでも長さ、継ぎ目ともに問題なくなります。
しかし<dl>系の「定義リスト」というタグの意味が気になりますし、<div>では気味が悪いのでどうにかならないでしょうか。
素直にテーブルを使った方がいいのでしょうか。

>>207
>opera群はwidthを無視しているのか
widthは被置換インライン要素に適用できません。無視するのが正しい解釈です。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#the-width-property

被置換インライン要素→非置換インライン要素

>>208
ありがとうございます。非置換インライン要素で検索をかけるとズバリその物が出てきました。
CSSやればやるほどIEの欠陥が浮き彫りになってきました。
しかし、IEの普及率を考えると無視できず、困った物です。

>>204
なんつー文章だ･･･

これがゆとり教育の敗北者か・・・

>>207
DOCTYPEスイッチとこれで何とかしなさい。
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5向け。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。*/
}
以前のスレッドでも既出だが。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-box-sizing

>>212
せめてIEの標準準拠モードにできればいいのだが、
ttp://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp
にあるようにDOCTYPEをMSの言う通りにしても標準準拠モードにならない。
コピペしてもHTML4.01strictにしても駄目。何故だ、勘弁してくれ。

「ドキュメントの先頭」とは「ファイルの一行目、一文字目から」だったのですね。
標準準拠モードになりました。精進致します。

>>211
たしかに204は日本語に問題あるが、
夜中の5時に書込みをしてるお前は人生の敗北者だろ？

>>215
全員が全員、昼に働いてると思うなよ。
夜に働いてる人間も居るという事を忘れるなよ。
ただ、>211が働いてるかは知らんが。
という俺は無職・引きこもり

>>216
確かにそうだな。ただ深夜でも頑張って働いてる人に対して言ったつもりはない。
俺は勝手に211が無職だと思っただけだ。
あんた、ここで回答できるくらいの技術があるなら仕事なんていくらでもあるだろう。

技術って呼べるほどのことかよ

SP1で正常に動作していたスタイルシートでのフォントサイズ指定がSP2では効果なしの場合があるってホントですか？

>>219
そういう話は、試してみて報告してくれるとみんな喜ぶと思った。

>>215
5時は早朝でしょ。
夜中と認識してしまうのはちょっとヤバイよｗ

>>221
粘着

何やってんだおぬーら(ﾟДﾟ)
日本語が不自由なのはスルーが鉄則だろ！
なんでそこから無職云々って話にまでなってんだ？

＞ID:eyeRYZLl
おぬーもいい加減にしろ
かく言うおぬーも何やってんだかな(･∀･)ﾆﾔﾆﾔ

>>223
キモッ

キモッ、とか、ウザッ、とか使うのは工房まっただ中

視野が狭そうだし、朝から晩まで家にいるっぽいし
引き篭もり工房or厨房といった所か

＞日本語が不自由なのはスルーが鉄則だろ！
＞なんでそこから無職云々って話にまでなってんだ？

その鉄則とやらに拘束力が伴わないからだ。
ついでに、話がどんどん展開するのは、結局みんなそういう話を無視できないからだ。
なにか刺激されるものがあるんだろきっと。

流れ止めたいなら、「やめろ」とかいうよりは、
質問回答の自作自演でもして強制的に塗り替える方が早いと思ったりも。

質問です。
なんか、FireFoxとかネットスケープとかで見ると横スクロールが出ちゃうんですけど
なぜなんですかね？
InternetExplorer5 を使っています。

>>228
ボックスの幅の算出の仕方が、旧MSIEは他と異なるからです。
FireFox などの算出の仕方が正しいのですが、
ボックスの幅にはwidthで指定されてモノの他に、paddingの値も含まれます。

質問です。
text-align: center; としても FireFox などでは真ん中寄せされません。
なぜですか？

>>230
text-align はインラインレベル要素の寄せです。
MSIE5系では間違ってブロックの寄せもコレで制御されていましたが、6の標準モードでは
修正されました。
真ん中寄せにしたいブロックの幅を定義して
ブロック [
width: 適宜;
margin-left: auto;
margin-right: auto;
]
とします。旧MSIEをカバーするために、
ブロックの親{
text-align: center;
}
ブロック{
text-align: left;
}
を追記すると良いでしょう。

>>231
> width: 適宜;

違う。CSS 界隈における最大の間違いがこれ。正しい知識がある人は殆ど居ない。
これでセンタリングというものが実現されるのは、単位が%に限る。
(逆に、% で width が与えられていれば、margin も % で与えることが可能であり、auto は出て来ない。)

背景画像を思い描いて欲しい。
background-position: center center;
とした場合、背景画像の幅(px)次第では、左側にはみ出した部分は見えない。
margin-(left|right): auto; とは、それと同じ。
マイナスのマージンも均等に割り振られる。
正しく実装されているのは mozilla だけだが。

IE6がルールなんだよ！

例えば「こちら」と書いた文字をクリックすると、指定されたサイトへジャンプできるようにするにはどうすればいいんでしょう？

アドレス表示をクリック→ジャンプ、というのはできるんですが、そのアドレスを普通の文で隠すというか、よくサイトで「こちら」と文字が書いてあって、それをクリックするとそのサイトへジャンプするというアレができないんです。
ジャンプするサイトのアドレスを文字表示で隠したいんですが。

>>234
よくわからんがCSSと関係あるのか?

いまいち意味がわからんが
<a href="http://****">こちら</a>
じゃダメなのか？

とりあえずこちらへどうぞ
http://pc5.2ch.net/test/read.cgi/hp/1102337766/

>>234
教えてやるからさっさと消えろ、このクソバカが！！
<A href="リンク先のURL">こちら</A>

うるせぇこのボケ！！


ありがと☆

以上　自演でしたー

>>232
行っている意味が、日本語的に、いまいちわかりづらいんだけど。

>>231 のやり方で、width がウィンドウ幅を超えたときに左右とも均等に隠れるように
なるのが正しいんでしょ？で、MSIEはそれはユーザビリティに欠けるから（かどうかは
知らんけど）右側だけが隠れるように実装しているってだけじゃないのかな？

それとも、幅の固定されたブロックを真ん中寄せにする方法は無い、っていいたいの？

少々スレ違い気味な感もあるのですが失礼します。
自分で調べた限りでは解らなかったので、
対処方法自体ないのかな、とも思っているのですが質問させてください。

p要素で文章をマークアップしていて、そのp要素にはwidthが指定してあります。

その文章中に、スペース無しで連続する英数字の文字列（URLなど）が出現した場合、
通常の文章と同様、p要素のwidthで自動折り返しをしてくれるブラウザ（MSIEなど）と、
自動折り返しをしてくれないブラウザ（NN・Opera・FireFoxなど）と、
2種類（他にもあるのかもしれませんが）の挙動があります。

このうち後者、つまり、要素に指定されている幅をぶちぬいて、
スペースが無い英数字文字列等を頑なに1行で表示するブラウザで、
そういった文字列を一定の幅にて自動折り返しさせる方法というのは無いでしょうか？

JavaScript で文章中のクソ長い単語を途中でぶったぎればいい。
CSS でやりたいなら IE 専用の word-break を使うか overflow ではみ出ないようにして代用する。

IE、opera、NS、FireFox等のブラウザ全てにCSSを対応させるにはどのようにしていますか？
Javascriptでブラウザ判別をして、そこから個々に対応したCSSファイルを読み込ませる方法等
もあるようですが。

>>243
全てに対応できるようなCSSを書く

んだんだ

>>243

できるだけクロスブラウザなCSSを書く（Geckoベースで）
↓
それでも駄目なところを、htmlのコメントで振り分けを書く（MSIE用）
↓
それでも駄目なところを、CSSのコメントで振り分けを書く（MacIE用）
↓
それでも駄目なところを、JavaScriptで振り分けを書く

ってのでどうだ。

できるだけクロスブラウザなCSSを書く（Geckoベースで）
↓
妥協する

>>246
実質的に一般に普及しているのはMSIEだと思っているのですが、
Geckoブラウザをベースに作成した方が良いのですか？
それから、htmlのコメントで振り分けを書くというのはどういう意味でしょうか・？

CSSと、うたわれているようだが、デザインには、ちと限界があるのではないか、どれも似たり寄ったりのデザイン。

IEは色々と怪しいお節介をしてくれるので、
最初はGecko系に合わせて作った方があとあと楽になる場合が多いと思う。

>>247
やぱ妥協ですかw
operaとかFireFox使ってる程のユーザがいなそうだから、取り合えずMSIEとMSNS、
MACIEとMACNSだけでも正常に表示されればいいんですが・・・w

>>249
最近のフルFLASHサイトに見飽きてしまい、
CSS禅庭等にあるふるCSSサイトを見ていると、妙な新鮮味を感じます。
日本のサイトにはない、海外のサイトの独特(癖のある)なデザインが好きでつ。

補足で、
＞operaとかFireFox使ってる程のユーザがいなそうだから
というのは、私の作るサイトの対象は友人知人間で使用し、PCに無頓着な人ばかりだから
いなそうだな、という勝手な解釈でした。

<dl>
<dt>aaa</dt>
<dd>hoge</dd>
<dd>piyo</dd>
<dd>pico</dd>
</dl>
dd{
display:inline;
float:right;
}
を

aaa
　hoge　piyo　pico
って感じに横並びにしているのですが、
<dd>の項目数が増えてくると自動的にウインドウサイズに
合わせて改行されてしまいます。
横スクロールを出しても良いので、ずらーっと横並びにするには
どう指定すれば良いのでしょうか？

>>253
display:inline;とfloat:right;とを重ねて指定するのは無意味です。
その書きぶりだと、一から勉強し直した方がいいかと。

IE6以外は無視していいですか？

>>255は無視していいですね？

いいえ、鉄の斧です。

>>255
せめてIE、NSはサポしないとイカンのではないでしょうか？

>>255
好きにしろ。どーせ誰も見ないんだから。

float で画像に文字を回り込ませることができますよね。

文章文章文章文章文章　IMG
文章文章文章文章文章　田中
文章文章文章文章文章文章文章

このように、画像とその下の文章ごと、回り込ませる
ことできますか？

<div>で囲った写真と名前を、floatさせようと
して失敗しています。FAQの5をみたんですが
いまいち理解できてません。

では理解できるまで勉強してきなさい

>>261
嫌な奴ですね、あなた。
{ text-align:center; padding:0px; width:180px; height:auto; float:right; }
でなんとかクリアーできました。

>>262
＞FAQの5をみたんですがいまいち理解できてません。

こんなこと言われちゃ>>261の返答は妥当だろw

で、１５分で自己解決。読んでないことバレバレ。

嫌な質問者ですね、ああた。

アンカー付けようね。

質問です。
角の丸い画像を使用せずに、ボックスの角を丸くする方法はありますか？
また角の角丸の半径等を変更する事はできますか？

まだ無理です。
次に期待。

>>268
次に期待というのは、次発表される新しい仕様のCSSということでつか？

新しい仕様のCSSがあっても、ブラウザが対応してなけりゃ・・・

まあね

div＆absolute厨です。

IE6.0でとりあえず問題なく表示されるようＣＳＳを組みました。
XHTML1.1、ＣＳＳともにvalidなものです。

で、IE5.xであったような、margin,paddingに対する
height,widthの解釈の違いはIE6.0で修正されたらしいのですが、
どうもIE6.0でもそのあたりの解釈の違いっぽいのが見受けられます。

#nurupo {
width : 350px;
height : 85px;
padding : 10px;
position : absolute; top : 490px; left : 15px;
border : 1px solid #666666;

}

IE6.0ではパディング込みでwidth=366pxなんですが、
NN7.1ではパディング込みでwidth=386pxになってしまいます。
結局IE6.0になってもNNとは解釈が違うって事でいいんですかねぇ？

>height,widthの解釈の違いはIE6.0で修正されたらしいのですが、

　なんじゃこりゃ？

>>272
> IE6.0ではパディング込みでwidth=366pxなんですが、
> NN7.1ではパディング込みでwidth=386pxになってしまいます。
の"width"って言うのはどこからどこまでの距離をさしてるのよ？
まあ大方IEではXML宣言があると標準準拠モードにならないのが原因だろうけど。

>>272
まあFAQ嫁

>>272
XHTMLでも、xml宣言するとDOCTYPEスイッチが互換モードになるんだよ。

XHTMLでも、WinIEはxml宣言するとDOCTYPEスイッチが互換モードになるんだよ。

XHTMLでも、UTF-8エンコードの文書ならxml宣言省略できるよ。

UTF-8 なら encoding="UTF-8" が省略できるだけ。
UTF-8 で version="1.0" なら、xml 宣言が省略できる。

http://template.bufsiz.jp/template.html
のページですが、IE以外で表示すると、どうしてもレイアウトが崩れてしまいます。
どうして、崩れてしまうのでしょうか？
色々試したのですが、どうしても崩れてしまいます。
後、ページの成型に関しては、"position"と"float"のどちらを利用したほうが良いのでしょうか？
ご教授お願いします。

>>280
IEなら標準準拠モードにして書き直すことをおすすめする。

> "position"と"float"
どっちでも。FAQ見れ。

>>280
widthが徹底的に間違ってる。
とりあえずborderはずしてがんばれ。

どうもありがとうございます。
標準準拠モード書き直そうと思います。
widthがぴったり合っていたら、形は崩れないのですか？
崩れの原因がわからないので・・・

IEでは崩れないfloatってまぁ、大概はclear忘れ

.code{
font-family: "ヒラギノ丸ゴ Pro W4", Verdana, Arial, sans-serif;
font-size:small;
color: #888888;
line-height:100%;
background-color: #ffffff;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
padding: 5px;
margin-left: 15px;
margin-right: 15px;
width: auto
}

これ↑をつかって
四角でかこわれたテーブルのようにみさせているのですが
セルで区切ったようにみせるには、どうすればいいのでしょうか？

ーーーーーーーーーーーーーーーーーーーー
｜あああ｜いいい｜ううう｜えええ｜おおお｜
ーーーーーーーーーーーーーーーーーーーー

お願いします。

>>284様
ありがとうございます。
clear　は何か分からなかったので調べてみましたところ
回り込みの解除だったんですね。
本当にありがとうございました

http://template.bufsiz.jp/template.html
度々すみません。自分なりに色々調べて改善してみたのですが、
一番上の空白、メニュー上下の空白がどうしても取れません。
IＥでは、空白は表示されてないのですが…マージンは0にしてあります。
どうしてでしょうか？

テンプレのwikiのF&Qにも書いてないようで、
このスレを[table]で検索しましたが出てこないので質問します。

<html>
<head>
</head>
<body>
<table width=300 style="margin-left:auto;margin-right:auto;">
<tr><td>
<table style="position:absolute;">
<tr><td width="200">テストメッセージ</td></tr>
</table>
<div style="position:absolute;left:200px;top:40px;">←leftを指定するとズレる場所
テストメッセージより右に表示したい
</div>
</td></tr>
</table>
</body>
</html>

とした時、
leftを指定してしまうと親タグの開始位置がleft:0pxになってしまうようです。
上手に「テストメッセージ」の右側に「テストメッセージより右に表示したい」を表示する方法を教えてください。

質問なので一応IDを出しておきます
>>288は私です。

WikiのF&Qにはtableについて書いてありましたが
これについて解決できるものではないと判断したのでこちらに質問させていただきました。
（Wikiの方ではtext-alignでtableタグがセンタリングできるという事でした。）

>>287

H1 {
font size: 50px;
color: #ffffff;
border: 0px solid #0000ff;
margin-top: 30px;
margin-left: 20px;
}

margin-top: 30px;→0
padding-top: 30px;



H2 {
font: 15px;
width: 141px;
color: ffffff;
text-align: center;
background: url(image/kabe.png);
margin-right: 1px;
padding: 5px;
float: left;
}

margin: 1px;→0 1px 0 0;

　試しにやってみれ

リロードして正解だったぜ。ｱﾌﾞﾈｰ。

>>287
IEでも文字サイズを変えると崩れるよ。

>>290様
自分の思う通りの表示させることができました。
自分なりに本気で頑張っても無理だったもので・・・・とても嬉しいです。
ほ、本当にありがとうございました！　とても感謝しています。

>>292
　ここ行って
http://www.bradsoft.com/download/index.asp
　これ落として、使ってみて。フリーだから。
TopStyle Lite 3.10 (Free) (1.75MB)

　自分で設定したcssが目で見えるから便利だよ。

>>291様
ご指摘ありがとうございます。
簡単なところを見逃していました。
改善もできたので、一件落着しました。
皆様　本当にありがとうございました

　　なんじゃ　　すまんのう　290だた。

　　　あぁ

>>293様
あ、ありがとうございます。
これから、アルバイトなので帰ってきてから、DLしたいと思います。
ありがとうございました

がんがれよ

>>288はテーブル・レイアウトを止めなさい。
質問文が意味不明、「親タグ」とはどれのことか。
position:absolute;の意味をわかってるのか、なぜ二重に指定してあるのか。
なぜ中央寄せにした中で絶対配置をするのか。
とにかく無茶苦茶なソースでんがな。

でんがなソース　新発売！

>>299
レスありがとうございます。
テーブルを使わないと800x600用のレイアウトが難しいので使ってます。
親タグとは親テーブルタグ（センタリング用のテーブルタグ）のことです。説明不足失礼しました。
JavaScriptを併用して『メニュー』を作りたいのでabsoluteとして使用しています。
中央寄せの中で絶対配置は駄目なのでしょうか？どうにか対処の仕方はありませんか？
無茶苦茶なソースですみません。

メニューのために参考にしたURLはこちらです。
　ttp://iswebmag.hp.infoseek.co.jp/sample123.html

この横並びしたメニューを縦並びに変えようとして上手く行きません。
JavaScriptスレとどちらに質問しようか迷いましたが、
CSSにおいて上手く行ってないようなのでこちらに質問しました。

>299は口が悪いかもしれんけど
tableタグとセンタリングを併用してposition:absolute使うのは良くないと言ってるんだ
>>301
別の道を探しなされ

>>301
テーブルの方はいまいちよく分からないが、
その横並びのメニューを縦並びにするだけなら
div の配置を縦並びに変えてやればいいだけなんじゃない？

例えば

position:absolute; left:20px; top:10px　　←最初の<div>の配置
position:absolute; left:20px; top:35px　　←次の<div>の配置
position:absolute; left:20px; top:70px　　←その次の（ｒｙ
以下略

これじゃダメ？

べつに position:absolute 使わなくったって(ry

>>288　こういう事か？

<html>
<body style="text-align:center;">
<div style="position:relative; width:300; margin:0 auto;">
<div style="float:left; width:200px; background-color:#daa;">テストメッセージ</div>
<div style="position:absolute; left:200px; background-color:#aad;">テストメッセージより右に表示したい</div>
</div>
</body>
</html>

>>305.288
オマエら訳の分からないことはやめて下さい。

全ページに渡って配置されるMenuなどで、上、左右端まで背景に色をつけたい場合、
CSSでやろうとするとtableのように本来の背景色が見えてしまいます（特に上）
以前までは上部に別フレームを作成してそこの背景色を変えていたのですが
同じ事をフレームを使わずに出来るのでしょうか。

>>307
bodyのマージンかパディングじゃないの?

質問失礼いたします。
ttp://www.csszengarden.com/?cssfile=/098/098.css&page=5
このサイトの文章の枠(枠が立体的になっていて、シマ模様がある感じ)
はどのようにすれば作成できますか？

>>309
「ソース見る」は基本だぜ。
ttp://www.csszengarden.com/098/footer_bg.gif

>>307
セルとセルの間（cellspacing）に色を付けたいという事でしょうか？

>>309
CSS borderで検索するといいでしょう。
ちなみにborderの値にsolidの代わりにoutsetを入れると立体枠が出来ます。
insetにすると埋まってるように見える。

>>305
ありがとうございます。
これが作りたかったのです。
margin:0 auto;でセンタリングが出来るとは知らなかったがとても恥かしく思えます。
本を一冊持っていましたが、残念なことにmarginにautoという値について記述がありませんでした。
>305さん、本当にありがとうございました。

>>309
上と左、下と右でボーダーの色を変えて、
バックに1pxの格子画像を入れればいいんでないかしら

>>310
サンクスです。画像でしたか。
あの模様までCSSでやるのは無理ですよね。

>>311
ありがとうございます。
勉強してみまつ。

>>313
ありがとうございます。
立体感出すのはできるんですが、模様は画像を使わないとだめですよねぇ。

>>312
margin:上　右　下　左;
margin:上　左右　下;
margin:上下　左右;
margin:上下左右;
という風に認識されます。
覚えておくと便利。

>>308
0に指定しても余白が出来てしまうんですが指定箇所がおかしいのでしょうか。
background　と　tableでそれぞれ行いました。

>>315
知ってはいましたが全然使ってませんでした。
いつもmargin:Npx;とそのブロックの標準を指定して、
違うものだけ例えばmargin-right:Mpx;と変えていました。
margin:上　右　下　左;の方が綺麗ですね。
ご指南ありがとうございます。

>>307=>>316
> CSSでやろうとするとtableのように本来の背景色が見えてしまいます（特に上）

> background　と　tableでそれぞれ行いました。

このへんが意味不明。最小限のソース出してみたら?

余談ですが、夜の方が良い回答者がいて良スレな予感。

<ol>
<li id="FOO1">bar</li>
<li id="FOO2">bar</li>
<li id="FOO3">bar</li>
</ol>

として、それぞれのidに対し、
#FOO1 {
background: url(foo_01.jpg) no-repeat right;
padding-right: 120px;
height: 160px;
}
とやって、「右側にイメージを置く」というのをやってみました。
「IEでは数値が下部に来る」というのはバグ辞典に載ってるので諦めましたが、
IEで数字がol要素が与えている数値が全部1になってしまいました。

回避法はありますでしょうか？
わかりましたらお教えくださいますようお願い致します。

<DIV style="background: #FFFF66; margin: 0pt; padding: 0pt;">
背景指定はこれです

<table width="100%" height="100%" cellspacing="0" cellpadding="0" margin"0">
<tr>
<td><table width="100%" height="100%" cellspacing="0" cellpadding="0" margin"0"><tr>
<TD BGCOLOR="#800000" height="30" align="left">
表がこちらです（削り方がおかしかったらごめんなさい）

やりたいのは表の上部及び左右の背景を、通常の背景のように画面の端まで表示させたい
ということなんですが…。

連投申し訳ありません。
そろそろ休むのでまたじっくり考えてみます。ありがとうございました。

>>307
えーと、div自体のマージンがなくても、bodyのマージンが残ってるんじゃないか？

>>321
とりあえずHTMLが変だな。まずValidにだ。

>320
複合的なバグっぽいね
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b154.html

<ol>
<li><div id="FOO1">bar</div></li>
<li><div id="FOO2">bar</div></li>
<li><div id="FOO3">bar</div></li>
</ol>
にすれば上手くいくかな

あとリスト番号を上にもってきたければ
li {vertical-align:top;}
をつけてみ

>>325
有難う御座います。
li要素内においてるものがブロックレベル要素だったので、それにidを振ってみたらうまくいきましたです。
あと、番号位置にまで回答くださって非常に助かりました。

有難う御座いました。

CGI(掲示板)のページ(www.xxx.xxx/bbs.cgiのような)のフレームの色を変えるのってどーするのですか？
普通のHTMLページのフレーム色を変えているので統一したいのですがCGIファイルに記述するのか別の方法なのかもわかりません。
それにCGIファイルに記述するにしても、どの部分にどの様なものを書き足すのかもわからず困っております、どうかわかる方教えてください。

>>327
どうやって、cssを適応させてる？
外部スタイルシートなんだったら、head要素内にlink要素でcssへのパスを通せばいい。
注意点は、""内の場合、\"としないと、動かなくなること。
他の属性値がどんな風に書かれてるかをよく見てみなされ。

>>328
外部スタイルシートではないです。
外部スタイルシートで指示を出すなら今回の場合はCGIファイルにlink要素で
記述すればいいのでしょうか？
アドバイスの意味をよくわかってないようでしたらすいません。

>>329
CSSの記述の仕方、って種類があってね、
〜.cssというファイルを作って、そこにcssの内容を記述、
head要素内に、
<link rel="stylesheet" href="〜.css" type="text/css">
などと書いて、呼び出す。という「外部スタイルシート」と、

<p style="〜: 〜;">などと、直接書く「インラインスタイル」というのがあるわけ。

後者なのなら、cgiファイルのframe定義を行ってる部分（文字列で検索すれば見つかると思う）に、
それのstyleの記述をすればいいだけ。
そのときも、
print "<frameset〜";
とかになってるなら、
style=\"〜\"と\でエスケープしとかないと動かなくなっちゃうからね。

つか、既にcgiスレ逝きの話題だな。

>>330
どっちの板に書き込むか迷ったんですがこっちの方が内容が近いかと思いまして・・・
色々情報を頂けたので、あとはもう一度調べなおしてやってみます。
ありがとうございました！

>>331
cgiファイルのコピーとっておくのを忘れるなよ。

文字を楕円で囲むのってどうやるんだっけ？

>>333
マルチ帰れ

.text h2 {
font-size: 120%;
color: #445566;
text-decoration: none;
border-style: solid;
border-width: 0px 30px 0px 5px;
border-color: #e9ecf0 #e9ecf0 #445566 #445566;
padding: 0px 10px 0px;
border-bottom: 2px dotted #445566;
}

がうまくいきません。
過不足なく組んだつもりですが、順序が違うのでしょうか？

いったい何がうまくいかないのか。↓について一言どうぞ

やりたい事は、
左に幅5px、高さ120%の#445566を表示させ、中に同色のfontを。
bottomに同色の2pxドットで組み合わせたいのですが、
ボーダー指定してある30px分だけ1pxのドットが出てしまうので、これを消したいのです。

たのむから日本語学習してから来てくれよ…orz

すいません、言葉で説明しづらいので・・

こんな風にしたいのですが、

■．．．．．．．．．．．．．．．．．．．．．

>335のだとこうなってしまうんです。

■．．．．．．．．．．．．．．．．..................

※※※※※※※※※※※※※※※※　重　要　※※※※※※※※※※※※※※※※※※※

　クリスマス廃止のお知らせ

2003年12月25日を持ちまして、クリスマスは廃止となりました。
これによりクリスマスイブも廃止させていただきます。
継続を望む声もありましたが、近年クリスマス本来の趣旨から離れた行為を行う者が増え、
これ以上運営していくことは不可能であると判断しました。
なにとぞご理解頂けますようお願い申し上げます。
長年のご愛顧まことにありがとうございました。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

>>339
要するに、右ボーダーと下ボーダーの交わる角の部分に、
下ボーダーの色を出したくないってことかな。
交わる部分で両ボーダーが重なるのは仕様なので、そのままでは無理。

h2をdivとかでくくって、divに左右ボーダーとpadding:0;を指定、
h2に下ボーダーとmargin:0;を指定してみたら？

>335
ボーダーの角の扱いはそうなる
ブロック一つ増やすか画像で対処するかだな

>>339

ボーダーをばらばらに設定すると
角の部分は↓こんなふうに分かれる。

　|　|
　|　|＿＿＿＿
　|／
　￣￣￣￣￣
だから、その小さく見えるドットもよく見るとななめになっているはず。
ちなみに左の5pxのところにもドットは見えるはず。

だから、そのやり方でドットを消すことはできない。
消したいなら別々に分けて表示するしかない。と思う。

>341-343
なんか警察にさっき呼ばれたのでレスだけしていきます。
帰宅したら早速試してみます。ありがとうございました。

文字を楕円で囲むのってどうやるんだっけ？

>>345
http://pc5.2ch.net/test/read.cgi/hp/1102337766/840

>>345
こいつも本当にしつこいな。もう答え出ただろ

　＿＿＿＿＿＿
（　 こんな感じ　 ）
　￣￣￣￣￣￣

ほらよ

divよりもulとかそういう系のタグ使って
ＣＳＳと関連付けたほうがいいんですか？

文字を楕円で囲むのってどうやるんだっけ？

誰かが答えるまで言いつづける気だぞ
答えてやれよ

>>350
じゃあお前が答えろ

>>351
お前もとりあえず「無理」とか答えておけばいいじゃんかよう

>>348
CSSに関して言えば、好きなようにすればいいと思うよ。
CSSを使うことが目的のdivによるマークアップは感心しないけど。

>>348
あくまで骨組みになるHTMLありきってことで、
CSSからHTMLを考えるのは考え方が逆ってことね。

コンテンツがリスト的なものなら、それはdivよりulの方がいいかもしれんし、
特に列挙的な要素でもないのに、わざわざdivよりulを取ることもない。
と、思う。

>>353
>>354
やっぱりそれぞれのタグに相応しい使い方をして
ＣＳＳで装飾していくもんですよね。
スタイルシートを切ったら凄くキレイにマークアップされてるサイトを見つけて、
ちょっと自分の考えが本末転倒だった事に改めて気づきました。

今は画像の扱いに困ってます。
結構サイズがあるので、分割して体感速度を上げようとしてるんですけどね。
これまたテーブルなら問題ないけれども、
CSSで配置すると切ったときに見てられないようなことに・・・。

ほんと色々考え出すとコーディングって凄く難しいと感じる今日この頃。

>>355
言いだすときりがないから
テーブルでレイアウトしる

こんにちは。みなさま。長くなりますがどうかよろしくお願い致します。

Firefox であるページを表示すると、妙なラインが入る...のですが。。

こちらのページです。
http://www1.ocn.ne.jp/~liolion/Sibamta/Mainindex2.htm
こちらのページの、「グローバルメニュー」のところのcssは、
.globalmenu{text-align:center;background-color:#666;
color:#ccc;line-height:1.4em;}

このようになっています。この時、上記URLのページを読み込んだ直後には問題はありません。しかし、富士の絵が隠れるくらい下スクロールし、それから、上スクロールしていくと、富士の絵にラインが入るのです。それはリロードすると消えます。
入るラインは、こんなかんじです。
http://www1.ocn.ne.jp/~liolion/mixi/Moziline.htm

また、
.globalmenu{text-align:center;background-color:#666;color:#ccc;
line-height:1.4em;}
のうち、line-height:1.4emをとる、あるいは、1.3emにする、あるいは、1.5emにすると、ラインが入る現象が起きなくなります。

尚、この現象は、私の環境では、IE5.5 、operaOpera7.53 では起きていません。現象の起きているFirefoxの情報には、「Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP;
rv:1.7.5) Gecko/20041108 Firefox/1.0」となっています。何かお心当たりの方、おられましたら、どうぞよろしくお願い致します。

当方の環境：
OS windows 2000 sp4　／　DIMENSION8100 DELL ビデオカード NVIDIA GeForce3

続きがあるのですが、長すぎるようなので、分けます。

357にかいた者です。続きです。
上記のページをもっと簡潔にしてかつ、現象がおきるページを作りました。
http://www1.ocn.ne.jp/~liolion/mixi/mozitest2.htm

またこのサンプルで試したことは以下です。
１．表示させた後、スクロールすると現象が起きる。
２．Firefoxの機能で文字サイズを１段階大きくする
３．リロード後、スクロール＞現象起きず

現在、私のFirefoxの「ツール／オプション／フォントで、フォントサイズ」は
全て14pxなのですがそれを
１．を全て15pxにする
２．同様の操作をしても、現象起きず。

１．上記の状態で、スタイルシートの中の
.globalmenu{line-height:1.4em;}を
.globalmenu{line-height:1.5em;}に変更
２．現象が起きる

以上です。何に起因していると考えられるでしょうか。。。
どうぞよろしくお願い致します。

>357

こちらでは同様の現象を確認できませんでした。
よって、cssとは別の問題ではないでしょうか？

>357
過去スレでも誰かが似たような現象をゆってたなー
環境によって出る出ないがあったようだし
結局解決策はなかったよーな……
そんなに気にしないでいいと思う

単位にemとか%とか使うと
表示するときにどうしても端数ができる
そういうのが影響してるんじゃないかと思うがどうなんだろね

>>357
私の環境でも、サンプルページを見た限り現象確認できませんでした。
綺麗に表示できています。

ただ、別のページ（自分が作ったものや、適当に見ていた他人のページなど）で、
今回質問の「ドット抜け」「ライン抜け」的なものには、私も過去何度か遭遇しています。

CSSの書式に関係のないブラウザの描画アルゴリズムの問題かなと思っていたのですが、
>>360さんの仰る「em」や「%」の影響は、あり得なくもないような気がしますね。
まあ、「em」や「%」を使えば必ず再現されるってものでもないので、
よほど丁寧に検証しないとわからないかもしれないですけど。

ファイアーフォックスが糞でエフエークエスチョンマーク

線が入るってんで思わず日立のサイトを思い出しちゃったけど
それとは違うみたいね。
Gecko系列のブラウザで見ると線が入る。
ttp://www.hitachi.co.jp/

>353
> CSSを使うことが目的のdivによるマークアップは感心しないけど。

>354
> CSSからHTMLを考えるのは考え方が逆ってことね。

＞従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#edef-DIV
仕様書ではdiv要素をCSSで装飾するために使ってよい、と言ってるがな。

>>364
それって、div装飾＝新規の構造定義って意味じゃないの？

>>353も>>354も、div絶対ダメとは言ってないし、
まして>>354は、状況次第ではulよりdiv使った方がいいみたいな例まで書いてんじゃん。
まあ、いいけど。

cssで継承させなくする方法ってあるの？
たとえば table に枠の色とか指定しちゃった時、そのテーブルの中に
枠なしのテーブル作ろうとしても同じ色の枠ができちゃうじゃん。

いちいち全部の指定しなおさないといけないの？

>>365
いや、彼らはわかってると思うけど、初心者があれだけを読むと、
がちがちの勘違い信者になりかねない（見栄えじゃないテーブルまで否定するようなタイプ）、と思ってな。

ちなみに、
＞自身の必要や好みに応じられるように
ということは、「必要や好み」のために使ってよい、という意味だぞ。
確かに、「ここからここまではdivでくくる」とやりゃあそれが結果的にグルーピングとなるけどね。
「ここの背景を緑にしたいから」という動機でもかまわんわけなんだよね。

>>366
継承させない、という手とは違うが、その特別なものだけid振って、それだけデフォスタイルを与えればいいんじゃないか？

あと、>>367は読み返したらずいぶんスレ違いだ。ごめん。

>>366
border-colorは継承しないよ。仕様では

>366は、
table{border: 〜 }
て書いて、全部のtableにスタイルを適用してるはず
クラスセレクタとかIDセレクタとか知らないんだと思う

書いた文字列の周りを しかくで囲むのはどうすればよかったでしたっけ？
以前 ココで教えていただいたのですが忘れてしまいましまた

ｽｲﾏｾﾝが教えてくださいお願いします

>366
>370の言うように
table {border:………;}
としてて、入れ子のtableの枠はなくしたいってなら
table table {border:none;}
でいいんでないかな
これならclassやidは不要だし

>371
それもborderだね

またｹﾞｲﾂｧｰが暴れてるの??

CSSのソースを自動整形してくれるツールってご存じですか？
HTML用はよくありますけど、CSS用が見つからなくて・・・

色々考えたのですが、
width: 90%;
を追加して、
右の30pxを０にしたら綺麗になりました。
>341-343
レスありがとうございました。

はじめて本を購入して、Strictやらアクセシビリティに魅了された結果、
一度は完成したサイトのクリーニング作業で詰まってしまいました。
下のサイトの紫色のバーを右端まで表示するのに何かいい案はないでしょうか。
ttp://hccweb1.bai.ne.jp/titya/cepter/index.html

参考までにクリーニング中のものをZIPでまとめたものと
クリーニング対象のサイトを晒しておきます。
クリーニング前のソースは産業廃棄物並みのえげつなさです。(*/∇＼*)

上のURLのZIP
ttp://hccweb1.bai.ne.jp/titya/cepter.zip

クリーニング対象のURL
ttp://hccweb1.bai.ne.jp/titya/index.htm

cssでタブ風にメニューを表示したいのですがやりかたを教えてください


　_______　　_______ 　 _________
　| aaa | | bbb | | ccc |
-----------------------
　　本文本文本文
　　本文本文本文

ずれてる・・・＿|￣|○

>>377

おっちゃんのソースをパクりなされ

>>379
「おっちゃん」って？

>380

http://no.m78.com/

>>376
ソース見たけど、バーのところの <div> を
width:100% としてやればいい、はず

>>382
100%だとたぶんはみ出ちゃうよ。

#menu {
　　width:575px;
　　float:left;
}

を加えればいいと思う。

>>383
確かに１００％はまずかった。
Operaだとうまくいったんで書き込んでしまったんだが、
FirefoxやIEだと全然ダメだった。

>>380
ナビゲーションバーだけなら参考になると思う。
ttp://hccweb1.bai.ne.jp/titya/cepter.zip

>>382
>>383
おかげで右端まで表示できました。
#menu {
　　width:575px;
　　float:left;
}
で成功しました。
それにしても他人のソース見て修正できるとは神ですか？
他人のどころか自分の見てても混乱してきます。

>>377
ttp://css.maxdesign.com.au/listamatic/horizontal05.htm

下らない質問ですが怒らないで聞いてください。
スタイルシートの書式は基本的に セレクタ {属性:値;}ですが、セレクタ、属性、値の間に
半角スペースはいくつあっても構わないんですよね？実際ブラウザで確認して問題なさそう
ですが、どうでしょうか；；
（例）
<STYLE type=text/css>
<!--
.param1　　{font-size　:　25pt;　　　color:　#fdf5e6;}
-->
</STYLE>
最近少しノイローゼ気味です。

マルチウザイのでいっそ死んでください

ひ、ひどい；；ぐっすん

所詮、２ｃｈになんか救いを求めた俺がバカだったんだ。チクショーでも死なないよ。

既に死んでいるからな。

ＷＥＢ制作なんか嫌いだー、でももう少しだけ続けてみよう。

お前はもう死んでいる！

すごい幽霊だな。

インライン要素の幅を制御する方法はありますか?
tableは好ましくないらしいのでulとliでtableもどきを作りたいのですが、
横が3列以上になると各行の縦線の位置が揃わなくて困っています。
IEおよびNNで動作したいです。
何かアイデアがあれば教えてください。

＞tableは好ましくないらしいので

何で？
表＝tableだろ。

テーブルレイアウト勘違い厨?

CSSでテザインすること＝tableが無い、だと思っているのだろうな・・・

小さな表を10-20個ほど1つのページに作ろうと思ってます。
表が作りたいならあくまでtableでいいのですね。
ご指摘どおり、テーブルレイアウト勘違い厨だったようです。
1度tableで作ってみます。ありがとうございました。

仕様書嫁･･･と言いたくなった

>>399
でもtableじゃなくても簡単にできるよ。
インラインじゃなくブロックをfloat:leftで横につなげればいいし。

・・・と悩ませてみる。

こんにちは。みなさま。357-358でかいた者です。
レスが遅れて申し訳ありません。
また、検証、お応え頂き、ありがとうございました。。。
特に、バグとか、大変なこととして感じなくても良いようなのですね。。
理由、なんとなくわかりました。
現象は、単位を em でなく、px にすると、出なくなったりしていました。
ありがとうございました。
...日立のサイトも見てきました。

こにちははじめまして。
html上で
flashの上の階層に画像やテーブルなど表示させる事は
可能でしょうか、z-index:0;とflashにcssで
設定しても無理でした・・
どなたか知っている方がいましたら、御指導下さい。

>>403
>>1

一旦外部で
a:link { color : #800000; text-decoration : none; }
a:visited { color : #800000; ext-decoration : none; }
a:active {color : #A80000; text-decoration : none; }
a:hover { color : #A80000; text-decoration : none; }
とリンクの色を指定したのですが
一部だけこれを指定しなおす場合どうしたらいいのでしょうか。

>>405
css
a:link#other { color : #800000; text-decoration : none; }

html
<a id"other"> </a>

もう少し詳しく質問させてください。
html側の記述についてですが
<a id="other" href="other.html">文字</a>
とすると反映されないのですが、配置する場所教えていただけますでしょうか

>>407
>>406 は間違っとるよ。
そのようにidつけたのなら、

a#other:link { 適宜 }

と書くのが正解。

みんなイジワルね

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

↑は私ではありません。
解決はしていませんが何やらまずい質問をしてしまったようなので
これ以上の質問は差し控えさせていただきます。
無駄に場を荒らすような事になってしまい申し訳ありませんでした。
もう少し勉強しなおしてきます。

(´･ω･`)

和んだｗ

>405

>408

のレスで解決しないって最強！

>>379
よくわかりませんですた

>>408
よくわかりませんですた

>>415
そうか！

>>416
そうか！

>>408

http://www.w3.org/TR/1999/REC-CSS1-19990111#appendix-b
simple_selector
: element_name id? class? pseudo_class?
| solitary_id class? pseudo_class?
| solitary_class pseudo_class?
| solitary_pseudo_class
;

http://www.w3.org/TR/2004/CR-CSS21-20040225/grammar.html
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;

つまり、CSS1 なら >>408 の通りだが、CSS2 なら >>406 に問題は無い。
具体的にブラウザを挙げると、CSS1 準拠の IE なら >>408 の通りだが、
Opera や Mozilla のような CSS2.1 ブラウザでは、>>406 を解釈しなければバグである。

>>408 が何の知識も調査も無しに正しいと断言してしまっているが、
それは、CSS1 に限定した判断だから、注意するように。

css1とcss2どっちがいいんですか？

<div class="1">
<div class="2">
<p>　</p>
</div>
</div>

<div class="1 2">
<p>　</p>
</div>

どちらでも同じように表示されますが、
下の方って、ありなんでしょうか？

あり

関連情報
Yahoo!メッセンジャー(リンク）
IMテーマ(リンク)

このように表示・リンクさせる場合、みなさんはどのようにマークアップしてますか？

<dl>
<dt>関連情報</dt>
<dd><ul>
<li><a href="">Yahoo!メッセンジャー</a></li>
<li><a href="">IMテーマ</a></li>
</ul></dd>
</dt>

<h?>関連情報</h?>
<ul>
<li><a href="">Yahoo!メッセンジャー</a></li>
<li><a href="">IMテーマ</a></li>
</ul>

どちらが好ましいでしょうか？又他の方法があったら教えていただきたい。

なんでCSSスレで聞くのか解らんけど俺なら下

>>422
上にしたい気持ちもわかるけど、
なんとなく自己満足な気もする

>>423
スレ違い失礼です。
CSSやってる人のほうが確実にマークアップしていると思いましてこちらで質問させていただきました。
もう少しいろいろな人の意見が聞いてみたいです。宜しくお願いします。

コードの視認性も重要な俺は下。

・関連情報という文字が無くても文書が成り立つ
・関連情報という見出しだけ追ってもページの性格がわかりそう

という点で、俺も下。

おお、ありなんですか。ありがとうございました。

>>422
自分は下をやります。

なんか卑猥だぞ それ。

CSSでどのブラウザでもテーブル内の文章をセンタリングできるソースはありますか？

いろいろなご意見ありがとう。参考にします。

>>430
text-align

>>430
なんだそのコピペ前提みたいな質問は。

>>430
こことか参考に。
ttp://www.mozilla.gr.jp/standards/webtips0004.html

ありがとうございました。
とても参考になりました！

>>422
ちなみに、上Mac ie5だとバグって
右にはみ出るよ。

>>430
<CENTER>文章</CENTER>

.　／￣￣￣￣＼　　　　｜
. （　∪　＼　　／,）.　　　｜
　|ミ/ 　ー◎-◎-）　　　｜
.（６　∪　　(_　_)　）　　　 j
　|/　∴ ノ　　３ ﾉ　　　>>437
/　　　　 ∩ノ ⊃ヽ
(　 ＼　／ ＿ノ|　 |
.＼　"　　／ ＿|　 |
　　＼ ／　＿＿ ／

>>437
えーと、すれ違い．．．と突っ込んでおこうか

入れ食い

CSSでボーダー指定の仕方教えてください

針が錆びてる

>>441
http://kanzaki.com/docs/html/htminfo17-2.html#border

CSSで縦線をひく方法を教えてください

|<br>
|<br>
|<br>
CSSは使わなくてよし。我慢しる

>>402
＞現象は、単位を em でなく、px にすると、

これは、だめなページの典型です。
皆さんはまねしないように！

>>321
そもそもtableの作りがおかしい

<table class="t1">
<tr>
<td>

普通ソースにはワイズの指定とか書かないから。

あんたもおかしいよん。

ワイズ

今度デビューしたワイズの皆さんです！
「ワイがボーカル担当です」「ワイがギターです」「ワイはそばで踊る係りです」

ワイは浪速の極道でんがな。

ワイズ　ヘイト

タブル　に アハーフ と・・・

>445
１直線で長い線がひきたいので教えてください
色とかも指定したいので

>>454
　　ほらよ

http://www.y-adagio.com/public/standards/tr_css2/toc.html

>>454
>>443

>>454
p {line-height: 100%;color: red;}

<p>
|<br>
|<br>
|<br>
</p>

>>454
http://kanzaki.com/docs/html/htminfo17-2.html#border
をちゃんと隅々まで読んでください

VB使えるんだけどvbscriptに役立つ？？

>>459
うまく使えば何だって役には立ちそうだけど、
スレ違い。

リンクの設定をしているんですが、
A.a（CLASS="a"）
A.b（CLASS="b"）
CLASS="a"でのリンクのターゲットを全画面、"b"でのリンクのターゲットを新しいウィンドウにしたいんですが、
スタイルシートの方にはどう書けばいいんでしょう？

>>461
そんなことできません

A.a（CLASS="a"）
A.b（CLASS="b"）

　　　なんじゃこりゃ？

>>463
A.a
A.b
ってことだら？
HTMLには<A CLASS="a" HREF="***"> ってやるってことじゃない？
素直にHREF=""のあとにTARGET=""やったほうがいいと思うけど

>>464
おまいすげー。エスパーか？
初心者スレでも頼むぜ。

>457
これだと点線になってしまうのですが・・・
１直線にしたいのですが

>>466
頼むからここを読んでください
http://kanzaki.com/docs/html/htminfo17-2.html#border

>>461
var tmp = document.getElementsByTagName("a");
for(var i=0 ; i<tmp.length ; i++){
if(tmp[i].className == "b"){
tmp[i].onclick = function(){
window.open(this.href,"_blank","適宜");
return false;
}
}
}

つか、スレ違い。

>454
ただ線を引くと言われてもねー
何に対してどんな線を引きたいのかわからん

>446
なんで？

>469
ttp://www.bite.jp/jpn/interview/doppel.html
ここの一番下みたいな感じで線ひきたいです
そしてその右に文字をかきたいです

-(ハイフン）じゃないか？

>>470
い　い　加　減　に　し　ろ　！


レス読んでないのか？

>>441,444,454,466,470
>>443,458,467

>470
以下>443や>467が示してるリンク先からコピぺ
<p style="padding: 1em; border-left: 20px red solid">border-left: 20px red solid</p>

はい、次どぞ〜

皆さん段組する時float？
それともposition?
どっち使う？

>>475
きいてどうすんの？

いやちょっと疑問があって。
googleのキャッシュのページで見ると
画面の上にgoogleのtableが表示されますよね？
そおするとpositionの絶対位置で指定するとそのtable分
position指定したものがずれちゃうじゃないですか。
だから皆さんそお言うのはどうしてるのかなーーと。

訂正
position指定したものじゃなくて
position指定した物がgoogleのtableに重なったりしちゃう。
です。

>>477
そう考えるなら、「じゃあ、positionの使い方には注意しよう。汎用性の高いものにするならfloatが無難かな」と考えるということも想像つきそうだけど。
俺は、パンくずリストだけかな。position使うのは。

なるほどーー。わかりました。
じゃあキャッシュのページなどを気にするのなら
サイト全体の段組などはfloatの方が良いと言うことですね。
ありがとうございました。
でも俺floatでIEやNN両方にきちんと細部まで同じように表示させる自信ないなーー。

>>480
補足ね。
一応opsitionにも相対的配置はあるよ。

> でも俺floatでIEやNN両方にきちんと細部まで同じように表示させる自信ないなーー。
同じである必要はないよ。必要なのは「両方とも問題なく閲覧できる状態にする事」。

ありがとう。

>>480
tableを絶対に使わない、という自信があるなら、
table {
position: absolute;
bottom: 0;
}
という手もあるな

使わないんなら書かなくても医院じゃ内科医。

>>484
いや、ｸﾞｸﾞﾙｷｬｯｼｭの説明文のテーブルを無理矢理下部にするすべを。

ｸﾞｸﾞﾙｷｬｯｼｭ こんなもんどうだって良いじゃねーか！

なにが「WEB標準」じゃボケ！
一割以下の「標準」なんぞ話にならんわ！
デファクトスタンダードを無視して多くのユーザを不快にさせんな。
だいたいマイナーが売り（セキュリティ面）ってバカかぁ？


　――ってイトコのベンジャミンが言ってましたわ。

便所民？

うはwwwwwwwwwwwwwwwwww便所民おｋwwwwwwwwwwwwwwwwwwwwwwww

汎用性MAXにするなら<TABLE>ってことでどうかひとつ。

<h>タグって、大きいほうから順番に書かないとまずいですか？
例えば、ページの最後にサイト名として<h1>タグを使うとかは

タグの意味が合っているというだけではダメなのですかね？

スレ違い

>>491
CSSスレ的に回答すると、最初に書いて、positionで下に下げろバカ

CSS意識してる人の質問だと思うので、そうスレ違いでもないのでは

とはいえ、ページの最後に<ｈ1>でもいいかって聞くくらいなら
そこだけスタイル指定すればいいのになあ…とは思う

(ﾟДﾟ)ﾊｧ?

>>491
ダメです。
ダメに決まってんだろ？

h1は、hシリーズで一番上位のくらいだから
ソウス上も上になきゃダメ。

hシリーズ使ってなくて、最後にh1出すなら大丈夫

hnは順番に登場しないといけなかったような。

>>491
＞タグの意味が合っているというだけではダメなのですかね？

大きい方から順番に書かないとタグの意味としては間違いです。

背景のheightを100%にして伸び縮みさせたいのですが、下記の方法でFireFoxでみると
100%以上のページ（スクロールがでるページ）では背景を表示してくれません。
html・bodyの100%の指定が原因なので、指定なしにすると当然bgのheightを反映してくれません。

うまく表示させる方法はないでしょうか？
<!--
html { height: 100% }
body { text-align: center; margin: 0; padding: 0; height: 100% }
#bg { background-color: #ccc; margin: 0 auto; padding: 0; width: 500px; height: 100% }
#contents { background-color: #f90; margin: 0 auto; padding: 0; width: 200px; height: 750px; }
-->
<body>
<div id="bg">
<div id="contents">テスト</div>
</div>
</body>

>背景を表示してくれません。
100%以降の背景を表示してくれません、です。。

>>499
テンプレにあるサイトを良く読んで、
自分にあった解を選んでください。

>>499-500　>100%以降の背景を表示してくれません、です。
オマイアホだろ？

>>502
その時にブラウザで表示されるところまでという意味です。
スクロールして表示される部分の背景が表示されないという意味です。
わかりずらくてすみません。

height: 100%をはずしてみいよ。

>>504
レス有難うございます。
heightをはずすと750pxまでは表示されますが、
例えば高さが900pxの画面だと750〜900の間は背景が表示されません。。

枠が表示されないテーブル（cellspacing=0）を
スタイルシート側で設定するにはどうすれば良いのでしょうか

>>505
みんはいと。

>>506
>>4 あたりに参考になるページがありますよ。

決して何も試さずに質問したわけではなくて、
borderを0pxにしてみたり、透明にしてみたり
あるいはこのスレ>>372を見てborder:noneにしてみたり…margin…padding…
何をやっても上手くいきません

たぶん簡単なポカだと思うのですが、再度お願いします

>>507
こんな簡単なことだったなんて・・・orz
本当に有難うございました。

100%　⇒　100%;　にしてみれ

リロードすべきだったorz

http://sugiue-t.s3.x-beat.com/cgi-bin/uploader/source/up4650.zip

最初のテーブルのような段組をスタイルシートで組みたいのですが、
画像とテキストの間にわずかに隙間ができてしまったり、floatとclearを
使ってしっちゃかめっちゃかになってしまったりと、なかなか思い通りに
いきません。
うまい方法をご存知の方、ご教示いただければ嬉しいです。
当方WinXP-IE6です。

とりあえず　zipやめれ

>>513
えーと。mac環境の方にも解凍していただこうと思ったら
どうすべきでしょうか。sitアーカイブ作れません。

マカーもzipでもgzipでも解凍できますよん。

つか、解凍するのがめんどくさいから、どっかフリーのスペースにあげれ、
って意味だと思われ。

>>515
あ、そういう事なんですか。
わかりました。解凍してくださる方がいらっしゃることを
期待しつつ、適当なフリーのスペースもさがしてみます。

こんにちは。Neoです。

CSSの設定ファイルの書き方で考えてます。
例えば、

h1{color:#FF0000;background-color:#00FFFF;}
と言うスタイルを指定していたとして、
これを皆さんはどう書いてるのかなぁ、と思いまして。

h1
{
color:#FF0000;
background-color:#00FFFF;
}

と言う風に書いているのか、先ほどのように1行なのか、
と言う事です。

管理のし易さなども考えていますが、ここでは皆さんの意見を聞きたいと思ってます

初心者スレから誘導されてきました・・・。

.filectl{
border: 1px solid #000000;
background-color: #ffffff;
font-size: 11px;
}
このクラスをinput type fileにかけているのですが、
Gekko系だとファイル選択boxがsolidになってくれません（IEはOK）。
どう指定するべきでしょうか？

>このクラスをinput type fileにかけているのですが、
意味不明。

>>517　基本的には改行して使ってる。
文字サイズと色の設定だけなら1行

>>518
・・・・

>>517
自分とか周りの人が見やすければそれ

>>518
http://pc5.2ch.net/test/read.cgi/hp/1078463560/549-

そろそろ出かけなければなので、質問を取り下げます。お騒がせしました。

実は「tableの枠幅（cellspacing)をスタイルシートで変えることは出来ない」という
返答を期待(予想)していたのですが、ここの猛者でも明確な答えがなくて意外でした。

506ができないだけだぁな。

Q11: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A11: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。

「いままでの 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

試みたソースも出さずに質問して回答を求められてもな……　>>508

>>524-525
お付き合いサンクス、いあ、そこも見たのですが

table.test{
border-collapse: separate;
border-spacing: 0px;
background-color: #ff0000;
}

td.test{
background-color: #ffffff;
}

<table class=test>
<!-- <table class=test cellspacing=0>-->
<tr><td class=test>test</td></tr>
</table>

赤い枠が表示されちまいます、コメントアウトしたcellspacing=0の方だと平気なのに…
出かけ前なので取り急ぎ失礼

>>519-520
すいません。
>>522
ありがとうございます。調査不足ですいません。

>>506
　お前の質問はこれだ。
>枠が表示されないテーブル（cellspacing=0）を
>スタイルシート側で設定するにはどうすれば良いのでしょうか

枠が表示されないテーブルとは　border:0;　だ。

table {border:0;}

　　　下手な知ったかで>527はやめとけ。
　　　

>>512
WinIEはfloatで3pxの隙間ができます。
そのマークアップ(imgがdivの中に入ってる方)のままでfloatを使うのであれば
これを許容できるレイアウトにするのが賢明だと思います。

とりあえず、テンプレの

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。

間違いなんで直しておけよ

正確ではないが、間違いだとも言い切れない

>>530
ご回答ありがとうございます。とりあえず

.oge {width: 310px;}
.box1 {height: 100px;
width: 100px;
float: left;
border: 1px solid;}
.box2 {height: 102px;
width: 200px;
float: left;
border: 1px solid;
padding: 5px;}

<div class="oge">
<div class="box1">
<img src="test.gif" align="texttop">
</div>
<div class="box2">
てすと
</div>
</div>

で期待どおりの効果が得られましたが、入れ子になっているので
非常にみっともないです。他機種・他ブラウザでどのように
見えるのかも不明です。うーん。

530の1行目はなんか色々と不適切だった。
全部を正確に訂正するのは面倒なのでしないけど。

>>527
なんで border-collapse: separate; なのか。
<table cellspacing="0">ならば border-collapse:collapse; だろが。
何を見てるんだ、一体。
http://hp.vector.co.jp/authors/VA022006/css/tables.html#border-collapse

実は全然出かけてなかったりで、釣りっぽくてｽﾏｿ

>>535
いやようやくできました、ありがとうございました

よく調べずに質問するなよな。いや、調べる能力すらないから質問の仕方も下手なのか。

>>537
うるせー！！このハゲ

己が知性の低さを、ちったあ反省しろや。
ハイ、次の質問の方〜？　こんな拙劣な質問の仕方はしないでね。

>>583
なんで知ってる？

<ul><li>タグで、リストを縦ではなくて横に並べたい時、
・aaa ・bbb ・ccc
みたいにしたい時、一番かっこいい方法を教えてください

かっこいい方法など無い

>>9に既出。
　リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm
参考にしなさい。

>>543
>541には無理だよ。

>>541
li {display:inline;}

>>544
そっか。無理だよな。
リスト・マーカーを消さないやり方なら
li {float:left;width:XXem; display:list-item; padding-left:1.5em;}
かな？

>>544
バカ発見

>496

>497

>498

遅レスだが、どうも納得いかん。
仕様書にそんな決まりはないぞ。
ただ、「そういう慣習がある」というだけだ。

>>547
納得いかなくてもスレ違い

>>546
その馬鹿さ加減を解説してくれ。

スレ違ひぢゃ。strict HTMLスレッドでも行きなされ。>>547

>548

>550

たとえCSSスレだからと言って、ウソを教えているのを見逃すわけにはいかん。

そもそもstrictスレでこんな低俗な話なんぞ出ない。

確信犯ですか

スレ違いをえんえん引っ張るなよ馬鹿

>>553
ウソを教えてるやつだってスレ違いだろうに。
それを誘導しなかった貴様が何を言うか。

strictにだって嘘いっぱいあるやん

おい、お前達　邪魔だ。

　　　失せろ。

つーか、W3Cの仕様が間違ってるからな
ちゃんとしたCSSの仕様は別のところにあるし

>>555
そのつど指摘してるけどな。
問題箇所はそこか？　スレ違い、ってことだったんじゃねえの？
スレ違いってのならh要素の書き方には順序がある、の説明（しかも間違い）もスレ違いだろうに。
それは黙認（まあ、間違いに気付かなかったんだろうケド）しておいて、それはないだろ。

>>557
> ちゃんとしたCSSの仕様は別のところにあるし
CSSの仕様書の話は出てませんが。

>>558
>>556

>>559
>>547

交通違反で切符を切られた奴、脱税で査察が入った奴、みなの紋切型。
「ほかにもやってる奴を見逃すなよ。なんで俺だけ」

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

おまえらほんとはHn要素のことよくわかってなくてスルーしたんだろ？

>>562は流れが読めてないようです。

この粘着者！

最初に嘘だろうがなんだろうが、HTMLの質問に答えた奴が悪い、でFA？

HnはCSSの質問ですが？

諸悪の根源は、最初に質問した奴だな。

>>567
書く順番はHTMLの質問ですが？

>>569
順番はCSSで変えられる

>>491-493で解決してるのに>>494がバカなことを言ってるのが問題か。

しびばせん。わたしがわるーございました。

　　　　はい。　次

491 ：Name_Not_Found ：04/12/17 08:05:50 ID:???
<h>タグって、大きいほうから順番に書かないとまずいですか？
例えば、ページの最後にサイト名として<h1>タグを使うとかは

タグの意味が合っているというだけではダメなのですかね？

492 ：Name_Not_Found ：04/12/17 08:54:35 ID:???
スレ違い

>>570
書く順番を問われてますが。

つか、漏れが>>493で位置の変え方答えて終わってるのに>>494以降が適当な事を書くのがよくないんだよ。

この粘着者！

>>575
まだまだ続けようぜ。
スレ違いじゃないし。

Hnタグで釣れる件に付いて

>>577
ｽﾚﾃｨｶﾞｲ

>>577
その件につきましては、謎の中国人 ﾈﾝ･ﾁｬｸﾓﾝ　が答えまする。

>>531
で、どんな風に直せばいいと？
なるべく短く簡潔にわかりやすく記すには？

>>579
いい加減消えてくれないか？

テンプレの
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
これってXHTMLだと使用するにふさわしくない情報なので、
削除して頂きたく候。

CSSのテンプレに入っている事自体間違いな気がするが、
そろそろここも再編必要では？？

一緒に消えるか？

＞謎の中国人 ﾈﾝ･ﾁｬｸﾓﾝ　
小学生みたいな発想だな。さすがCSSスレ、恐れ入る。

>>580

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: ブラウザをバージョンアップしましょう。

お前達が消えれば俺も消えるよ。

　質問者に迷惑だからな。

>>543
ありがとう。

>>544
ﾂﾈ

ｲﾃ

>>586
迷惑がられてるのはお前だけだ。

>>582
XHTMLなんかみんな使ってないよ。HTML4.01が大半だろ。
なんで「CSSのテンプレに入っている事自体間違い」なんだ？
実に有益な情報ではないか。これなんかも↓。
http://hail2u.net/documents/cairs.html

>>590
時代から取り残されていますか？

>>585　はあ？　下方互換性を無視するのかよ。

>>590
スルーしてるんだからかまうなよ。

>>590
コメントとタグ使ってるからだろ
少しは勉強汁！！

>>592
マジレスするなよ。どう見ても三流釣り氏だろ。

>>594　「コメントとタグ使って」何が悪いのかな？

>>589
半端な知識の議論は質問者にとって迷惑なんだよ。

>>596
コメントタグの間違いだろ
少しは補完汁！

>>597
だから>>586だけが迷惑がられてる、と言ってる。
読めないのか？しつこいやつめ。

ロックなスレだ

感嘆符で終わるガキは最近勉強したての匂いがぷんぷんする。

>>598　で、「コメントタグ」の何が悪いのかな？　少しは説明してみろ（できるならね）。

>>601
勉強しないで質問するよりマシジャマイカ

>>602
すいません。説明できません。
代わりに説明して頂けますか？

>>599
モナー　　ちょっと古いな

>>604
つまり>>582の提案は理由無きこと故に却下、ってことになるな。

>>598の言ってる「コメントタグ」ってHTML commentsのことかな。

議論は(ry

>>608
いや、テンプレ案だからスレ違いじゃないでしょ。

>>607
<!-- これ -->
↑なんて言うのか知らないけどこれのこと

>>582は説明責任を抛棄して逃げましたね。

>>610
説明有難う。
「なんでもかんでもタグって言うな」という皮肉だったんだけど。

ここのヒキオタアホどもには皮肉は通用しナインよ。

/i.　　　　　／　　　,,,,,;;;;=:::...、　　ヽ　　　　　　　i
　|　　　　∠,,,　　　'''　　__　　`　　　i.　　　　　　 |
/|　　 i'´　　 ヽ　　　,. 'i'''''i>、　　　　!　　　　　　!
! !　　 !,;i'''(''`;, :.　　 ':‐`'''´`　　　　 `i　　　　　 .|
　 ﾄi、 .|　''''´´　　　　　　　　　　　　　;| i　　　　 !
　　 ヽ. !　　　 .　　　　.　　　　　　　　/!;//　　　i'
　　　 `!:.　　　 :..、.‐'' '　　　　　　　 /　//　／￣￣￣￣￣￣￣￣￣
　　　　ヽi.　　　　,___,、　　　　　　 ./　//　そんなｶﾘｶﾘしないで
　　　　 ﾉ| ;　　.:',.ｒ==‐`‐　　　　　/　// _　あたしのおっぱいでも
　　　　 ﾉノ;ヽ　ヽ:::::::'''´　　　　　　／´ ,!　　　吸ってみる？
　　　　'　'´　 ＼　　　　　　　.::　 ´　　 /, ＼＿＿＿＿＿＿＿＿＿
　　　　　　　　　｀ ;,、__....:::::　　　　　　 。・.,;;::::.
　　　　　　　　　　``｀｀ヽ　　　　　　。::';=''´　｀`、
　　　　　　　　　　　　　 ｀i　　　,,。;:':;''´　　　::..、:、
　　　　　　　　　　　,.:::‐‐,;　.,,;:;':':'''｀　　　　　　　ヽ:、
　　　　　　　　　,.:''´　　;:iﾚ;:''　 　　　　　　　　　　　::.
　　　　　　　　.,i　　.:。´'':;''　　 :.　　　　　　　　　　　 :.
　　　　　　　　i　／,:;..,:;''　　　 .:.　　　　　　　　　　　　:.
　　　　　　　 ,ﾉ '..;:;':;''　　　　　 :.　　　　　　　　　　　　 :
　　　　　　..:'　。;''´´　　　　　　　.　　　　　　　　　　　　:.
　　　　　人,,:;'`'　　　　　　　　　:.:..:.　　　　　　　　　　　 :.
　　　　ノr''￣`‐::.、　　　　　　　 . :. :　　　　　　　　　　　.i
　　　/,:;''　　　 ﾉ　＼_　　　　　　 :. :.、　　　　　　　　　　 i
　　 /`´　　 ／　　　　`‐::.、　　　 ｀　:.　　　　　　　　　　 :、
　 ./　　　.／　　　　　　　　｀`‐::.._　　　:.　　　　　　　　　　i
　 i　　　/　　　　　　　　　　　　/　`::..、ヽ　　　　　　　　　 :、
　 !.　　/　　　　　　　　　　　　/　　　　``:.　　　　　　　　　 :、
　　i、　|　　　　　　　　　　　 /　　　　　　,!.　　　　　　　　　 ::.

ハッ、今俺一瞬だけ宇宙人にさらわれてた…

出せ！　　はっ　早く出せ！！

　オマイらこういう時だけ元気だなあ。

終わってから出てきた>>617
当事者かな？

ハァ？

>>618
それだから粘着って(ry

<h3>軽い質問だったのになぁ</h3>
<h2>盛り上がってまいりました</h2>
<h1>だあぁぁぁ！Uzeeeeee</h1>

まだかい。

CSSの
カス ケーディングの意味はなんですか？

そこで切るな

>>623は辞書も引けない、と。

>>592
じゃぁ、CSS使うなよ。

まだｲﾙ━━(ﾟ∀ﾟ)━━ｯ!

アドバイスお願いします
ページ送り？なのですが、現在下記のようにしています
<dl>
<dt>Page</dt>
<dd>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</dd>
</dl>
で、display: inlineで「Page 　　　1 2 3」
のように表示させているのですが、上のように間が開いてしまいます
この部分を埋めたいのですが、どうしたらよいでしょうか？(1)
それとも、Pageの部分を<h>か何かにして、<ul><li>でやったほうがよいのでしょうか？(2)
というか、ページ送りにはどちらもそんな風に使わないのでしょうか？(3)

(1)
ブラウザの空白文字、改行文字の処理の問題かと。
CSSは関係しないが、てっとり早いのは
<dd><a href="...">1</a><a href="...">2</a>...</dd>

(2), (3)
ここはCSSスレです。
こちらでどうぞ。
http://pc5.2ch.net/test/read.cgi/hp/1101043958/

>>629
(1) いい加減なこと書くなよ。

ｽﾚﾁｶﾞｲごめんなさい。
誘導どうもです。

>>628　(1)marginとpaddingって知ってるか？

↓のようにリストの行頭を揃えつつ、そのリスト全体を一つのかたまりとしてセンタリングする方法ってないですか？
よろしくお願いします。

|　　　　　　　　・日本　 　 　　　　　　　　|
|　　　　　　　　・独逸　 　 　　　　　　　　|
|　　　　　　　　・伊太利亜　　　　　　　　|

>>633
>>632

一度完成したサイトをＣＳＳでリニューアル中です。
この間も質問させていただき、紫のバーについては
一件落着となったのですが、また別の問題が発生してしまいました。
文章で説明するより見てもらった方が早いのでＵＲＬと
ファイルをＺＩＰでまとめたものを晒しておきます。
先生方、どうか息子を助けてください。

　（´Д｀;）ヾ　ﾖﾛｼｸｵﾈｶﾞｲｼﾏｽ
　　　∨）　
　　　（（　

　（;´Д｀）　　ﾎﾝﾄﾆｵﾈｶﾞｲｼﾏｽ
　（　 八)
　　　〉 〉

　　　　ヾ
　(´Д｀;)、　　ｺﾉﾄｵﾘﾃﾞｽ
　　 ノノＺ乙

http://hccweb1.bai.ne.jp/titya/cepter/index.html
http://hccweb1.bai.ne.jp/titya/cepter.zip

リニューアル前のサイト
http://hccweb1.bai.ne.jp/titya/index.htm

>635
見てもわかんね

(　ﾟдﾟ) ・・・
　
(つд⊂)ｺﾞｼｺﾞｼ
　
(；ﾟдﾟ) ・・・
　
(つд⊂)ｺﾞｼｺﾞｼｺﾞｼ
　　_, ._
（；ﾟ Дﾟ） うｐしたら直ってる！？ ｗｈｙ？

皆さんお騒がせしました。うｐしたら直りました。
でもローカルでは変わらないのが謎です。
うちの鯖は修復機能でもついてんのか？

申し訳ありません。またお騒がせさせていただきます。
確認したところ、単にＩＥでは問題が起きないだけでした。｡･ﾟ･(ﾉД`)･ﾟ･｡
NetScapeとFireFoxでは相変わらずです。
引き続きアドバイスお願い致します。

>>634
widthを指定しないければだめだということですか？

>>635
zipファイルをダウンロードして解凍して見ろってか。面倒臭いんだよ。
回答が欲しいなら、ソースを摘要しなさい。

>>633
ＦＡＱは見ましたか。Q2（>>5）です。
それでもわからなきゃソース出せ。でないと誤りを指摘できん。

関係ない部分を吹っ飛ばしたのをうｐしました。
あとソースも晒しておきます。

<body>

<div id="container">

<div id="maincontent">
<p>メインコンテンツ</p>
</div>

<div id="subcontent">
<p>サブコンテン</p>
</div>

<div id="footer">
<p>フッター</p>
</div>
</div>
</body>

body {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
#container {
background: #750075 url(../img/bg.gif);
width: 775px;
}
#maincontent {
width: 557px;
clear: both;
float: left;
background: transparent;
display: inline;
}
#subcontent {
width: 218px;
clear: both;
float: right;
background: transparent;
display: inline;
}
#footer {
width: 775px;
clear: both;
color: #000000;
background: #cccccc;
}

何の問題が起きとるかは知らんが（それを書けよな）、
>>643のソースは明らかにヘンだな。
なんでfloatかけてさらにdisplay: inline;を重ねるんだか。
それにpx単位での幅指定は感心しないな。

>>643
#maincontent p {
padding-top: 0;
padding-right: 4em;
padding-bottom: 0;
padding-left: 4em;
font-family: "HGｺﾞｼｯｸM","ＭＳ ゴシック",monospace;
font-size: 90%;
color: #4c4c4c;
}

これだろ。
padding-right: 4em;
padding-left: 4em;
これ消してみ。

何がやりたくて、何をしたらどううまくゆかないのか、具体的に質問しなさい。
愚問には正答が返ってきません。
ＦＡＱのリンク先をよく読みなさい。

>>641
すみません・・・
元々はこのような方法を利用していました。
<body style="text-align:center;">
<table style="margin-left:auto;margin-right:auto;">
<tr><td>
<ul>
<li>いろはにほへと</li>
<li>hogehoge</li>
</ul>
</td></tr>
</table>
</body>

ただ、tableの使い方が適切でないので、tableを使わずにスタイルシートのみで表現しようと思い質問しました。
widthを指定すればセンタリングできるのは分かるんですが、リストの内容を変えるときにはwidthの値も変えなければならないのでできれば避けたいんですが・・・

http://www.mozilla.gr.jp/standards/webtips0004.htmlの
>ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右のマージンをautoにし、ブロックレベル要素に幅を指定するのが正しい方法です。

から考えるとやはり無理なことなんでしょうか？

みなさんありがとうございます。
でも質問の仕方が悪かったようでどこを直したいのか伝わってません。
直したい部分はメインコンテンツの真横にサブコンテンツを表示したいの
ですが、メインコンテンツの下部分から真横に表示されてしまうという
ところです。なおこの問題はＩＥでは起こりません。

>>644
display: inline; は試行錯誤したときの消し忘れだと思います。
＞px単位での幅指定は感心しないな。
一段落したら％でやってみます。

>>645
せっかくアドバイスをしていただいたに係わらず申しわけありません。
その部分は意図して書いたもので表示も意図通りに行われています。

>>646
ＩＥでは正常だと気づかず、見ればわかると書いてしまいました。
環境をよく確認してから質問するよう気をつけます。

>>647　％単位でwidthを指定すればぁ？
>>648　clear: both;を二回も指定してるのはナゼ？　意味もわからず指定すんなよ。

>>643
ウンコソースだな

#maincontent {
width: 557px;
float: left;
background: transparent;
}
#subcontent {
width: 218px;
float: left;
background: transparent;
}

こうすればいいよ

もっと簡略化するとこれだけで十分だな

#maincontent {
float: left;
}

#subcontent {
float: left;
}

>>547
ul {margin:0 auto; width:1em/*最小幅*/;}
li {white-space:nowrap;}

>>548
段組のFAQも読んでないの？
#maincontent {width: 557px; float: left;}
#subcontent {margin-left:557px;}

>>651　後方互換性を考慮してないからダメ。

後方互換性ってなんだろう？
最新バージョンのブラウザさと動かないってことかなぁ？

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

>>654 通信用語の基礎知識 - #後方互換性
http://www.wdic.org/?word=%B8%E5%CA%FD%B8%DF%B4%B9%C0%AD+%3ATECH

もう時代は後方互換なんて考えないのにな
CSS使うならCSS対応ブラウザ使えよってだけの話し。

MacIE5は「CSS対応ブラウザ」だが、floatにはwidth指定が必要である。>>657

>>658
そんなのしるかw
マックのブラウザがショボイだけだろw

>>655
WinIE6で>>652のスタイルを指定するとリストマーカーが消える罠。
li {margin-left:1.5em;} を追記すべし。

>>659　CSS対応度ではWinIEの方がショボいんだが。無知。

>>660
あ、気付きませんでした。ありがとうございます。

>>661
じゃあ、なんで対応度で勝っているMacIE5で
floatにwidthの指定が必要なんだw

>>650
そのとおりに書き換えたところうまくいきましたが、
背景の問題も考えて652さんの方法にすることにしました。
リニューアル前のものに比べると産業廃棄物からウンコになり、
ずいぶんマシになりました。前のものは５分割フレームで
tableのなかにtableがあるという恐ろしいソースでした。


>>652
ありがとうございます。
自分の意図していたとおり表示されました。

＞段組のFAQも読んでないの？
一度は見たテンプレでしたが段組のコーナーに気づかず
ずっと本を片手に組んでおりました。
本だけではどうしても情報が少なかったところ目から鱗です。

>>663
ホント無知だねえ。その時はCSS2ではwidthが必須だったからだよ。
WinIEはいい加減な対応しかしてなかっただけ。

>>655
その時はってことは、現在はwidth指定は必要ないってことでしょ？
じゃぁ、要らないんじゃないの？
MacのIEなんて化石ブラウザだし,,,

結局CSSを理解しているのは>>652だけだったか。
教える奴のレベルも下がったものだ。

>>666
WinIEもそれ以来改訂してない化石ブラウザなんだよな。
でも最新のFireFox/Mozillaには合せず、時代遅れのWinIEの後方互換性を考慮するよな、普通。

>>668
シェアが高いからな
有志のタブブラウザもほぼIEの使ってるし

だったら後方互換性に配慮してるんだし、配慮すべしってことだ。>>669

つーか、width入れときゃいいだけの話しか

既出なんだよね。
http://pc5.2ch.net/test/read.cgi/hp/1101827958/23-26

/i.　　　　　／　　　,,,,,;;;;=:::...、　　ヽ　　　　　　　i
　|　　　　∠,,,　　　'''　　__　　`　　　i.　　　　　　 |
/|　　 i'´　　 ヽ　　　,. 'i'''''i>、　　　　!　　　　　　!
! !　　 !,;i'''(''`;, :.　　 ':‐`'''´`　　　　 `i　　　　　 .|
　 ﾄi、 .|　''''´´　　　　　　　　　　　　　;| i　　　　 !
　　 ヽ. !　　　 .　　　　.　　　　　　　　/!;//　　　i'
　　　 `!:.　　　 :..、.‐'' '　　　　　　　 /　//　／￣￣￣￣￣￣￣￣￣
　　　　ヽi.　　　　,___,、　　　　　　 ./　//　そんなｶﾘｶﾘしないで
　　　　 ﾉ| ;　　.:',.ｒ==‐`‐　　　　　/　// _　あたしのおっぱいでも
　　　　 ﾉノ;ヽ　ヽ:::::::'''´　　　　　　／´ ,!　　　吸ってみる？
　　　　'　'´　 ＼　　　　　　　.::　 ´　　 /, ＼＿＿＿＿＿＿＿＿＿
　　　　　　　　　｀ ;,、__....:::::　　　　　　 。・.,;;::::.
　　　　　　　　　　``｀｀ヽ　　　　　　。::';=''´　｀`、
　　　　　　　　　　　　　 ｀i　　　,,。;:':;''´　　　::..、:、
　　　　　　　　　　　,.:::‐‐,;　.,,;:;':':'''｀　　　　　　　ヽ:、
　　　　　　　　　,.:''´　　;:iﾚ;:''　 　　　　　　　　　　　::.
　　　　　　　　.,i　　.:。´'':;''　　 :.　　　　　　　　　　　 :.
　　　　　　　　i　／,:;..,:;''　　　 .:.　　　　　　　　　　　　:.
　　　　　　　 ,ﾉ '..;:;':;''　　　　　 :.　　　　　　　　　　　　 :
　　　　　　..:'　。;''´´　　　　　　　.　　　　　　　　　　　　:.
　　　　　人,,:;'`'　　　　　　　　　:.:..:.　　　　　　　　　　　 :.
　　　　ノr''￣`‐::.、　　　　　　　 . :. :　　　　　　　　　　　.i
　　　/,:;''　　　 ﾉ　＼_　　　　　　 :. :.、　　　　　　　　　　 i
　　 /`´　　 ／　　　　`‐::.、　　　 ｀　:.　　　　　　　　　　 :、
　 ./　　　.／　　　　　　　　｀`‐::.._　　　:.　　　　　　　　　　i
　 i　　　/　　　　　　　　　　　　/　`::..、ヽ　　　　　　　　　 :、
　 !.　　/　　　　　　　　　　　　/　　　　``:.　　　　　　　　　 :、
　　i、　|　　　　　　　　　　　 /　　　　　　,!.　　　　　　　　　 ::.

早くだして　早く！

煽られてもちゃんとレスつけれるってのは凄いな

だれ？

オレ

CSS段組レイアウトデザ委員会移動したの？

ロールオーバーで文字→画像って出来ませんか？

>>679
できますよ。

そんな簡単なこと、ここで訊く前に
ちゃちゃっと自分でやって試して見ろよ。

多分「どうやるんですか？」がくると思う。

どうやるんですか？

ﾅｲｰｽ

min-heightの代替ってありませんか？
背景画像を全て表示したいのですが、縦領域が足りないと画像が切れてしまうので、heightを指定したのですが、
heightだと、ブラウザの幅を縮めたときに、下にずれ込んだ分が次の要素に重なってしまいます。
IEに対応させようと思うのですが、min-heightが効かないので困ってます。
分かる方、お教え下さいますようお願い致します。

IEだとheight指定しておけば、内容があふれた場合には、高さが増えてくれるんとちがう？

>>686
のせいで、溢れた分が被る、という事態がファイアフォックスで起こるのです。
IEに準拠しなきゃいけないけどFFでもうまくいかせる、なんて夢物語なのですかね。

heightとmin-height両方使ってもだめ?

ブックマーク用ページを下記のように書いていて

<dl>
<dt>サイト名1</dt>
<dd>説明1</dd>
<dt>サイト名2</dt>
<dd>説明2</dd>
</dl>

サイト名1
　説明1
サイト名2
　説明2

と表示されています。
これを、

サイト名1　説明1
サイト名2　説明2

という表示にしたいのですが上手くいきません
<dt><dd>に display: inline; を指定すると一列になってしまいます
floatでやるしかないのでしょうか？
どうかご教授お願いします

>floatでやるしかないのでしょうか？

そう思ったら、直ぐやってみること。
それから質問すれば話が早くなる。

>>690
失礼しました。
そう思って直ぐやってみてから質問してます。
話が早くなります。

そうですが。それはご丁寧にどうも・・・

<a>タグにidをいれました
文法チェックするとidとnameの両方を記述してくださいと出ます
CSSでidと同じ値のnameも記述しないとダメなのですか
教えてちん(xhtml1.0strict)

>>693
HTMLはスレ違い

スタイルシートとを2重で使うと少しおかしくなりますよね；
それを解消するにはどうしたらいいでしょう；

>>694
そう言わずに教えてちん泣泣
どっちか悩んでこっちに来たんだから

Strict-HTML スレッド25
http://pc5.2ch.net/test/read.cgi/hp/1101043958/l50
小小池。

Link
Visited
Hover
Active
は必ずしも指定しないといけないの？

マウスカーソルを乗せた時の反応だけにしたかったら
a{
なんちゃら設定
}
a:hover{
なんちゃら設定
}
だけでもおｋ？

>693
ダメ
>698
おk

>688
両方指定すると、IEではheightの領域に不足しているとその高さ、超えるとそれ以上（min-heightと同じ描画）をしますが、
FFではheight以上のサイズは溢れます。

heightのみでも同じです。
min-heightのみの場合は、FFでmin-heightの描画ですが、IEだと不足したときに背景が不足します。

>700
_height: **px; min-height: **px;

>>695
2重で使うというか、
後に書いた方が上書きされる。

>>701
min-heightを後ろにする、という意味でしょうか？
min-heightではheightの上書きは出来ないです。
FFではheightのみを指定した時と同じ動作をしてしまいます。

誤読でしたら、ご教授下さい。

>>685
IEとFFの指定を分ければいいじゃん

ﾊｲ次ぎの患者ﾄﾞｿﾞ

>>704
なるほど、JSかなんかでCSSを振り分ければいいんですね。
面倒ですが仕方ないですね。
有難う御座いました。

JavaScript使用するまでもない。>>705
WinIEのunderscore hackを応用すればよし。
http://wellstyled.com/css-underscore-hack.html
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
要はプロパティの先頭に“_”をつけても
WinIEだけはなぜかその行を無視せずプロパティとして認識する。
#menu {
position: fixed;
_position: absolute;/*WinIEだけ認識する*/
}

>693=696
なんか勘違いしてるかも
CSSにはnameの記述は不要　idへの記述だけでいい
XHTML1.0でのa要素にはidとnameを並記

>703
僕が >701で言いたかったのは >706さんが書いてくださっていること

>>706
そういう意味だったんですね。やっぱり誤読してました。
さっそくやってみます。有難う御座いました。

>>708
ごめんなさい。誤読してしまって。
有難う御座いました。
思い余って、overflow: scroll;とかにしそうになってました。

背景画像を中央に固定し、（background-position: center;）
テーブル画像を中央に配置すると、（<table align=center>）
どうしてもIEで見た時に1ドット分ずれてしまう様です。
ウィンドウの横幅サイズを変更すると元に戻ったり
また横幅サイズを変更すると再度ずれたりします。。

何とかなりますでしょうか？

1ドットぐらい気にすんな

>>711
７を２で割ると４と３に分かれる仕様です。
横幅が1024ぴったりというような偶数であればずれません。

質問失礼します。

http://www.unzip.jp/home.html　のreviewコンテンツ。
のようなリンクにマウスオーバーすると
他の位置にテキストが現れるような
仕組みを作りたいのですが、cssで可能でしょうか？

可能です。でもDHTMLを勉強して下さい。さよなら。

ふむふむ、cssとhtmlのみでは出来ないということですね。

DHTML調べてみます。ヒントをくれてありがとうございました。

いろいろ調べてみたのですが、なかなかうまくいかないので
質問させていただきます。ご教授いただけると幸いです。

リストを使ったメニューを作っており、
マウスオーバーすると、色が変わるリンクを作りたく思っています。

IEではうまく表示されるのですが、
firebox、ネスケ（7.1）では
長さが変わってしまい、不恰好になります。

以下、ソースを貼り付けます。

【html部分】

<div id="navi">
<ul>
<li><a href="index.html"><span>ホーム</span></a></li>
<li><a href="what.html"><span>○○とは</span></a></li>
<li><a href="form.html"><span>××について</span></a></li>
<li><a href="ad.html"><span>▲▲について</span></a></li>
<li><a href="staff.html"><span>■■について</span></a></li>
<li><a href="co.html"><span>ご連絡</a></span></li>
</ul>
</div>

【CSS部分】
div#navi ul{
margin:0px;
padding:0px;
border-style: solid;
border-width:0px 0px 2px 0px;
border-color: #666;
list-style: none;
font-size:11px;
line-height: 133%;
}

div#navi li{
margin:0px;
padding:0px;
}

div#navi a{
margin: 0px;
padding: 0px 2px 1px 5px;
background-color:#F3F3F3;
font-size: 14px;
line-height: 180%;
border-style: solid;
border-width:1px 2px 0px 1px;
border-top-color: #ccc;
border-left-color: #ccc;
border-right-color: #666;
border-bottom-color: #666;
text-decoration:none;
width:180px;
}

div#navi a:hover{
margin: 0px;
padding: 0px 2px 1px 5px;
background-color:#FFF;
border-style: solid;
border-width:1px 1px 0px 1px;
border-top-color: #ccc;
border-left-color: #ccc;
border-right-color: #666;
border-bottom-color: #666;
color:#CC0000;
}

>>717-720
何分、Web制作を始めて数週間なもので、
見苦しい箇所などがあると思いますが、
お許しいただけると助かります。
どなたか、わかる方がいらっしゃいましたら、
よろしくお願いいたします。

>>721
a 要素がインラインレベルのママだから。
つか、ボダはliの方でやった方が健全な気がする。

>>722
ご返信ありがとうございます。
インラインとブロックの違いもいろいろ調べてみて、
ソースを変えてみたりしたのですが、ダメでした。

初心者っぽい発言で恐縮なのですが、
どちらかというとhtml側の問題なのでしょうか？

テーブルの幅・高さをきっちりタグで指定しても、
入れ子にしてさらにテーブルを入れてしまうと
微妙に狂ってしまうので、cssで数値指定をしてみたいのですが、
１つのページに複数のテーブルがある場合、
どう書けばいいのかわからなくて詰まっています。

一番大きいテーブルは
<table border="0" width="700">
<TR> <TD width="150"></TD><TD width="550"></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>

横幅７００のでかいテーブルを150と550に分けてって感じなのですが、
各々のセル内に幅130、幅530くらいのセル幅よりも小さいはずの
入れ子のテーブルを入れると微妙に１〜２ミリ違ってきてしまいます。

<style type="text/css">
<!--
table { width:700px; }
.td01 { width:550px; }
.td02 { width:150px; }
//-->
</style>
って書こうと思うのですが、
入れ子にした方のテーブルの数値指定の分については
どう書けばいいのでつか・・？！

>>721
spanは何の意味があんの？

>>725
思った

>>723
html側の問題ではないよ。
CSSでaをブロック要素にする必要がある。
display: block;
インライン要素とブロック要素の違いをもっと勉強しよう。

また、あなたのCSSだと、IEでも標準モードだと不ぞろいになるぞ。
IE以外のブラウザも気にするのならこの辺りも少し勉強した方がいいかもしれません。
きっとIEが嫌いになるはず。

>>689の、dtとddを一列にする方法をどなたか教えてください
ttp://www.mushline.com/about/
↑例えばここのような。(css見れません)、
dtをfloat:leftにすると、clearするタグがありませんし？、
dtddにdisplay:inlineを指定すると、以降全て一列になってしまいます。
宜しくお願いします。

>>728
> dtをfloat:leftにすると、clearするタグがありませんし？、
ddが回り込むんだから、dtでクリアだろ。

>>728
> ↑例えばここのような。(css見れません)、
ウソこくな。
見れるだろ。
ttp://www.mushline.com/common/import/base.css
ttp://www.mushline.com/common/import/other.css
ttp://www.mushline.com/common/import/about.css

>>728
そのサイトはガチガチにpxで固めているようなので
あまりオススメできないような

>>729
ああ、そうか。floatとclearて同じタグに設定できるんですねorz
ありがとうございました。早速やってみます。

>>730
IEだとｴﾗｰがでたので、落せないようになってるのかと思ってました

できましたー。なんか横に線が入ってしまいますが。
スクロールさせたり、反転させたりすると消えますが…。
精進します。

よくわからんが、乙。

>>733のは、IEのver.が古いとかじゃない？たぶん

>>728-
なんでＦＡＱを参照しないんだ？　A8（>>7）だ。

>>728
dl compact に相当するのを完全に実現するのは結構厄介。
float 使えばできるけど、試しに dt の高さを大きくすると崩れる。
opera だと display: compact; に対応してるらしいけど、他は以下のように。
http://www.zspc.com/documents/css2/display/display.html

フッター部分を一番下にくっつけたいんですが、
コンテンツの文章が多い時は下にぴったりくっつくんですが
コンテンツの文章が少ない時、フッターが上の方に上がってきてしまいます。

フッターを一番下にぴったりくっつける記述をご教授お願いします。。
padding-bottom: 0px;
でダメでした。

マージン

>>738
たとえば、bodyの中が
div#header, div#content, div#footerから成るのであれば
min-heightでdiv#contentの最低限の高さを確保すればよい。
理論上ではね。

>>737
display:compactはCSS2.1にはない
http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#display-prop

>>725
お返事ありがとうございます。
spnaは何かの本を読んでいるときに
上記のような記述があったので、
まねしてみただけでした。
たしかに意味がないようです。
きっちり理解してから真似しないと意味ないですよね。失礼いたしました。

>>723
＞CSSでaをブロック要素にする必要がある。
おお、なるほど。この書き込みのおかげでだいぶ理解できました。
ブロック要素とインライン要素の違いもかなりわかってきた気がします。
CSSが楽しくなってきました。
しかし、IEでのみ表示されるというのが多くて、
若干IEが嫌いになってきたのは事実です（笑）。

ところで、本日、さらに理解をするために
「DESIGNING WITH WEB STANDARDS」というものを買いました。
http://www.amazon.co.jp/exec/obidos/ASIN/4839913110/249-5574899-2742765

まだ前半しか読んでいませんが、
わかりやすく素敵な本だと思っています。
CSSの上級者の方で、これを読んだ方がいらっしゃったら
感想などを教えていただけると、今後の学習の助けになるので、
恐縮ですが、お願いいたします。

>>723ではなくて>>727様でした。申し訳ないです。

>>736
ぎゃー。ほんとすみません・・
つっこまずに親切に教えてくれた方々も

あと、>>733の変なライン？(IE6で出ました)は、
dlにwidthを指定すれと消えて無くなりました

もちついて、次どーぞー。

<h1>はサイトに一つなんですか？
各ページに一つずつではいけないですか？

<h2>を使うなら<h1>を最初に使わなければいけないと
あったので、迷ってます

css関係ないな。こっちでどうぞ。
http://pc5.2ch.net/test/read.cgi/hp/1103536204/

ちなみにページごとに1個づつだ。

>>742
ちょっと、古いけど
日本人が書いた糞本なんかより
いい本だと思うよ

あ、スレ間違えましたm(__)m

1個ずつでよかったんですね、ありがとうございました。

>>746-747 >>749 痛過ぎ。4個ある例 http://www.w3.org/TR/xhtml2/

>747
ｸﾙｸﾙﾎﾟﾝ　退場！

letter-spacingを使うと、
「―― 」や「……」が「― ―」「… …」
になってしまいますよね。
これは仕方のない事なんでしょうか。
normalにしておいたほうが無難かな。

>>752
該当部分だけ別のプロパティを当てればよいんでないの？

すまんが、どこで聞けばいいかもわからないんだが

いままで、フレーム使ってたweb ページをcssに変更しようと
思ったけど、メニューを全ページに入れたい場合、htmlの<a>を
全ページにメニューの数だけ書かなきゃいけないの？
それとも何か自動で書いてくれるような方法があるのでしょうか？

>>754
スレ違い。

だが、PHPが使えるならこういう方法もある。
ttp://neta.ywcafe.net/000372.html

>>754
CSS関係ないので他で聞きましょう。

>>755

SSIじゃねーの？w

多分「フレーム使うくらいならCSSで」という表現から「乗り換えるならCSS」と思っただけだろうから、あんまつつくな。

>>754
メニューを共有して一括操作するにはSSIがオススメ。JavaScriptでHTMLソース読み込んでもいいけど、好きなほうで。
■Google　「SSI　メニュー」
http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja-JP%3Aofficial&q=SSI+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja

ただ、サーバーによってはSSI使えないとこもあったりするから気をつけて。
何も知らない状態からいきなりSSI学ぶのも疲れるけど、マスターしたらこっちのもんだから。(,,ﾟДﾟ) ｶﾞﾝｶﾞﾚ!

教えてください。
IE6でのバグについて。
フロートさせたボックスに指定したマージンが指定値より2倍にでるバグが
あったと思うんですが、あれって回避方法どこかにないでしょうか。
バグ自体の報告はぐぐると出てきましたが、解決法が知りたいんです。
良い知恵をお貸しくださいまし。

マージンするな

>>758
スレ違いのものに答えるのは一見親切なようで、
スレ違いの質問を許すことになるからあんまりｲｸﾅｲ。
間違っているんだろうなぁと思いつつ
やさしい気持ちで「スレ違いだﾎﾞｹｪ」というのも大切だと思うよ。

自治はスレ違いだﾎﾞｹｪ

>>759　これね。
http://cssbug.at.infoseek.co.jp/detail/winie/b107.html
問題のボックスをdivで括って、外側のdivにpaddingを設定すれば？

或はWinIEに対してだけ半分の値の左右マージンを指定するとか。>>759
振り分けは>>706のアンダースコア・ハックでやればよし。

気をつけます(´･ω･｀)ｼｮﾎﾞｰﾝ

インラインフレームで{height: 100%;}を指定しても
FireFoxとNetScapeでは無視されてしまいます。
縦をどうにかして画面いっぱいまで拡げたいのですが、
何か方法はないでしょうか。

100%ならべつにインラインフレームでなくても医院じゃ内科医。

>>763>>764
有難う御座います！できました〜。underscore hackでする事にしました〜。
先人達の知恵に感謝！！

>>766
何に対しての100%なのかわかってますか？　
htmlとbodyへのheight指定してないだけと見た。

>>766
ＣＳＳバグ辞典に「仕様通りの動作」とあるだろ。調べてないのか。
　body要素へのheightプロパティ%値指定が無視される(N7.0/M1.4RC2)
　http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html

>>770
そこもう更新されてないから

スタイルシートで以下と同じ様な事をしたいのですが、
<table cellpadding=0 cellspacing=0 border=0>
cellpaddingとcellspacingに等価するものを見つける
事が出来ませんでした。
当方が間抜けでぐぐりきれないだけだとは想うのですが、
教えて頂けたら幸いです。

>>772
仕様書よりGoogle検索とは。ある種の洗脳だな。Google教。
何を根拠に検索結果を信じられるんだ？
http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html

>>4 あたりにあるようなリファレンスのページをブックマークしておいたほうが、
なんとかの一つ覚えで「ぐぐってみたけど分かりません」とか言い訳するよりも
役に立ちますよ。

>>771
はあ？
更新はされてるし、仮にされてなくても内容は古くなってないから関係ないだろ。

>>772
FAQにあるぞ。このスレッドでは>>1がポカして書き損ねたけど。
http://web2ch.s31.xrea.com:8080/?CSSFAQ#content_1_10
Q11: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A11: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。

「いままでの 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

>>775
存在意義を問われたら要らないとしか言えないがな

ま、持ちつけ

ぺったん

>>777　私怨でもあるのか？　あれば有用だろ。

バターつけて食うとうまいよ

>>780
私怨があれば有用？

>>782
国語できない奴は参加するな面倒臭い。

アンカー間違えてるぞ

私怨でもあるのか？　(私怨が)あれば有用だろ。　×
私怨でもあるのか？　(バグ辞典が)あれば有用だろ。　○

だろ。

>>782は国語できない奴なの？

>>786
揚げ足をとりたいだけだろうな

で、雑談は終わったかい？

うん

floatで段組をしているのですが、divにborderを指定すると意図したとおりに表示されなくなります。
IEでは狙い通りに表示されるのですが、NNやFirefoxあたりだとダメでした。。。

CSS部分
div.title{ width : 100% ; background-color : dimgray ; border : 1px solid black ; }
div.left{ width : 30% ; float : left ; border-left : 1px solid black ; }
div.right{ width : 70% ; float : left ; border-left : 1px solid black ; border-right : 1px solid black ; }
div.footer{ width : 100% ; border : 1px solid black ; background-color : dimgray ; }

HTML部分
<div class="title">
<h1>タイトル</h1>
</div>
<div class="left">
<p>メニュー</p>
</div>
<div class="right">
<p>メイン</p>
</div>
<div class="footer">
<p>Copyright (c)</p>
</div>

上手くいきません…。
どうすれば良いのでしょうか。。

とりあえず計はちょうど100%にしない方が良いよ。

一昨日「html初心者」で聞いたのですが答えがなかったのでこちらで伺います。

<select size="3" style="width:100px">
<option>普通1</option>
<option>すごーーーーーく長い</option>
<option>普通2</option>
<option>普通3</option>
</select>

とした時に IE で横スクロールバーを出す方法はありませんか？
# NN6.2 では何もしなくても横スクロールバーが出るんです。
# overflow は select だけダメでした。

>>790
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

>>790
横100％でさらにborderまで入れちゃうのはどうかと思う。
>>791も言ってるけど、テンプレ（>>4-7）あたりを見たほうが良い。

>>793,794

　なるほど…。なかなか上手くいかないものですね。
ありがとうございます。
もう少しfloatやボックスモデルについて勉強してみます。
良い方法模索中…。

>>790
IEでは狙い通りって
IEバグってますから！残念！

>>791

99 < x ≦ 100
でできますか？

>>797
出来る場合もあれば出来ない場合もある。
当たり前だが、px と % のように単位が違えば直接は比較できない。
border-width に % は使えないわけで。
こういう単位の違いを吸収する方法 :
ttp://www.alistapart.com/articles/negativemargins/

marginが適用されません…何故なのか教えて下さい。
作成環境：手書き　閲覧：mac OS9　IE5.1.7

----CSSファイル-------
body{color:#454545;}
a:link{color:#FF69B4;text-decoration:none;}
a:visited{color:#c0c0c0;text-decoration:none;}

.center{text-align:center}
.10{margin-top:10;}
.20{margin-top:50;}

.small{font-size:8pt;}
-----------

次にhtml記述部分を書きます。

つづき
------htmlファイル-----------
<div class="center">

<p class="10">ああああああああ</p>

<p class="20">
<a href="syukkinmenu.html">いいいいいい</a><BR>
うううう<BR>
<span class="small">（ええええ）</span><BR>
</p>

<p class="10">
<a href="nikkimenu.html">おおおおおお</a><BR>
かかかか<BR>
<span class="small">（きききき）</span>
</p>

<p class="10">
<a href="profmenu.html">くくくく</a><BR>
<span class="small">（けけけけ）</span>
</p>

<p class="10">ここここここ</p>
<hr>
リンク→<a href="h***/i/">モバイル</a><BR>
<p class="10">電話→<A HREF="tel: 0123456789">0123-456-789</A></p></p>

</div>
---------
pをdivに変えてみたりもしましたが、適用されませんでした。
助けて下さい｡･ﾟ･(ﾉД`)･ﾟ･｡