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

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/
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　 http://pc5.2ch.net/test/read.cgi/hp/1078463560/
代替スタイルシートに萌え〜
　 http://pc5.2ch.net/test/read.cgi/hp/991400015/
独自拡張、草案段階のCSSについて語れ
　 http://pc5.2ch.net/test/read.cgi/hp/1019912046/
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　 http://pc5.2ch.net/test/read.cgi/hp/1038678267/
CSSでイケてるデザインサイト 23
　 http://pc5.2ch.net/test/read.cgi/hp/1087905861/
【仕様書】
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

完了。
ローカルルールリンク先の変更申請済み。

>>1
乙。

>1
おっつー！
待ってたぜ。

カレー

IE(win)：5,0以上
IE(mac)：5,2以上
Netscape：6,0以上
Opera：1,0以上
Safari：1,0以上
Mozilla：1,0以上

親戚に会社(学習塾)のサイトを作ってくれと頼まれ、HTML＋CSS(＋PHP/SQL)で作ろうと考えてます。
とりあえず上記のブラウザに対応させたCSSで組もうと考えてるんですけど、
やっぱり企業サイトとかだとネスケ４系もちゃんとやらなくちゃNGでしょうか？

>>12 時間に余裕がなければ無視して無問題。

>>13さん

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

実は先ほど簡単にCSSを書いてみたてDW(MX2004)でエラーチェックをしたところ、
設定でNetscapeを6,0〜にすると、ブラウザエラーは17箇所。
それをNetscapeを4,0〜までに下げてやると、ブラウザエラーは100以上・・・・呆然でした。

年度内に作ってくれとのことなので、(微妙に時間に余裕はありますが)
まずは6,0以上をターゲットに作ろうかと思います。

すんません、いままでテーブルレイアウトでサイト制作してたんですが、
徐々にレイヤーを使用したレイアウトにしていこうとしている、
CSS初心者です。

Dream Weaver MXで制作してるんですが、テキストサイズを
ユーザーに拡大されたときなどに柔軟に対応できるよう、
テキスト量の多いところは、テーブルに入れています。
で、そのテーブル（縦長）をDIVレイヤーに入れて配置してました。
IEでは無事に閲覧できるんですが、NetScape7（MAC）で閲覧すると、
レイヤー内のテーブル（横幅400px程）の中のテキストが、<br>のあるところ以外、
すべて折り返さないようになっており、テキストがレイヤー・テーブルを
はみ出して画面外右まで出てしまってるんです。

この、レイヤー内にテーブル入れて、テキスト入れてって
やり方が、邪道なのかなぁ？どうにか、レイヤー内の、テーブル内部の
テキストが、TD内に納まるよう、折り返される方法はないもんでしょうか？

>>15
widthの指定はどんなんでしょう？

>>16
レイヤーは、幅が500pxほど、縦は指定せず（auto）。
中に入れているテーブルは、幅500ほど。縦指定せず。
テーブルの一番上のTDには、内容が頻繁に更新されるテキストは
入っていて、CSSでサイズ指定しています。
二段目以降のTDには、他コンテンツへのリンク画像など。
列は1列のみです。必要ないだろうけど、一応テキストが入っている
一段目のTDにも、横幅500px指定。

WINでもMACでも、Netscape7で見ると、同じ結果になりますね…

レイヤーレイヤー言うのに抵抗を感じる

確かに、レイヤーというと、フォトショみたいな
雰囲気でちゃいますかね >>18

自力で解決できました！どうもお騒がせ致しました。

勝手ながらまた質問させていただきます。

書いたCSSを見てみると行数が軽く400を超えているのですが
これって長すぎでしょうか？(ちょっと気になって・・・・汗)

paddingやborder等は

padding-top-style : solid;
padding-right-style : solid;
padding-bottom-style : solid;
padding-left-style : solid;

のようにいちいち１つ１つ細かく指定して書いています。
（padding : solid;　ではアクセシビリティを考えるとNGだと聞いたので）

これで正しいのでしょうか？ご教授お願いします。

border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;

のようにいちいち１つ１つ細かく指定して書いています。
（border : solid 1px #000000 ;　等ではアクセシビリティを考えるとNGだと聞いたので）

何を曲解してるのかは知らんが好きにやってろよって感じだな

>>21
可能な限りシンプルにする方がいいです。

＞（padding : solid;　ではアクセシビリティを考えるとNGだと聞いたので）
どこで聞きましたか？
たぶん他の何かと勘違いしているような気がします。

>>21
まずはアクセシビリティの意味から勉強しなおそうな。
ついでにページごとあるいは文書群のChapter毎にファイルを分割するとかな。
もちろん基本部分は1枚作成しておいてだ。

後はbodyにidを振ったりしてなるべくCSSで使いやすいHTMLに仕上げとくのが賢いかもね。
strictをほんとに厳格に守るメリットはないから、strictの旨みだけを利用しれ。

読みやすい、再編しやすいってのは重要だな。

ユーザースタイルシートでフォント関係の指定をしたいのですが、
特定の言語のページにのみそのスタイルシートを効かせるような
記述ってありますか？

>>25
クラスかアイディーでも付けれ。

>>25
http://hp.vector.co.jp/authors/VA022006/css/selector.html#lang-pseudo-class

>>26
おまえはしばらく回答するな。　混乱の元だ。

>>26
どうやってつけるの？ｗ

>>29
ボディーにキーボードかアイエムイーパッドで

>>30
試しにこのページのソース開いてやってみたけど、何も起こらないけどなんで？ｗ

>>31
スタイルシートを初期設定化するタグを使ってないから

>>29-32

>>32
？
で、結局どうすればいいの？

本屋へ行って入門書を買ってくる

>>35
馬鹿じゃんｗ
とりあえずユーザスタイルシートの意味を勉強してからこいよ。

26 ：Name_Not_Found ：04/09/29 20:31:55 ID:???
>>25
クラスかアイディーでも付けれ。

28 ：Name_Not_Found ：04/09/29 21:26:50 ID:???
>>26
おまえはしばらく回答するな。　混乱の元だ。



どういうこと？28は26が誰か知ってる手ってこと？
簡単に言うと28=26だよな。ほんときもいやつが増えたな。

重なっているのをちょこいとズラすのってどうやるんだっけ？

間違えた、重なりのしたになっているのを全面に持ってくるやつ

いや、前面…

z-index で値を指定すればよろしいかと。

>>37
釣りにマジレスすると、
>26は>25がユーザスタイルシートの話をしているにもかかわらず、
クラスやアイディーといったユーザスタイルシートからはどうすることもできないものを
付けろと等と、とんちんかんな発言してるから、混乱の元になるから発言するなといっただけだ。

>>41
おおそうなのか、さんくそったれ！！

<div>
<h2>あああ</h2>
<p>いいい</p>
</div>

こういう部分を２ちゃんのindexの緑のテーブル部分みたいに表現するにはどうしたらいいでしょうか？
不可能でしょうか？

>44
可能だから勉強しなさい。
やってみて分からないことがあれば質問せい。

>>42
本当かよ！もう少し文法考えろよ！

html[lang="en"]とか？

板違いかもしれないけれど、Proxomitronを使えば
特定サイトのみにユーザーCSSを使うことが可能。
あとは詳しくないけど、Mozillaの独自拡張かな。

>>46
知らないのはオマイだけ
　
　　　　　遅レスごみんね。

>>48
何の話？今お前が26=28かどうかを話してるんだよ。
それを知ってるのは本人であるお前だけだろ？だから

＞知らないのはオマイだけ

知らないのはお前以外ってことだ。意味わかるか？なんか最近日本語すらできないやつが多いよな。

>何の話？今お前が26=28かどうかを話してるんだよ。

　　どこで？

>>46
>>37を読むと、おまえが2chにはまったく向いていないことが解る。

>>48は「スタイルシートを」を頭につければアホアホのお前でも理解できるだろ？

いつから「馬鹿でも書き込んで良いルール」に変わったんだ？

>>50
>>37で。というか俺は初めからその話しかしていない。ユーザスタイルの話などどうでもいい。

>>51
わかったよ。
>>48>>28は脳内日本語の使い手なんだな。

＞>>48は「スタイルシートを」を頭につければアホアホのお前でも理解できるだろ？
あのな、つけなきゃわからんのよ。お前の脳内会話では通じてるかも知れんが、現実ではお前にとって
冗長でも、他人に何かを確実に伝えるにははしょっちゃいけない部分もあるのよ。

あ〜あ
又馬鹿の言い争いが始まったよ
ほんと馬鹿に限ってくだらない見栄を張るよな

自分は馬鹿じゃない！
とか
このまま終ったらまるでまけたみたいだ！
とか意味不明なことを延々と繰り返すよな

とりあえずお前ら二人とも言い争いは専用スレ立ててやったからこっちでやれ
http://pc5.2ch.net/test/read.cgi/hp/1092941001/l50

>>12
> やっぱり企業サイトとかだとネスケ４系もちゃんとやらなくちゃNGでしょうか？
cssに限らず迷うよな、
うちは今時4.X使ってる方に問題有りと割り切って
外部css読み込ませないようにしてる、よってテキスト表示。
（jsと<noscript>で「新しいブラウザ使えやｺﾞﾗｧ！って」アラートも出してるよ）

>>55
どうせお前のは日記サイトかエロサイトだろ？
そうゆうゴミサイトと企業サイトを同じにするなよ。

例えばyahooやgoogleが旧ブラウザで見ようとすると、お前の言うよな説明文だけが出て
使えなかったら、日にいくつのアクセスを否定することになるかわかるか？

だいたいレガシの需要は1/10位だから、10万/日なら1万アクセスをはじくことになるんだぞ。
1万って言うとお前のサイトの生涯アクセスと同じくらいだな。
お前のサイトには一生誰も来ないってことだ。それでもはじくのか？


ところで実際どんくらいのアクセスがあんのかね。y君とか。
10万ってマジなのかな。まあレガシが1/10ってのも適当だから何でも行けど。

>>53の勝ちみたいね。

>>56
素人全開だな藻前（ﾌﾟ
コンテンツ内容はテキストで表示されてんだよ、
もちろんクローラは拾ってくしな。













やべ〜、鮮人の相手しちゃった（ﾌﾟﾌﾟﾌﾟ

メ欄でムキになる香具師を久しぶりに見た

>>58
>やべ〜、鮮人の相手しちゃった（ﾌﾟﾌﾟﾌﾟ

中学生くらいかな。デザインが崩れる＝商品として成り立たないってことくらい勉強しような。

はい次どぞ〜

自演ばっか。
強制IDになったらこうゆうアフォも集まらないかもな。
どこへいけばこうゆう要望は聞いてもらえるの？

>62
2ch

はじめまして。各ブラウザ感のレンダリング？
の違いで苦しんでいるのですが、大箱の中に小箱を入れる場合
小箱の周りにスキマをつけたいのですがこの場合、

■１　「大箱の余白」でスキマをつける
■２　「小箱のマージン」でスキマをつける

どっちがいいのでしょうか？経験上○○の方が
ずれがおきにくいよ等あれば、教えて頂きたいと思います。
また、w3cとかの推奨とかで○○の方がいいよ等あれば
教えてください。

よろしくお願いします。

>>64
テーブルがオススメ。

>>64
http://www.fromdfj.net/html/border2.html
よってテーブルがオススメ

>>60

> 中学生くらいかな。デザインが崩れる＝商品として成り立たないってことくらい勉強しような。

デザインが崩れるってどこに書いてあるんだ？あ？
藻前の脳内補完＆妄想でイチャモンつけてんじゃねーぞダボが！

>>67
お前馬鹿？
自分でテキストで表示って書いてるだろ。

厨房はママのメシでも食って寝ろよ。

ママ　ごはん

パパ　ごはん

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

ごはんが出来たのかな？

>>60
>デザインが崩れる＝商品として成り立たない
　　　　　↑
の等符号の意味を解説したまえ。

>>73
m9（^Д^）ﾌﾟｷﾞｬｰｰｰｯ

頭悪すぎだから解説しても理解できないと思われ

ばかばっかり

いつものことだ。

(´-`).｡ｏO(　強制IDにならないかな・・・・　)

例えば

　.fb {font-weight:bold; }
　.fs {font-size:small; }

ってクラス設定して、

　<span class="fb fs"></span>

とした場合の
“class="fb fs"”って指定の仕方は、どれくらいのブラウザで実装されてるの？
IEとNNでは実装されてるって聞いたけど、他のブラウザじゃどう？

あんまりお奨めできない指定方法？

>>78
なぜ対応表を見ない？
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#class-selectors
>Win版 MSIE 3〜4，Netscape 4 は，空白類文字で区切られたクラス属性値を解析できない。

そもそも「他のブラウザ」とは何？

>>79
IEとNN以外だろ。モジラとかオペラとか。
「IEとNNでは実装〜」ときて「他のブラウザ〜」て言ってるし。

>>65
>>66

ありがとうございます。
やっぱり段組はテーブルの方が、いいみたいですね。

すべてcssでやろうとかっこつけずに、テーブルも併用してみます。

>>27
ありがとうございます。
しかしそれだと文書中に言語の指定が無い場合は無効になりますね。

dlの整形について質問です。
<dl>
<dt>あいうえお：</dt>
<dd>aiueo</dd>
<dt>かきくけこ：</dt>
<dd>kakikukeko</dd>
</dl>

dt{ width:200px ; float:left ; clear:left ; font-size:100% ; }
dd{ margin-left:200px ; font-size:150% ; color:red ;}

うまくいえませんが、dtとddは横並びになりますよね。それでその時に
ベースラインでdtとddが揃ってほしいのです。↑のやつはそのままでやるとtopでそろってしまいます。
それをベースライン揃えする方法はありませんか？

文字の大きさを変えられても対応できるような方法でお願いします。

>>80
NNはNN4でもない限り、Mozillaと一緒だろが。
で、結局他ってのはOperaだけかよ。MacIEとかSafariとか無視なのね。

>>81
>やっぱり段組はテーブルの方が、いいみたいですね。
んなワケないだろ。騙されんなよ。

>>83　floatのままでは、divで入れ子にでもしない限り無理。

>>79
テンプレにあったんですな、ｽﾏｿ
IE3/4、Netscape4は他の部分もダメダメと聞いて
切り捨てる方向だったんで(しがない個人サイトをやるつもり)一応は問題ナシ、と。

「その他のブラウザ」ってのは>>80氏の言うとおりオペラ他な訳ですが
>Win版 MSIE 3〜4，Netscape 4 は，空白類文字で区切られたクラス属性値を解析できない。
ってことは逆に、オペラとかは問題なく表示できるって解釈でいいンかな？

とりあえずテンプレ見てきます(`･ω･´)

ごはっ書いてる間にレスが

>>84(＝80？)
MacIEやsafariについても知ってたらお教え願います。

つーかその二つについてはテンプレに載ってるんだろうか？

fontプロパテの値って書く順番が決まってるのですが？
効いたり効かなかったりするのですが・・・

正確な順番があるのでしたらいい覚え方とか教えてください。ごろみたいな。

http://www.zspc.com/documents/css2/selector/class.html
Macintosh版 IE 4.5：[○]
複数のクラス指定(Multiple classes)には対応していない。

>>85
divですか...ということは行の分だけdl要素を追加しろということになるのですか。
なんかCSSって実用性ないですね。

>>88　なぜ>>4を見ないのかねえ。
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font
fontの簡略化プロパティは、 font-familyに代替フォントを指定できないので止めておけ。

>>84
>>やっぱり段組はテーブルの方が、いいみたいですね。
>んなワケないだろ。騙されんなよ。

だまされてるのはお前だろ。段組に限らず実装がバラバラの部分は素直にテーブル
使うのが間違いなく賢いって。

>>90
>ということは行の分だけdl要素を追加しろ
ハア？
<dd><div>文字</div></dd>でいいだろ。
そもそも表ならtableでいいんだぜ。それ、本当に定義リストなんだろな。

>>91
どうも。簡略化は便利なようで不便なんですね。
もう少し頭を使って作ればいいのにね。チム訓も。

>>93
><dd><div>文字</div></dd>でいいだろ。
これで何をするのですか？ごめんなさいわかりません。
簡単な定義リストです。ddの方が文字が大きい時や、とにかくベースラインあわせを
したいときはどうすればいいのかなと思いまして。

>>92
>実装がバラバラの部分
そんな>>66が出した程度の実装差は、box-sizeingで処理する方法があるのに。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
知らないからって初心者を瞞してはいけない。
そもそも>>64の質問に対して>>66は的外れ。
paddingでなくmarginでやっておけば実装差は出ない。

>>95　vertical-alignやline-heightはいぢってみたの？　工夫してごらん。

>>96
ばらばらどころか実装されてもないものだされても困るけどな；

>>98
隠しプロパティであれ、現に実装されてるから効くわけだが。
それに>>64の質問に対しては、子要素のmarginでやれ、で済む話。

>>97
vertical-alignはテーブルのセルにしか通用しないですよね？
displayでの置換も実装が追いついてない記憶があります。

ところでdivを使って何をするのですか？

>>99
すまん。効くのか？
実は試したことないのだ。CSS3のやつだろ？
IE4以上NN6以上程度で効くのであれば、俺としてもかなりの発見でCSSに対する見方も変わるかもしれない。
で、実際どれくらいの対応状況なの？

Q6にページの縦横中央配置ってあるけど、どの記述方法がベターかな。
漏れはこれが調整できて良いと思ったんだが、
縦横中央配置してる猛者共はどんな記述してるの？

<style type="text/css"><!--
body {
    margin:0;
    padding:0;
}
div {
    position:absolute;
    top:45%;    /* 内容に応じて調整 */
    right:auto;
    bottom:auto;
    left:27%;    /* 内容に応じて調整 */
}
--></style>
</head>
<body>
<div>
■
</div>
</body>
</html>

＞Mac版 MSIE 5，Netscape 6以降/Mozilla，Opera 7 は，box-sizing を先行実装しています。


つまりWinIE4以上では使えないってことだ。はしゃぐな。

>>100
>vertical-alignはテーブルのセルにしか通用しないですよね？

インライン要素に適用できます。
いい加減、>>4のレファレンスで確かめてから発言して下さいね。

dt,ddそのものはfloatによりtopで揃っても、その中を別のボックスで囲めば、
そのボックス内で色々調節できるでしょ？

>>102
CSSだけでは無理とかいう話なかったっけ？中身の大きさが決まってることなんて
滅多にないだろ？まあお前が文字サイズ固定をしてNNの中以外では見れないサイトにしてるならいいけどおいおいおいおいおいおいおいおいおいおおい

>>103
だからWinIE5〜5.5やWinIE6互換モードに合せた指定をすればいいだけだろに。
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有効。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。N6で有効。*/
-khtml-box-sizing:border-box;
}

>>104
そういうことですか。なるほどです。
でもやはり実用性はないですね。92さんの言うとおりテーブルレイアウトも混ぜたほうが賢いみたいですね。

それではありがとうございました。

>>105
ＦＡＱの6のリンク先を最後まで読めよ。ＣＳＳだけでも出来るよ。

>>106
は？
HTML4.01strictで記述してる漏れのサイトはIE6はいつも標準準拠モードになるよ。
当然DTDを変えるなんてアホなことはしないぞ漏れは！

というか間違ってるほうにあわせられるほど俺はあまたのいいやつ、柔軟な男ではない！

お前らアホだな
いまどきCSSなんて使えたもんじゃないよ
黙ってテーブルでやるのが男らしい

CSSは後10年待て

さらに一歩を進めてXHTMLにしたら、box-sizingの必要性がわかるよ。>>109
XML宣言をするとIE6はQuirksモードになるからね。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/09b.html#day20num01

>>111
必要性に文句を言ってるのではなくて、どんなに便利なものでも原条の実装の
しかたでは使いようもないよ。

HTML4.01strictでかいテル俺はこんなもの合ってもどうにもならない。
結局間違ったboxの計算するブラウザを廃止にする以外に手はないね。
まあ俺がXHTML1.1辺りで書き直すのが早そうだが、やったことないし面倒すぎる。

>>112
こちらへどうぞ。

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

CSS3を作るよりまずは実装の統一を図ることの方が重要なのに、w3cって頭悪いのかね？
それともわかってるけど、どうにもならずに悔しい思いをかみ締めてるのかね？

頭悪いのかね……？　仮にIE7が完全に仕様通りに実装して登場した所で、
依然としてIE5.5やIE6を使用する人口がある以上、問題は解決しないでしょ。

>>105
＞中身の大きさが決まってることなんて 滅多にないだろ？
そんなことねぇだろ。

こういうサイトはどうなんだ？
ttp://www.nwp.co.jp

ここは「CSS･スタイルシート質問スレッド」

　議論はよそでやれ、アホども！！

昨日覚えた知ったか厨が騒いでいるのはここかい？

>>114
CSS2まで勧告されてますが

>>115
だからそれを解決しろよアフォ。

>>116
だから滅多にないだろ。

ボックスのwidthの計算方法の違いの問題で、解決するにはどうすればいいですか？
paddingとborderを使わないとかですか？

>>121
お前の言う使用頻度なんかどうでもよくて、現に使用してるサイトがあるだろ？
それらがどうやって配置してるか知りたい訳だ。

>>116
FLASHプレイヤーが無いと何も見られない糞サイト
見る価値無し

>>123
お前の使用頻度などどうでもよくて、現に滅多にないわけだろ？
実際ページ内にフラッシュしかないサイトなんて全体の何%かを考えろ。
滅多にないから。

>>123
おまえヴァカ？
自分でソース見たらいいだろ。それともソースも読めない君か？ｗ

>>122
とりあえずwidthは壊されると危ない機がするからpaddingの左右は0にしておく。
それだけで結構いける。

とりあえず、ブラウザ感の差異が無くなるまでは
テーブル併用が良さそうですねってことで、
いわゆる逃げですが、テーブル併用案にしました。


width
\width
w\idth
等の方法も使ってみましたが、小手先でどうこうするよりも
作業性を優先って事で。

今後css3などで、この辺が本当に使える仕様になると
いいですね。

>>128
分かてるだろうけど、期待されるは仕様でなく実装な。
まあテーブルより使える実装になるには10年以上かかるな。

>>125
いつからFLASHの話になったんだよ。

アホは論旨が佐田まらんのだ。

>>130
そうだよな。もろ勘違いしたよ。
しかしまぁ自分でサイトを探して見に行くってことで終わりにしろよ。
粘着はうざいから。

>>122は>>106を見てないのかね。どうせStrictではないんだろ？

・XHTML 1.0 Transitional
・IE6、WinMe

<style type="text/css">
DT {display:list-item; list-style-type:decimal;margin-left:2em;}
</style>
<dl>
<dt>はじめに</dt>
<dd>初めに言っておきたい事</dd>
<dt>第二に</dt>
<dd>その次に言っておきたい事</dd>
<dt>第三に</dt>
<dd>その次(以下略)</dd>
</dl>

これを表示すると、

　1.はじめに
　　〜
　3.第二に
　　〜
　(以下略)
となってしまいます。
以下のようにしたいんですが、IE6、NN7.1でも対応できるようにするには、
どうやったらよいのでしょう。

　1.はじめに
　　〜
　2.第二に
　　〜
(以下略)
よろしくお願いします。

>>120みたいな文句は、W3CにではなくMicrosoft社に述べるべきだよな。
そもそもこのスレッドで質問することではないし。

>>134
>>4のバグ辞典を見て下さい。
リストマーカーの番号が途中から振られる(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b154.html

>>134　わざわざ定義リストにする必然性がわからない。<ol><li>でやれば済むものでは？

>>136
これが不具合なのは解りましたが、「DT,DD」の繰り返しなのでそれぞれをブロック要素で括っても、「1、2、2、〜」となってしまいます。
>>137
ここでは定義するのに使ってるんですから、整列リストでは意味がありません。
それに、整列リストは飽くまでリストなんですから、その下にダラダラと文章を書き連ねては、それは最早リストではありません。
ここはやはり、定義リストでなければならないのです。
そして、可読性とデザインの為、視覚的なわかりやすさの為にDTの頭に数字をつけるのです。


あと一言。
上で議論されてましたが、W3Cが発表するのは勧告書で、仕様書ではありませんよ。
馬鹿なお前らは「勧告書」の意味が分かっていなかったようですから、一応注意しておきます。

ウェブブラウザが「仕様書通りに」描画するのは当然で、そうならないのは只の不具合です。
プログラムなんだから、複雑になればなるほど不具合も多くなるもんでしょ。
勧告書通りに描画するのが当然だと思ってるのは、それは只の馬鹿ですよ。

アプリケーションを作成するときに、無理やり言語で定義された全ての関数を使う必要は無いでしょ。
それと似たようなもんなんですよ、W3Cの勧告書は。
ただし、ウェブブラウザはかなり公益性・公共性があるので、それと同列に扱うのは無理がありますが。

高度な知能を持ってるんだから、今を嘆くより未来を見ようよ。
嘆いても何も始まらないんだから、不具合の解決方法を考えよう。
という訳で、解決方法をお待ちしてます。

>>138
> 議論はよそで
失せろ

どうもすいません。消えます。皆様、ありがとうございました。

私も消えます。ここは本当に馬鹿なゴミが多いようなので。ありがとうございます。

>>133
strictです。>>106さんのは見ましたが、どうやらサイトに使ってはいけない技術だそうで。
テーブルレイアウトと同じレベルの非推奨行為と受け止めました。

HTML4.01strictで書いている時に、IE6〜IE4までで同じように表示させることは
不可能ですか？

>>141
お前はクズ以下ですがね。

>>142
頭固いなあ。

>>138
くだらないstrict志向にがんじがらめみたいだけど、素直に
<dt>1.はじめに</dt>
とすることが現状の最善だ。

CSSが不完全な実装であるかぎりStrictの存在も不完全になってしまうの仕方ないこと。
そこらへんは柔軟に代替方法を使い多少strictを崩したほうが解決が早い。
なによりお前のこだわってる部分はくだらなすぎる。

>>142
>どうやらサイトに使ってはいけない技術だそうで。
いけなくはない。独自拡張による先行実装と承知の上でならば、よい。
それで別に支障も起きないのだから。
それよりstrictの癖にtableレイアウトをする方が、問題がある。

>>144
すみませんorz
しかし妥協はしません。なにせただの趣味ですから。

方法があったら教えてください。なければないと教えてくださるとうれしいです。
ありそうだけどわからんから自分で知られべれとかでもうれしいです。
でもショボいスレですねここ。まだ回答を出せないなんてｗ

じゃあ無いよ

今のところない、ってのが答えかなぁ
いろいろやってみたら意外と解決策見つかるよ？

>>138
<ol>
<li><!-- --><dl>
<dt>見出し</dt>
<dd>説明</dd>
</dl></li>
</ol>
後は工夫しな。
http://cssbug.at.infoseek.co.jp/detail/winie/b028.html

>>138
>馬鹿なお前らは「勧告書」の意味が分かっていなかったようですから、一応注意しておきます。
馬鹿なお前らに助けを求めに来たお前って池沼？脳内解釈は痛いよぼくちゃんｗ

それを書くなら「馬鹿な俺らに助けを・・」だな。　日本語ムズカシネ。

>>152
自分は馬鹿じゃないからお前らってことじゃね？日本語ムズカシネ。

俺は馬鹿だが、>>151は自ら馬鹿ではないと・・・　シネシネ。

>>154
ゴキブリ野郎は汚いからクルナ
コックローチかけるぞ

おれはただのゴキブリではない！　立派なチャバネだ。
コックローチなんぞ屁でもねー。
おれの唯一の脅威はスリッパだ。

やっぱり馬鹿ばっかですね。

うむ

　　　　　＼　　　 　／
　　　　　　 ＼　／
　　　 　　 氏ね氏
　　　　　氏 ね 氏 ね 　　　　シネヤシネヤシネヤ
　　　　 氏 ね 氏 ね 氏
　＿＿氏ね 氏 ね 氏　ね＿＿
／　 氏ね 氏 ね 氏 ね 氏　 ＼
　＿_氏 ね 氏 ね 氏 氏ね＿＿
／　 氏ね 氏 ね 氏 ね 氏 　　 ＼
　＿＿氏 ね 氏 ね 氏 ね ＿＿
／　　　 氏 ね 氏 ね 氏 　　 　＼
　　　　　 氏 ね 氏 ね
　　　　　　 氏ね氏
　　　　　　　 ね

まぁ各ブラウザのCSS実装に対して
制作側の愚痴に関しては激しく同意する
とりあえず罵り合いはスルーで

>134
そーゆーのにはcontentとかcounter-incrementを使いたいとこだね
Operaぐらいしか対応してないけど

>136でIEでのバグへのリンクが示されてるが、Netscape7でもダメね
http://cssbug.at.infoseek.co.jp/detail/mozilla/b078.html

>>159
それってゴギブリ？
まさにお前そのものだよね。
汚くて、気持ち悪くて、本当お前って絶滅してほしいよ。

CSSなんて視覚ブラウザユーザには、全くどうでもいい技術だからね。
その視覚ブラウザ筆頭のIEが、どうでもいい技術を適当に実装してもなんら不思議はない。

実は問題はHTMLが視覚から聴覚〜その他まで幅広くフォローしようとするからいけないんだよ。
初めから視覚のみへのものであったならこんな問題は起こらなかった。
ここらでHTMLの位置づけを変えるべき。

ボックスをfloatさせて、上部で合わせるのでなく、下図のように
底でそろえることはできますか？

┌──────┐
│　　　　　　　　　│
│　　　　　　　　　│
│　　　　　　　　　│┌───┐
│　　　　　　　　　││　　　　　│
│　　　　　　　　　││　　　　　│
└──────┘└───┘　　

>>163
ピクセルで管理すれば出来るよ。

>>164
具体的にどうすればいいのでしょうか？

>>163
floatではできません。仕様書見てね。
「続く内容は、（'clear'プロパティの指定に従いつつ）そのボックスの右側に上から流し込まれる。」
「8.浮動ボックスはできる限り上に位置しなければならない。」
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#float-position

>>166
サンクス。
見てきます。

>>163
floatでなくdisplay:inline;で横並びにして、vertical-align:top;とすればぁ？

>>168
ボックス内にもボックスが入っているのでinlineにはできないです。

>>169
ならばそのボックス内ボックスにdisplay:inline;をかけてvertical-align:top;を有効にしたら。

>>170
そのボックス内のボックスは数個あって、inlineにするとレイアウトできないです。

なんだ、div中毒かよ。>>171

>>171
その数個有る子ブロックを括る親divを、floatさせるブロック内の直下に作れ。
そしてそれにdisplay:inline;でvertical-align:top;を効かせろ。
てか、後出しで条件つけるな。ソース出せよな、最初から。

ボケどもがああああああああああああああああああああああああああ亜！！！！！！！

>>174
偽るのはやめてください。

もう寝てるだろうけど、こんな感じ？
ttp://zxcv.sakura.ne.jp/text/test/test.html

後は適当に弄繰り回すがいいと思います。

あれから寝てしまいました。

>>173
すみません。
まさかブロック構造を解体するという回答がくるとは思わなかったので。。。

>>176
サンクスです。
そのまま使かわさせてもらいます。

>>176-177
それ、positionでやるならfloatは無用だよ。
<div class="a">
<div class="b"><p>こんな感じでよろしいか？</p></div>
<div class="c"><a href="./test.css">cssソース</a></div>
</div>
div.a{width:80%;
margin-left:10%;
margin-right:10%;
position:absolute;
border:#F00 solid 1px;}

div.b{width:70%;
float:left; /* これを削っても、表示は同じ！ */
height:10em;
border:#00F solid 1px;}

div.c{width:30%;
position:absolute;
bottom:0;
right:0;
height:5em;
border:#0F0 solid 1px;}

解りやすい●●●だな

テーブルの代わりにCSSでレイアウトしているのですが
真ん中揃えができません。。

例えば
<div class"title">
タイトルです。
</div>

というhtmlがあったとして、classにしているtitleは↓です。

.title{
height: 100px;
width: 345px;
position: absolute;
left: 10px;
top: 100px;
}

leftに10pxと絶対指定しているので動かないのもわかるのですが
左に10px開けてブラウザで全体表示させた時は
センター揃えの左10px空きにしたいのです。

説明が下手ですみません。。テーブルで言うと↓の感じです。
<table width="345" height="100" align="center">
<tr><td>タイトルです。</tr></td>
</table>

>>180
とりあえず、こうやってみれ

シート
div.title { width: 345px; margin: auto; }

html
<div class="title">タイトル</div>

>>181
ありがとうございます。マージンで間をあけるのですね。
これって別にIE以外でも表示は変わりませんよね？
とりあえず、これでやってみます。ありがとうございました。

>>178
さんくす

勘違いしてました。。マージンをleftの代わりに使うと思っていたのですが
違うみたいですね。指定の場所のレイアウト固定ができない。。

スマ。おれもカンチしてた

>>180
「左に10px開けて〜にしたいのです。」の日本語がよくわからないんですが。

l￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
|10px　　　　　　　　　　　　　　　　　 　 　 　 　 　 　 　 　 　 |
|←→|←──　 345px ────→|←── auto .──→|
|　　　＿＿＿＿＿＿＿＿＿＿＿＿　　　　　　　　　　　 　 |
|　 　 |　　　　　 　 　 　 　 　 　 　 　 |　　 　 　 　 　 　 　 　 |
|　 　 |　　　 　 タイトルです　　　 　 |　　 　 　 　 　 　 　 　 |
|　 　 |　　　　　 　 　 　 　 　 　 　 　 |　　 　 　 　 　 　 　 　 |
|　　　￣￣￣￣￣￣￣￣￣￣￣￣　　　　　　　　　　　 　 |

こうか?

>>185
そうでしたか・・。やっぱり、CSSの場合は位置を固定した上で、
ブラウザによってセンタリングにしたりはできないのかな。。

>>186
そうです。それでブラウザで表示させた場合は
真ん中に表示されているんだけど、左は10px空いているような。

ヤフーで例えると「ピンクリボン」の画像が”国内の都市”の上に
来ていますよね？この画像を絶対指定で配置を決めてある場合
ブラウザの大きさを変えたり、お気に入りのサイドバーを
追加しても、絶対指定だからその場から動きませんが
center指定の場合は必ず真ん中に表示されます。そう言う感じです。

うーん、全然言ってる内容が伝わってこないです。

「ブラウザで表示した場合は〜」
逆にいうと、それ以外の場合(186の状態で表示)っていうのはどういう場合なわけ?

「絶対指定だから〜　必ず真ん中に〜」
絶対指定なのかセンタリングなのかどっちなのか。どっちもといわれても困るんですが。
ブラウザの状態(?)によって適宜切り替えるってこと？

とりあえず >>186 ならこれで。

div.title {
width:345px;
height:100px;
margin-left:10px;
text-align:center;
}

俺も>>180が何をしたいかさっぱりわからん

>>189-190
すみません、、テストで作成したページをまとめてzipでうｐしました。
http://up.isp.2ch.net/up/b36462a59707.zip

見ていただくと左に揃えでページが作成されていますが
これをセンタリングしたいだけです。

俺なら全体をdivで囲って
margin-left:auto;
margin-right:auto;
ってやるかな。div厨っていわれそうだけど

>>180
＞説明が下手ですみません。。テーブルで言うと↓の感じです。
＞<table width="345" height="100" align="center">
＞<tr><td>タイトルです。</tr></td>
＞</table>

つまりただのセンタリングだろ。
IEの後方互換なら
全体をdivってtext-align:center;
標準ならmargin-left:auto; margin-right:auto;

しかしなテンプレに詳しく載ってるから>>1->>10くらいから探してみて来い。
簡単にできるようになるさ。

>>193
全体をdivるのは何度かやっているのですが
やっぱり、出来ません。。教えていただいたのもしているのですが。。

ググって参考サイトを探してみてはいますが
どうにも解決出来ず、ここに来たのですが
それでも解決しません。。もう少し悩みます。

>>194
おい！！！！
>>193が読めないのか？CSSでのセンタリングはこのスレの>>1-10に書いてあるサイトに
かなり詳しく載っている。だからそれを見に行くのが一番早い。

>>194
>>5これを見ろ。熟読しろ。

>>195
もちろん「見に行った」上で質問していますが・・。

とりあえず、もう一度見直します。

まずはhtmlのほうを見直すがいいよ
</div>が重複してる場所が結構あるから、指定どおりに動かないわ

あー、あとpositionを絶対指定してるからセンタリングできないのかも

>>197
お前どうせstrictなんかできてないんだろうから、
全体をdivの後にそのdivに対してtext-align:centerしれば？

まあ>>5を読んでわからないならここで何を言われてもわからないよ。

<ul>
<li>りんご
<li>みかん
<li>バナナ
<li>パイナップル
</ul>

これを2行にしたいのですが
どう指定すると良いですか？

>>200
width float
パーツを教えてやるよ。あとは自分で考えな。

>>199
＞全体をdivの後にそのdivに対してtext-align:centerしれば？

これってstrictに反してるの？

ボックスに影ってできますでしょうか？

No

>>204
サンクス

>>204
↓こんなん邪道ですかね？

http://grecks.s54.xrea.com/shadow.html

シャドウだけにジャドウ。>>206
スタイル・オフにしても支障無いものにするならいいけどね。

<div class="shadow">
<div class="light">ボックス</div>
</div>
.shadow {background:#999; margin:8px;}
.light {
background:#fff;
position:relative; left:-7px; top:-7px;
}
で、どう？　これならCSS無しでもちゃんと見える。

>>208
グラデーションの無いのは影とは呼べない。

はあ？

ひぃ？

>>206
それセオリー。

>>208
ありがとう。
↓早速、使わせてもらいました。

アン化粧品
http://grecks.s54.xrea.com/

なんだdiv厨か・・・

宣伝かよ！！

　あぁ　かよ様〜〜

>>213
厨房がサイトを作ってる会社って・・・・・・

cssでリンクのスタイルを設定してるんですが、ある部分のリンクだけ色を変更したいのですがどうしたらいいでしょうか？

>>218
テンプレ嫁よボケ。
そんなこともわからないってお前は池沼か？

>>218
<font color="">で我慢してください。

>>219
分からないから聞いてるんです。

>>219
そういう糞レスする暇があったら、教えた方が早いと思うが・・・。

>>218
navi#a link{color: #FF9999;}

というようにid属性を使ったらいいよ。

>>221
お前は誰？

>>222
ありがとうございます。

>>213
会社なのかネタサイトなのかは知らないが、せめて広告免除ぐらいしろよ…

>>222
こいつ...ものすげえ回答しやがるな....

>>225
社長がお金を出してくれないのです。(；_；)

>>218
どうぞ

link.span{
　　　color:#fff;
}

<span class="link"><a href="http://#####">site</a></span>

>>228
こいつ真性か？

釣りだろ

>>228
いぢめっ子ですね。

>>228
できました！ありがとうございました！！

やっぱりCSSよりテーブルの方が自由度高いよね。。

>>232
できるわけねえだろボケ

>>233
アホか最新ブラウザだけでいいなら完全CSSの方がずっといい！
旧ブラウザ考慮ならテーブル＋CSSのいわゆるテーブルレイアウトがいい！

自由度の点から言うとtable+CSSだろ

あっ、間違ってた。。。
ごめん。

>>236
だから>>235だって。テーブルは安定してるけど、自由度はCSSには勝てない。
自由度のみを考えればCSSだよ。

ｷﾞﾛﾝﾊﾖｿﾃﾞ

うん。議論はやめとこう。
じゃあ、引き続きスタイルシートについて質問がある方は、
テンプレを読んだ上で気軽にどうぞ

Ｗ３Ｃフリークから、テーブルマニアまで幅広いスタイルシート使いの皆さんが答えます

>>240
仕切るのは半角英数を使えるようになってからな。

インライン要素のpaddingの値を大きくすると、ボックス（青腺）がはみでるんですけど、
はみ出ないようにすることはできますか？

http://grecks.s54.xrea.com/div-test.html

>>242　ヘンなことやるね。親ブロックにもpadding指定したら？

>>241
突っ込むのは大人になってからな。

>>242
そもそもinlineにpaddingの上下を与えるのが間違い。
line-heightとかでやったらどうよ。

>>243
>>245
サンクス。
勉強になりました。

↓こんな感じにしたかったんです。
もっといい方法があればレスください。

http://grecks.s54.xrea.com/div-test.html

あ、アン化粧品の人だ。

>245
＞そもそもinlineにpaddingの上下を与えるのが間違い
そうなの？

そうよ。

自由度は高いかもしれないけど、それは絶対指定を使う場合だろ？
絶対指定を使ってブロックをテーブル化しても
使い勝手は悪いと思うがいかが？

>>251
どれかに対するレス？
それとも一般論？

>>251
おまいのスキルの低さは知らんが、一般的にブラウザが完全にCSS2を標準準拠で実装してたら
完全CSSレイアウトの方が自由だな。まあはげめよ。

結局IEか…

はげいうなー

>>251
>絶対指定を使ってブロックをテーブル化しても
アホだなこいつ
なんでテーブル化しなあかんねん

オーサリングでしか出来ない奴だろ。

>>176さん提案の下辺でボックスをそろえるCSSを使わせてもらってるのですが、
その後、字を書くと、左上に飛んじゃいます。

ボックスの下にいくようにするにはどうすればいいのでしょうか？

http://grecks.s54.xrea.com/bottom-line.htm

>>258
position:absolute; による配置をやめるか、
または div.d も position:absolute;で配置する。

>>259
そうなのか。
即レス、サンクス。

トリップにCSSｷﾀｰ

サイトの内の余白(上下左右)を無くして画面いっぱいにページを表示することはできますか？

>>262
余裕で出来ます

>>263
教えてください。

>>262
無理です。JAVAとか付かばできるかもしれないが。
>>263は頭が悪い子なのでほっといてあげてください。じきに親御さんが迎えに来るでしょう。

--CSS --
html,body{
padding:0;
margin:0;
}

--JavaScript--
window.open("url","_blank","fullscreen=yes");

どちらの事を意図しているのだろう

>>266
多分上の方だろうな

>>266
ありがとうございます。
--CSS --
html,body{
padding:0;
margin:0;
}
の記述で表示したのですが、
ウィンドウのサイズを変更(大きく)しても余白ができないようにはどうしたら良いのでしょうか？

>>268
質問の意味がよくわからないが、テキストを一杯一杯書けばいいよ、たぶん。

>>269
例えばテーブルを作成して、ブラウザのウィンドウを縦横に広げても、
そのテーブルが一緒に動くようにしたいのです。
説明が下手なのでわかりにくいと思いますが、以下の
ttp://www.teiken.com
サイトように、ウィンドウを広げても余白ができないようにしたいです。

>>270
お前誰?

>>270
最初に質問した時の番号を名前欄にいれろアホ
テーブルのwidthを100%にしとけ

とりあえずお前は基礎から勉強してこいよ。

このサイトみたいに、サイドに好きな背景、中央にページ
ページ上部にタイトル画像を乗せたいのですが
似たようなテンプレートみたいな物はないでしょうか？

>>273　いきなり「このサイト」って……どのサイトですか。

>>274
ごめんなさい、ここですorz
http://aom-tt.info/

>>275
まづはそこのソース（HTML & CSS）を保存して、自分でやってみたのでせうか。
まだなら、質問するのはそれからにしたまへ。

>275
テンプレートっつわれてもなぁ…。
そのサイトをテンプレートにすればええやん。

>>275
そこは640×480のウィンドウで見ると横スクロールが出るので感心しないナ。
widthをpx単位でなく%かem単位で設計すべきでは。

はいはい
ｸﾏｰ

>>276-277
CSSを保存できることを今知りました、それだけでかなり有益な情報を得ました
ソースのCSSを片っ端から落としてみます

>>277
だめです、どうやればテンプレとして保存できるか分かりません

その都度画像や文章を自分のものと入れ換える

>>281
上でも言われてるけどもお前はCSS云々以前にHTMLの基礎から勉強してこい

関係無い、か。

外部スタイルシートを用いる文書を保存できない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b066.html

>>280
外国人みたい

charset=none"で１００点満点
でした。おかしいですよね。
なにかだまされ照る感じ・・

？

>>283
はは調子乗るなゴミ〜。

CSSで文字にアンチエイリアスをかけることってできますかね？

リファリンス見れば出来るかどうか解るでしょ？

アプリ任せじゃだめよ。

ここの人ってどうして「答え」を教えてくれないんですか？
ヒントを教えるだけですね。米国式ですか？

CSS使いの技術向上をめざしているからであります。
たまに、答えてくれる人いるから、気長に待って流れを読めばいいよ

>>291
処理方法は教えるが
その処理方法を使って導き出される結果までは許容外
という事

いわゆる駆け引きですね。

質問

3カラム構成を考えたのでテンプレ周って見たのですが
結局今の段階では、どのブラウザでも同じように表示させるのは不可能ということですか？

ウィンドウサイズを変えてくるユーザがいるとしての話です。

どのブラウザでもってことになると不可能だなぁ
見た目が大事なのか、汎用性が大事なのかで決めるよろし

>>296
やっぱりそうですか。うーん困った。
そういう場合って、みなさんはどう対処されてるんですか？

>>297
不特定多数への情報を生命線としているなら、誰でも読めるを第一にデザインします。
多少やぼったくても、おおむね読みやすいだろうというくらいで。

どうしてもデザインを優先したいなら、いくつかのブラウザは切る。
たとえば俺のサイトは、ＩＥ６　とＮＮ７以上以外は捨ててる。
その代わりスタイルシート切っても意味がとおるようにはしてるけどな

>>298
今回デザイン優先で考えているので、特定ブラウザ以外は排除することにします。
どうもありがとうございました。

＞css切っても意味が通るように
うーん凄い。見てみたいっす。

凄いのか？

うん。　潮も吹くしな・・・

鯨みたいだな。

>>302は童貞

Netscapeの6.0をダウンロードできるところってもうないですよね？
他の旧バージョンでも構わないんですけど・・・・・。

>>303
甘いな。　>302は女だ。

>>303
http://channels.netscape.com/ns/browsers/archive.jsp

>>306
童貞はNetscapeなのか？

2カラムのレイアウトについて質問させて下さい。

左カラム　<div style="float:left; width:100px;">
右カラム　<div style="float:left;">

上記の指定で<div>を横に二つ並べています。

IE6.0で表示(互換モード)する際は、右カラム内の文章はウインドウサイズに合わせて自動改行されるのですが、
モジラで表示しますと、右カラム内の文章は自動改行されません(右カラムはブラウザ幅を超えて左カラムの下に回りこまれる)。

右カラム　<div style="float:left;">の横幅は、ブラウザ任せには出来ず、明確な指定が必要なのでしょうか。

必要です。

つーか＜やってみればすぐ解るでしょう？

>>308
右カラムは margin-left: 100px; だけでいい。

308です。
貴重なアドバイスをありがとうございました。

310さんの方法を試し、上手く表示されるようになりました。こういう方法を自分は知らず、フロートの働きについてもっと勉強が必要だと感じました。
また質問の仕方が至らずに309さんに不快な思いをさせていたらすみません。

今後精進して参ります。

不快ではないよ。

　　　　がんがれ

たかがCSS如きで偉そうにしてる勘違いが多い。

と、偉くもないのに偉そうに申しております。

>>308みたいな質問も、ＦＡＱ（>>6）を見れば済む話なんだよね。

ちょっと長めですが、アドバイスお願いします。
【使用OS】winIE6
【質問】
CSSで角丸テーブル（色付き）を作っています。
以下のような状態でテーブル内の最下行にリンクを張ると、
マウスオーバー時に、底辺であるはずの角丸画像の下に
余分な領域がはみ出てしまいます。

------スタイルシート----------
A {
text-decoration: none;
border-bottom: solid 1px #背景色;}
A:link {　と
A:visited {
border-bottom: solid 1px #背景色;}
A:hover {
color: #目立つ色;
border-bottom: solid 1px #背景色と違う色;}

.bottomcorner{
background: #背景色 url(../角丸画像右.gif) no-repeat top right;}
.corner{
heighth: 角丸画像の高さpx;
width: 角丸画像の幅px;
border: none;
display: block;}

（つづき）
-----本文----------------------
<div>
<P><A href="***.htm">文章</A></P>
<div class="bottomcorner">
<img src ="角丸画像左.gif" alt="*" width="角丸画像の幅" height="角丸画像の高さ" class="corner"></div>
</div>
-------------------------------
ただ、A:hoverの「#背景色と違う色」を
他のAたちと同じ「#背景色」にすると余分な領域は生じません。
これは一体何が原因なのでしょうか。

>>316
何処にテーブルが(´･ω･`)？

<div class="bottomcorner">
<img src ="角丸画像左.gif" alt="*" width="角丸画像の幅" height="角丸画像の高さ" class="corner"></div>

そもそもpの方がいいような気がするけどさておく。
div開始タグの後ろの改行が気になる。もしこれが原因でなければ、
img の vertical-align をbottomにするとどうだろうか。

デフォがbaselineになっているため、下に空白があるように見える事が
あります。

>>315
でも質問があるとうれしいんだろ？

>>318
レスありがとうございます。
テーブル、というか<div>の枠？囲い？
<table>を使っているわけではないです。
分かりづらい表現で
(´･ω･`)ｼｮﾎﾞﾝﾇさせてすみません。

>div開始タグの後ろの改行
>img の vertical-align をbottom
試してみたのですが、改善されないようでした。

>そもそもpの方がいいような気がするけどさておく。
<p>でも症状は同じでした。

初心者のくせにアレコレ凝ろうとするのがいけないんでしょうな、きっと・・・

質問なんですが
小さい画像をクリックすると新しいページが開いてその画像が大きくなる。
新しく開いたページは画像の大きさと同じくらい。

これをやりたいのですがどなたか教えてくれませんか？
お願いします。

ちっとうざいけどJavaScriptで出来きます。
そちらのスレへどうぞ

すみませんスレ違いでしたか、そちらに行ってみます。

>>320
今ちゃんと読んだんだけど、

<img 中略 class="corner">
.corner{ 中略 display: block;}

これがすごく怪しいんだけど、何故にブロックに？
下記は漏れがやるときにとる方法なんだけど、もっといい方法も
あるだろうから、自分で試したり、エロイ人に聞いたりしてください。

<div>
<hn>見出し</hn>
<p><img src="画像.jpg"></p>
</div>

上記の様なコードに対して、
鍋フタの様な画像を見出しの背景（上寄せ）に、
鍋の底の様な画像をブロックの背景（下寄せ）にすると、
それっぽくなります。
見出しは必要なくても適当に書いておいて、
text-indent をマイナスにして枠の外にすっ飛ばす、などしたりとか。

<tr>
　　<td><img src="画像１"></td>
　　<td>画像１の説明１</td>
　　<td>画像１の説明２</td>
　　<td>画像１の説明３</td>
</tr>
<tr>
　　<td><img src="画像２"></td>
　　<td>画像２の説明１</td>
　　<td>画像２の説明２</td>
　　<td>画像２の説明３</td>
</tr>

以下続く

これをIEで以下のように表示させるにはどうすればいいのでしょうか。firefoxではなんとかできました。

┏━━━━┳━━━━┓　┏━━━━┳━━━━┓
┃　　　　　　┃　説明１　┃　┃　　　　　　┃　説明１　┃
┃　画　　　　┣━━━━┫　┃　画　　　　┣━━━━┫
┃　像　　　　┃　説明２　┃　┃　像　　　　┃　説明２　┃
┃　１　　　　┣━━━━┫　┃　２　　　　┣━━━━┫
┃　　　　　　┃　説明３　┃　┃　　　　　　┃　説明３　┃
┗━━━━┻━━━━┛　┗━━━━┻━━━━┛

また、リストのレイアウトサンプルのページみたいに、
テーブルのレイアウトサンプルのページがあればおしえてください。
（いわゆる「テーブルレイアウト」ではなく、表としてのテーブルのレイアウト）

こーゆー時はマジレスするべきなの？

死ね、あたりが適切かと

>>326
もっとテーブルレイアウトしちゃうぞ。
<table>
　　<tr valign=top>
　　<td>
　
　　<table border=1>
　　　　<tr>
　　　　<td rowspan=3><img src="画像１"></td>
　　　　<td>画像１の説明１</td>
　　　　<td>画像１の説明２</td>
　　　　<td>画像１の説明３</td>
　　　　</tr>
　　　　</td>
　　　　</tr>
　　</table>

　　<td>
　
　　<table border=1>
　　　　<tr>
　　　　<td rowspan=3><img src="画像２"></td>
　　　　<td>画像２の説明１</td>
　　　　<td>画像２の説明２</td>
　　　　<td>画像２の説明３</td>
　　　　</tr>
　　</table>
　　</td>
　　</tr>
</table>

>>329
綺麗やなーソースみるの大好き
CSS勉強しはじめたばかりなんですけど、そのソースの左の余白は
TABで入れるんですよね？そのスペースの使い方が難しいのですが
こつとかありますか？綺麗に見せると言うのかな
レスだるかったらスルーしてください

>>330
いや、めちゃくちゃでしょ。インデントしてるだけじゃん
　　<table border=1>
　　　　<tr>
　　　　<td rowspan=3><img src="画像１"></td>
　　　　<td>画像１の説明１</td>
　　　　<td>画像１の説明２</td>
　　　　<td>画像１の説明３</td>
　　　　</tr>
　　　　</td>
　　　　</tr>
　　</table>
何これ？それにrowspanは違うっしょ？

メニューの文字の先頭に小さいアイコンを配置したいのですが
それをcssで管理できればと思い挑戦しました。
しかし、まったく表示されません。これは可能なのでしょうか？
もし可能であればアドバイスお願いいたします。


外部cssに下記の記述をしました。
div.a {img src:image/a.gif;}

勘だけが頼りですか…?

>>332
a { background: url(image/a.gif) no-repeat left center; }

>>332
というかそんな書き方はじめて見たかも

>>325
IEに期待するのが間違い

>>333-335
>>334の記述を試して見ましたが、何も表示されませんでした。

失礼かもしれませんがbackgroundで合っていますでしょうか？
メニューの先頭に小さいアイコンを配置したく、背景に画像を表示したいわけではありません。

10*10の小さいアイコンです。具体的には
◆メニュー1
◆メニュー2
のように◆をcssで配置できればと思っています。
html部分にも<div id=a>メニュー1</div>指定済みです。

失礼だ。よく調べもせず、本当に失礼だ。
div.a {} と、自分のソースに合わせればいいじゃないか。
それに、なぜDIV？そのメニューならリストを使え。
そして list-styleで簡単にできる。

…っても調べないんだろうな。

content でもいいがね。

>>338
ええと・・もちろんdiv.a{}は私のソースに合わせて書きました。
しかし何も表示されなかったので、質問したのですが怒らせてしまったなら申し訳ありません。

とりあえず>>332は「>>1を読め」だな。

すみません、せめて、

「<TR>一個め<TD>一個め」
「<TR>一個め<TD>二個め」
「<TR>一個め<TD>三個め」
「<TR>一個め<TD>四個め」

「<TR>二個め<TD>一個め」
「<TR>二個め<TD>二個め」
「<TR>二個め<TD>三個め」
「<TR>一個め<TD>四個め」

…

と表示させる方法はないのでしょうか？できればテーブルの入れ子とかしないで、ストリクトな方法で。。

>>342の最後の「<TR>一個め<TD>四個め」は「<TR>二個め<TD>四個め」です。訂正。

つまりその、<TR>内の<TD>を縦に並べたいです。

だからIEに期待するなとあれほど

>>338
list-styleがあることを忘れてました！

あと、素朴な疑問なのですがアイコンを普通に配置しても
テキストよりラインが微妙に上にいってしまいます。

UL { align : middle; list-style-image: url(../image/a.gif); }
と記述してもアイコンがピクリとも動きません。
もしかして、こういう場合は最初から下よりに画像を作る必要があるのでしょうか？
それともcssで制御可能ですか？

>>345
>>UL { align : middle; list-style-image: url(../image/a.gif); }
>>align : middle;
>>align
??

>>332はやはり>>4を全部ちゃんと読んだほうがいいな

…というか、
遊ばれてるんじゃないか俺ら。

　　　　　　　∧_∧
　　∧__∧ （´<_` ）　なんと。
　 （ ´_ゝ`）/　　⌒i
＿(__つ/￣￣￣/i |＿
　　＼/＿＿＿/ ヽ⊃

うわなんと。

>>332のソースといい>>345のソースといい、適当すぎ

表のカラーを半透明にしたくて、下記の記述を他のcssの記述と一緒に
外部にスタイル情報をまとめたファイルに入れたのですが、
この記述だけが適用されませんでした・・・。
透明化する記述は外部cssで読み込めないのでしょうか？
もしおかしな記述があったらご指摘ください。

■外部cssの内容
.S1 {
filter:alpha(opacity=41);
background-color:#ffffff;
color:#000000;
width:180px;
height="240"
}

■適用させたいHTMLの記述
<tr>
<td align="center">
<span id="S1">本文</span>
</td>
</tr>

>>351
セレクタ間違い。#S1

もしよろしければリファレンスのどの部分を読めば良いかだけ
教えていただけませんでしょうか？

頭に描いているものを専門用語でどう言うのかわからないので
リファレンスを見ても、どこを読めば解決するのかがわかりません。

後学のために、よろしくお願いいたします。

>>353
後学のためなら>>4を全部読む。
そこには用語の解説も載っている。
あと>>1を熟読すること。

>>354
あの・・何といえば良いのか・・。

誘導として、おっしゃりたいこともわかりますが
とりあえず今回の処理の解決方法の箇所を教えていただくことで
次回から不明な点が出ても、それを参考に探すことができると思うので
リファレンスの具体的なところを教えていただけませんでしょうか？

確かに>>4を全部読むことが最終的には大事になってくることは理解できますが
今すぐに全部読む時間もなく、その膨大な量を頭に全部入れることも出来ません。

今回の部分を解決して、その箇所から「cssで何をしたいか」を辿っていきますので
どうぞよろしくお願いいたします。

IEに期待するな、でFAなんでしょうか？バグ辞典にも載ってなかったのですが

>>355
みんなそうだよ。解説もFAQも過去ログも読みたくない。
手っ取り早く自分の疑問に答えて欲しい。

>>356
うーん、わからんわ。

>>355
思いつきとか勘でcss記述してもうまくいくわけないと思うので
基礎からやり直してください。

>>332とか>>345とか、なんかギャグのつもりですか？

え〜と、どう伝えたらわかっていただけるのでしょうか・・。

早く答えが知りたいというよりも「どこを調べればよいか」を教えていただきたいんです。
ただ「はい、あそこにリンクがあるから調べてね。じゃあさよなら」だと自分がどの位置に
いるかもわからないので、漠然とし過ぎて困ってます。

答えを教えて欲しいというわけではないことを、わかって欲しいです。

しつこいよ？一通り見て、自分が理解できそうなところをよく見ればいいじゃん
>>4のリンクにはタイトルも書いてあるから、それを見るだけでも自分がどのページを見ればよいのかわかる

もう言い訳しないほうがいいと思うよ

ゆとり教育のしわ寄せか・・・

>>360
だから>>4のサイトを全部読めと言ってるだろ

これがいい大人とかだったらかなり痛いね。リアル厨房であってほしい

ここ最近でも最低レベルの質問者だな。
内容じゃなく姿勢が。

ぐぐれ
「ぐぐれって何ですか？」
グーグルで検索しろってこと
「グーグルって何ですか？」
検索サイトだ
「アドレスおしえてください」

「…使い方を教えてください」

全部ネタでした！










って言ってくれ・・うそでもいいから。今回だけは、ネタだと言ってくれたほうが救われる・・

>360
cssの記述方法をきちんと調べろと言われてるのだ
HTML上で要素内の属性としての書き方とは違う

わりと良い食いつき

>>332のかげに隠れてしまってるのですが、誰か分かる人いますか？

>>343の、<TR>内の<TD>を縦に並べる方法が知りたいです。
Mozilla系じゃなくてIEで。

>>365
内容もかなり最低だよ

>>370
しつこいな。
>>625で>>326のテーブルにならないのはあたりまえだろ。
それはこのスレの話題じゃない。
初心者スレで>>326の書き方を聞け。

>>372
いや、それはもういいんです。（できれば知りたいですが）
>>343の、<TD>を縦に並べる方法です。
表としてテーブルを使いたいので、初心者スレ向きのテーブルレイアウトの話ではないです。

>>372
>>326はMozillaではなりますよ。もちろんCSSで。

>>370
┏━┳━┳━┓
┃あ┃い┃う┃
┣━╋━╋━┫
┃か┃き┃く┃
┗━┻━┻━┛

を

┏━┓
┃あ┃
┣━┫
┃い┃
┣━┫
┃う┃
┣━┫
┃か┃
┣━┫
┃き┃
┣━┫
┃く┃
┗━┛

てこと？

>>373
なんで誰にも相手にされないかまだわかんないの？
>>342-343も負けず劣らず初心者質問だからだろ。
いいから初心者スレに行って作りたいテーブルの図を書いて聞け。

なんか今日は当たりの日だな。

>>374
なんでhtmlの記述でできることをCSS使ってまで
そんなひねくれたことせにゃならんのだ？

表の「構造」が変わるのだから、スタイルの問題じゃないと思う、漏れも。
見出し行or列との関係も変わっちゃうし。

JavaScriptでDOMいじりしていろいろ入れ替える、とするのが >>370 の
意図するところにもっとも近いのでは、と思うけど、どう？

ストリクトなHTMLを記述したいからです。
colspanやrowspanを使うと表の内容が変わってしまうので。
元データは、たとえば
　　1-a,1-b,1-c,1-d
　　2-a,2-b,2-c,2-d
　　3-a,3-b,3-c,3-d
これを素直に表にすると
<table>
　　<tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>
　　<tr><td>1-a</td><td>1-b</td><td>1-c</td><td>1-d</td></tr>
　　<tr><td>2-a</td><td>2-b</td><td>2-c</td><td>2-d</td></tr>
　　<tr><td>3-a</td><td>3-b</td><td>3-c</td><td>3-d</td></tr>
</table>
となると思います。そのうえで、表示をCSSで変更したいのです。デザインはCSSの役割なので。

>>375

そんな感じです。

┏━━━━━━━┓<table>
┃┏━┳━┳━┓┃
┃┃あ┃ い┃ う┃┃
┃┗━┻━┻━┛┃
┃┏━┳━┳━┓┃
┃┃か┃ き┃ く ┃┃
┃┗━┻━┻━┛┃
┗━━━━━━━┛

を、

┏━━━┓<table>
┃┏━┓┃
┃┃あ┃┃
┃┣━┫┃
┃┃い┃┃
┃┣━┫┃
┃┃う ┃┃
┃┗━┛┃
┃┏━┓┃
┃┃か┃┃
┃┣━┫┃
┃┃き┃┃
┃┣━┫┃
┃┃く ┃┃
┃┗━┛┃
┗━━━┛
か、

できれば

┏━━━━━━┓<table>
┃┏━┓┏━┓┃
┃┃あ┃┃か┃┃
┃┣━┫┣━┫┃
┃┃い┃┃き┃┃
┃┣━┫┣━┫┃
┃┃う ┃┃く ┃┃
┃┗━┛┗━┛┃
┗━━━━━━┛

としたいのです。

テーブルレイアウターには理解してもらえんと思うよ

>>380-383
すこし勘違いしていると思う。
表は多くの場合、構造がダイレクトに見た目に反映してしまうのです。
たとえ項目の内容が同じでも、
┏━┳━┳━┓
┃あ┃い┃う┃
┗━┻━┻━┛
と
┏━┓
┃あ┃
┣━┫
┃い┃
┣━┫
┃う┃
┗━┛
は全く異なる表の構造な訳です、見た目の問題じゃなく。同値じゃない。
だから、>>383の様にしたければ、3行2列の表を書いても十分strictですよ。
がんがれ。

ユーザーのIE離れに頭を抱えるブラウザシェル開発者
ttp://japan.cnet.com/news/ent/story/0,2000047623,20075052,00.htm

ｲｲﾖ、ｲｲﾖｰ

>>385
追記。
1行3列や、3行1列になるコンテンツを表としてマークアップするのは
おかしいかもしれません。

簡単なソースとFireFoxでのスクリーンショットをアップしました。
よかったらダウンロードしてみてください。
FireFoxでは実現可能なんですが、IE5.0では通常のセル表示になります。

ttp://v.isp.2ch.net/up/7c0e8c96e407.zip

ウィンドウの横幅にあわせてアイテムの並びが変動するようになっているので、
適当に横幅を変えてください。（FireFoxの場合）

>>388
さすがMozilla・・なのか？なんか次元が違うね。

すみません、OPERA7でもちゃんと表示できるように修正しました。

ttp://up.isp.2ch.net/up/a121b011e5f0.zip

>>325
<TH>のことを考えると、そのマークアップのほうがいいかもしれんね。てかそうすべきか。

>>391
とりあえず、、、馬鹿にしてスマンカッタ

漏れもゴメソ
>>332と一緒だと思ってた
解決法はわからん

>>391
それIE5だからじゃない？6だと意図どおりになってるかもよ？
だれか確認してやってくれ。ちなみに漏れも5だorz

サイズ変えたら、テーブルのセルも変わった。
画像−aaaa-ｂｂｂｂ-ｃｃｃｃのままで。IE60

ラピュタは本当にあったんだ！

ここに質問に来るのは>>1すら読まない初心者か
回答者が理解できんくらいのレベルのやつの二極化か

というか回答者のレベルが落ちたのか

>>398
ええ、その通りです。

ですので回答者のレベル向上の為に
貴方様に於かれましては
「自ら回答+他の回答者批判」　
といった論法でお願いいたします。

>>398
ラ　ベ　ル　だ！

>>399
漏れも理解していないor2

ずいぶんケツが高いな。

頭が低いと言ってやりなよ。

結局>>325の質問に何かいい案とか出てないの？
>>391のをダウソしてみてちょっと興味があったんだが

>325
1. IE(6) ではムリっぽい
　tr や td に display を指定してもまったく反応してないように見える
　（none は適用できるらしいが）
2. tr に display: inline; と float を両方指定するのは矛盾してると思う
　この場合 table-row（デフォルトスタイル）→ inline（指定） → 自動的に block
　になるのかな
3. 少なくともCSS2の段階では
　ttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x26
　「オススメしない」と書いてある
ttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#s-17-2
　「UAによっては無視するかもよ」とも書いてある
4. 3. にも関連するが，tableってのはある程度「縦横の関係がわかりやすいという
　見栄えも込みで表」だと思うので，その表示を変えられなくても仕方ないと思う
　表というのはデータの「表現方法」であって「構造」を表してるわけじゃないはず
　XMLなら
　<photo>..</photo>
　<date>..</date>
　<size>..</size><width>..</width><height>..</height>
　とでもなっていて，それを「tableとしてマークアップする」でも
　「hn + dd-dtでマークアップする」でもいいはず
　tableとしてマークアップするなら「（視覚表現可能なUAでは）縦横のデータを
　一覧したい」という作者または閲覧者の思惑が働いているだろうし，その思惑を
　崩さないように，というのが3. だと思う

マークアップに関して，もし議論が続くようなら「正しい記述」スレッドか
「標準仕様」スレッドあたりで．僕がずっと付き合うとは限らないけど．

ほうほう。勉強になります
リンク先は見てないけど
見出し+リストかあ
そういえばリストにキャプション要素をつけるべきとか何とかストリクトスレであったような

クリトリススレだろ

　ｲﾔﾝ

ツマンネ

三つの画像を隙間無く横に並べたいのですがどうしても横に隙間が出来てしまいます。
なぜですか？
OS:XP ブラウザ:IE6

.k{width:20px;
height:20px;
border:0px;
padding:0px;
margin:0px;
clear:left;
float:left;}
.kc{width:20px;
height:20px;
border:0px;
padding:0px;
margin:0px;
float:left;}
.z{width:450px;
height:20px;
border:0px;
padding:0px;
margin:0px;
float:left;}

<img src="i1.gif" alt="" class="k"><img src="i2.gif" alt="" class="z"><img src="i3.gif" alt="" class="kc">

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

>>410

<img><img><img>

img { margin:0; padding:0;border:0; }

これじゃだめなの？
高さとハバは<img>内で指定。
<img src="" width="" height="" alt="">

>>410
見づらくてﾜﾗﾀ
元の画像に白い枠があるとかいうオチとか。

>>368
なるほど！そういう原因があったんですね。

読解力がある人がいて良かったです。
答えが知りたいのではなく「何について調べる必要があるか」を知りたかったので。

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

div.xxx{
position:absolute;
bottom:2%;
text-align:center;
}

やりたいことは画面の一番下の真ん中に文章を置きたいのですけれども
text-alignが無視されてしまいます。ボックスを絶対指定しておきながらcenterってのがおかしい気がしますが
どうしたらいいのでしょうか？

ボックス内に、ボックスのサイズよりも大きい画像を表示させると
ボックスのサイズも大きくなってしまいます。
ボックスのサイズが変わることなく、
ボックス内に自動的に収まるようにすることはできますか？

>>410
HTMLを理解せずになにをやってるんだよ。
>332といいオマイと言いアホ以外の何者でもない。

>>415
自分で矛盾したことを書いてるのは自覚してるか？

画像とボックスのサイズを合わせることがそんなに難しいか？

画像のwidth・heightをボックスのそれに合せる、とか。>>415

>>415
ＩＥのバグは知ってるか？

ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b052.html

>>413
あーイタタタタ
自分の向上心のなさを棚に上げておいて
回答者は全員読解力がない人ばかりですか

>答えが知りたいのではなく「何について調べる必要があるか」を知りたかったので。
まだ言い訳するですか！

>>419
対処方法を聞いてるんだよ。

>>414 leftかrightは指定してみた？

>>419　そんなのすぐわかるだろ。overflow:hidden;か>>418。

>>421　そんなのすぐわかるだろ。overflow:hidden;か>>418。

>>422
leftやrightで50%みたいな指定をすると”大体”中心なんですがちょっとずれてて綺麗じゃないのです。
なのでcenterにしたいんですけど･･･(´･ω･`)

>>325 all
そもそもお前ら表ってもんをわかってないんだよ。まあいいけどね。とりあえずa-b-cの正確なヘッダを教えなさい。
多分
<tr>
<th rowspan="3">画像
<td>a
</tr>
<tr>
<td>b
</tr>
<tr>
<td>c
</tr>

でも問題ないだろ。
dl
dt
dd
dd
dd
でも問題ないだろ。

とりあえずrowspan colspanがなんでstrictで廃止されてないかも一考あれ。

>>414　left:0; width:100%; を追加してみたまへ。

a,b,c
が画像についてのコメントであったらdlだな。

>>426

>>391のファイルにヘッダが書いてあった。

>>427
できました！ありがとうございます。
んでもどうしてそうなるか仕組みがわかんない・・・
divにwidthを指定することでこうなるんですか？

>>430　
仕様書読んでね。

10.3.7 絶対配置される非置換要素の場合
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#abs-non-replaced-width

週末はこのスレに手を出すな

>>429
だからa b cとしか書いてないって。

>>432
はげどう

標準モード、互換モードによる box幅の解釈の違いを
図説で解説してるサイトないですか？

>>411
ありがとうございます、出来ました。

画像にfloat使うと余白が出来るんですか？

>>436
画像にかかわらず、MSIEはフロートすると、できることがある。

>>435　>>4にある。
>>436　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

>>437
そうでしたか。ありがとうございます。

>>410
それよっかさ、正しいHTML書こうぜ。

すみません。
どこが正しくないのかすらわかりません。

>>441

>>411が指摘している通り

DTD記述なしで試してます。
記述なし、またはTransitionalでURLを省くと大体のブラウザで互換モードになると思うのですが、
Safari1.2.3だと標準モードで表示されてしまいます。
Safariで互換モード表示させる方法って無いのでしょうか？

例えばCSSで
{ width: 200px; padding: 15px; border-style: dotted; border-width: 1px; }
と指定したとすると、Safariだと内容領域での200px表示になってしまいます。
Mac IE5だと互換モード表示のボックスでの200px表示になります。

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

>>442
嘘教えるな！imgにwidth,height属性は必須でない

テキストフィールドの背景色を透明にして透かすことはできますか？

>>443　>>106のkhtml用独自拡張プロパティが効くのでは？
>>445　moz-opacityで検索。

>>446
レスありがとうございました。
過去ログ色々読んでみましたが、全てのブラウザでの表示を考えると
標準モードでDTDして計算しないとダメそうですね。
テーブルと組み合わせてpaddingだけcss制御って手も
Mac IE/Win IE/NN以外のOpera/Safariを考慮すると無理ってことですよね。
実に面倒だ・・

<h1>に<a>をつけるときに、ほかの<a>とは違うhover visited link activをつけたいのですが
どう記述すればいいですか？外部スタイルシートです。

>>447
>標準モードでDTDして計算しないとダメそうですね。
なんか誤解してない？　むしろ互換モードの方が統一しやすい。
>Mac IE/Win IE/NN以外のOpera/Safariを考慮すると無理ってことですよね。
Operaはさておき、Safariはbox-sizingが有効なはずでしょ？

>>448
質問の前に>>4で基礎を学習しませう。
h1 a:hover {...}など、子孫セレクタがおすすめ。

とてもありがとう

まったくどういたします

いえいえこちらこそこそ

>>449
最初に質問したのがSafariでの表示について書いてしまったんですが、
一応いろんなブラウザで同じように見えるように考えてるんです。

Safariは互換モードで指定しても内容領域でwidthを判定するから
標準モードで指定しないとIEと同じ表示にならないかと。

box-sizingで指定しても今度はIEでは実装してないから
Safariで表示できてもIEじゃ表示出来ないのでは。

結局いまのCSSの現状からすると標準モードでのwidthの値で計算するしかないかと。
間違ってますか？

>>454
>box-sizingで指定しても今度はIEでは実装してないから
だから互換モードにしておけばいいわけでしょ。
で、それに合せて>>106みたいにbox-sizing:border-box;と指定する。
safariでも-khtml-box-sizing:border-box;で互換モード同様の解釈になるはずだよ。

>>455
なるほど！！
互換モードでIEはbox単位でwidth指定をして
Safari用に-khtml-box-sizing:border-boxで指定すればいいんですね。
ありがとうございました！早速試してみます。

初めからそれを言ってるのに。>>106見てわからなかったのか……。　>>456

>-khtml-box-sizing

これのソース知りたい。少なくともうちのsafariじゃ効かないが。
というか、Webcoreの公開ソースコードでも見た覚えが無い。

ちなみにOperaでもver.7からbox-sizingが有効。
但しバグもあるが。
http://cssbug.at.infoseek.co.jp/detail/opera/b080.html
http://cssbug.at.infoseek.co.jp/detail/opera/b040.html
http://cssbug.at.infoseek.co.jp/detail/mozilla/b072.html

>>458
Safariでは、box-sizingも、-moz-box-sizingも、無効なの？

>>460
無効。

あと、KHTMLのソースコードのプロパティ名一覧にも
(-khtml-)box-sizing無かった。
どこの誰があると言ってるの？

試してみたけどやはりbox-sizing、-moz-box-sizingも無効でした。
やっぱ内容領域でwidthを決めなきゃダメか。

-khtml-opacityと-moz-box-sizingとからの類推ぢゃないのかな。>>461
どっちにしろ、Safariは（Doctypeスイッチも含めて）互換性が無いわけだ。

ちなみに、標準モードを使うというごくありふれた解決法は？

>>464　それ、互換モードしかないIE5.5以前がまだ結構利用者あるから解決にならない。

結局"Safariを取って標準モードでDTD宣言する"か
"IEの古いバージョンを取って互換モードでDTD宣言する"
のどちらかになってしまうのだろうか？

既出だが、WinIE6でも、XHTMLでXML宣言すると、互換モードになってしまふ。

なんとも頭の痛い話…

お前ら馬鹿だな
いまどきstrict+cssレイアウトなんて、ヲタクかマニュアル人間だけだぞ。
賢いやつはレイアウト目的のテーブル使用だって、ためらわない。

というかお前らに質問。

たまに
「うちのHTMLはvalidですよ」
とかのバナーみたいな紋張ってるとこあるけど、あれはアホなの？
正直一般人にはどうでもいいことだろ。

一般人には視覚的デザインが重要なのであって、コーディングなどどうでもいい。
それなのにstrictにこだわるのは馬鹿。まあstrictDTD宣言でvalidに。程度が最良かな。

あいあい

センター問い合わせが、



長引く

おい賢とた「と正一そ

クリックすると隠れてるメニュー部分がdisplay:noneからblockになるという
ありふれた折りたたみメニューを使っているのですが、メニューを開くと
下にある文章が下にずりさがってしまいます。
display:relativeにした上でz-indexを、メニュー部に１、下地に０付けてみましたが
どうしてもずりさがってしまいます。下にずれずにメニューが文に重なるように
できないでしょうか？

<p><a href="javascript:void(0)" onclick="openmenu('hoge')">メニュー</a></p>
<div class="hoge" style="display:none;">（メニュー部）</div>
<p class="text">あいうえおあいうえおあいうえお</p>
こんな感じで、div.hogeがp.textの上に重なって欲しいのです。

すみません↑position:relativeのtypoでした

>>473
まづはdiv.hogeがdisplay:block;の状態でp.textと重なるスタイルを書きなさい。
DHTMLで折り畳むのはそれからだ。

>>475
すみません、基本を忘れていました。
親のdivをposition:relativeにして
メニュー部をposition:absoluteにする事で
p.textと重なるようにできました。
本当にどうもありがとうございました。

左にナビ、右はoverflow:autoにしてます。
右のボックスに<a id="hoge">と飛び先を書いてます。
左のナビに<a href="#hoge">としてるのですが、これを
クリックしてもOperaでは飛び先に飛んでくれません。
どうしたら直るのかご教授お願いします。？

　┌────────────┐
　│　┌─┐　┌─────┐　│
　│　│　 │　│　　　　　　　　│　│
　│　│　 │　│　　　　　　　　│　│
　│　│　 │　│　　　　　　　　│　│
　│　└─┘　│　　　　　　　　│　│
　│　　　　　　 │　　　　　　　　│　│
　│　　　　　　 │　　　　　　　　│　│
　│　　　　　　 │　　　　　　　　│　│
　│　　　　　　 └─────┘　│
　└────────────┘

http://grecks.s54.xrea.com/test/whats-an.html

>>477　
多分、直らない。
overflowによる疑似フレームについてのＦＡＱ（>>6）は、見たの？
Mozilla/N7ではマウス・スクロールが効かないし、MacIEのバグもあるし、
止めた方がいい。

>>478
擬似フレーム自体よく知らなかったので、FAQのサイトを見ながら作りました。
回答ありがとうございました。

http://wdt.pekori.jp/
ここのサイト、スタイルシート使わずにフレーム使ってみるみたいにしてますが
どうやってるのでしょうか？？自分は以下のようにやりたいのですが可能でしょうか？
┌─────────┐
├┬────────┤
││　　　　　　　　　　　　│
││　　　　　　　　　　　　│
││　　　　　　　　　　　　│
││　　　　　　　　　　　　│
└┴────────┘

全ページの上部に同じメニュー付けてるだけじゃないか？

<link rel="stylesheet" ...>ってのがあるが...
あなたの言ってるスタイルシートはstyle要素かstyle属性のことか?

FireFox1.0PR使ってみたらoverflow擬似フレームでもホイールスクロールできたよ(ﾟ∀ﾟ)

>>480　そこ、font-sizeを固定してるね。お手本としてはよろしくない。

--------------------
あいう　：　あいうえお
かきくけ　：　かきくけこ
さし　：　さしすせそたちつてと
--------------------

上記のようなものをtableを使わずに

--------------------
あ い う　：　あいうえお
かきくけ .：　かきくけこ
　さ　し　 ：　さしすせそたちつてと
--------------------

左側だけ幅を揃えて表示させたいのですが
何か良い方法があればご教授ください。

>>485
ＦＡＱのA8は見ましたか。>>7です。
あとは
dt {
width:4.5em;
text-align:justify; text-justify:distribute-all-lines;
}
としますが、justifyによる両端揃が和文にが有効なのはIEだけで、
N7やOperaでは無効です。
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align

>>481
上の部分のメニューを貼り付けてるスタイルシートはわかったのですが
下にもメニューみたいなのが出てきてしまいます。
どうすればいいのでしょうか？？
それと左側につけたいメニューは、どうすればいいのかわかりません；；

>>487
「どうすればいいのかわかりません」では、こちらもどう回答してよいやらわかりません。
いまどんな風にスタイル指定してるのかHTMLともどもソースを出して、
また、真似したソースのどの部分がどう理解できないのか指して下さい。

>>480　
overflowによる疑似フレームについてのＦＡＱ（>>6）は、見たの？　

見たけど理解できませんでした

>>490
では、今のあなたの実力では無理ってことです。>>4でお勉強しませう。

>>490
あきらめるなよ。すぐに理解できなくてもいいから、とにかくコピペして
値をいろいろいじくってみれ。気楽にやらんと、身につくものもつかんからなぁ。

もうやってるかもしれないけど、参考にしてるさいとのソースなり、リファレンスの
ソースなりをこぴぺして、いろいろ値をいじくっていくしかないよ。

機械と人間関係は壊して覚えていくもんだ。がんがれ

本当に理解する気があるなら、どこそこがこれこれで理解できないのですが……、
とここで具體的に質問する筈だ。わかりません、理解できません、だけでは進歩しない。

textarea の横幅を安定的に100%に指定する方法はありますか？
ページ更新などでウィンドウからはみ出したりしてしまいます。

今までに試してみた事は
javascript で onLoad で form.textarea.value=""　とすると IE6 ではなんとなくうまく行ったような感じ。
だが、 Firefox では textarea が二つ以上存在するページで NG。一つだけなら大丈夫そう。

そういう目的にtextareaを使うな。

>>492　>機械と人間関係は壊して覚えていくもんだ。がんがれ

　オマイ　良いこというなぁ。　
　　　　　　　　　　　　　　　　　朝礼で使わしてもらうぞ。

>>490
俺じゃない。


朝からいろいろ試しててなんとかできた。
ひとつだけわからない部分がでてきた。
http://www.fromdfj.net/html/sample/overflowsample05.html
ヘッダーと書いてる部分だけど、いろいろ字などを追加してて
気がつくとサンプルより字が右下にずれてきてしまった・・・
上に余白があるので、上に寄せたいのだがどうすればいい？
margin で指定したほうがいいのかな？？

何で昨日とそんなに口調が違うの？

昨日は睡眠不足でイライラしてたから・・・

485です

>>486
ありがとうございます
思い通りの表示にさせることができました。

ブログなんですが、横のメニュー（#link）と本体（content）が縦に並んじゃいます。
これを不通のブログのように左側に本体、右側にメニューとしておきたいのですが原因は
なんでしょうか。CSSを既存のテンプレートに変えても起きる現象なので、index.html
側の指定が間違っていることも考えましたが、どの部分に問題があるのかわかりません。
知恵を貸して頂ける方、よろしくお願いします。

>>501
ソース

ちょ…ちょいとソースは…。
配置を考える上で注意しなければ行けない要点などはありますか。

>>503
URLは不要だから、HTMLとCSSのソースを摘要して下さい。
回答者はテレパシストではないので。

あと、段組のFAQは見たのか。>>6のリンク先だよ。そこに注意点も出てる。

>>497
あなたの記述では今の状態がわからないので、現状のソースを出して。

なんでそんな態度デカイの？

>>1読め。

>>1
読んできます

読んでなかったのかよ！

どんなウインドウのサイズでも、横いっぱいに表示したいときは
大きさを100%としたら横いっぱいに表示される。
でも、以下のような感じでメニューをつけたとして、メニューの横幅は100px
┌┬──────┐　　　　残りの横幅は何％にすればいいの？？
││　　　　　　　　　│　　　　100%にしたら横方向に、スクロールされるように
││　　　　　　　　　│　　　　なる。うちの環境なら90%ぐらいでちょうどだけど
││　　　　　　　　　│　　　　ウインドウのサイズが違ったらデザインが
││　　　　　　　　　│　　　　崩れまくり。どうすればいいんだー？？
└┴──────┘　　　　誰か(・∀・)ｲｲ!!方法教えて(　ﾟДﾟ)ﾎｽｨ

読みました。
でもブログのスタイルシートをひと月以上他の人のCSSと見比べています。
どのようなことが原因でメニューと本体が上下になってしまうのかがわからないのであります。

>>512　だから、ソースを引用してくれないと、こちらもわからないのであります。

>>511
このスレッドで既出だし、段組のＦＡＱにも出てる基礎なんだが。
.menu{float:left;width:100px;} と .main{margin-left:100px;} とを組み合せる。

頭悪い奴はCCS使うなよ！

頭いいやつでもCCSは使わないかとｗ

どうせ>>501は、左右のボックスの幅の合計が100%を超えてしまってるだけだろ。

>>517
テスト用に他人のCSSや公開されているテンプレにしても同じ現象がおきます。
なのでそのようなことは無いと思うのです。
なんせ検索しても私と似たような状態は無いようで、何が間違っているのかわからんな
状態です。予想されるエラーを教えて頂いただけでも感謝します>>517

CSSを変えてもエラーが起きるということはMain Indexの指定ミスと予想しますが
見当がつきませんのです。（MT）

　□
　□←メニュー
□□←以下本体
□□
□□

このような並びになってしまいます。

>518
Pre要素等で、はみ出ちゃってるとかオチじゃーないよね？

>>520
もしやと思い、エントリを未公開にしてみましたが、構成は変わらないとです。
Main Indexの<div class="aaa">の</div>の数をもう一回調べてみます。

なんでさっさとソースを出さないんだ？
URLとか文章とか特定できない引用をすればいいだろ。

はい、すみませんでした…。
Body {
margin : 0 15px 5px;
background : #fff;
}
A {
color : #336666;
text-decoration : none;
}
A:link {
color : #6699cc;
text-decoration : none;
}
A:visited {
color : #cccccc;
text-decoration : none;
}
A:active {
color : #669999;
}
A:hover {
color : #33ff33;
}
h1 , h2 , h3 {
margin : 0;
padding : 0;
}
#banner {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #cc9933;
font-size : x-large;

font-weight : bold;
background : #fff;
padding-left : 0;
}
#content {
z-index : 1;
float : left;
width : 590px;
background : #fff;
margin-top : 0;
margin-right : 10px;
margin-bottom : 20px;
}
.blog {
padding-left : 0;
padding-top : 0;
padding-right : 0;
margin-bottom : 10px;
}
.blogbody {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #666;
font-size : 12px;
font-weight : normal;
background : #fff;
line-height : 140%;
margin-bottom : 5px;
letter-spacing : 0.05em;
border-top : 1px solid #cccccc;
border-left : 1px solid #cccccc;
border-right : 1px solid #cccccc;

border-bottom : 1px solid #cccccc;
padding : 10px;
}
.title {
font-family : palatino, georgia, verdana, arial, sans-serif;
font-size : 14px;
font-weight : bold;
color : #999;
text-transform : none;
}
.menu {
font-family : palatino, georgia, verdana, arial, sans-serif;
text-align : center;
font-size : 12px;
font-weight : bold;
color : #ccc;
line-height : 150%;
}

#links {
z-index : 2;
background : #fff;
width : 200px;
color : #ccc;
margin-top : 15px;
margin-left : 600px;
}
.side {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #999;
font-size : 10px;
font-weight : normal;
background : #fff;
line-height : 140%;
}

以上です。不要そうな部分は削除しました。

それを適用するhtmlは？

<body>
<div id="inbox">
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>
<div id="links">
<div class="sidetitle">
Search
</div>

<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />

<input id="search" name="search" size="17" tabindex="1" value="" />
<input type="submit" value="Search" tabindex="2" accesskey="0" />
</form>
</div>

<div class="sidetitle">
Calendar
</div>

<div class="side">
<div align="center" class="calendar">
<table width="200" border="0" cellspacing="2"

cellpadding="0" summary="Monthly calendar with links to each day's
posts">
<caption class="calendarhead" ><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Su</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mo</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tu</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">We</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Th</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fr</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sa</span></th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader>
<tr>
</MTCalendarWeekHeader>
<td align="center"><span class="calendar">

<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="Last entry is[<$MTEntryTitle$>]">
<$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>

<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></span>
</td>
<MTCalendarWeekFooter>
</tr>
</MTCalendarWeekFooter>
</MTCalendar>

</table>
</div>
</div>

<div class="sidetitle">
Archives
</div>

<div class="side">
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>">
<$MTArchiveTitle$></a>
[<$MTArchiveCount$>]</li>
</MTArchiveList>
</div>

<div class="sidetitle">
Categories
</div>

<div class="side">

<MTCategories>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> </a>[<$MTCategoryCount$>]</li>
</MTCategories>

</div>

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries></li>
</div>

<div class="sidetitle">
Recent Comments
</div>

<div class="side">
<MTEntries recently_commented_on="15" sort_order="ascend">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="10">
└ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br />
</MTComments>
</MTEntries>
</div>

<div class="sidetitle">
Recent TrackBack
</div>
<div class="side">
<MTPings lastn="15">
<div class="trackback-body">
<a name="<$MTPingID$>"></a>
<span class="trackback-post">
<b>Title:</b> <a href="<$MTPingURL$>" target="new"><$MTPingTitle$></a><br />
<b>From:</b> <$MTPingBlogName$><br />
<b>Date:</b> <$MTPingDate format="%Y.%m.%d"$>
</span>
</div>
</MTPings>
</div>
</div>
<div id="content">
<!--MainMenu-->
<div class="blog">

<MTEntries lastn="5">

<$MTEntryTrackbackData$>

<MTDateHeader>
<h2 class="date">
<$MTEntryDate format="%x"$>
</h2>
</MTDateHeader>
</MTEntries>
</div>
</div>
<br clear="all" />
</body>
</html>

以上です。よろしくお願いします。

>>533
どっかにアップしろよ。何レス使う気だ

>>528-533
どこのブログだか知らんが、そんなMTとかわけわからん変数出されても、困る。
必要な箇所だけ、普通のhtmlとして、抄出すればよいだろ。
それすらようやらん程、知識が無いとか？

MTってことはMovableTypeとか言うやつかな？
俺もアドバイスできる立場じゃないけど、positionとかいじれば出来るんじゃない？

>533
おい、どんな環境で見てるんだ？
そもそも、幅を固定しているようだけど、
それが原因でないの？

全てのCSSで起こりますので、indexの記述ミスを徹底追及します。
試しにindexのlinkを消したら正常に表示されました。CSSとは関係ない
記述もあり、スレを汚してしまいましたが、正常に表示されるようになったら
原因をお伝えします。
迷惑をかけてしまった方々、すみませんでした。
協力してくれた方々、ありがとうございました。
レスを大量に消費して申し訳ないと反省しております。

ソースが長くて、しかも自サイトのURL出すのが嫌ならアップローダを使えばいいじゃないか
http://web2ch.s31.xrea.com:8080/?Uploader

ちゃんと見てないけど
idやclassがCSSとHTMLで食い違ってないか？

http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=aaa.txt&refer=Uploader
ちょっとデザイン変えたら横幅の指定する方法が適応されなくなってしまいました。
/* ---- ここ ---- */ って書いてるところはどういう風なのに変えればいいのでしょうか？
何方か再度お助けください。

ＦＡＱも読みこなせない人たちにどうやって説明したらよいのやら。

俺も素人なんで口出すのはどうかと思ったが、
その手のblogは難しいよ。やたらファイル数が多いし。
別なの探した方が早いと思う。もっと言えばblogは止めた方が・・

>>541
>>537

color:expression('red');とかやるCSS関数（と、呼ぶのかな？）って、
たしかWinIE5以降の独自拡張ですよね？
このexpressionは、MacIE（ver5以降）やWinIE4以前では、無効なのですか。

WinIE5以降の独自拡張って自分で書いてるやん

macでは無効。ie4は知らん。

WinIE4.0〜5.0〜5.5での表示確認は、ここで出来る。
　ieCapture
　http://www.danvine.com/iecapture/

>>548
それどれくらい時間かかるの？
5分立っても見れないんだけど。

テキストの左右に空白つくル場合marginで指定したんですがどうもうまくいきません。
この場合CSSで他のも定義しないとうまくいかないんでしょうか？
ちなみにyahooのサイトのような両サイドの空白にしたいのですが・・。

>>550
どれにmarginを指定したのか謎。

>>549
1〜2分で見れた。

最初にtextつくって頭の方にCSSでmarginのみ定義したんですがなにもかわらなかったので頭をかかえました。

>>553
これはもう>>4を読むしか方法が無さそうだ。

>>553
>>551

IECapture というテも確かにあるが
IE3, IE4, IE5.01, IE5.5 SP2 が単独で動くようにされたものがある。
こっちの方が自分で確認できて何より早くていいよ。
IE6 が入っててもちゃんと動かせる。

Multiple Explorers
http://www.quirksmode.org/browsers/multipleie.html
IE3 なんてまだ使うやついるのかな

browsercamはマイナーですか？
登録と制限がきついがIEから何からかなりの量に対応してる。

すいません。質問させて下さい。
floatを使い左右を入れ替えて、
ブラウザの見た目の表示とHTMLの記述順を変えるという方法を知りました。
これを何とか上下の順序でもできないかとposition:absoiute;で上下二段を入れ替えてみました。

入れ替える事自体はできたのですが、
ウィンドウの幅が狭くなった時に視覚的に上の要素が流れ込んでしまい
視覚的に下の要素の上に重なってしまいました。

123456789…　（上に配置した要素）

ABCDEFGHIJK…（下に配置した要素）

ウィンドウの幅を狭めると

1234
56789…
EFGHIJ…


こんな感じです。

下へとずらした要素の配置位置をどのように指定すれば
ウィンドウを狭めた時にも対応できるレイアウトになるでしょうか？

上に配置した要素には項目一覧がズラッと並んでいるので
構造的には重要であるh1や本文をできるだけ始めに持ってくるようにしたいと考えているのですが…。

>>548 >>556
IE6が入ってる環境でMultiple ExplorersのIE5.01/IE5.5をインストールして
サイトを表示させると、IEのバージョン指定コメント（「<!--[if IE 5]>」とか）
を無視する。ので、コメント使ってクロスブラウザ狙ってる人は要注意。

詳細は省くが、メインのIEのバージョンをコメント解釈に使っちゃう模様。
ieCaptureも同じPCに複数のIEを入れてるようなので上記のバグが発生。
スレ違い失礼。

>>558
ロクな事にならないからそんなのやめて普通に書け。

>>560
しかし>>558みたいなことをやるためにこそCSSがあるような気がするぞ。

>>558
CSSの使い方を知らずにレスしてみる。heightでbox要素の高さを指定したら
ダメなんかね？

>>561
絶対指定なのでheight指定しても無意味

>>562
無意味を指摘するだけじゃなくて、意味のあることを書いてやれよ。

このレスまでが無意味。

/* ループここまで */

>>558は勉強のためにやってみたのか、
ソースのカッペーを知らなくてやっているのか
　さて、どっちでしょう？

かっぺでごめんね。

560様,561様,562様,他皆様ありがとうございます。

>>560
やっぱり諦めるしかないんですかね…？
最初はa nameで一覧をスキップさせることで
閲覧者に対処してもらおうと思っていたんですが
だらだらと続く一覧がbody直下ってのは
どうなんだろう？と思いまして…。

絶対指定を用いていますが
色々試行錯誤している過程で現在試しに使っているだけなので
特にこだわっている訳ではなく、何か上手い知恵をお貸しいただけたらと…。

<div class=main>ABCDE…</div>
<div class=top>12345…</div>

こんな感じのHTMLのときに
div.mainをdiv.top直下に配置する指定や技があればいいのですが…

>>566
カッペーってなんですか？
かっぺ者なのは確かなのですが。

そうですね、まだシコシコ作っている段階なので
勉強中になります。

>>567
やっぱり判りますか…orz

>>568 >勉強中になります。

仕上げるためにやっているなら、
ソースのカット&ペーストで入れ替えれば良いと思って書いたんだよ。

勉強中なら安易な解決を求めるのではなく
自分で苦しめ。解決まで時間がかかるが
その分、得るものが多い。

>>569
×カッペ
○コピペ

アホ？

>>558　position:relative;とかfloat:rightの応用では駄目なのか？

>>568
<div class="main">ABCDE…</div>
<div class="top">12345…</div>
.main {height:2em; position:relative;top:2em;}
.top {height:2em; position:relative;top:-2em;}

ポップアップをHPに組み込むにはどのあたりに記述すればだいじょうぶなんですか？

HEADかBODYのどちらか、ポップアップのスクリプトの記述方法に合ったのを選べば大丈夫。

っつーか、スレ違い。

少なくともカッペは初めて見た。
コピペする、で時々カット＆ペーストの意味でも使うしなー。

未だにうまいこといきません。
FAQも一通り読んだつもりなのですが、ちゃんとできません。
どこか見過ごしてるかも知れないので今からもう一度見てきます。

>>577
私もCSS習い始めたばかりですが、↓こういうことでしょうか？
的外れな答え？

http://grecks.s54.xrea.com/test/col2.html

>577
>544

ブラウザごとにcssを指定することはできますか？
やりたいのは、文字の大きさを「IEではx-small」、「Netscapeではsmall」に
したいのです。

前回887と書いたのは558です。すみません。
さて、回答ありがとうございます。
とりあえず返信できる分だけ先にさせていただきます。

>>572
いえ、絶対指定にこだわっているわけではないんですが
relativeでは表示が崩れてしまい、absoluteで指定すると崩れなかったので、
現状ではabsoluteで一時停止のアイドリング状態なだけです。
>float:rightの応用
というと、上下ではなく左右で構成しろ、という意味ですよね？
やっぱりソース晒した方がいいのでしょうか、後だしでごめんなさい。
すでに（例でいうと）mainの中でfolat:leftで左右の入れ替えをしているので
スペース的に厳しいと感じているんです。

>>569
コピペで表示が意図通りになるようhtml内での位置を変えるという意味でしょうか？
そういう意味でしたら、まだもうちょっと望ましい順序＆望ましい表示位置の両立を目指して
頑張ってみたいんです。

>勉強中なら安易な解決を求めるのではなく
>自分で苦しめ。解決まで時間がかかるが
>その分、得るものが多い。

おっしゃる通りですね…。
自分なりに調べて試行錯誤してきたつもりですが人様から見れば言い訳ですよね。
ただ、出口があるのかどうかだけは知りた…い…や、何でもないです。
頑張ります。

>> 568
ありがとうございます。
でもheight指定をするということは
小さいウィンドウにした時に折り返される高さを想定して指定しなくてはならないんですよね。
そこが悩み所でして、例では2emで済むので、
折り返しが出ない想定標準サイズのときに見た目もさほど気にならないのですが
実際のhtmlでの高さを指定するとtopとmainの間があまりにも
冗長になってしまい、もう少しなんとかならないだろうか、と苦しんでいます。

572さんに悪かったので今さらながらアップしました。
ttp://web2ch.s31.xrea.com:8080/?Uploader
のlayout_test2.zip というのが件のものです。
現状ではabsoluteで取りあえず指定したところで一時停止状態のものです。
見ていただけたら幸いです。
自分が見やすいようにしている上で色々不必要なものを間引いたので汚いでしょうが…。

>>580は>>4を読んでないな？
・ブラウザによる振り分け　（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

うおっ、こんなところにあったのか。
どうもありがとうございました。

質問はテンプレ１０回精読してから書けや(ﾟдﾟ)

>582
見てみた。とりあえずWinIE6だと以下略。

これは俺ならもうHTMLから書き直すね。むしろ
div.head_word_area div{ display:inline; }
程度でお茶を濁しつつフレーム使うかもしらん。
用語集かなんかの匂いがするし。

僕はもうだめだが出口は多分ある。君はがんばれ。超頑張れ。

例えばテキストも画像もたくさん入ってる divがあって、
それに padding-left:10pxしてあるとして、
だけど全ての imgだけはそれを適用させたくないって場合、どう対処します？
その img全部に padding-left:0pxってクラスを付けて回りますか？

あ、ごめんなさい、ブラウザ書かなかったけど、あんまりブラウザや OSを
選ばないような気がしました。一応 WinIE6で。

>>587
一つのDIV要素の中に複数のIMG要素が含まれている状態を想像したが違うようだ

>>587
仮にその画像もテキストもたくさん入っているdivをclass="section"とすると

div.section {padding-left:10px;}
div.section img {padding-left:0;}

俺ならこうするね。

速い解答ありがとう。

>>590
私もパッとそれを思いついたのですが、書いてみて、うわ出来ないじゃんと
驚いて質問してみました。そう思いますよねぇ。

>>589
そんな感じです。imgの他に spanも liも objectもいろいろとありますが。

>>587
そもそもそんなくくり方が間違いだよ。

>>591
なにがしたいのかよく解らん。IMG(インラインレベル)のパディングと、
その親であるDIV(ブロックレベル)のパディングとの間に何の関係が?

>>591
img要素にはwinIEの5と6の互換モードでのバグ有り。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b013.html

やりたいことがイマイチわからないから、
これじゃ解決しないかもしれないが。

>>593
いや、関係があるか無いかと言えば、無いです。
というか大きく間違っててゴメン。今気付きました。

ええと、言い直すというか、答えと言うか、>>587で私が実現したかった事は
大元の divに padding-left: 10px;、その中の imgに margin-left: -10px;で
divと imgの左端が揃うって事でした。

>>594
ちょっと違ったけど、情報ありがとう。

>>595
ちょっと待て。
インライン要素であるimgではなくて、imgを入れるブロック要素に
marginを指定すべきじゃないのか？

>>587
593に同感。>>587も>>590も何か勘違ひしてますね。
多分こんな風にやりたいのでせう？
div.section {padding-left:10px;}
div.section img {margin-left:-10px; display:block;}

昔の人だけに、テンポ遅れだったな。

タイピングが遅いんだろ

むしろ
div.section * {margin-left:10px;}
div.section img {margin-left:0;}
の方がエレガントな解法ではあるまいか。
>>596の疑問は残るが、マアたぶん<br><img><br>とかやってやがるんだろ。

あ、>>600は駄目だ。spanなどインライン要素にもmarginがつくわな。

imgはborder0でもﾔｯﾄｹ

↑　ハ？　ナニ言ってるの。

いや、なんとなく言ってみた。

div#head{
background : #a8b888;
width : 230px;
height : 100%;
}
<body>
<div id="head">
text or images
</div>
</body>

ブラウザの画面に対してheightを100%で表示したいのですが
上記の記述の場合、必ず親要素であるbodyに対してもheight100%を
指定しなければならないのでしょうか？

>>605
仕様通りの動作
body要素へのheightプロパティ%値指定が無視される(N7.0/M1.4RC2)
http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html

>>606
その仕様は、NN7ではbody要素のheight100%が無効になる、という
ことだとおもうのですが
IE6でもbody要素にheigth100%を指定しないと、その子要素が
ブラウザの画面に対してheight100%にならない場合があるので
質問させてもらいました。

>>605はブラウザを明記しないで質問したよな？
それにIEについても>>606のリンク先に説明がある。
IEでもMozillaでも意図通りに表示したいなら、必須知識だし。

>>607
Doctypeスイッチはどうなってんの？　標準モード？
http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html
>なお、WinIE6, Mozilla, Opera7ともに互換モードではheightプロパティ
>の%値指定についてCSS2の規定と異なる解釈を行っています。body要素の
>子要素のheightプロパティを%値で指定した場合、親要素のheightプロパティ
>の高さを明示していないときは閲覧領域の高さに対する%値を算出します。

>>607
じゃあ、最初からIEだと書け。

>>586
ありがとうございます。
もしかして、WinIE6だと
absoluteでの指定でもうまく上下
入れ替わっていなかったのでしょうか？

ぶっちゃけ、上に配置した要素が下にかぶるような
ウィンドウ幅なんて特殊な状況（横のタブを広げている時とか）
だと思うのでこのままabsoluteで一段落つけようかなという
考えも別にあったりもしていたのですが…。

>出口は多分ある。君はがんばれ。超頑張れ。
あ、ありがとうございます。
何か泣けてきた…。
頑張って知恵巡らせます。

でも
一体いつになったら公開できるんだろう…。
上下入れ替えのCSSが将来できればいいなぁ。

>>611
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=layout_test2.zip&refer=Uploader
を見てみた。
>ぶっちゃけ、上に配置した要素が下にかぶるような
>ウィンドウ幅なんて特殊な状況（横のタブを広げている時とか）

そんなことはない。うちでもかぶった。
誰もがウィンドウを最大化して見てると思ってはいかんよ。
最近はブログなんかでその辺りに配慮の無いスタイルが多くて、困ったもんだ。
　横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
　http://pc5.2ch.net/test/read.cgi/hp/1031302476/l50

>>611
div.head_word_area {...}に
width: 50em;
とでも追加指定しておけば、折り返されなくなるよ。
ウィンドウ幅が50em以下の時は横スクロールが出るけど。
あと、セレクタはいちいち“div.クラス名”とせずとも“.クラス名”でよい。
またセレクタにはアンダースコア（_）を使用しない方が無難。
http://hp.vector.co.jp/authors/VA022006/css/syntax.html
http://www.keynavi.net/ja/bugh/css_ns4.html#_title_3_9

それから、div.middleにfloat:rightをかけてるけれど、
後の方でposition:absolute;も指定してるからfloatは無効になってるぞ。

段組なのですが
1{float:;left;}
2{float:;left;}
3{float:;left;}
IE6sp1、オペラ7.23では
ちゃんと123と表示されるのですが、
モジラだと
12
3
となってしまいます
これはモジラ特有のバグなのでしょうか？
・ネスケはこちらの事情で使えず確認できません。すみません。

:;

訂正
float:;left→float;left

>>615
すいません。

＿|￣|○
float;left→float:left
ほんとすいません

>>614　それだけではわからない。HTMLも含めてソース出して。　幅の問題かも。

むしろIEとOperaのバグである可能性の方が高い。>>614
こんなのもあるし。
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

>>614で3列目にもfloat:leftと書いたのですが確認したら実際には抜けていました・・・。
ちゃんと入れたところ、モジラでも正常に表示されました。
>>618-619さんそしてみなさんスレ汚し申し訳ありませんでした。

へなへな〜〜

ふ
あ
ん

↓次ﾄﾞｿﾞｰ

ぁ　あぁー

>>621-623
最近多いなこういうクソレス
リアクションなんていちいちかくなよ

>>624
それにレスするあんたも同罪

オマエモナー

すみません、質問なのですが
ttp://www9.plala.or.jp/jabro2nd/html/opmenu.htmlで、
メニューアイコンの上にポイントを置くと文字が流れるのですが、
この文字を二行目だけフォントの大きさを変えたりしたいのです。
スタイルシートのどの部分を変えれば変更できますか？

first-line

>>628
どうもありがとうございます。あと、もう一つ質問なのですが、
文章ごとに●行目のフォントサイズを設定するにはどうしたらよいのでしょうか？
たとえば、イラストの時の“絵置き場”の部分を大きくしたり、
日記のところの“メインみたいですよ”を縮小したりしたいのですが。

>>629
任意の箇所をグルーピングする要素→div,span
それぞれボックス、インラインなので適宜使いわけるように

それでは私はこの辺で

>>630親切にどうもありがとうございますー

今、メニュー部分を作っているのですが、IE6とFirefox 1.0PRで表示が違っていて困ってます。
ボタンの部分はul・liを使って背景に画像を使用。
疑似クラスを使用してマウスオーバー実現させてます。
XHTML 1.0 Strictですが、IEのバグ対応のため文字コードをUTF-8にしてxml宣言は省略しています。



【Firefox・Opera】

+--------+--------+--------+--------+--------+--------+
| | | | | | |
+--------+--------+--------+--------+--------+--------+

【IE】

+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+


横一列に並ばせたいのですが、IEの場合のみ階段状になってしまいます。

崩れた…。
今、メニュー部分を作っているのですが、IE6とFirefox 1.0PRで表示が違っていて困ってます。ボタンの部分はul・liを使って背景に画像を使用。
疑似クラスを使用してマウスオーバー実現させてます。
XHTML 1.0 Strictですが、IEのバグ対応のため文字コードをUTF-8にしてxml宣言は省略しています。

【Firefox・Opera】
┌───┬───┬───┬───┬───┬───┐
│　 　　　│　　 　│　 　　│　　 　│ 　　　│　 　　│
└───┴───┴───┴───┴───┴───┘
【IE】
┌───┐
│　　　 │
└───┘
　　　　┌───┐
　　　　│ 　 　　│
　　　　└───┘
　　　　　　　　┌───┐
　　　　　　　　│　 　　│
　　　　　　　　└───┘
　　　　　　　　　　　　┌───┐
　　　　　　　　　　　　│　　 　│
　　　　　　　　　　　　└───┘
　　　　　　　　　　　　　　　　┌───┐
　　　　　　　　　　　　　　　　│ 　　　│
　　　　　　　　　　　　　　　　└───┘
　　　　　　　　　　　　　　　　　　　　┌───┐
　　　　　　　　　　　　　　　　　　　　│　 　　│
　　　　　　　　　　　　　　　　　　　　└───┘

横一列に並ばせたいのですが、IEの場合のみ階段状になってしまいます。

<div id="navi">
<ul>
<li class="nav1"><a href="/1.html">menu1</a></li>
<li class="nav2"><a href="/2.html">menu2</a></li>
<li class="nav3"><a href="/3.html">menu3</a></li>
<li class="nav4"><a href="/4.html">menu4</a></li>
<li class="nav5"><a href="/5.html">menu5</a></li>
<li class="nav6"><a href="/6.html">menu6</a></li>
</ul>
</div>

div#navi { width:704px; height:30px; }
div#navi ul { list-style-type : none; }
div#navi li a { float:left; display:block; height:30px; text-indent:-9999px; }
div#navi li.nav1 a { width:120px; background: transparent url("/img/img_nav1a.jpg") top left no-repeat; }
div#navi li.nav2 a { width:116px; background: transparent url("/img/img_nav2a.jpg") top left no-repeat; }
div#navi li.nav3 a { width:116px; background: transparent url("/img/img_nav3a.jpg") top left no-repeat; }
div#navi li.nav4 a { width:116px; background: transparent url("/img/img_nav4a.jpg") top left no-repeat; }
div#navi li.nav5 a { width:116px; background: transparent url("/img/img_nav5a.jpg") top left no-repeat; }
div#navi li.nav6 a { width:120px; background: transparent url("/img/img_nav6a.jpg") top left no-repeat; }
div#navi li.nav1 a:hover { width:120px; background: transparent url("/img/img_nav1b.jpg") top left no-repeat; }
以下略…。

ずっとこの調子で先に進めず、泣きそうです。
どなたか解決策が解りましたらご指導お願いします。

>>633
li{display:inline;}

>>635
まづ>>4のバグ辞典スレッドをみること。
　ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b071.html
で、なんでa要素に対してfloat:left; display:block; なのさ。
#navi li {float:left;width:120px;}でいいだろ。
横並びにさせるべきはインラインであるa要素でなくブロックレベルであるli要素なんだから。
また、floatかけた要素は自働的にブロックレベルになるからdisplay:block;は無用。
とにかくFAQをよく読んで、基礎から学ぶこと。

>>635
>text-indent:-9999px;
は。ナニこれ？

>>632
基本を知らないで、小手先の裏技だけを切り貼りするから、そうなるのだ。

>> 636,637

早朝からありがとうございます。
無事解決しました。

今までテーブルデザインだったので、少しずつCSSデザインに切り替えるために勉強中でした。
まだよく解ってないのでお恥ずかしい限りです。
少しずつ理解出来るよう頑張ってみます。

うむ、生暖かく見守っているぞ

>638
menu1とかの文字を表示させないで
背景画像に文字を入れてるんだろう
これの問題はブラウザで画像表示させない設定にしてると
何もなくなっちゃうんだが

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<STYLE>
<!--
BODY{
width : 100%;
margin : 0px;
overflow : hidden;
padding : 0px;
background-color : #e0fef8;
}
.menu{
width : 100px;
height : 100%;
left : 0px;
top : 0px;
position : absolute;
overflow: auto;
background-color : #ffd2ff;
}
.main{
width : 80%; ←ココ
height : 100%;
top : 0px;
left : 20%;
position : absolute;
overflow: auto;
background-color : #e0fef8;
}
-->
</STYLE>

</HEAD>
<BODY>
<DIV class="menu">
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
</DIV>

<DIV class="main">
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
</DIV>
</BODY>
</HTML>


←ココ って書いてるところですがどうすれば横幅いっぱいに表示することができるのでしょうか？

>>644
body{
margin:0px;
}
div.menu{
width:100px;
float:left;
}
div.main{
width:100%;
margin-left:100px;
}

でよいかと。

複数セレクタについて質問させて下さい。

HTML
<div class="a1"><h1>a</h1>.....</div>
<div class="a2"><h1>a</h1>.....</div>
<div class="a4"><h1>a</h1>.....</div>
<div class="a5"><h1>a</h1>.....</div>
<div class="a6"><h1>a</h1>.....</div>
<div class="a7"><h1>a</h1>.....</div>
<div class="a8"><h1>a</h1>.....</div>
CSS
div.a1 , div.a2 , div.a3 h1{color:red;}
div.a4 , div.a5 , div.a6 h1{color:green;}
div.a7 , div.a8 h1{color:blue;}

と指定したのですが、最初に表示される要素にしか適応されてなく（a1とa4とa8)
それ以降はデフォルトの設定で表示されてしまいます。
全てに表示させたいのですが、どこが設定が間違っているんでしょうか？

クラスの部分はスクリプトで出力させているので、全部同じにするという訳にはならなくて・・。
クラスの数もかなり多いので1個ずつ別に・・・という訳にもいかないんです。

どこのサイトも、コンマで区切れば複数指定できるよ〜程度までしか書いてなくて悩んでます｡･ﾟ･(ﾉД`)･ﾟ･｡

>>645
<STYLE>
<!--
body{
margin:0px;
}
div.menu{
width:100px;
float:left;
}
div.main{
width:100%;
margin-left:100px;
}
-->
</STYLE>
でいいんでしょうか？？
これだと、フレームみたいに全くならないのですが・・・

>>646
俺のところでは、お望みのとおりに表示されてます。

>>647
俺のところではフレームみたいになってます。

つーか、おまいら他にいらんことしてるんと違うのか？

>>647
.mainのwidthが100%だと、margin-left:100pxの分だけ右に100pxスクロールバーが
出るから widthはautoで良いかと思われ。

>>648
まっさらなhtml css作ってみた所思ってた通りに表示されました。
他にh1で色々指定してたのでそれがいらななかったみたいで・・・。
すいません、ありがとうございました。

>>649
main の方がスクロールしないんだけど？？

>>652
言ってることが意味不明。言葉足らず。
お前さんのやりたいことが、こっちに伝わってない。
相互に認識の違いが発生している。

>>653
menu と main の両方をスクロールさせたい。
でも>>649さんのやり方だと、menuはスクロールするが
mainの方がスクロールしない。だからmainにウインドウより縦長になると
下の方に書いてる字がみえなくなってしまう。

>>654
絶対指定とかheightの指定とかやめてみ。
>>651みたいな例もある。

再度再度すいません。
上で解決したかに思ったのですが、やはり意図通りに表示されないみたいです…。

htmlとcssを詳細に書くと

<div class="a01"> <h1>a01</h1> <p>a01-a02</p> </div>
<div class="a02"> <h1>a02</h1> <p>a01-a02</p> </div>
<div class="a03"> <h1>a03</h1> <p>a03-a05</p> </div>
<div class="a04"> <h1>a06</h1> <p>a03-a05</p> </div>
<div class="a05"> <h1>a05</h1> <p>a03-a05</p> </div>

div.a01,div.a02 { background:black; }
div.a01,div.a02 h1 { color:red; }
div.a01,div.a02 h1:first-letter { color:white; }
div.a01,div.a02 p { background:black url(a0102.png) repeat; }
div.a03,div.a04,div.a05 { background:gray; }
div.a03,div.a04,div.a05 h1 { color:green; }
div.a03,div.a04,div.a05 h1:first-letter { color:blue; }
div.a03,div.a04,div.a05 p { color:pink; background:black url(a030405.png) repeat; }

このような感じなのですが、
first-letterが適応される部分とされない場所が出来たり、
first-で指定した色が後ろまで及んでしまったり、pの部分が反映されなかったりと散々になってしまいます…。

記述方法が拙いのでしょうか？
宜しければアドバイスお願いします。

気になるんだが

div.a01, div.a02 h1

ってのは、 div.a01そのものと、 div.a02の子孫のh1に適用されるセレクタであって
div.a01の子孫のh1 と div.a02の子孫のh1 に適用されるわけじゃないぞ

後者のようなことをやりたいなら
div.a01 h1, div.a02 h1

>>656
classは12345と順番なのにh1は12365と順番じゃないのはなぜ？
素朴な疑問。

>>656
コメントとcssを見た限りでは何がやりたいのか伝わってこない。
法則性無いの？

>656
指定方法がややこしすぎなんじゃないか
クラスの使い方やスタイルの指定の仕方をもう少し簡潔にするべき
あと確認に使ってるブラウザは何よ？

>>657
後者のdiv.a01 h1, div.a02 h1で巧くいきました。
まとめて全てに適応されるのかと勘違いしてました…。
ありがとうございます。精進します。

>>658
書き込む際に手書きした為ミスです｡･ﾟ･(ﾉД`)･ﾟ･｡

>>659
コメントとCSSはかなり削って、適当にa01 02,,と書いてます。
法則は1 2 3,,,,11 12と順番にカレンダーどおりになるようにしていました。が、658さんのレスの通り書くときにミスりました・・・。
これでカレンダーのスクリプトの表示部が出来そうです。

>>656
もしかして、こうやりたいんじゃないのか？
CSSの記述そのものを間違えてる気がする。

.a01,.a02 { background:#000; }
.a01 h1,.a02 h1 { color:#f00; }
.a01 h1:first-letter,.a02 h1:first-letter { color:#fff; }
.a01 p,.a02 p { background:#000 url(a0102.png) repeat; }
.a03,.a04,.a05 { background:#999; }
.a03 h1,.a04 h1,.a05 h1 { color:#0f0; }
.a03 h1:first-letter,.a04 h1:first-letter,.a05 h1:first-letter { color:#00f; }
.a03 p,.a04 p,.a05 p { color:#f99; background:black url(a030405.png) repeat; }

>>661
ちょっと待て。
カレンダーなら表じゃないのか？
表のセルに背景色と文字色を指定して、数字だけをscriptで流し込むような。
h1とかpは全く使わないぞ。レス付ける上での便宜上のものかもしれんが。

div{
width:200px;
height:200px;
border:solid #ccc 1px;
}

この中にp要素を入れる。
「愛ウ愛うあいうあいうあいうあいうあいう言うあいうあいうあいうあいういうあいう」
この文字列をdivの底辺あわせで入れることは無理でしょうか？

文字の大きさが変わっても底辺があっていて、上辺がわの変動というのが理想です。

padding-top　値は%で調整

>>665
padding-top:auto;
padding-bottom:0;
とかでしょうか？全然機能しません。
winXP
ie6
の最新環境でダメなようです。

div{position:relative}
p{position:absolute;bottom:0;}
辺りで出来ないかね？
や、試して無いからわからんが。

>>666
>>665

>666はどこで仕入れてきたのだろう？
padding-top:auto;padding-bottom:0;

>>667
文字列は複数行になる時もあるのでダメです。
>>668
%では無理です。文字列は複数行に渡り、topからのpaddingは文字の大きさによって左右されるべき
ことなので、%では無理です。何も言わずいきなりautoやってすみません。

何か方法はありませんか？

やってみてから書いてんだよな？

>>671
そうです。

複数行でテストしても、ちゃんとなるけど・・・
>672　ほかにおかしな設定してんじゃないの？
新ファイルで書いて余分な設定無しでやってごらんよ。

%がダメ？だというならemでやれば済む話じゃないか？

　　>664少しは調べろよな。

<div>
<p>あいあいあいあいあいあいあいあいあいああ試合ファイｄｇはｄ；じゃｂんｌがｊｇ；ぁｊｂｇぁｊｇｂ</p>
</div>

div{
width:200px;
height:200px;
border:1px solid #ccc;
}
p{
padding-top:30%;
}

でやってみました。全然ダメでした。
>topからのpaddingは文字の大きさによって左右されるべき
>ことなので、%では無理です。
この意味を理解されてないような気がします。
ユーザが文字サイズを変更した時にpadding-topは縮小しないとだめなのです。
逆は逆で。

そもそも
padding-top:hoge%
などで何をするつもりですか？

理解されて無いのは、わかるように説明してないからだ。

複数行の場合ってのは、1行目の底辺を底辺を合わせたいのか、
最終行の底辺を合わせたいのか？

あとpaddingにautoなんて値は無いので効くわけ無い。

WinME + IE6.0 だが、試してみた限りでは >>667で希望通りだと思うんだが?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>てすと</title>
<style type="text/css">
<!--
div{
position:relative;
width:200px;
height:200px;
border:1px solid #ccc;
}
p{
position:absolute;
bottom:0;
margin:0; padding:0; /* ああ、この観点が>>664には抜けてるのかな（ ´,_ゝ｀） */
}
//-->
</style>
</head>
<body>
<h1>てすと</h1>

<div>
<p>あいあいあいあいあいあいあいあいあいああ試合ファイｄｇはｄ；じゃｂんｌがｊｇ；ぁｊｂｇぁｊｇｂ</p>
</div>
</body>
</html>

>>667
bottomなんてプロパティ初めて使いました。
いつもtopとleftしかやってませんでしたので。

NN7でも試してokだったのでモジでもいいぽいです。
さすがにすごいですね。ありがとうごさいました。

<p>あいうえお</p>
このHTMLをいじらずにCSSだけで文字の大きさを左から順に小さくするようなことはできますでしょうか？

おっと改行ですv^^

OS:Windows XP (Service Pack 2)
ブラウザ:Netscape 7.1
質問させて頂きます。
サイトを製作中ですが、CSS入れても自分で確認できないなら、CSS入れない方がいいでしょうか…？
できれば入れた方がいいのだろうけど、確認できないとミスもわからないし…。
因みに、ネスケのコンポーサー（たぶん）である程度作って、手直しやらCSSを入れようと思ってたんですがね。

質問が初心者スレ向きかと思いましたが、CSSはこちらの方が良いと思ったのでこちらで。

丸角テーブル作ったのですが、Geckoではうまく表示してくれません。
アドバイスお願いします。

http://grecks.s54.xrea.com/test/table/maru-table.html

>679
無理

>680
は？

>681
( ・ω・)　HPの動作・表示環境確認スッドレ
http://pc5.2ch.net/test/read.cgi/hp/1089046899/

>682
素直にテーブル使えよ

>>683
きも

>>682
.topと.bottomにoverflow:hidden;つけてみて。
ただ、今のソースに合わせたその場しのぎの対策方法だから、
また違った場合ではうまくいかない可能性が高いよ。

>>685
あっ、できた。
サンクス。

やっぱりテーブルにしといた方がいいのかな〜。。。

>>682
.top と .bottom に border か padding をいれると
消えてた線(背景画像)が出るようにはなるけどなあ。

.bottom のほうは border-bottom:1px solid #fff; とでもやればうまくいく(ように見える)んだが、
.top のほうが、左右の辺とうまく繋げられる方法が思いつかん。

>>686
やり方が下手なんだよね。
ブロックを三つに分けて縦に並べる。
画像は上部、中央、下部の三点にする。
んで、横幅をそろえて上下の隙間をなくせば丸角テーブル風になるよ。

>>687
>>685さんのもそうだけど、他のタグの入れればいいってことなのかな〜

>>688
すんません、やり方が分からないっす。

タグじゃなくて属性でした。

>>683
�dクス。
答えて貰っといて悪いのだが、理由があって２ちゃんには晒せないんだ…
ログとしても残るし。
スマソ。

やっぱCSS入れない方がいいのかな…。

スマソ、681＝691です

これは？画像にして晒すことにはなるが（ｗ
http://www.danvine.com/iecapture/

やらないほうが良いのかな
みたいなレス要らんから。
じゃ、やるなよ。って答えたくなる。やる気が感じられない。

そんなの書く前に、どんな環境で確認したいのかとか書けば？

できないんですね。CSSショボ・・・・

>>693
禿同

>>694
マジレス
画像にすれ

>>693
ホントにスマソ。
確認してログ流せば平気…だろうか。
見たところ過去ログなさそうだし。

一応確認したい環境は
IE5.0〜6.0(Service Pack 1)＋Windows 98,2000,Me,XP/mac
本当に極端なことを言えば、一番多いであろうWin＋IEでの確認がしたい。
しかし、マックを使っている人ってどのくらいの割合なのだろうか。

>>696
5.7％だってさ。
http://japan.cnet.com/column/trend/story/0,2000051181,20070264,00.htm

質問です。
<div class="left">left</div>
<div class="right">right</div>
div.left{
float : left;
width : 20%;
margin-left : 10%;}
div.right{
width : 55%;
margin-left :35%;}
ネットスケープでは
　余白　left　 余白　right　余白
│10%│20%│5%│ 55%│10%│

と、思った通りの形になるのですが
なんでかIEでは
　余白　left　 余白　right　余白
│20%?│20%│1%?│ 30%│10%│

と、妙な形になってしまいます。
ネットスケープでもIEでも同じ形にしたいのですが
なにか上手い方法はないでしょうか？

age忘れました

>>698
IE6の後方互換モードでのボックスのwidthの算出方法を勉強してみれ

URLなどを表示したとき、文字列が長いとwidthを指定してもIE6だと
自動折り返しされずに表示されてしまうのですがなにか良い案はないでしょうか？
overflow:auto;以外で。
Operaだと自動で折り返されていました。

直線はボーダーラインを使えばいいという単純な発想に気付き、↓修正しました。

http://grecks.s54.xrea.com/test/table/maru-table-touka.html

a:hover {background:#6F6F6F;color:#FFF; padding:1px 0; }

のようにしてあります。文字列のリンクの時はいいのですが、画像でリンク
してある時はマウスが画像の上にのっても枠を出さないように試行錯誤している
のですがどうしてもうまくいかないので教えてください。

いろいろ調べたりやってみて、
a:hover img {margin 1px; border: 0px; background:#FFFFFF;}
とやればいい気がしているのですがこれでもやはりマウスを画像の
上にもっていくと枠が表示されてしまいます。(背景は #FFFFFF なので
上記のように background を指定してみました)

しょぼい内容ですみませんがよろしくお願いします。

>1嫁で済ませられる気もするが・・・
a:hover img {margin 1px; border: 0px; background:#FFFFFF;} は全くもって出鱈目な記載なので消すとして
<img>を含む<a>にクラス振ってpadding:0;で終わり

a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}

>7
>7
>7
>7
>7

>> 704
ありがとうございました。できました。

>>705 >> 706
a:link img, a:visited img, a:hover img{border:none;}
では消えてくれませんでした…。

なぜかわかりませんが、704 の方法で解決できたからこの方法でいきます。
ありがとうございました。

>>707
消えないわけないんだがな。
消えないということは、ここに晒してる以外にいらんことやってるってことだ。
論理的思考ができずに、裏技みたいなテクを切り貼りしてやり繰りするのは
いくらCSSを使っていても、やってることは物理タグ厨と大差ない。

>>707
俺は消えた。あんたが間違ってる。

今までテーブルでデザインしてきて、CSSに変えようと思っているのですが
CSSの何を利用してレイアウトするかわかりません。
どんなタグを利用してレイアウトするのでしょうか？
一通り紹介されてるHPを見たのですが、レイアウトに使うタグがわかりません。
参考になるＨＰのＵＲＬも教えてくれたらうれしいです。

>>710
その前にHTMLを勉強することをオススメします。

CSSにはタグなど有りません。

１に勉強２に勉強。３.４が無くて５にパクリ

>712
アホか

いろいろすみません。707です。
やっぱり消えません。何がいけないのかわかりません。
大変申しわけないのですが、
css と html を貼るので何が間違っているか見て頂けませんか？

[test.css の中身は下記で全てです]
a:hover {
background:#6F6F6F;
text-decoration:none;
color:#FFF;
padding:1px 0; }

a:link img, a:visited img, a:hover img{border:none;}

[html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="./test.css" />
</head>
<body>
<a href="../"><img src="/img/test.gif"></a>
</body>
</html>

画像の上にマウスを持っていくと画像の上下にグレーの枠が表示されて
しまうのですが…。

padding:1px

>>714
それは枠ではなくて、aの背景色では？
透過GIFでためしてみ。

>>714
もしかして画像が透過gifなんじゃない？
画像の上下のグレーの枠は、borderやtext-decorationで表示されているんじゃなくて
background#6f6f6fの色だと思われ。

<p>以外のcssが適用されません。何故なんでしょうか？

-----cssファイル------
body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;
}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
--------------

次にhtmlを書きます。

----htmlファイル-----

<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>
<!--<span id="top">0913追記。</span>-->
</div>

<div class="owaku"><span class="tw"><span class="t">
■潜在意識？
</span><div class="hi">
20041009
</div></span><div class="h">
本文<BR>
</div></div>

<div id="center">
<p><a href="zakkiindexmenu.html">雑記目次へ</a></p>
</div>

</body>
</html>
---------

よろしくお願いします。

書き込み切れなかったので、環境等を書きます。

私が見ているのは、macOS9、IE5.5で、これだと正常に表示されます。
が、ネットカフェで見た時には、<p>以外のCSSが、全く適用されていませんでした。
タグは手打ちで作成しています。

そもそも見る限りPにCSSが指定されて無いのだが

あっ、ごめんなさい。ここ以外のファイルで、P指定があるのです。
その<p>指定のあるCSSは、このhtmlじゃないので書きませんでした…

なんか絵に描いたようなdiv厨span厨だなあ。
突っ込みどころはいろいろあるが、とりあえず、

<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
　　↓
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">

かと。
>>722の言ってる内容がよくわからん。結局>>718以外のスタイルシートを>>719に
適用しているんだかしてないんだか。情報の小出しは困りますが？

すいません、情報の小出しではないのです。
>>721に指摘され、気付いたのです。

公表した『zakkimenu.html』に適用される『zakki.css1』にはp{}がなく、
公表していない『a.html』に適用される『a.css1』には、p{}が記述されていた。
両方うpしてあるのですが、ネットカフェから見た所、そのp{}だけしか
適用されてなかったので、よく考えずに、『zakki』の方を公表してしまった
のでした。

とりあえずコンマ直してきます

何言ってるかわかんねぇよ

>>720
>私が見ているのは、macOS9、IE5.5で、
そもそもMacIEのヴァージョンは5.2位までで、5.5まで行ってないはずだけど？

通常のリンクでは hover させて、画像のリンクの場合は hover させたくない
場合の CSS はどのように記述すればよいのでしょうか？

>>727
「hover させて」とは「hover すると変化させて」の意味ですか？
基礎なので>>4を読めばわかるはずですが、読んでないのかな。
画像（img要素）を括るa要素にclassを附し、
a.class名:hover　{...} と、
a:hoverへのスタイル指定を打ち消すスタイルを適宜指定する。

>>724
問題となるページを出して質問しろよ
お前だって何でもないソースを出して困ってますって言われても答えるのに困るだろ？

たびたびすみません(´･ω･`)
自分でも訳わからんので、改めて整理して聞き直します。

作成環境はメモに手書きです。
mac OS9　IE5.1で見ると、ちゃんとcssが適用されているのですが、
ネットカフェ等に行き、windowsのIEで見ると、<p>以外のcssが、全く適用されていないのです。
以下にhtmlファイルと、読み込むcssを記述します。

<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">

</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>
<!--<span id="top">0913追記。</span>-->
</div>

<div class="owaku"><span class="tw"><span class="t">
■タイトル
</span><div class="hi">
20041009
</div></span><div class="h">
本文本文<BR>
本文本文<BR>
</div></div>

<div id="center">
<p><a href="kakoindexmenu.html">過去目次へ</a></p>
</div>
</body>
</html>

body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
p{text-align:center;color:#000000;}

-----------

以上です。どうか御指導よろしく お願いいたします。

適用されていますが何か?

つーかネットカフェで使っているIEのバージョンはなんなんだよ？
ほんと小出しちゃんだな

>>733
うそっ
ちゃんとタイトルに枠とかついてますか!?

>>734
知らんのです。なので書きませんでした。

Win版IEのバージョンの確認方法も知らないのに他人を嘘つき呼ばわりか

CSSでレイアウトする場合 position と float　どちらを
利用した方が良いでしょうか？
その理由も教えてくれたら嬉しいです

CSSの段組みレイアウトで質問です。

#navと#contentを左右に並べたレイアウトを作ってるんですが、
どちらかの天地に併せてもう一方も同じだけの天地にさせるには
どの様に組めば良いのでしょうか。

バックグラウンドの色を左右で変えているのですが、
#nav側の内容量に対して#content側の内容が多い場合、下図の様に
なってしまいます。
┌┬───┐
││　　　│
└┤　　　│
　│　　　│
　└───┘
これを左右均等に
┌┬───┐
││　　　│
││　　　│
││　　　│
└┴───┘
としたいのですが…。

>737
Position Float
それぞれどんな動きをするか理解しての発言か？

>>737
適材適所

>>739
お前も理解してるのか問い詰めたい

>>738
背景を画像化するのが簡単、と教えられた。

ttp://www.stopdesign.com/
あとここ。

>>738
ソース出してね。
画像なんか使用せんでも、#navと#contentの親要素（bodyとか）の背景色を
うまく透かして見た目#navが#contentと同じ高さになる風に仕組めばいい。
body {background-color:yellow;}
#nav {background-color:transparent; float:left;width:10em;}
#content {backgtound-color:red; margin-left:10em;}

>>731
なんでid="center"が二つもあるんだよっ。classとidの差がわかってないだろ。
基礎からやり直しなさい。

>>732
>margin-top:50
単位を省略してはいけない。
>.t{color:#345a76;font-weight:bold;float: left;}
floatさせる要素にはwidth指定が必須。

WinIEの表示確認はここで出来る。
　http://www.danvine.com/iecapture/

<html>
<head>
<style type="text/css">
body{background-color:#cccccc;}
#parent {width:600px;background-color:#cc0000;border:1px solid #666666;}
#c1 {background-color:#00cc00;width:400px;float:left;}
#c2 {background-color:#0000cc;width:200px;float:right;}
</style>
</head>
<body bgcolor="#ff0000">
<div id="parent">
<div id="c1">bbb<br>bbb<br>bbb<br>bbb</div>
<div id="c2">ccc<br>ccc</div>
</div>
</body>
</html>

これをIE6で見るとc1とc2はparentの中に入るんですが、firefox1.0だとc1とc2がparentの外に出てしまいます。
firefoxでfloatを用いてIE6のように見せるためにはどうしたらよいのでしょうか？

>>746
そのCSSを見る限り、FireFoxが正しくて、IEが間違った表示をしているように
思える。つまるところ、何がしたいわけ？

幅600ピクセルの枠内に2ペインで400ピクセルと200ピクセルの枠を並べたいの？

>>746　ＦＡＱを見てないね？　たぶんＡ４（>>6）に解決法があるよ。

>>747>>748
ありがとうございます。firefoxの解釈が正しいんですね
すみません>>6逝ってきます

質問したいのですが
■あいうえお■
■→青
あいうえお→赤

CSS　
.c1 {color:#0000ff}
.c2 {color:#ff0000}

html
<p class="c1">■</p><p class="c2">あいうえお</p><p class="c1">■</p>

だと改行されてずれてしまいます。
このような場合はどのようにすればよいのでしょうか？
よろしくお願いします。

<p class="c1">■<span class="c2">あいうえお</span>■</p>

>751
できました。
ありがとうございました。

うむ

素直に<FONT>〜</FONT>使った方がいいよ。
地の文自体がCSSを使うようなHTMLになってない。（■とか）

×HTMLに
○体裁に

>754は、例えというものを知らないらしい。

くだらん例えを教えんな。

「CSSを使うような地の文」

　　　説明してもらおうか？

どんな例えをしたのか説明してもらおうか？

おまえ面白い香具師だな。

くだらん言葉遊びでスレ埋めるな。
次の質問ﾄﾞｿﾞｰ↓

　ふんにゃか　ふんにゃか

ソースと環境と質問内容を書いてくれないと答えられません

うんちっちいいいい

>>744,745
基礎…わかってるつもりだったのですが、とんだ勘違いのようですね。
やっぱり本だけじゃダメか＿|￣|○
それから、確認できるURLありがとうございました。
負荷大杉？で確認できなかったので、今度また試してみます。

勉強しに逝ってきます。ちゃんと答えてもらえるようにがんばります(`･ω･´)

CSSは何を使ってレイアウトするんだ…
一応HPとか過去スレを呼んだけどposition,floatしか分からんかった.
やっぱページのレイアウトはposition,floatしかないの？

>766
何が言いたいんだ？
レイアウトの意味が分からんのか？

HTMLはCSSを使ってレイアウトするんです

簡単に言うと　CCSでページをレイアウトする場合
どのタグを使うか聞いてるんだろ？

まあ俺はテーブルレイアウト派だがな

absoluteとかrelativeを使うレイアウトは？
と聞いているのでは？

>>766 は初心者スレあたりで、
「CSSはどのタグをつかってレイアウトするんだ…」と書いて
邪険に扱われてここにきた模様。優しくしてあげてください。

で、>>766
css を使う場合、おそらく >>766 が今まで覚えてきたhtmlの使い方
があまり役に立たなくなるから、今一度カンザキあたりで、
htmlについて学んでみることをオススメしたい。

カンザキとか初めて聞いた

>>772
>>4の一番上のサイト。
神崎と内田を知らずにして質問するなかれ。