このページに関してのお問い合わせはこちら
/* CSS・スタイルシート質問スレッド【28】 */
ツイート
1
:
Name_Not_Found
:
04/02/17 07:00 ID:???
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
・基礎は解説サイト(
>>4
・かなりわかりやすい)で勉強してください。
・質問の前に【FAQ】(
>>5-8
)を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
【解説など】(
>>4
)の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。validator(
>>3
)でチェックできます。
初心者の疑問は大抵ここまでで解決します。
・OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは?」と求められたら応じませう。
その方が回答が早く得られます。質問は具体的に。
過去スレや関聯リンクは
>>2-10
【過去ログ】【関聯スレ】
>>2
【仕様書】【CSS検証】
>>3
【解説など】
>>4
【FAQ】
>>5-8
http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】
http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】
http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】
http://web2ch.s31.xrea.com:8080/?CSSRelated
2
:
Name_Not_Found
:04/02/17 07:00 ID:???
【過去ログ】
1
http://mentai.2ch.net/hp/kako/974/974934062.html
2
http://natto.2ch.net/hp/kako/984/984113434.html
3
http://natto.2ch.net/hp/kako/992/992992981.html
4
http://pc.2ch.net/hp/kako/996/996828258.html
5
http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6
http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7
http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8
http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9
http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10
http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11
http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12
http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13
http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14
http://pc2.2ch.net/hp/kako/1041/10416/1041641395.html
15
http://pc2.2ch.net/hp/kako/1045/10451/1045124732.html
16
http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
17
http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
18
http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
19
http://pc2.2ch.net/hp/kako/1053/10536/1053619342.html
20
http://pc2.2ch.net/hp/kako/1055/10555/1055536413.html
21
http://pc2.2ch.net/hp/kako/1057/10578/1057860130.html
22
http://pc2.2ch.net/hp/kako/1060/10608/1060869440.html
23
http://pc2.2ch.net/hp/kako/1064/10645/1064502391.html
24
http://pc2.2ch.net/hp/kako/1066/10663/1066310242.html
25
http://pc2.2ch.net/hp/kako/1069/10692/1069216458.html
26
http://pc2.2ch.net/test/read.cgi/hp/1072018825/l50
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1074845459/l50
3
:
Name_Not_Found
:04/02/17 07:01 ID:???
【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第3版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・代替スタイルシートに萌え〜
http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・CSSでイケてるデザインサイト 20
http://pc2.2ch.net/test/read.cgi/hp/1074254818/l50
【仕様書】
・CSS1の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の邦訳(日本規格協会訳/個人訳)
http://www.y-adagio.com/public/standards/css1/toc.htm
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
・W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/
4
:
Name_Not_Found
:04/02/17 07:01 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/
・『スタイルシート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/
5
:
Name_Not_Found
:04/02/17 07:01 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: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に4.)をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html
6
:
Name_Not_Found
:04/02/17 07:02 ID:???
【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
なかよしぱれっと (ネスケ4でも崩れない段組みの実例)
http://village.infoweb.ne.jp/~fores/
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
http://pc2.2ch.net/test/read.cgi/hp/991666454/683n
7
:
Name_Not_Found
:04/02/17 07:03 ID:???
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://kobit.info/tips/overflow.html
http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
http://www.fromdfj.net/html/overflow.html
Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03
Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は
http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html
参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf.
http://cssbug.at.infoseek.co.jp/detail/winie/b040.html
8
:
Name_Not_Found
:04/02/17 07:04 ID:???
【FAQ】
Q10.リンクを新しいウィンドウで開かせるにはどうしたら?
A10.CSSではできません。target属性かJavaScriptでやって下さい。
別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。
Q11.いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A11.下記に書いてあります。テーブル・レイアウトは段組のFAQ(A4・
>>6
)をご覧あれ。
「いままでの HTML との対照」
http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
http://deztec.jp/site/tips/page/p0037.html
9
:
Name_Not_Found
:04/02/17 07:44 ID:???
FAQの追加と、順番を変更した。
次回からスレッド立てる人は、下記もよろしく。
■ ローカルルール等リンク先更新総合スレッド 9
http://qb3.2ch.net/test/read.cgi/operate/1071312042/l50
10
:
Name_Not_Found
:04/02/17 16:58 ID:???
>>1-9
オツ