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

903 ：Name_Not_Found：04/04/23 13:49 ID:???

>>all
議論はよそで

904 ：Name_Not_Found：04/04/23 14:01 ID:???

結局DIV厨が自己弁護の為にあぁだこぅだ言ってるだけだな

905 ：Name_Not_Found：04/04/23 14:56 ID:???

CSSの宣言（？）を、
<html>
の前に書くのと後ろに書くのはどう違うんですか？
上のサイト行っても、とほほさんは後ろ、ばけらさんは前に書かれてます。

906 ：Name_Not_Found：04/04/23 15:09 ID:???

>>905
とほほは疑ってかかれ。これ定説。

907 ：Name_Not_Found：04/04/23 15:11 ID:???

>>905
見てきたけど、どちらも後ろに書いてあるように見えるが。
つーか、htmlの後ろというか、headの後ろが正しい。

908 ：Name_Not_Found：04/04/23 15:11 ID:???

単に好みの問題

909 ：Name_Not_Found：04/04/23 15:12 ID:???

>>905
前とか後ろというのが、いまいち理解できないが・・

　とりあえず
<!DOCTYPE*****
<html lang="ja">
<head>
　ここ　
</head>
<body>
ごにょごにょ
</body>
</html>

　　ばけらは外部ファイルだったような・・・

910 ：Name_Not_Found：04/04/23 15:14 ID:???

>>905
実はどちらも違わない。CSS の適用は、html の読込が終わってから
行われるから。

ただし、<style> を <head> ～ </head>の外に書くのは文法違反。
ここで試してごらん。
http://hanoi.softvision.co.jp/htmllint/htmllint.html

参考
http://www.ne.jp/asahi/minazuki/bakera/html/reference/headmisc#style

911 ：910：04/04/23 15:26 ID:???

すまん。
> CSS の適用は、html の読込が終わってから行われるから。
この部分だけ撤回。

ちょっと勘違いしてたみたい。

912 ：Name_Not_Found：04/04/23 15:29 ID:???

>>911
なんだか全部がガセに見えちゃうよ。

913 ：Name_Not_Found：04/04/23 17:22 ID:dceME1y9

ttp://www001.upp.so-net.ne.jp/oka/iframe_dm.htm

上記のサイトの一番上にあるような選択欄みたいなのに、
スタイルシートを適用したいのですが、どのようなプロパティを指定すればいいのでしょうか？

914 ：Name_Not_Found：04/04/23 17:32 ID:???

>>913
SELECT要素と言え。で?

915 ：Name_Not_Found：04/04/23 17:40 ID:dceME1y9

>>914
スタイルシートを使ってその選択欄の背景色を変えたりしたいんですが、無理なのでしょうか？

916 ：Name_Not_Found：04/04/23 17:42 ID:KcRSS4Cy

>>914
お前に用はないよどっかいってください

917 ：Name_Not_Found：04/04/23 17:48 ID:???

>>915
無理じゃないよ。

918 ：Name_Not_Found：04/04/23 17:51 ID:dceME1y9

>>917
そうですか。ありがとうございます。SELECT要素でもっかいグ愚ってきます。

919 ：Name_Not_Found：04/04/23 18:22 ID:???

>>916
IDがRSSだわ。

>>918
select要素でググってもでない予感。CSSの基礎を学べばわかるはず。

920 ：905：04/04/23 21:59 ID:???

みなさん回答ありがとうございます。
自分は一般的なHTML言語を使える程度です。
今からcss勉強しようと思ってます。
勉強の順番は、
HTML→css→Java Script
で大丈夫でしょうか。
今からこつこつとやっていこうと思ってます。
Web Page作成に当たって、これはしっとけ、これはもっとけみたいなのがあったら教えてください。
最終的には掲示板なんかも自作でやりたいと思ってます。
というか、どこまで自作でできるものなのでしょうか？
アクセス解析なんかも自分でできるのでしょうか。

921 ：Name_Not_Found：04/04/23 22:06 ID:???

>>920
スレ違いですよ。

922 ：905：04/04/23 22:16 ID:???

>>921
失礼しました。
では、勉強の順番を教えていただけないでしょうか。
順番というか、Web Page作成におけるcssの位置づけみたいなもの。
全体像がわからないとどれから勉強すればいいのかよくわからないので。

923 ：Name_Not_Found：04/04/23 22:22 ID:???

>>922
ちょっとﾜﾗﾀ

924 ：Name_Not_Found：04/04/23 22:25 ID:???

僕の肛門も順番を知りたがっています。

925 ：Name_Not_Found：04/04/23 22:27 ID:???

>>922
初心者スレ池

926 ：Name_Not_Found：04/04/23 22:28 ID:???

>>922
順番は、まあそれで良いのじゃないかな。
並行して PHP とかも勉強すればなお良しかと。
これ以上は、どうぞこちらへ。

Webサイト製作初心者用スレ vol.89
http://pc5.2ch.net/test/read.cgi/hp/1082203621/l20

927 ：Name_Not_Found：04/04/24 00:21 ID:???

308 ：Name_Not_Found ：04/03/31 15:52 ID:???
>>4のテンプレURL変更あったので報告。

> ・『スタイルシートWebデザイン』ボランティアHTML化版。
> 　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
　　　　　　　　　　　　　　　　↓
http://www.asahi-net.or.jp/~jy3k-sm/css1/2004maki/

309 ：Name_Not_Found ：04/03/31 15:58 ID:???
>>308
了解、こちらは変更した。
http://web2ch.s31.xrea.com:8080/?CSSRelated

928 ：Name_Not_Found：04/04/24 00:38 ID:???

>>927
ああ、それねえ、あのあとすぐに元に戻ってたよ。
クリックしてごらん。2003maki の方がつながるから。

・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/

そこには毎日行ってるけど、結局、ディレクトリが変更されてたのは、たった1日間
ぐらいだったような記憶がある。何があったのかしら？

929 ：テンプレ：04/04/24 00:44 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-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

930 ：Name_Not_Found：04/04/24 00:47 ID:???

931 ：Name_Not_Found：04/04/24 00:48 ID:???

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

932 ：Name_Not_Found：04/04/24 00:49 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/

933 ：Name_Not_Found：04/04/24 00:53 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の実装の誤りです。詳しくは下記（特に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

934 ：Name_Not_Found：04/04/24 00:55 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
なかよしぱれっと　（ネスケ４でも崩れない段組みの実例）
　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
また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

935 ：Name_Not_Found：04/04/24 00:59 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
レイアウトサンプル擬似フレーム
　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

936 ：Name_Not_Found：04/04/24 01:00 ID:???

【FAQ】
Q10.リンクを新しいウィンドウで開かせるにはどうしたら？
A10.ＣＳＳではできません。target属性かJavaScriptでやって下さい。
別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。

Q11．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A11．下記に書いてあります。テーブル・レイアウトは段組のFAQ（A3・>>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

937 ：Name_Not_Found：04/04/24 01:01 ID:???

次回からスレッド立てる人は、下記の変更・追加もよろしく。

■ ローカルルール等リンク先更新総合スレッド 10
http://qb3.2ch.net/test/read.cgi/operate/1079706809/

【過去ログ】http://web2ch.s31.xrea.com:8080/?CSSLog

938 ：Name_Not_Found：04/04/24 01:12 ID:???

おまえら10レスくらいあれば質問1件いけるじゃないか

939 ：Name_Not_Found：04/04/24 07:35 ID:???

位置指定についての質問です。
positionをrelativeすると下に余白ができてしまいます。
absoluteにすると大丈夫みたいです。
この余白は相対的に配列する場合は仕方がないのでしょうか？
そもそも相対的と絶対的の使いわけがわかりません。
ということで、
①余白の解決法。
②使い分け。
をご教授願えないでしょうか。

940 ：Name_Not_Found：04/04/24 07:51 ID:???

>>939
ソースが無いとわからんのだが、
余白はmarginなりpaddingなりでなんとかするのが吉。

相対配置、絶対配置の使い分けは状況（や人）によって変わるので
相対指定で配置したい場合と絶対指定で配置したい場合、としか答えられん。

941 ：Name_Not_Found：04/04/24 08:19 ID:???

>>939
相対位置は、本来その要素があった場所からの位置指定。
絶対位置はウィンドウ枠からの位置指定。
　ただし親要素にも position が指定されてた場合はその親要素からの位置指定。

①絶対位置指定する。相対指定の場合、そのボックスの範囲は保持したままになる。
②相対位置は少し「ズラしたい」時に。
　絶対位置は大きく「移動させたい」場合。または「他の要素に重ならせたい」場合。

こんな感じかと。

942 ：Name_Not_Found：04/04/24 08:40 ID:???

type要素やmeta要素をタイプセレクタにしていいの？

943 ：Name_Not_Found：04/04/24 08:40 ID:6WcfM3f9

こんにちは。昨日からCSSを始めました。初心者で申し訳ないです。。
http://www.fairies-garden.com/pso/index.html
↑が今作っているサイトです。

Div要素の段組を今は
------　------
l 　　　 l　l　　　l
l 　　　 l　l　　　l
------　------
という感じで横並びなのですが、

------　------
l 　　　 l　l　　　l
l 　　　 l　l　　　l
------　------
--------------
l　　　　　　　　　 l
--------------
このように下にもう一段つけようと思っています。
申し訳ないのですが、テンプレの方から見つけることはできませんでした。
仕方なく今は<BR>を何十回も打ち込んでDivの外に出るように調節しているのですが、、

Div.column { position: absolute;
background: #F5F5F5 }
#column1{width:58%; left:1%}
#column2{width:40%; left:60%}

ソースはこんな感じでいいですか？
colum3のプロパティをどのようにしたらいいのか教えてください。
よろしくお願いします。

944 ：Name_Not_Found：04/04/24 08:55 ID:???

>>942
いいわけありません

945 ：Name_Not_Found：04/04/24 09:37 ID:???

>>943
>>6じゃダメか？

946 ：Name_Not_Found：04/04/24 09:39 ID:???

>>943
絶対配置じゃ、その段組は難しいかもしれない。
上2つ段が必ず同じ高さなわけないと思うし。

それよりも float 使うほうが楽ぽいよ。

#column1 {
margin-left: 1%;
float: left;
width: 58%;;
}

#clumn2 {
margin-left: 60%;
float: right;
width: 40%;
}

#column3 {
clear: both;
}

こんな感じかと。2番目のコラムは margin-left いらんかもしらん。

947 ：Name_Not_Found：04/04/24 09:49 ID:???

>>946
横レスｽﾏｿ。
それ、IE６で上手くいく？
なんか、前にやったときはwidthを％で取るとおかしな
値になったような気がしたのですが・・・

948 ：947：04/04/24 09:50 ID:???

って、スイマセン。やってみれば良い話ですよね。
ちくっと試してみます。失礼しますた。

949 ：Name_Not_Found：04/04/24 10:02 ID:???

>>943
長さの値には単位が必須です。
フォントサイズ固定は嫌われます。
:alink ではなくて a:link です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>ぷそバト</title>
<link rel="stylesheet" type="text/css" href="http://www.fairies-garden.com/pso/nomal.css">
<style type="text/css">
h2 { margin-top: 0; }
.article { border: solid 1px; margin: 1em 0; }
#whatsup { float: left; width: 59%; }
#contents { text-transform: uppercase; margin-left: 60%; }
#footer { clear: both; margin-top: 4em }
</style>
<h1>ぷそバト－PSOバトル情報サイト for BLUEBURST－</h1>
<div id="whatsup">
<h2>公式更新情報</h2>
<div class="article"><p>ＢＢには新マップやら新モンスターやらが追加されるらしいです。</p></div>
<div class="article"><p>製品版の情報が出ました。</p></div>
</div>
<div id="contents">
<h3>コンテンツ</h3>
<ul>
<li><a href="index.html">Home</a></li><li>Rule</li>
</ul>
</div>
<div id="footer">
<p>このページで使用されている画像は（株）ソニックチームの許諾を得て、キャプチャーしたものです。配布や再掲載は禁止されています。</p>
<address>2002- by sunahara</address>
</div>

950 ：Name_Not_Found：04/04/24 10:12 ID:???

>>949
<ul>
<li><a href="index.html">Home</a></li>
<li>Rule</li>
</ul>

951 ：Name_Not_Found：04/04/24 10:40 ID:???

>>949　なんか匂うな。

952 ：Name_Not_Found：04/04/24 11:10 ID:???

>>950
行数制限に引っかかるから短縮してるんじゃねぇの。