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

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

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

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

過去スレや関連リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7
cf. http://web2ch.s31.xrea.com:8080/index.php?CSSFAQ
　　http://nira.s25.xrea.com/FAQCSS/ls_00.html

2 ：Name_Not_Found：03/06/14 05:38 ID:???

3 ：Name_Not_Found：03/06/14 05:38 ID:???

【仕様書】
・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/

4 ：Name_Not_Found：03/06/14 05:39 ID:???

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・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.tripod.co.jp/index.html
・Web標準普及プロジェクト　（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け　（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
・* CSS { イケてるスタイルを："作れ";} 発表所　（消滅？）
　http://strict.jp/~sappari/2ch/css.php

5 ：Name_Not_Found：03/06/14 05:39 ID:???

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

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

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

6 ：Name_Not_Found：03/06/14 05:40 ID:???

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

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

7 ：Name_Not_Found：03/06/14 05:41 ID:???

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

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

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

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

8 ：Name_Not_Found：03/06/14 05:44 ID:???

行数オーバーで>>2から省いた。

CSSでイケてるデザインサイト　14
http://pc2.2ch.net/test/read.cgi/hp/1054115237/l50

9 ：Name_Not_Found：03/06/14 06:36 ID:???

１０くらい(σ･∀･)σｹﾞｯﾂ!!

10 ：Name_Not_Found：03/06/14 10:59 ID:???

１０くらい(σ･∀･)σｵｯﾂ!!