CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}

 http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 37
 http://pc8.2ch.net/test/read.cgi/hp/1162545373/

【仕様書】
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.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/


3 :Name_Not_Found:2006/11/26(日) 18:50:48 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録:CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/index.html


4 :Name_Not_Found:2006/11/26(日) 18:51:02 ID:???
【解説など】
Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
 http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
スタイルシート用語集
 http://www.mitsue.co.jp/case/design/c_index.html
IE で min-width を指定する方
 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
CSSでイケてるデザインサイトリンク集
 http://ike.s33.xrea.com/
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php


5 :Name_Not_Found:2006/11/26(日) 18:51:17 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: WindowsInternet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintoshInternet 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


6 :Name_Not_Found:2006/11/26(日) 18:52:33 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 ttp://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm


7 :Name_Not_Found:2006/11/26(日) 18:52:53 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
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

Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/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は一要素に一つだけ。要素を重ねるなど工夫しませう。


8 :Name_Not_Found:2006/11/26(日) 18:53:09 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。

の整形」  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 Q10: リンクを新しいウィンドウで開かせるにはどうしたら? A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。 Q11. height:100%;としても高さが100%になりません。 A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。 「height: n%;の正しい仕様」  http://www.mozilla.gr.jp/standards/webtips/webtips0032.html Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい? A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。 「いままでの HTML との対照」  http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm  http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm  http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm HTML でのレイアウト指定の、 CSS での指定との対応表  http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html 9 :Name_Not_Found:2006/11/26(日) 18:53:26 ID:??? 【参考】  IEの position:absolute; のバグを利用した擬似フレーム

IEの position:absolute; のバグを利用した擬似フレーム

1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */