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

Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

■■■■■　注意　■■■■■
質問者　（特に「初心者」）　は、
必ず>>4にある解説サイト （かなりわかりやすい） で
　勉　強　してください。

質問の前に、まず >>5-6 の【FAQ】を参照してください。
【FAQ】でわからなかった場合は、過去ログを検索しましょう。
WinIEの場合は、[Ctrl+F]で検索できます。

また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、>>2（関連スレ）の「バグ辞典」に目を通しておきましょう。

また、「環境を書け」とか「ソースは？」と求められたときは
応じるようにしましょう。回答が早く返るようにするためです。
特にNetscapeについては、ヴァージョンについても必ず明記する
ようにしてください。ネスケは、4までと6以降でまったく別物です。

※　ﾏﾀｰﾘ進行推奨　※

>>2 【前スレ】【過去ログ】【関連スレ】
>>3 【仕様書】【CSS検証】
>>4 【解説など】
>>5-6 【FAQ】

【前スレ】
　http://pc3.2ch.net/test/read.cgi/hp/1034922586/

【過去ログ】
　http://mentai.2ch.net/hp/kako/974/974934062.html
　http://natto.2ch.net/hp/kako/984/984113434.html
　http://natto.2ch.net/hp/kako/992/992992981.html
　http://pc.2ch.net/hp/kako/996/996828258.html
　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
　http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
　http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
　http://pc3.2ch.net/test/read.cgi/hp/1025346520/
　http://pc3.2ch.net/test/read.cgi/hp/1028646616/
　http://pc3.2ch.net/test/read.cgi/hp/1031773943/
　http://pc3.2ch.net/test/read.cgi/hp/1034922586/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
　http://pc3.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト 4 */
　http://pc3.2ch.net/test/read.cgi/hp/1028184718/
・* CSS { イケてるスタイルを："作れ";}
　http://pc3.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
　http://pc3.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 7th Sign
　http://pc3.2ch.net/test/read.cgi/hp/1031763757/

【仕様書】
・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
・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/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの 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
・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
・（　´∀｀）＜ CSS でイケてるデザインサイトリンク集
　http://webcafe.zive.net/~css/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://strict.jp/~sappari/2ch/css.php
・ブラウザによる振り分け
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

【FAQ】

Q: IEで見ると大丈夫なのに、Netscape6（or7）で見ると、横スクロールバーが出てしまうのですが……

A: WinIEのボックス・モデルが間違ってるからです。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
widthプロパティは、要素の内容領域の幅を指定するプロパティですが、
Windows版 Internet Explorer は、ボーダー領域 + パディング領域 + 内容領域 の幅で
計算されてしまいます。
Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table（や、その他のブロック要素）をセンタリングできません。IEではセンタリングされるのに……

A: IEの実装が間違っています。くわしくは下記のページをごらんください。

http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html

Q: CSSで擬似フレームってどうやるの？
A: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html

Ｑ．CSSで段組するには？
Ａ．下記などを参照して下さい。

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://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（ネスケ４でも崩れない段組みの実例）
　http://village.infoweb.ne.jp/~fores/

Q: なんかMacIEやOperaでフロートの表示が崩れるみたいなんですけど？
A: floatさせる要素にはwidth指定が必須（img要素以外）。
　　これ、CSSの仕様書の決まりなんです。WinIEが勝手に補ってるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html

ｽﾏｿ、間違えますた(;;´д｀)

【前スレ】
　http://pc3.2ch.net/test/read.cgi/hp/1038437758/

>>1
>関連スレやリンクは>>2-5あたりに。

「>>2-7あたりに」だな、正確には。次回スレッド立てる人は注意して。
まあ>>2-10位にしとけばいいか。

>>4
ここもオススメ。

Web Site 作成支援 ＞ CSS 解説
　http://msugai.fc2web.com/web/index.html
Academic HTML ::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/

スレ立て乙。これだけFAQが増えてくると、ジオかどこかに
スペース借りて載せた方がいいかもね。

文字等を絶対値で指定するのは止めた方がよいと聞きましたがなぜですか？

>>11
「絶対値」の意味間違ってるだろ

じゃあ、相対的ではない値で〜に直しますわｗ

>>11
http://www.mozilla.gr.jp/standards/webtips0027.html

出力機器の画素の大きさに左右されるためでしたか・・・なるほど、ほかの環境で見ると違って見えるのは、そのためでしたか・・・

>>14
ありがとうございました。

環境によって、見る人によって最適なサイズはマチマチなの。
だから固定するのは良くないってことだろ。

>>14
便乗質問ですが、
ブラウザ側でのサイズ変更を無視するのと反映するのとはどうやってみわければいいですか？

>>17
何言ってるのかいまいち意味不明

>>18
ごめんなさい。
ブラウザ側で、サイズ大、とかやってそれに応じてサイズが変わるサイズ指定、と
変わらないサイズ指定ってありますよね？
それを教えてほしかったんです。
smallとかだったら応じて変わりますよね。そういうやつです。

ようするに文字サイズの絶対指定と相対指定のやり方を教えろって言う事か

>>1読め

>>17
サイズ指定時の単位。
>>14のリンク先に書いてある。

ちなみにIE以外なら絶対指定でもブラウザ側でサイズ変更可能。

IEでも
「ツール→インターネットオプション→（全般タブ）→ユーザー補助→Webページで指定されたフォントサイズを使用しない」
とすれば固定文字のリサイズは可能。面倒だが。
てか、こんな良く使いそうな機能を分かり辛いところに置いているIEは糞。

>>10
なんとなく作ってみますた…。
需要なさそうだったら消します。
http://hiro777o.fc2web.com/omega/2ch/css000.html

>>23
乙。でもCSSスレ派生なんだし、もうちょいまともなHTMLで書いて欲すぃ。

>>21
> >>14のリンク先に書いてある。
相対指定と相対単位は違うんじゃないの?

>>20
1には見当たりませんでしたが、どれでしょうか？

>>17
お前は>>1に書いてあるFAQ等への誘導が読めんのか？日本人じゃないのか？

>>25
相対単位って何だ

>>27
ttp://www.mozilla.gr.jp/standards/webtips0027.html

>>27
相対指定はブラウザ側のフォントサイズ指定に相対的に変わるやつだろ？
相対単位はディスプレイに対する相対なんじゃないの？

言葉遊びか

>>30
じゃ、なくてだな。
pxは相対単位だけど、絶対指定なんじゃないの？って言ってるんじゃなくて尋ねてるんだよ。
どうなん？

cssにしてインポートにすれば、NNに適応しない、って出来ますが、
html自体にスタイルシート書いて、NNに適応しない、って方法ないですか？

また凄い事言うね

>>33
どれについてのﾚｽだ？

>30
>言葉遊びか

>33
>また凄い事言うね

　独　り　言　は　よ　そ　で　や　れ

落ち着けよ

float による段組の質問です。

divA〜I{
　width：49%;
}
の際、

AB
AB
CB
CD
CD
CE
CE
CF
GF
GH
IH

わかりづらいかもしれませんが、アルファベット一つが height の一単位だとお考え下さい。
この場合、段落Cが一番縦に長いということになります。
このような組み方にするには、どのように float (＋ clear ？) を指定すれば良いでしょうか。

俺もFAQをなんとなく載せてみたんだが、かぶったな。
http://nira.s25.xrea.com/FAQCSS/ls_00.html
もうすこし完成してから・・・と思ったけど一応宣伝（ｽﾏｿ

>>37
左に配置したいボックスにfloat:left。
右に配置したいボックスにfloat:right。

>>39
試してみると分かりますけど、事はそう単純ではないようです。バグ（？）が出る出る

>>39さんの方法で駄目だとしたら、もうfloatでやるのは無理なんじゃないですか？

ページ最下方のリンク部に触れると――つまりhoverになった瞬間、
divAとBの上にぐばばばっとマージンが空いてしまうんです。

win2000 + IE6 と、win98+ IE5.0 で同じ症状を確認しました。
…別のスレッドに誘導されそうだな

>>37
ACGIをさらにDIVでくくる、というのは？

>>43
そうすると文章構造がおかしくなります。
ソースには上から順に ABCDEFGHI となっているわけで、
<div>ACGI</div><div>BDEFH</div>　としなくてはならなくなってしまいますから。

>>44
差し支えない範囲でソースを晒してくれ。
>39の方法で当方のIE5とIE6では問題なく表示されている。
フロートだけではなく、他の部分との関係でおかしくなっていると思われ。

てっとりばやくサイトのアドレス晒させていただきます。
何しろ、もうかれこれ数時間、HTMLとcss弄って問題の個所が見つからないものですから。
客観的にソースを見通してくれる方が必要なのかもしれません。
http://www.homoon.jp/users/www/goddamn/
最下方の「モチーフ」あたりのリンクを触れてみて下さい。

別段異常は見受けられないが。
やや重いくらいで。

>>40
問題なかったよ。
どんな問題が出るの？

>>46
関係ないけど
http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on;URL=http%3A%2F%2Fwww.homoon.jp%2Fusers%2Fwww%2Fgoddamn%2F

なんと。
具体的に言いますと、「モチーフ（？）」の「スカルパゴタ」にカーソルを乗せた瞬間、
AとBにあたる「新着」と「Information」が、強制的に最上段の画像から3000pxばかり下に下がります。

その後、文字サイズを変えたりリロードする事によって一時的に直りますが、再び同じ事をすると…、といった感じです。

>>46
わ、これも。
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.homoon.jp%2Fusers%2Fwww%2Fgoddamn%2F&warning=1&profile=css2

>>50
ならないよ。
XP+IE6

>>50
＞NN 4.x は今すぐ窓から投げ捨てろ
気持ちはわかるけど、インポートにすればちゃんと見れるんじゃないの？
勿体無い気が。

>>49
2chのスレッド載せてるため半分妥協…していたところに
半角カナ使用者保護運動　に背中を押されました。
http://homepage1.nifty.com/VET06031/kanaok/kanaok.html

>>51
げ。恥ずかしい。

>>50
セキュリティ面でも危ういことを知らない 4.xユーザーに、
「…このブラウザまずいのかなあ？」　と気づいてもらえればいいなと思って書いてる
と見せかけてただ単に NN4.ｘ がうざいだけです。

IEを5.0 から 6 にアップデートしたら問題がなくなりました。IE5.0 の float のバグだったのでしょうか。
答えて頂いた方、ありがとうございました。

>>55
俺宛だな。
まあ、俺もNN4.xにの人はバージョンアップしてほしいな、って思うけど、
俺の場合「NNに対応できない人」って思われたらイヤだなあ、と思う気持ちのほうが強いな。

>>56
NN4.x だけじゃなく IE5.0 とかも「バージョンアップして欲しいブラウザ」にカテゴライズされてはいるけれど、
それでもやっぱ NN4.x が最も嫌われているんだって事実を突きつけてやらないと、
低スペックでバージョンアップ出来ないユーザー以外は気づかないんじゃないかな。

とりあえず、スレ違いですね。

>>46
「 ruby はHTMLの要素ではありません」 なんてエラーを出すチェッカーに囚われるのもアレかもしれない。

>>57
rubyはIE独自拡張じゃなかったっけ？

>>58
XHTML1.1

スレ違いだが、XHTML.1.1でもルビ使わん方がいいぞ。

>>60
何ゆえ?

>>60
俺も知りたい

音声ブラウザで二重で読み上げられる。
rubyはacronymのように、MicrosoftがW3Cに対して仕様に加えるよう働きかけたもの。

将来、音声ブラウザが Ruby の読み上げに対応したら有益になる可能性もある。

つまり対応していない現状では使わない方が良い。

二重になる場合はスタイルシートで読ませないようにすればいいだけじゃん。

文意が破壊されるほどのもんじゃないからいいでしょ

>>66
ところがその対応も甘い。 音声ブラウザ使ってみれ。
>>67
もちろん駄目なんて言ってない。使いたければ使えばいいし、
使いたくなければ使わなければいい。

ｽﾚ違いなのでこの辺で勘弁。

>>68
参考になりました。ありがとう。

floatで段組を作るのって、tableを使うのと同じで、基本的に反則だったりしますか？

>>70
大丈夫

>>70
見栄えをCSSに任せる、って事なんだから無問題。
というか、それが反則だったら「レイアウト自体反則」と言う事になりやしまいか？

rubyはspan titleでごまかせるけど、CSSの対応を考えると……だしな。

>>38
で紹介されてたけど、
「疑似フレーム」の部分ってなんでリストマーク表示されないの？

木になってソース見てみたけど、問題はなさそうだし。

>>74
これかも。
http://members.tripod.co.jp/cssbug/detail/winie/b080.html

>>75
それっぽいんだけど、その下は正常に表示されているし。
なんか不思議。

#Iこういうことが結構あるから困るんだよな

うっかり"margin:0px:"と指定していたのが原因でした。
首釣って逝ってきます。

>>1に貼るテンプレ作ってみたよ。
http://fake_lint.tripod.co.jp/css.html

追加したいこととか、修正するとことか教えて。

>>78
それぞれの質問にIDがちゃんと振ってあっていいな。これなら参照し易い。
余計なお世話だけど、ddの下マージンかdtの上マージンをもう少し広めに
取った方が読みやすさが上がると思うよ。

>>79
ども。直してみますた。

　　　　_、_ 　ｸﾞｯｼﾞｮﾌﾞ!!　　　　　　　 　
　 　（　,_ﾉ` ） 　 　　n　　 　
　￣　　 　 ＼　 　 （ E）　　　　
　ﾌ 　　　 /ヽ ヽ_／／ 　　

div二つをfloatを使って段組にして、さらにそれを大きなdivで囲って
┏大枠━━━━━━━━━━━━┓
┃┌段組１ ──┐┌段組２ ──┐┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　│└─────┘┃
┃│　 　 　 　 　 │ 　 　 　 　 　 　 　┃
┃│　 　 　 　 　 │ 　 　 　 　 　 　 　┃
┃└─────┘　 　 　 　 　 　 　 ┃
┗━━━━━━━━━━━━━━┛
のように大枠を作りたいのですが、実際にやってみると、段組２のサイズに合わせて
┏大枠━━━━━━━━━━━━┓
┃┌段組１ ──┐┌段組２ ──┐┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　││ 　 　 　 　 　│┃
┃│ 　 　 　 　 　│└─────┘┃
┗┥　 　 　 　 　 ┝━━━━━━━┛
　 │　 　 　 　 　 │
　 └─────┘
の様になってしまうのですが、何か対策はありますか？

実にAAを使うのが上手い　+10点

>>82
height

>>82
大枠の縦幅指定しちゃダメなん？

>>84-85
縦幅は色々変わるもんで……

自己解決しました。さらにこれを囲うdivを書いて
そいつにborderを指定したらなんとかなりました。

DIV厨…

段組2の次にhrでも追加して{ clear: left; visibility: hidden; }
スペースは大枠のpaddingで調整
div追加するよりはマシな程度だけど

IEなら大枠にwidth指定するだけで何故か解決

質問どっす。
borderをdottedの1pxにすると、たまに線が途切れたりするのですが、何ぞ対処法はあります？

あ、ブラウザはIE6です。

うーん。
今色々まわってみたけれど、他所のサイトさまではいくらスクロールやサイズ変更しても
まったく途切れないんですよ。いいなあ丈夫だあ。
なんでうちだけ消されにゃあかんのー。

>>90
その他所さまのサイトのCSSを見て勉強すれば？

>>82-88
なぜ誰もここを見なかったのか？

Internet Explorer (Windows) CSSバグリスト
http://cssbug.tripod.co.jp/detail/winie/b079.html

heightプロパティの注意点〜内容がfloat要素の場合
http://www.mozilla.gr.jp/standards/webtips0021.html

WinIEのfloat解釈が間違ってるんですよ。

http://pc3.2ch.net/test/read.cgi/hp/991666454/683n
683 ：Name_Not_Found ：02/11/19 01:21 ID:???
【IE6】
http://cssbug.tripod.co.jp/detail/winie/b079.html
フロートの後続フロー制御を設定したbr要素が親要素に包含されない
<div style="border:2px solid red;">
<div style="float:left; width:50px; height:50px; background:aqua;">Float</div>
<br style="clear:left;">
</div> ←ソース例にこのdivの閉ぢタグ、脱けてますよ

これへの対処法。
親divに値がauto以外のwidth（heightでなく）を指定してやるとなぜかうまく包含してくれる。
しかも<br style="clear:left;">は要らない。

ちなみにN6の場合、親divにposition:relative;を指定してやると
やはり<br style="clear:left;">無しにfloatさせた子要素まで包含する。
Opera6だけはどうしてもclearさせる要素が後続しないと包含してくれぬ。

nowrapはcssでどう書けばいいんですか？

htmlだと
<td nowrap></td>
ですよね？

white-space: nowrap;

何度も同じ質問すんなよ。
そのくらいぐぐれ。

ということはFAQですか？>>94-95

FAQですらないですよこの阿呆んだら

ということはFuckUですか？

堕ちていく、WEB制作板。ここに見たり

>>100
惜しくも同意

【ＦＡＱ】
Ａ．いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
Ｑ．下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱを見なさい。
いままでの 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

失敗、やり直し。これでいいか？　>>94-98

【ＦＡＱ】
Ｑ．いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
Ａ．下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（>>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

CSSを記述する上でMac IEバグ対策とは具体的にどんな事をいうのですか。記述の方法も教えて下さい。

>>2-4は見ましたか？

・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.tripod.co.jp/index.html

>>104
ここでも読んでてください。
↓
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/
Internet Explorer (MacOS) CSSバグリスト
http://members.tripod.co.jp/cssbug/detail/macie.html

被りますた。

これもな。>>104

・ブラウザによる振り分け
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

・ http://cssbug.tripod.co.jp/detail/macie/b009.html

ありがとうございますた。

CSSでtableのcellspacingにあたるものってないですよね？

>>110
border-spacing
(border-collapse:separate;の場合のみ)

IEは実装されてなかったはず。
N6とOperaはOKだったかな。

文脈セレクタで親要素に id を指定するのは不当ですか ?

elemA#id elemB や elemA#id > elemB としてもセレクタとして機能してくれるブラウザがないようです。

>112
p {color: black;}
p em {color: red;}
p#test em {color: blue;}

<p>normal <em>emphasize</em> normal</p>
<p id="test">normal <em>emphasize</em> normal</p>

ちゃんと効いてるように見えるけど？（IE6，Moz1.2.1）

>>113

このソースだとちゃんと効きますね。
もうちょっと調べてみます。

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

他のスレを見たのですがよくわからなかったので、
質問させて下さい。

OS X10.2.1 ブラウザIE5.2だとfont-family
だけ指定通りに表示できません。
Win IE5 だと表示できるのでバグなのかな？

ソース↓
<style type="text/css">
<!--
font.a{font-family:"MS Ｐゴシック,Osaka";font-size:15px; color:#333333;line-height:130%;}
font.b{font-family:"Times New Roman,Impact";font-size:15px; color:#cc0000;line-height:190%;}
font.c{font-family:"Arial,Verdana";font-size:15px; color:#0066cc;line-height:300%;}--->
</style>

何か原因とかあれば教えて下さい。

＞font-family:"MS Ｐゴシック,Osaka";
font-family:"MS Ｐゴシック",Osaka;

>>116
上のがミスです　すみません
正しく記入してもダメなのです。

＞MS Ｐゴシック
ＭＳ Ｐゴシック

MacのIEで欧文フォントを使用したい場合はその要素にlang="en"とかを入れなきゃいけない。
もちろんlang="fr"とかlang="de"とかでもいいけど。
要は親とかで日本語が指定されてるだけだとたとえ選択されてる内容が半角文字だけでも、
日本語ってことで欧文フォントは適応されないんよ。
2バイト文字も適応されないんなら、ちょっとわかんない。

W3C信者はlang属性入れてるだろうがな。

<html lang="ja">
　　　　略
<p>This is a pen.</p>
<p>これはペンです。</p>

で font: "Times New Roman","ＭＳ　Ｐゴシック" ;
だとMSPゴシックに全てなるという話ですか？Macで。

>>120
そそ、そういうこと。
もっと言っちゃえば

<html lang="ja">
　　　略
<p>This is a pen.</p>
<p lang="en">This is a pen.</p>

p { font-family:Impact }

で、Ipmactが適応されるのは下だけ。
まぁそれが>>115の直接的な原因かは分からないけど。

http://www.goodkey.net/~testman/images/test.gif

こちらのような
.EXEの部分だけ小さく、上付の表示を
CSSで再現するにはどうすればいいですか？
よろしくお願いします！

>>122
ＣＳＳでもできるが、その前に、ＨＴＭＬで<sup>ってのは知ってるか？

見た目の定義はCSSでやれ

>>124

でもそのために無用なマークアップをしなくてはならないわけで。
文脈セレクタって全然文脈じゃないよなあ。

contextには前後関係という意味もある。

>>124
<p>2^4は16です。<p>
これをソースには手を加えずに、CSSだけで
<p>2⁴は16です。</p>
と同じ表示になるようにしてください。

「2^4」っていうのがそもそも「^」が階乗ですって記号（マークアップ）じゃんか。
わかる？

じゃあ
24
か。

MathMLのマネするとこうかな
<span class="superscript "><span class="number">2</span><span class="number">4</span></span>

結局SUPとかわらねえｗ

変わらないってか、そもそもマークアップの領分だしな。

＞<p>2^4は16です。<p>
の4だけを拾ってスタイルを適用するのは無理。
以下のやり方で<suq>っぽくはなるが、結局24を何かで囲う必要が有る。

hoge{
　　font-size:0.5em;
　　line-height:90%;
}

hoge:first-letter{
　　font-size:2em;
　　display:block;
　　float:left;
}


<p><hobe>24</hoge>は16です。</p>

えらくミスタイプが多いね

×　<suq>っぽく　→　○　<sup>っぽく

数式や化学式は<sup><sub>で良いんじゃない？
でないと，スタイルシートを理解しないブラウザーでわけわかめになるし．

レイアウトのための上付き，下付きだったら，<span>とか(.exeを小さくするのが強調であるなら)<em>とかでかこって，スタイルを適用するしかない．

とりあえずspanを使うと

span.exe {
vertical-align: super;
font-size: small;
}

名無しさん<span class="exe">.EXE</span>

overflowでの擬似フレームを使っているのですが、
HTMLでいうフレームで分割した二つのページの間に、どうしても線が入ってしまいます。
この線を消すにはどうしたら良いのででしょうか？ご教授お願いします。

>>136
ソースとか使用ブラウザとかの情報を出してくれぬと返答できませんって。
borderでも弄っておきなさい。

height(又はwidth)とoverflowしか使わない擬似フレームでどうしたら線が出るんだ？
そこが知りたい。
まぁ、>>137と同意見ってことで。

>>4 の中でも、その他でも構わないのですが、
何処のリファレンスが一番お勧めだと思われますかぁ？

皆様ありがとうございました！
すごく勉強になりました！
感謝です！

>>139
ttp://www.doraneko.org/misc/i18n-format/WD990127.html

見た事無いのがいっぱいだけど、
justifyとかきれいですね。さっそく使いまくります。

>>139
>>3
一次情報にかなうリファレンスはないと思われ。

>>143
オススメ、って事はまあ、かなうかなわない関係なくいいと思うやつのことなんじゃない？

>>136です。
>>136での問題は解決しました。
>>137-138どうもすんませんでした。

ふと疑問に思ったことがあるのでまた質問・・・。
擬似フレームで、ocerflowで左右に分割されたページがあるとします。
左のリンクをクリックすると、分割された右の部分のみページを切り替えられるように
することはできるんですよね？

「左」のリンクをクリック
┏━┳━┓　　　　┏━┳━┓
┃左┃右┃　　⇒ ┃左┃右┃　　
┃　 ┃　 ┃　　　　┃　 ┃　 ┃　　　　
┗━┻━┛　　　　┗━┻━┛　　　　
　　　　　　　　　　　右の領域のみ指定されたページに変化

もしできるのでしたら、普通のフレームならば「target="aaa"」なんてやるターゲットの指定は
どうやってやればいいのでしょうか？

IE6、OSはME。
ソース（ところどころ略しました）
<style type="text/css">
<!--.header2,.footer{;width:20%;}
.content{width:80%;}-->
</style>
<div class="hidari">左</div><div class="migi">右</div>

あくまで擬似です

>>145
できません。>>146の言う通りです。

つーか一番下のソースさ、肝心なところを略してどうすんの。

へぇ、あくまで擬似ですか。
わかりました。ありがとう。

スクロールバーを左に表示したりできるんですか？

>>149
できない。
bodyにdir="rtl"とかするしか。

質問です。
戻る　　　　　　　進む
↑こんな感じで
一つの行の右端と左端に文字を書いて真ん中は空けたいのですが
スタイルシートでこの様にテキストを配置する方法はありますか？

できるじゃん。
body{direction:rtl;}

鬱打詩嚢…


スクロールバーを変えたいだけの理由で使うのはやめといた方が良いと思うけど。

>>151
<ul>
<li class="back">戻る</li>
<li class="go">進む</li>
</ul>

li{width:10em;float:left;}
li.go:before {content:"御飯が御飯が";}
li.go:after {content:"君。";}

全てコピペはおすすめできません。

>>153
レスありがとうございます。要するに
<li> もfloatにしたら横に並べることが出来るんですね。
色々学習してきます。

テーブルを表示windowの真ん中に表示させる正しいやり方を教えてください。
table{
text-align:center
}
でやるとＮＮ７で真ん中によってくれません。

>>155
激しく既出。ちょっとは(ry

>>156
すいません、ＦＡＱでしたね。逝ってきます

<div>で囲ってaling=center

リストをセンタリングしたいのですが
<ul>のclass指定で
list-style-type: none;
で「・」を見えなくして
<li>のclass指定で
text-align: center;
にしたら「・」の分字下げされてしまい、
センタリングしたいのにちょっとずれて不格好です。
文字の部分を完全にセンタリングする方法はありますでしょうか？

>>159
list-style-position:inside;

と、確認もせずに書いてみる。

>>159
ないっちゃ！
HTMLによるリストの意味を考えるっちゃ！

http://www.mars.dti.ne.jp/~fuming/intro.htm
ここのようなサイトデザインにしたいんだが、どうすればいい？
擬似フレームじゃないし、段組レイアウトとは少し違う気がする・・・

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

>>160
試してみたけど、字下げはされてしまうようで、ダメでした。

>>161
そうですか(´･ω･`)
デザインを考え直します。

>>162
floatかpositionじゃないの？
CSSファイルは見てないが。
てか、少しは自分で見ろよ。

>>164
positionだったYO!
外部ｽﾀｲﾙｼｰﾄを見れる事にはじめて気づいた

>>159
ulのmarginを0。

>>162
positionかfloatを判断する場合、
画面サイズ(ウィンドウ)をだんだん小さくさせて、
右か左のブロックが下に移動すれば(回り込みが解除されれば)float。
ウィンドウを小さくしても横スクロールバーが出るだけで
左右の状態が変わらなければposition
って漏れはやってる。(いちいちCSS見るのが面倒なもんで

岡田克彦ファンクラブからのご案内です。ご高承のとおり、岡田克彦氏の卒業した早稲田大学政治経済学部
と、ひろゆきの卒業した中央大学文学部は比較にならないほど差があります。中央大学文学部のような
ヘボい大学に共通しているのは、文化水準が低いという事です。18歳から22歳をヘボい大学で過ごすという
ことは、感受性において致命傷と言えます。２ちゃんねらーの大半は岡田克彦氏に比べて、著しい低学歴で
頭が悪いだけでなく、感受性も愚鈍で腐っているという、取り返しのつかない状態なのです。
せめて、http://www.geocities.co.jp/MusicHall-Horn/1091/で、岡田氏の作品に触れましょう。

W3CのCSSのページのように影をつけたいのですが
一体どうすれば出来るんでしょうか？

http://www.w3.org/Style/CSS/

>>169
マージンで調整している模様。
ttp://www.w3.org/Style/map.css

>>169
CSS3を待て。
ttp://www.w3.org/Style/CSS/current-work
現状ではpositionかmarginで調整するくらいしかない。

ブロックAとブロックBがあるとして。
この2つのブロックを横に並べたい場合、
{ float : 〜 }と{ display : inline }、どっちが適切だと思いますか。
質問というか…みなさんのご意見を聞いてみたいです。

float

補足。ブロック内容は共に1行です。

>173
やっぱりfloatでしょうか…

好きにしろ

用途に合った方を選ぶ

>>172
floatとインラインボックスの特性を調べるといい
あとは>>176

すみませんが教えて下さい。

AとBの二つのテーブルがあり、
Aテーブルの中の指定した場所へ、
Bテーブルを置きたい場合はどのようにしたら良いのでしょうか？
宜しくご教授下さいませ。

CSS切り替えスクリプト使ってるんですけど、
改行を消したいデザインと消したくないデザインがあるんですけれど、
この場合前者の時<br>を{display:none}で消してもいいのでしょうか。
文法的になにか引っかかるような引っかからないような。

>>178
CSSとは無関係だよ。
Bテーブルを入れたいAテーブルのセルに入れればいい。
ただ何重にもテーブル内にテーブルを入れると（入れ子といいます）
処理が重くなる（PCスペックによってはフリーズする）ので入れ子は
2〜3程度で留めてください。

例えばAテーブルが3行3列で真中にBテーブルをおきたい場合の
ソースはこんな感じ↓
<table>
<tr><td><td><td>
<tr><td><td><!--ここにBテーブルのソース--><td>
<tr><td><td><td>
</table>

>>180
……はい？

>>181
>>178
＞AとBの二つのテーブルがあり、
＞Aテーブルの中の指定した場所へ、
＞Bテーブルを置きたい場合はどのようにしたら良いのでしょうか？
こういう書かれ方したら、>>180のような答えが返ってきても仕方ないんじゃない？

親要素や子要素って自分で設定する事は無理ですか？

>>183
意味がよくわからん

>>183
HTMLの親子関係における制限（addressの中にブロック要素を記述できない、とか）を
CSSで変更（displayプロパティ等で）できるかどうか、という意味かな。

だとしたら、できない。

どういうことをしたいか日本語で説明できないのなら
ポンチ絵でも描いてどっかのうぷろだ借りてのっけて
誰か親切な人がそれを見に行ってくれるのを待つのはどうか？

ニポン語もロクに使えない香具師がHTMLなんか使うな！

…オレモナ！

ゼロから勉強してる。どうせならちゃんとレイアウトはCSSで、と思った。
沢山のページのソースを見まくっているが、
例えば文字の指定ひとつとっても、HTMLからの指定・CSSからの指定、と
ぐちゃぐちゃに混在しているページが多いと思ったんですが・・・
こういうものなのでしょうか？
いきなりCSSまで突っ走って勉強してるので、難しいと感じる今日この頃だが・・・。

>>188
どうせなら
ttp://www.asahi-net.or.jp/%7Esd5a-ucd/www/

ボケボケな質問で申し訳ないのですが、
フォーム部品のうちラジオボタンへはＣＳＳが適用できますが
チェックボックスには適用できないのでしょうか。
ネスケ7.0やIE5.2（Mac版）などでチェックしたのですが
チェックボックスへのＣＳＳ適用がきちんとできているものはありませんでした。

かといって
input { border:2px; }
のように一括指定をすると、チェックボックスの回りを囲むように
ボーダーが出て醜くなるブラウザもあるので、
チェックボックス以外のフォーム部品に一括指定できるような
やり方がないかと思っているのですが、何かありませんでしょうか。
よろしくお願いします。

>>190
チェックボックスにspan使ってclassでも指定したら

>190
input[type~="radio submit reset"] {border: 2px;}
とかそんな感じ？NN7やMacIEなら対応してるかもしれない．
キーワードは「属性セレクタ」
WinIE6が未対応だと思うから，現実的には >191さんの方法かな．

HTMLとCSSをポツポツ始めたのですが、わからない事があると
ソースを表示させて、例えばHTMLなら表示させて見ることが出来ますが、外部CSSファイルってどうやったら見ることが出来ますか？
CSS、むずかししくて頭痛くなります。

>>188
アホが多いんだよ

font-sizeで%指定できますよね？
その%指定で100%は何を基準としてるんですか？

>>193
外部CSSファイルのURLをブラウザに打ち込めばエディタで表示されるよ。

>>196さん！！
ありがとうございます。
なんのお礼も出来ませんけど、ありがとうございます。

外部とはいえ同じ所にあるんですもんね、もっと頭を働かせねば...。　

>>195

親要素のサイズ。

質問です。
:first-letter擬似要素のmarginに負の値を指定したところ、
IE6.0では効いているんですがN7、Opera7.0では無視されました。
これはIEのCSSの解釈が間違っているんですか？

>>199
仕様によるとIEの動作の方が正しいです。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#first-letter
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/box.html#margin-properties

>>200
本当だ、どうもありがとう。実装の問題ってことなんですね。
spanで代用しようかな・・・

ｶﾞｲｼｭﾂだったらスマソ。first-letter絡みで質問です。
<h1><a href="2ch.net">hoge</a></h1>
h1:first-letter{font-size:3em;}

アンカーにカーソル乗せるとMozでfirst-letterが無視されるのですが
これはバグ？
ちなみにWinのopera6.05、IE5.5では大丈夫です。

CSSでお勧めの書籍あったら教えて下さい。

>>202
こっちで聞いたほうがよいかと
ttp://pc3.2ch.net/test/read.cgi/hp/991666454/

>>203
仕様書が一番
ttp://www.w3.org/TR/REC-CSS1
ttp://www.w3.org/TR/REC-CSS2/
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/index.html
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/index.html

>>202
バグだと思う。
以前、その場合でアンカーにポイントしなくてもh1:first-letterが効かなくなる問題があったし。
修正漏れかな。

>203
自分も仕様書が一番だと思うけど、
個人的にはモニタやプリントアウトものより本の方がいいから、これ。
そこそこよかったと思う。

ttp://www.shuwasystem.co.jp/~SHOKAIdic/

ちょうど昨日新しいやつ(赤いの)買ったばっか(藁

>203
206の青いやつ使ってる。

>204-205
れすサンクス。バグスレに報告しておきます。

>207
青いのは赤いのに比べてCSSパートが弱い気がする。
読んだのは前バージョンの方の2冊だが。

あと、ちょっとだけ割高だし。

cssでtableの枠の色を設定できますか？

>210
できます。
table { border : #ff0000 1px solid ; }とか。

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

http://www.annie.ne.jp/~sheepers/komain.html
http://3110.sunnyday.jp/
http://cheser25.hp.infoseek.co.jp/
http://phoenity.com/
http://www.users.yun.co.jp/~souichi/
http://d-o-b.ciao.jp/^o^/
http://www.windfarm.co.jp/

CSSの見本になるかな？

>>213
一番上はtableじゃん

>>213
イケてるデザインサイトにあげられたもので、
しかも好評ではなかったものがやたら入ってるのはなぜ
ttp://www.users.yun.co.jp/~souichi/
ここは好評だったけど

cssで<select>のハンドルやリストや選択カーソルなどのコントロールの色を設定することはできますか？

すみません、ちょっと質問させて下さい。
当方IE5.01sp2を使用しております。
cursorをCSSで指定したいのですが、
n-resizeとs-resizeはネスケ6で差異がありませんよね？
IE5.01ではそれぞれ、上下の矢印になるのですが、
IE5.5以降ではどう表示されるのでしょうか？

>>217
サポートされていますよ。

（ちょっと考えれば分かることだと思うんだが…）

>>217
カーソルは、ユーザーが指定しているそれになる。
例えばくまちゃんカーソルを使ってる人のブラウザでは、くまちゃんクロスカーソルになったりしてるわけ。
クールなサイトのつもりでも、よそでは滑稽になってるかもしれない、という話。

#カーソル変更は、視覚的に馴染まないという理由から嫌がる人は多いですよ。

本当に初歩的な質問で申し訳ないんだけど…

　CSSのセレクタ名に記号って使っちゃいけないの？
　使えるのはUAが勝手に通してるだけなの？

微妙にスレ違いな質問で申し訳ないんだけど…

　text-decoration : blink; に対応しているブラウザってあるの？

……NN4とかな。

Netscape6以降

>>222
ほんとだ。ちゃんと点滅したよ！ ありがとう！



使わないけどな。

>>223
ほんとだ。どっかに「N6は非対応」って書いてあったの鵜呑みにしてたよ！ ありがとう！



使わないけどな。

>>220
セレクタには当然記号は使われるぞ。
#.:[]|=~、全部セレクタのシンタックスの一部だ。

、も使えるんだ

>>227
、日本語変ですよ

>>228
、どこがどう変なのか教えてくれ。

>>229
、そんなこともわからないんですか？
、小学校から（略

<del> >>227-230 </del>



del { font-size: 500%; }

透明あぼ〜んをして。

↓つぎどうぞ↓

いわゆるテーブルレイアウトをテーブルを使わずにやるには
どのCSSを使用したらよいのですか？

ＦＡＱの段組についてを見よ。　>>233

「どのCSS」っていうのも凄い質問だな。
HTMLにおける「タグを教えてください」に通じるものがある。

＞218
サポートされてるのは当然でしょうけど、
ie5.01とネスケ6じゃあ後者のほうがcss対応が優れていることを考えると、
IEの新しいバージョンがネスケと同じ表示方法になっているかも
とか思ったのです。
nが北でsが南でしょうから、それぞれの方向に矢印が出るほうが正しいとは思うのですが。
でも、219で言及されてるクライアント依存の件ですが、
上だけとか下だけの矢印を、windows上で見る機会がないので、
やっぱ上下どっちにも矢印ってのが正解なのかな、う〜んわからんです。

＞219
くまちゃんカーソルによる説明は、自分を納得させるのに充分過ぎました。
使わないことにします。

カーソル画像作って、urlでその画像を指定する。

ということに触れないのは何かの陰謀ですか？

>>237
カーソル変更させたくないからじゃない？
視覚的に、も理由なんだけど。

<div class="abc"></div>で囲んだら下側のマージンだけが無視されます。
cssには
.abc{margin:5% 5% 10% 180px;}
としか書いてません。
最初はこれでちゃんと表示されてたんです、なのにソースいじってたら…。

ブラウザはIE5.5です。NN7で見たらちゃんと下に余白ができてました。
なんとかしようと頑張ってたらいつの間にかこんな時間だしもうﾀﾞﾒﾎﾟ(;´Д｀)

>>239
質問じゃないならスレ違い。

>>236
カーソルなんて
windowsIE5
windowsIE6
macIE4
macIE5
windowsのNN7
macのNN7
LinuxのNN7
全部ちがうでつよ。

>>239
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/

質問です。

<dl><dt>hoge</dt>
<dd>hage1</dd>
<dd>hage2</dd></dl>

というのがあったときに
hoge　　hage1
　　　　　hage2
という風に、<dd>要素を縦にそろえる方法ってありませんか？
hogeとhage1は同じ行に、
hage2以下をhoge1の下に来るようにしたいのですが……。

>>243
dt { float: left; width: *em; }
dd { margin-left: *em; }
定番のこれでできるけど
IEは二つ目以降のddがちょっとズレる。
dtのheightを調節するしかないかな

>244
ありがとうございました。
dtのheightに少し大きめの値を持たせてやることで
上手く整形できました。

やっぱり
<dl compact>
を使うのは邪道なの？

ｉモードサイトをやっているのですがPCからの見た目も考えて、
外部スタイルシートを使っています。
そこで質問です。。。

「ｉモードからアクセスした場合、外部スタイルシートは読み込まないから
外部スタイルシートが数KBあったとしても、パケット通信料に掛かる負担は
head内に埋め込んだタグの分だけである・・・」

という自分の常識は世間の常識でしょうか？

＞世間の常識でしょうか？
アンケートでもする気ですか？

無駄なファイルを読み込まないのは仕様です。

>>247
余談ですが、WAP2.0は、cssを読み込みますよ。
背景画像すらも読み込みます。

＃はじめて見たときびっくりしましたもん。

>>248
どうもです。失礼しました。

>>249
ほんとですか？
あながち余談でもないので、勉強してきます。。。
未だによく理解できないEZ Web、、、恐るべし、、、

要素を float させる際に指定する幅って
max/min-width でもいいのでしょうか。
width で決め打ちしないといけないのでしょうか？

>>251
min-widthしか指定してないと、100%にされちゃうかもしんないので、
どうせやるならmax-widthの方がよろしいかと。

classとidの違いって何？
全部class属性でごり押しできたけど。。
idで指定するのってなんか意味あるのかな？
くだらない事だけど教えてもらえたら嬉しいです。

正直、「またか」と思います

>>253
すごい既出だし過去ログにあるから探して見るといいよ。
自分的には全部class指定でいいと思う。
ここはid属性じゃないとダメ！ってケースあまりない気がするし。

IE5で、
td { width:10em; }
のようにしても、テーブル全体の幅がブラウザ幅を越えないように
詰められてしまいます。
横スクロールバーを出してでも指定どおりの幅を取る方法ありませんか？

>>256
table に width 指定

>>257
できました。完璧！
ありがとうございました。

>>253
すごい既出。
前に出ていたCSS-FAQのサイトに書いてあった気もするが。

idは hoge.html#ID でアクセスできる。

>255
・リンクの飛び先
・javascriptのgetElementById
・perlなどで処理する時の目印
etc
CSSが先にあってclassやidがあるわけじゃないよ

font-size : small;を
IE6でみると<font size=3>の大きさなのに
NN7でみると<font size=2>の大きさになってしまうのは仕様ですか？

はい

便乗。
font-size : small;って、Win、Mac共にIEでは意味無しでしょうか。
mediumと全然変わらないように見えるんですが。

って言うか、素直に％なりemなり使え
意味が無いとは言わんが

>>260
スタイル適用させるためだけの目的でclass振るかid振るか迷ったら
とりあえずclassを振ればいいんじゃないってことっす。
言葉足らずでごめん。

font-size:mediumはIE6も標準モードならNN7と同じ大きさ。

CSSマンセーなページ色々見てて少々ウンザリした。・・・
「絶対指定」で二種類のフォントサイズを使ってるが、小さいほうで16px。
これでも、アクセシビリティの低いページなのか？
もひとつ、「画像オフでエロ"画像"ページ巡回するユーザー」とか想定すべき
（出来る）ものなの？ ていうかそういう一面に触れようともしない（CSS以前でね）
のが不自然に感じるのですが。皆さんの考えはどう？

分かりやすく書き直してくれ

>>267
> 「絶対指定」で二種類のフォントサイズを使ってるが、小さいほうで16px。
　絶対指定そのものがウザい。

> もひとつ、「画像オフでエロ"画像"ページ巡回するユーザー」とか想定すべき
> （出来る）ものなの？ ていうかそういう一面に触れようともしない（CSS以前でね）
　そんな特異な例なぞサンプルにならんでしょ。

「絶対指定」は一部のブラウザでは実際に固定されてしまうわけで
電子媒介の利点といえるスケーラビリティを損なうような行為を
わざわざする必要はない

>267
16pxの絶対指定でのアクセシビリティは、
弱視のひとにとっては低いと言えるでしょう。
まあ、絶対指定のアクセシビリティは、どこで線引きするかの問題ですね。
相対指定なら、線引きする必要はないということかな。

あとはなに言ってるかよくわかりません。

って言うかそれはCSSの話なのか

サイズの絶対指定は避けるべきでしょうね。
もちろん、デザインを重視したい場合もあるでしょうから
絶対に使っちゃいけないわけじゃないけど、その場合でも
代替スタイルシートを用意して、弱視の人も快適に
読めるようにしておくべきでしょう。

>>272
CSSとは無関係だな。というか少なくとも直接的に関係ある話ではない。
多分、CSS解説に付随してたアクセシビリティに不満を述べてるんだろう。

というか、ユーザビリティを「どうでもいい」と思う人間に無理に分かってもらう事は難しいだろうな。
バリアフリーで段差をなくそう、っつったって、俺は楽に登れるし、普通みんな楽に登れるだろ、とか言ってるようなやつと同じ。

pxは相対単位だよ。

>>276
質問なんだけど、
解像度に対する相対
　と
ブラウザで指定したフォントサイズに相対
　とは別だよね？確か。（うろ覚えなので）

>>268
すまん。そうだろうな。html知識ゼロから一気に勉強していて原則的な
疑問が多い。（CSSも勉強すべきなのだな、と知ったのも数日前）
>>269
>絶対指定そのものがウザい。
文字サイズはアクセシビリティの観点では「小さすぎる文字」
以外に考えるべき事がある？（色を変えるのは問題あるケースもある事
は解った）何故ウザイのか教えて下さい。大きく絶対設定するのも
いけない理由が解らない。あと、
>そんな特異な例
そうです。自分もそう思っています。「あなたがページを作る時」
という文脈のページが多くてウンザリした次第で。
>>270
>電子媒介の利点といえるスケーラビリティを損なうような行為
もう少し具体的に教えて下さい。印刷時の問題とかですか？

>>278
> >絶対指定そのものがウザい。
> 文字サイズはアクセシビリティの観点では「小さすぎる文字」
> 以外に考えるべき事がある？（色を変えるのは問題あるケースもある事
> は解った）何故ウザイのか教えて下さい。大きく絶対設定するのも
　これは>>271で。

> そうです。自分もそう思っています。「あなたがページを作る時」
> という文脈のページが多くてウンザリした次第で。
　多分、特異な例、を省いて一般的な場合を指し示してる文書なんじゃないですかね。
例えば、「アメリカビジネスマンの間では、太ってる人は自己管理が出来ていないとみなされる」
という文書を関取が読んで憤慨してるようなもの。

あと、文節で区切ってくれないと、引用するときちょっと困るでス。

だからよぉ、それはCSSの話なのかって

> 「絶対指定」で二種類のフォントサイズを使ってるが、小さいほうで16px。

これどこのWEBサイトを例に挙げてるの？
サンプルきぼんぬ

>>281
それは自サイトのことじゃないの？
こうやってる俺のサイトもアクセシビリティ低いのかよ、って。

アクセシビリティを口に出すような奴がする真似じゃないわな
好みの大きさにユーザーが自由に調整できるという事が肝要な訳で

ptは相対指定値になるのかな？

>>284
相対単位と相対指定は違う。
ptは相対単位（画面に相対）で絶対指定（ブラウザに絶対）だと思うんだけど。

＃勘違いしてたら補足きぼん

>>284
すまん。ptは絶対単位だった。

http://www.mozilla.gr.jp/standards/webtips0027.html

>>287
いろいろ試してみたが、emとexだけブラウザで可変できるっぽいな。

>>288 %もね。単位はemと%で充分。

>>289
　THX
そういや前にこのスレで尋ねたら、>>287のURLに誘導されてそれで終わったような。

成長しないんですね。

>>291
お前はな。

ﾋﾟｯﾌﾟｸﾌﾟｩですね。

直接CSSに関係の無い質問に皆さん的確なレス、感謝。
16pxの具体論、一般論としての例え話、スゲェ勉強になった。
厳しい、鋭い突っ込みも全て図星･･･だ。（作りかけだが。）
勉強進めて今度は高級な質問します。よろしく。

↓何事もなかったかのように岡田克彦↓

>>291
だから自分で試したんだよ。
そいで、同じ話題が出てるから、結果を示したんだよ。

（´-`）.｡oO（>>294は、登場の仕方の割りに大人だった。

大人。。。(*´Д`*)

大人になったのね。

>>298
あかちゃん作る？

>>300
CSSで赤ちゃんを作るにはどうしたらいいんですか？

>>301
baby{display:none;}

(;;´д｀)堕胎ですか…

>>303
いや、認知しないの。

>304
baby{visibility:hidden;}じゃないの？
要素自体は存在するわけだから。

>>305
それだ

↓何事もなかったかのように山崎渉（＾＾）↓

>307
ﾜﾛﾀ

me{display:ょぅι゛ょ;}

>>307
あいつ何者よ。

>>310
検索してみ

擬似フレーム作りたいんだけど、右から●ピクセルで分ける、って指定できる？
フレームで書くと、
<FRAMESET cols="*,100">みたいな感じにしたいんだけど…。

>>312
できる

どうやってやるか教えてください…（つД｀）
御願いします。

>>314
http://www.google.com/search?num=100&lr=lang_ja&q=%8B%5B%8E%97%83%74%83%8C%81%5B%83%80

>>315
ピクセル単位での分け方載ってない…。
�lしかムリ？

甘え過ぎ。氏ねや

まあええや。使うのやめた。

はい次の方↓

よくないんじゃヴぉけえ
はよおしえろ

　　ミミミミミミミミ
　ミミミ　　　　　ミ　　　　 .＿＿＿＿＿＿＿＿
ミミミ　 ∧　∧　ミ　　／
ミミミ　　 ・　・　　 | ＜　バカヤロ！コノヤロ！
　(61 　　└┘ 　　| 　 ＼
　＼　　　 ー 　 　ﾉ　　　 ￣￣￣￣￣￣￣￣
　　 ＼＿＿＿_／

プッ、誰もわからないんだろ

>>322
最近それはやってるの？
まー別に君がそんなこといっても誰にもデメリットないし、誰も答えないだけだけど。
さようなら。

>>322
プッ、お前がわからないんだろ

>>324
じゃーとっととこたえなよー
無理だろうけどね！！ﾌﾟｯ

↑のほう、俺が書いてるみたいに思われそうだな…。
無駄だと思うけど、一応俺が書いてるんじゃないと断っておく。

騙りがいるのでトリップします。

騙りに先にトリップつけられてやんの

やんのやんの

>>326
n%をnpxにするだけではないのか？

npxなんてねーよ

>>331
そっかないのか。

〜pxを使うと左または上からの指定しかできないですよね…？
右か下から指定しようとすると、ウインドウサイズによって変わってくるから困ってる。

騙んなハゲ

JavaScript使ってやれれ

>>314
left:0;
right:100px;

まともに対応してるのはmozilla系のブラウザだけだな。
Operaも7ならいけるかもな。

>>335>>336
サンクス。参考になりました。

「できる？」って聞いて、「できる」としか答えてもらえないないのって、
見ててかわいそう。

>>338
質問の一つもまともにできないやつって確かにかわいそうだよな。

>>338
できますかと聞かれたら「はい(いいえ)」と答えたくなりますが何か

気の利かない人ね！(*ﾟдﾟ) 、ﾍﾟｯ

>>338
質問にちゃんと答えてるんだからいいじゃねえの。

表示の確認をするのに、WinIEの5.5と6を同時にインストールしたいんだけど、
それって出来ます？
みんなどうやって確認してるんだろう？

PC二台買う

5.5と6互換モードなら大差ない

微妙にスレ違いかもしれませんが、classやid名にはアンダーバーやピリオドは
使用できるのでしょうか？

いくつかのリファレンスサイトを見て回りましたが、使わない方が無難という
答えがおおく、明確に判断できませんでした。

>>346
CSS1的には、識別子として使える文字は[A-Za-z0-9]に
ハイフン、Unicodeの161-255。但しセレクタの先頭に
ハイフンと数字は使えない。

CSS2的には、[A-Za-z0-9]にハイフン、Unicodeの161以上。
先頭文字の制限はCSS1と一緒。
その後、Errata が出てアンダースコアも使えると訂正された。
# 但し、古い資料やW3CのValidatorでは使えないとされているので注意。

ピリオドは基本的に両仕様とも使えないが、一応バックスラッシュ（\）で
エスケープすれば特殊な文字も只の識別子として扱える、とされている。
但し、扱えるUA（ブラウザ）が限られてくるけど。

という訳で、アンダーバーはCSS2なら可、ピリオドはエスケープすれば
使える（あまり推奨はしないけど）。
あと、使用するHTMLのバージョンによっても微妙に違うので御注意。

http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#q4
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html
http://www.ne.jp/asahi/minazuki/bakera/html/reference/dataformat
http://east.portland.ne.jp/~sigekazu/css/ascii.htm

>>347
レス、どうもありがとうございます。

なるほど、色々な変更が有ってそうなったのですね。
使わない方が無難と言う意味が分かりました。

各ブラウザの実装状況を調べて検討してみます。
ありがとう。

>>347
あなた親切ですね

>>349
このスレ住民が不親切すぎると思われ

馬鹿げたこと聞く奴が多いだけ

ヒマなだけ

だけ

け

。

ヒ

>>338
質問に答えられないヤシが横からどうこう言うのはおかしいわけで
おまえが満足な解答を与えてやればいい

border-width等の数値を設定するプロパティで
border-width: 0 0 0 1em;と設定したら
友人に「0に単位つけろボケ」と言われました
すごいショックでした
あんなに優しかったのにWeb関連のことでは豹変してしまいました。
絶交を考えた方がいいですか？
又 0に単位をつけるのはなぜですか？そしてメリットを教えてください。

li属性を横にする方法はdisplay: inline;以外ないですか？

ボックスとかのようなんで
画面を２つ縦に分割して
片方の幅を200pxみたいにして
もう片方をウインドウサイズにあわせることはできますか？
できるならやり方を教えてもらいたいと思われます。

>>360
実現するにあたり、貴殿はどういった手法を試してみたのかと小一時間…

>>358
つけなくてもいい。絶交しろ。

>>359
floatとか。

>>360
flotとか。

flot？

>>363
flot知らないのか？
今CSS界で最高のプロパティだぜ？

http://216.239.37.100/search?q=cache:e-afQKMEq1oC:igax.homeip.net/200202.htm+flot+CSS&hl=ja&lr=lang_ja&ie=UTF-8&inlang=ja

ﾂﾏﾝﾈｰｰ。

ああ、そうだよ。floatだよ。間違えたんだよ。悪いか。（逆切れ）

>>358
0の単位は省略できる。
それはその友人がDQNなだけ。

<li>をフロートさせると、少なくとも私のIE5.5(WinME)で見た時
マーカーが消えてしまうのですが、マーカーが消えないように
する方法はないでしょうか。
Netscape7で見るとマーカーは表示されているのですが、IEでも
表示されるようにしたいです。

<li>をフロートさせると、少なくとも私のIE5.5(WinME)で見た時
マーカーが消えてしまうのですが、マーカーが消えないように
する方法はないでしょうか。
Netscape7で見るとマーカーは表示されているのですが、IEでも
表示されるようにしたいです。

<li>をフロートさせると、少なくとも私のIE5.5(WinME)で見た時
マーカーが消えてしまうのですが、マーカーが消えないように
する方法はないでしょうか。
Netscape7で見るとマーカーは表示されているのですが、IEでも
表示されるようにしたいです。

>>369-371
ﾓﾁﾂｹ

floatさせた要素は強制的にdisplay:blockになる。
マーカーが表示されるのはdisplay:list-itemな要素だけ。

つまりIEが正しい。

>>372
IEが正しいんですね。勉強になりました！
とりあえず、マーカーに依存しない方向でやっていこうと思います。
本当にありがとうございました。

1回しか投稿ボタン押してないのに複数投稿されてしまいました。すいません。
なんか日付の順番もおかしいし、エラーかな？

>>372
げ。そうだったんですか。

li { float : right; display : list-item; }

とかってやると、floatしててもマーカーが表示される
（IE6とNetscape7で確認）
んですが、これって、仕様的には正しいんでしょうか。

flortのwidthを50%にして、項目枠を横に二つ並べたいんですが、
ブラウザサイズを縮めて20emを下回ると20em以下にはならない、という方法はありますか？
最初から20emに指定すると、解像度が高くブラウザ最大にしたとき左に空きが出来るし、
50%にすると、縮めたときに項目枠の中でリストが改行されてしまうんですが。
二つの幅指定ができるなら教えて欲しいです。お願いします。

訂正
右に空きが出来るし、でした。
┌──────────┐┌──────────┐┃
│　　　　　　　　　　　　　　　││　　　　　　　　　　　　　　　│┃
└──────────┘└──────────┘┃
↓
┌────────┐┌────────┐┃
│　　　　　　　　　　　　││　　　　　　　　　　　　│┃
└────────┘└────────┘┃
↓
さらに縮めると
↓
┌────────┐　　┃
│　　　　　　　　　　　　│　　┃
└────────┘　　┃
┌────────┐　　┃
│　　　　　　　　　　　　│　　┃
└────────┘　　┃

>>375
min-width: 20em
ということではなくって？

>>377
そんなものがあったんですか。
有難う御座いました。これで安心して仕事に打ち込めます。

直列と並列の図ですか？

>>379
ある一定の幅以下になると、そこでストップして、段組で下にずれ込むようにしたいわけです。

>>377
#ID名{
width : 30%;
min-width : 15em;
float : left;
}
これでいいんですよね？
通常は30%で、15em以下にはならない、であってますか？

>>380
http://is.vis.ne.jp/charts/css2_visudet/index.xhtml#min-width

>>381
あ、IEじゃ無効なんですね…。
有難う御座いました。

>>374
幅が指定されておりません。

ところでみなすあんは何でcss書いてますか？
みんな手打ちなのかなあ。

>>384
俺はビルダーで作って、
ttp://jigsaw.w3.org/css-validator/
でエラーチェック。

>>384
俺は、HTMLをタグ挿入型ソフトで書いて、あとからcssを手書き。

divとspanしか使ってないんですが、
ddとかemを使う意味って何ですか？

>>387
ddとかemを使いたければ使うだけのこと。
そゆ些細なことは気にしなくてもＯＫです(^-^*)

>>387
ネタかマジか分からんが、とりあえずスレ違いだぞ。
↓で聞け。怒られるかも知れないけど。

Strict-HTML スレッド ver.9
http://pc3.2ch.net/test/read.cgi/hp/1039974316/

絶対ネタ絶対ネタ絶対ネタ

激しく既出かもしれませんが、おしえてください。

CSS で縦方向の中央揃えはどうやってやるんですか？

>>391
「vertical-align」で検索

すんません。ちゃんとやりたいことを書くべきでした。

画像を縦方向中央揃えにしたいんです。
例えば、ページに gif が一点だけ、真ん中に来るような奴。
今までだと例えば、table 組んで td で valign で済ませたような奴。

>>392
試したのだが、それってテキストだけだよね？
もしかしてまちがってんのかな？確認して見よっと。

imgもインライン要素だろうが

>>394
すまん。配置したいのは table だった。
やっぱりよくわからん。

<body style="vertical-align: middle;">
center!
</body>

↑でも

<div style="vertical-align: middle;">
center!
</div>
↑でも

うまくいかないんだけど・・・

ページは基本的に縦に伸びるものだから
bodyをtdに見たてて valign="middle" みたいなことはできない
vertical-alignは行に対する垂直位置

画像貼るだけなら background で

>>396
そうなのか。
わかりました。
さんくすこ。

floatに関して、いくつか質問があります。

>>251でも同じことが訊かれていますが、
img以外をfloatする際に必須となるwidthの指定ですが、max-widthや
min-widthでもOKでしょうか? また、width : autoでもOKでしょうか？

>>372によると、「floatさせた要素は強制的にdisplay:block扱いになる」
そうですが、同時に、display : list-itemを指定することによって、
floatさせつつマーカーを表示させる、というのは仕様的に正しいでしょうか。

>>398
前半は、widthで明示しなきゃだめだと仕様書には書いてある。
ちなみにautoは明示した事にはならない。
（と言うかルールに従うとゼロになる）

後半はここを読むといい。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#q24
つまり正しくない。

>>399
丁寧な回答ありがとうございました。
olで「パンくずリスト」を作ってたんですが、
（liをfloatして、list-style-imageで矢印を表示）
仕様的には間違ってたんですね。
li{display:inline}とli:before{content:"→"}にしようかな……

display: inline と padding-left と background-image
を併用すればいけるんじゃ？
画像がいるけど

ｵﾍﾟｰﾗの正式版が出た訳ですが

>>399
私も読んだけど、別に正しくないとは言ってないのでは？

すいません、質問です！！！ヾ(≧Д≦)ノ
非ASCII文字をぜんぜん使ってなくても@charsetは必要ですか？？？
だれか教えてください☆

>>404
↓に帰りなさい。
http://pc2.2ch.net/test/read.cgi/hp/1036858266/

ＩＥ6.0なのですが何故かどのサイトを
見てもスタイルシートが読み込めません。

そうですか。

>>312-313を思い出した

以下のようなリストがあり、

<ul>
　<li>リスト項目</li>
　<li>リスト項目
　　<ul>
　　　<li>下位のリスト項目</li>
　　　<li>下位のリスト項目</li>
　　</ul>
　</li>
　<li>リスト項目</li>
<ul>

左にマージンを2emとりたいと思っています。
ですが、ul {margin-left: 2em;} とすると、
内側のリストにもmargin-left: 2emが適用されてしまいます。

内側と外側のリストの位置関係はデフォルトのままで、
うまくリスト全体を2em下げたいのです。
いろいろ試して、IEなら、

ul {padding-left: 0;} /*左パディングを0*/
ul ul li {margin-left: 0;} /*内側リストのマージンを0*/
li {margin-left: 2em;} /*すべてのliの左マージンを2em*/
/*一段目のデフォルトのマージンは生かし、
リストの字下げはliのマージンで調節する*/

でうまくいくようだと分かりました。
ですがMozillaでは、ULすべての左マージンが0になってしまい、
左端に整列して非常に困った状況です。

皆さんならどうされますでしょうか。良案ありましたら、よろしくお願いします。

classは？

>>409
内側のulにclassなりidなり振って
ul.hoge {margin-left: 0}
とかじゃダメ？

ごめんかぶった・・・

classも考えたのですが、スタイル付与を目的にclassは付けたくなかったのです。
なので出来るだけ文脈セレクタで対処したいと思っています。
二段目以降のmarginをデフォルト値に戻せればよいのですが。

ul li ul { margin:0 } はどう？

>>405
質問にはきちんとこたえてくだサイo
でないと友達のスーパー☆ハッカーに住所を調べてもらっちゃいますよ？（笑）

書く順番を変えてみる

いけました。>>414 さんのアイディアが功を奏しました。

ul {margin-left: 0;}
ul li ul {margin-left: 0;}
li {margin-left: 2em;}

これでIE、Mozillaともに、期待どおりの結果を得られるようです。
ずっと悩んでたのですが、解決してほっとしました。
皆さん、ありがとうございました。

<div style="text-align:center;">
<table><tr><td>aiueo</td></tr></table>
</div>

こするとNetscapeだとテーブルが真ん中にきません。なぜでしょうか。

tableはブロック要素だからです。

仕様です。

>>418
>>5読めよﾁﾝｶｽ野郎

すごい、やっぱりオタクは知識が違いますね。
ありがとうございます。

はい次↓

マジ、CSS使えねー。
カスイケリンク集とかも見たけど、ぶっちゃけ全然イケてない。
しかもあんな単純なレイアウトするのにかなり不自然な処理しなきゃいけないのを見ると、
つくづくCSSってオタク向けアイテムだよなーって思う。
フレームだのテーブルレイアウトはいかんだの言うまえに
手前らの服のダサさを何とかしろと言いたい。

http://www.irrationalcontraption.net/launch.html
↑
CSS普及活動をされている方達が見たら、激怒しそうなサイト。
でも哀しいかな、Strictなカスサイトより断然支持されてる。

質問どぞ↓

macのネスケ4.7で背景画像を固定したいのですが、できませんよね？
なにか、解決策はありますか？

そんなのは無視する

俺も NN4.x は無視してる。
可哀想だが相手にしてられないぐらい実装ショボいんで。

・・・・そうですか・・・・。

あのー、つまんない質問なんですが、
link rel="stylesheet" href="css/new.css" type="text/css" media="screen"
というように、title属性の設定をしないと、スタイルシートが固定に指定されますが、
参照：http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.3.2
こうすると、MozillaのメニューUse StyleからBasic Page Styleを選択しても、
制作者スタイルシートが無効にできませんが、
これって、Mozillaが仕様に忠実だからと考えてもよろしいのでしょうか?
それともOperaのように、何がなんでもスタイルシート無効になるのが正しいのでしょうか?

仕様では、UAは代替スタイルを選べるようにしなければならない、とあるけど、
無効にできなければならないとは書いてないね（多分

Basic Page Style ってのは永続スタイル（titleなし）のことかと

>>431
must とは書いてないけども should とは書いてあるよ。

質問します。
インターネットで文字サイズを「最大」にしている人にも、自分のＨＰの文字がほとんどめちゃくちゃに表示（文字化け？）されないようにするには、どんなタグを入れたらいいんですか？

つまらんネタだな

>>433
マルチポストするな。

>>433
*{display:none;}

>>436
どういうことですか？これを入れればいいんですか？
すいません。初心者なもんで・・・

>>437
<style>と</style>の間｡

ヘッダに
<style type="text/css"><!--
*{display:none}
--></style>
と書く。

スタイルシート側で img を非表示に設定して、
かつ、alt を展開させることはできますか？
img[alt]:after { content: attr(alt); }
までは思いついたのですが（ IE では無効とはいえ。）
img を隠す方法がわからないのです。
img[alt] {visibility: hidden; } では生成文字列も見えなくなるし、
img[alt] {width: 0; height: 0;} では何かが残るし……。
後者で妥協してもよいのですけれど。

CSSでは無理だべ。JavaScriptで野郎

>>437
スタイルシートの設置は出来たのか？

>>441
どうもありがとうございました。
CSS 以外でがんばります。

２ちゃんの糞スレの皆様に、作曲家・岡田克彦ファンクラブからのご案内です。
ご高承のとおり、岡田克彦氏の卒業した早稲田大学政治経済学部と、ひろゆきの卒業した中央大学文学部夜間は
比較にならないほど差があります。中央大学文学部夜間のようなヘボい大学に共通しているのは、文化水準が
低いということ。18歳から22歳をヘボい大学で過ごすということは、感受性において致命傷と言えます。
２ちゃんねらーの大半は岡田克彦氏に比べて、著しい低学歴で頭が悪いだけでなく、感受性も愚鈍で腐っている
という、取り返しのつかない状態なのです。
せめて、http://www.geocities.co.jp/MusicHall/5933/で、岡田氏の作品に触れましょう。
また、学歴至上主義は、学歴がないか、東大のような高学歴であっても学歴に相応しいだけの自分の特技
等を持っていない人が不愉快に思っているだけのことです。２ちゃんのひろゆきの卒業した中央大学
文学部夜間のようなものは、学歴と言えるようなものではなく、これは、拭うことの出来ない、生涯つきまとう
汚点で、絶対に取り返すことは出来ません。２ちゃんの皆さんの大半は、波風を立てずにその場限りの平穏無事を保守する
という、下らない事なかれ主義にうつつを抜かしていますが、私共は心優しい仲間なので、はっきり申し上げられます。
ひろゆきは、感受性において、まさに取り返しのつかない状態にある、ということです。
従って、阿呆のひろゆきのやっている２ちゃんは阿呆の危険集団だということです。

>>431
>>432
ありがとうございます。
うーん、よく仕様書を読んだら、

>ユーザエージェントはまた、著者指定のスタイルシートすべてを
>ユーザが不使用にできるようにする必要がある。
>この場合ユーザエージェントは、すべての固定スタイルシートも
>代替スタイルシートも適用してはならない。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#didx-style_sheet-2

となってるので、Operaの方が望ましいような気もしますねえ。
うーん…。

>>445
Basic Page Styleはスタイルシート無効にする機能ではなくて永続スタイルシートを
選択するだけの機能だからOperaと比較するような物じゃない。
スタイルシート無効のUIは以前から議論されてるみたいだけど
Mozillaでは実装されてないだけだな。

>>446
あー、なるほろ。
つーことは、スタイルシート無効のBookmarkletは必須なんでつねー。
サイトの注意書きに書いとこ。
ありがとうございました。

自己レスです。
>>440
>スタイルシート側で img を非表示に設定して、
>かつ、alt を展開させることはできますか？
できました！

img[alt]:after { content: attr(alt); }
img[alt] {width: 0; height: 0; border: none; }

で意図通りになるようです。
境界線をきちんと消しておくのがコツでした。
（ボックスサイズとボーダーの関係から。）

>>448
面白いこと考えるね。
marginとpaddingも消してみてはどうか。

はじめから置かないのはどうか。

>448のCSSの使い方がどういう時に役立つのかわからない。

>>451
推測だが、テキストブラウザでの見た目を再現させようとしたとか？

でも>>488はdisplay:noneしているわけでもないから
画像は読み込まれるんだよね

テキストしか見えていないのになぜか重いサイトの完成か（藁

>>453
display:none は表示されないだけで読み込まれてるぞ。

>>454
そうなの？
でも、「無かったことにする」わけだし、
前にどこかで「画像は読み込まれない」と書いてあったんだけど。

IE6で実験してみた。
確かに読まれているね。

>>454
便乗質問だが、 display:none は必ず読みこまれると考えていいのでしょうか。
iframe要素を隠すのに display:none を使っています。イントラ向けで、イントラでは IE しか使われないので今のところ問題は起きていませんが、 IE がupdateされたときや他のブラウザで問題が起こる可能性はないでしょうか。

試せることは試してから聞こうよ。
他のブラウザをインストールできない訳じゃないだろ？
別に自宅PCで実験したっていいんだし。

>>451
ユーザースタイルシートでは使い出があるかもしれない

olやulの40pxくらいの左の余白は、Mozillaはpadding、IEはmarginでとってる臭いんですが、
どちらの環境でも同じように表示させるにはどうすればいいんでしょうか？

ul,ol{
margin : 0 ;
padding : 0 0 0 40px ;
}

ul,ol{
margin : 0 0 0 40px ;
padding : 0 ;
}

どつちでも好きな方を使ふ。

>>451
代替スタイルじゃネーノ

>>451など
みなさんが答えてくれたように、
ユーザースタイルシートと代替スタイルシートでの使用を考えています。
でも、代替スタイルシートが使えるネスケ７だとうまくいきませんでした。
メインスタイルだと意図通りなんですが、alternate になるとダメ。
Opera7 では試していませんが、ＩＥで×、ネスケでも×だと、
このアイデアはしばらく封印ですかね。

>462
いや生�`。

ちょうど漏れも今全く同じアイデアを考えてた。
参考になりますた。ありが�d。

なるほど……ユーザーと代替のスタイルシートか。
何かの参考になりそうだ。462サンクス

<div class="hoge"><div class="hogehoge">
<h4> タイトル </h4>
<p> 文章 </p>
</dvi></div>

上のようにdivをネストしている構造が含まれるHTMLを
winIE6で見るとつぎのような現象がでます。

ページをロードした時はきちんと表示されるのに、
画面を下にスクロールして、いったんh4要素部分を画面から消し、
また上に戻すと、h4に適用しているスタイルが消えてしまう。
（具体的には背景色、ボーダーラインとか）

自分なりに調べてみたのですが、わかりません。
同じような現象になった方はいないでしょうか？
また回避策などはあるのでしょうか？

<td>の中の<a>にline-heightが効きません。tdに指定してもダメだったので
tdのline-heightを消してaに指定してみたのですがやっぱりダメでした。
どこに指定すればいいのでしょうか？よろしくお願いします。

>>465
再現できなかった
ネストしたdivのスタイルにもよると思う

>>466
ソースを良く確認してみて
こちらでは（IE6、Moz、Opera7）問題なし
N4ならあり得るけど

>>467
ありがとうございます。MacIE5ではOKですが、WinIE6だとダメです。
どうしてもできないのであきらめて<br>を2つ入れて行間をあけました。

http://e430.hp.infoseek.co.jp/

上のサイトのように<fieldset><legend>をborderの変わりに使うのは駄目ですか？

467さん、レスありがとうございました。
いろいろ試行錯誤した結果、h4要素にwidthを指定してやったらきちんと表示されるようになりました。
なぜこうなるのかはさっぱりわかりませんが・・・汗
とりあえず、思うとおりにいったので満足です。
1日中こればっかりやってたからほんと疲れた。

>>440=462
自分も参考にさせてもらいました。印刷用のに使います。
Opera7 は alternate でも効いたので一応ご報告。
Mozilla は 1.2.1 でもだめぽ。

>>472
Opera7 の報告、ありがとうございます。
そうか、使えましたか。自分も導入しようかな……。
実は私も印刷用スタイルシートで既に採用していたりします。
特にリンク集のバナーは印刷しても……という感じがあったので。
まあ、ＣＧ系サイトにはお奨めできませんかね（笑）。

ネスケ７（というより Mozilla?）は
「印刷プレビュー」を一度表示してから戻ってくると
なぜか有効になるようです。
全般的に、一度 display:none; にした部分や contents 成分がおかしいようですね。

あとスレ違い気味ですが、ブラウザで実現して欲しい機能として、
代替スタイルシートを有効にしていてページを移ったとき、
同じ title のスタイルシートがあったらそちらを優先して使って欲しい、
というのがありますね。
ページごとにいちいち切り替えるのはおもしろくないし……。

>>462
Mozilla 5.0系 CSSバグリスト
　優先シートのdisplay:none;が代替シートにも引き継がれる(N7)
　http://cssbug.tripod.co.jp/detail/mozilla/b036.html

画面いっぱいのTABLEを作っていたのですが
<table style="width:100%;height:100%">
ではheightがIE6から機能しなくなってしまいました。
(borderを引かせるとtableの大きさが100%になっていない）

できればTransitionalにはしたくないんですが、回避方法はありますか？

>>475
strictで画面いっぱいのテーブル使う機会ってどんなときですか？
ちょっと知りたい。

>>476
初心者がFrontpageで作ったえっれぇ複雑なページをタグ打ち野郎が引き継いだときでつ。

>>477
引き継ぐならついでに簡素にしちまえばいいと思いますが。

>>478
デザイン変更不可です

>>479
きっつい蔵にあたった、って事か？
だったらトラジショナルにしといた方がよくねえか？
それとも、自分の意思でデザ変更不可なのか？
だったらトラジショナルにしといた方がよくねえか？

>>480
「文法上云々」では通らなさげ。あと14ページぐらい統一レイアウト使用してるもんで、
１ページレイアウト変えると全部変えるハメになるので俺が死にます

なんか方法なさげなのででTransitionalにしまつ。
今更Transitionalに書き換えるのも面白くないけど・・・(´･ω･`)ｼｮﾎﾞｰﾝ

>>481
文法上云々は通らないだろうな。

「もっと見栄えをよくする方法がある」
　と、
「今後いつ仕様が変わるかわからない（現状のやり方が通らなくなるかもしれない）」
　を併用すれば通る可能性はちょっとあがる。

>>482
とりあえず今これ以上手間増やしたくないのも事実なんで、
Transitionalにして「今後どうなるかわからんから、ブラウザの仕様次第では
レイアウト変更の可能性アリ」としますた。

しかし、なんでheight:100%はダメなんすかね、理由がよくわからない。

>>483
何に対して100%かという計算の基準が変わったのでは。

>>482
俺も今そこで苦労してるわ〜。
でも、HTMLのことを何も知らないクライアントの方が、下手に
不思議マークアップをする人より若干説き易い気がする。

>>483
DOCTYPE宣言はTransitionalでも、その他の部分はStrict DTDに適合させて
おけば、後で事情が変わった時に、DOCTYPE宣言だけ入れ替えればいいから、
比較的らくなのでは。
といっても、バリバリTableレイアウトしてるなら、内容も書き換えないと
strictにこだわる意味があんまないけどなー。

# スレ違いスマン。

なんでCSSには float:center が無いんだよ。

>>485
HTMLのことは何も知らなくても、自分でウェブを利用してる場合は、
「文字をもっと小さく、幅をもっと狭くして」
とか無茶な要求してくるので、ウェブのことなんかちっともわかって
ない相手の方がやりやすいけどなー。

>>488
そういう香具師には、画面をキャプチャした画像を張り付けておけばよい。
それでもだめなら、印刷して CRT に張っておく。

>>489
いや、だから、自分でウェブを利用しないような、なんにもわかってない人
の方がやりやすいって言ってるんだってば。
よく読んでからレスしてね。

＃スレ違いなのでこれにて終了

>>483
strictモードで、height:100%;はbody直下ならbodyの高さに対する100％
また、body要素の高さは内容物によって可変で、ウィンドウいっぱいいっぱいに確保されるわけではない。
だから指定しても意味がない。
ということだと思うけど。

strictモードで、
body { border:1px solid #FF0000; }
とやってみるとわかるかな。

>>483
tableの祖先要素全てにheight:100%

初めまして。根本的に間違っているかも知れませんが
以下のソースでテーブルの表示を変更すると
rowspan部分の表示がおかしくなってしまいます。
一番下になる項目が表示されている場合は見た感じ正常ですが
一番下が非表示(display:none)だと崩れてしまいます。
何とかうまく表示させる事は出来ないでしょうか？

<div style="cursor: hand" onclick="fnc_dsp(document.all.dsp0);">td-1</div>
<div style="cursor: hand" onclick="fnc_dsp(document.all.dsp1);">tr-2</div>
<div style="cursor: hand" onclick="fnc_dsp(document.all.dsp2);">tr-3</div>
<div style="cursor: hand" onclick="fnc_dsp(document.all.dsp3);">tr-4</div>
<div style="cursor: hand" onclick="fnc_dsp(document.all.dsp4);">tr-6</div>
<table border=1 style="border-collapse : collapse ;"><tbody>
<tr><td id = "row1">12345</td><td id = "dsp0">1</td></tr>
<tr id = "dsp1"><td>2</td></tr><tr id = "dsp2"><td>3</td></tr>
<tr id = "dsp3"><td>4</td></tr><tr id = "dsp4"><td>5</td></tr>
</tbody></table>

追記です。
<script>
document.all.row1.rowSpan = 99;

function fnc_dsp(e) {
if(e.length){
for(i=0;i<e.length;i++){
if (e[i].style.display == "none"){
e[i].style.display = "block";
}else{
e[i].style.display = "none";
}
}
}else{
if (e.style.display == "none"){
e.style.display = "block";
}else{
e.style.display = "none";
}
}
}
</script>

>493

>494

びっくりするほどすれちがい

１時間ぐらい試行錯誤してみたんですがさっぱりでつ…助けてえらい人。

position:absoluteで画像を最上段に固定。
擬似的にレイヤーぽく他のコンテンツがその裏にまわるようになってます。
さらに、その下にCSSで疑似フレームを作成。
position:fixedが使えないIEでもほぼ理想通りの疑似フレームを再現しました。
（ >>5 がものすごく参考になりました。ありが�d。）
ここまではうまくいったんですが…。

IE6で見ると<select>の部分だけが（疑似）レイヤーの上に浮き出てしまうんです。
NN7で表示するとちゃんと裏側に潜ってくれるのに…。

これってCSSではどうにもならなかったりします？（汗）

>>496
どうにもならない。
周知の通りWindowsではブラウザがWeb用（IE）もＯＳ用も共通で、
セレクト・ボックスもＯＳ絡みになってるので、
ＣＳＳでは制禦されないのだ。

だからWinIEでは<select>にborderを指定しても適用されないでしょ？

>>497
そっか…。
Select使ってるの１カ所だけだし、
仕様ってコトで我慢します。ありがと〜。

はいはい、取ればいいんでしょ。

　　　　　　　　　　　　　　　　　　　　　　　　　　　5　0　0　G　E　T

時代は501Getです。

502get が最新の流行

504get失敗してこそ漢

お前らCSSの話をしてください。

やだ。

bodyとhtmlのどっちに背景指定したらいいんですか

>>506
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/colors.html#q2

>>507
ありがとうございました。

文字の大きさをを固定させて、見る人が文字サイズを「最大」にしていてもレイアウトが崩れないようにしたいんですが、どうしたらいいですか？

ゲロゲロ〜
文字サイズが変わっても崩れないデザインを作るように努力してください

>>509
文字のサイズを変えられたぐらいでレイアウトが
崩れるような糞サイトを作らないようにしましょう。

かぶったｽﾏｿ

はいこんいちあ

>>510 >>511
それが難しいので、したいと思います。
文字の大きさをを固定させて、見る人が文字サイズを「最大」にしていてもレイアウトが崩れないようにしたいんですが、どうしたらいいですか？教えてください。

>>514
PDF

>514
できるけど、フォントサイスの絶対指定は
アクセシビリティ的に推奨されないのでやめれ。

>>514
FLASH
PDF
画像全般

HTMLで固定しようなんて思う方が間違い

良く分からないんですが、http://www.nasda.go.jp/
このＨＰで、文字サイズを「最大」にしてもほとんどレイアウトが崩れないんです。
こういう風にしたいんです。

管理者に聞いたらいいでしょ

ネタでしょ？

それが、管理人に聞けないんです。国の機関ですから。
前にチャットで「そういうことは、ここで聞いたらいい」と教えていただいたので、聞いています。
ぜひ教えてください。お願いします。

http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-size

>>518
あちこちのスレで同じこと聞くなよ。

自己紹介のページなんですけど、
例えば
<h2>自己紹介</h2>
<dl>
<dt>名前</dt>
<dd>花子</dd>
</dl>
とするのと
<h2>自己紹介</h2>
<h3>名前</h3>
<p>花子</p>
とするのは、どちらが文法的に正しいのでしょうか？
私は<h3>の見出し要素を使ったほうが良いような気がするのですが。
どなたか教えてください。

>>524
http://pc2.2ch.net/test/read.cgi/hp/1039974316/l50

>525
向こう逝って聞いてきます。
ありがと。

>>518
ネスケやオペラだと予想に反して崩れそうですが。
だから無理。

背景画像を一部分に固定して表示させるやつで
例えば真ん中とか右端とかあるけど
左上と右下とか同時に2箇所に表示させる事は可能ですか？

>>528
無理
他の要素を上手く使って対処（bodyとh1とか

>>527
無理ではないだろ
三平には無理だとしても

>>Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table（や、その他のブロック要素）をセンタリングできません。IEではセンタリングされるのに……

ではセンタリングはどうするので？

>>530 書いてあるだろが、>>5に。
A: IEの実装が間違っています。くわしくは下記のページをごらんください。
http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html

普通の人はNetcapeが間違ってるとしか思わないよね。
もっとIEにすり寄せた方がNetscape自身の為になると思うけどな

>>532
ネスケには今のスタンスを貫いてほしい。

<div align=center>

CSSじゃないけどね

>>534
cssでやらなきゃ無意味だと思うが。

#そもそもcss使ってて、それを知らん、って事はまあないと思うんだけど。

リスト
・あ
・い
・う
を
・あ　・い　・う
て横に並べるのはどうしましょう？

>>536
フロートさせて左側に回りこませればいいんじゃない？
それか見栄えをインラインにするとか。

>>536
ちょっと不親切だったな。すまん。

LI{
display:inline;
}

>>536
後者では、display : list-itemじゃなくなるので、マーカーが消えて、

あ　い　う

になっちゃうけどね。
あと、floatされた要素は自動的にdisplay : block扱いになるそう（>>372）
なので、ブラウザの実装が仕様通りなら、後者でもマーカーは消えるはず。
（IE5.5では消えるらしい。IE6とN7じゃ消えなかったけど）

マーカーをつけたままにしたいなら、

li:before { content : "・"; }

とかするしかないかな。（IEは対応してないが）

>>539
ごめん、いま確かめたら、IE6でも消えてた。
IEの方が（仕様的に）正しい、ってのは珍しいな。

本来ならdisplay:compactがその役割なんだけどねぇ…

CSSでｽﾀｲﾘｯｼｭなｻｲﾄに貼ってある
「W3CHTML〆」
のようなバナーはどういう意味があるので？
クリックして飛んでも英語ページだからわからんでさぃ

>>542
あなたが言ってるのは正当なCSSですよ、ってバナーです。
参考までに、
ttp://jigsaw.w3.org/css-validator/

>>542
その文書が、W3Cの策定したHTMLの仕様に適合していることを表しています。
リンク先の英語のページは、W3CのHTMLの検索サービスです。
CSSには直接関係ありませんが、仕様に則った正しいHTMLを書こうと心がけている人は、CSSを使用する場合が多いようです。
スタイリッシュかどうかはまったく関係ありません。
また、勝手に貼り付けることができるので、きちんと仕様に則っていないページでも、貼っているところがあるかもしれません。

>>541
え？

#menubox{ text-align:right; width:24ex; height:15em; }
#menu{ font-size:130%; font-weight:bold; line-height:123%; }

<div id="menubox">
<p id="menu"><pre id="menu">
<a href="">Top</a>
<a href="">Contents</a>
<a href="">BBS</a>
<a href="">Link</a>
<pre></p>
</div>

こんなふうに表示させたいんですが、改行させずにすることって出来ませんか？
CSSファイル切ったときに横に・・・できれば各リンクの間にスペースが入るような感じで。

>>546
ごめん、意味がよくわかんないんだけど、
CSSが有効な場合は、上記のソースで実現できるような見た目で、
CSSを無効にすると、各項目が横並びになるようにしたいってこと？

>>546
<div id="menubox">
<p id="menu">
<a href="">Top</a>
<a href="">Contents</a>
<a href="">BBS</a>
<a href="">Link</a>
</p>
</div>
でいいんじゃないの？
ちなみに同じid名を同一htmlファイル内に書いたらだめですよ。

>546
<p>の中に<pre>は入れられないが，それはともかく
a {display: block;}
ということをやりたいのではないかと思った

追記
a {display: block;}

ごめんかぶった

この場合、pをdivでくくる意味もあんまりないような……

#menu { text-align : right; width : 24ex; height : 15em; font-size : 130%; font-weight : bold; line-height : 123%; }
#menu a { display : block; }

<p id="menu">
<a href="">Top</a>
<a href="">Contents</a>
<a href="">BBS</a>
<a href="">Link</a>
</p>

でいいんじゃないかな。

ただ、これってコンテンツを列挙した「リスト」だよね？
pじゃなくてulを使った方がいいと思うよ。
CSS無効のときの見栄えになどこだわらず。

>>552
すっきりしましたね。>>546はこっち参考にして。ごめんね。

ところで便乗質問していいですか？
NC4でtableにborder指定する方法ありますか？

.fill {background:#ff9999}
<a href="xxx.html" class="fill">link</a>

何度かリンクをたどったりしていると、
いつのまにか背景色がなくなってしまいます。
これって…。たぶんすれ違いｽﾏｿ。

>>554
よく意味がわからないのですが。

>>547-553
激しくｻﾝｸｽｺ
結構無駄なことばかりだったのね・・・反省します。
俗にいうdiv房なのでdiv使う癖を少しづつ直していきたいと思います。

わたしも原因を特定できていないのですが、
最初はもちろん正常に背景色がつきます。
しかし、<a>のリンク先に飛んだり、また戻ったり、更新ボタンを押したり、
まあとにかく、しばらくブラウザを操作しているといつのまにか、
背景色が適用されていない状態になってしまうのです。
ていうかたぶんスレ違いなのでｽﾏｿ。

>>557
a:linkやら使ったら？

関係ないが、日本語が不明瞭なので
もう少し推敲して工夫して欲しいと思った。

余計な御世話と思った。

リソースが足りなくなってるんだろと

リソースっておいしぃ？

ネタ質問かよ・・・
以後放置

>>559
　　　　　　　　　　　 ／　　　　　　　　　　　/　 /　　 /( ∧　　）　ﾍ　ﾍ　　 　　　 　
　　　　　　　　　　 く　　　　　　　　　　　／/　（　/| | V　)ﾉ（　(　（　　ﾍ＼　　 お　 て
　　　　┘／＾|　　　 ＼　　　　　　　　 （　　|　|ﾍ|　ﾚ　　　＿ﾍ|ﾍ　)　＿ﾍ 　　　し　 め
　　　　/|　　 .|　　　　　　　　　　　　　　|　　）） )/⌒""〜⌒""　　 iii＼　　　　え　｜
　　　　 .|　　α　　＿　　　　　　　　　　ﾍ　ﾚﾚ　　"⌒""ﾍ〜⌒"　　||||＞　　　　て
　　　　　　　　　 ＿∠＿　　　　　　　ｲ　|　　|　 /⌒ｿi　　 |/⌒ﾍ　　＜　　　　や　に
　　　　　＿　　　　 (＿　　　　　　　　) ﾍ　　|　‖ （） ||　　|| （） ||　 ＿＼　　　ん　は
　　　　　／　　　　　　　　　　　　　　 (　 )　ﾍ |i,ﾍゝ=彳　 入ゝ=彳,i|＼　　　　ね
　　　 ／ー　　　　　　　　　　　　　　　（　／　　"""/　 　ー""""　　　＞　　　｜
　　　　　 ＿）　　 ｜　　　　　　　　　 ﾍ（||ii　　　 ii|||iiii＿/iii)ノヘ|||iiiii＜　　 |||||
　　　　　　　　　　｜　　　　　　　　　 ( ﾍ|||||iiii∠;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;　 　　 ﾌ　　　 ""'
　　　　/////　　　ﾍ＿／　　　　　　　) ﾍ|||""ﾍ===二二二===７ﾌ　/　ﾑ／∧　∧　∧
　　　 /////　　　　　　　　　　　　　　(　 | ii　 | |ＬＬ|＿|＿ＬＬＬ//　|　 　 ）（　∨|　∨)
　　　・・・・・　　　　　　　　　　　　　　　 )　)| || | |||||||||||||||||||||||| |　|　 　（　ﾍ |　ﾍ ) (
　　　　　　　　　　＿＿＿　　　　　　　　| | /|　.| |||/⌒／⌒ヘ | |　|　 iiiiﾍ　( |　（ | /
　　　　　　　　　　　　／　　　　　　　　　/　(|.|　| |　　　　　　　| |　|　 iii　 ) | ﾍ　）(　)
　　　　　　　　　　　 （　　　　　　　　　　(　/..|　 | |＿＿＿＿_/ |　|　 iii　 ( ）（　// /
　　　　　　　　　　　　＼　　　　　　　　 )　）..|　　|ﾍＬ|＿|＿Ｌ/ / /　 ,,,,--（/Vﾍ）(／

皆さん、CSSを書くときにエディタは何を使ってますか？

notepad

TTTEditor

秀丸

秀丸じゃ構造化できないべさ。

xyzzy

秀丸使いはﾀﾞｻｽｷﾞ（藁

名前を羅列するだけじゃ利点がわからん

CSSなんて、どんなエディタ使っても似たようなものだと思うけど。何百行もあるCSS書くなら別だけど。

何だかんだで500行以上あるな……うちのサイト
まあ、編集しやすいように並べてるからだけど

愚痴だからレス不要だけど、
Ie6氏が、背景が消えるといっていたが
俺もなったことがある。

文字が消えたり、borderの一部が欠けたり。
ドラッグしたり、一度画面外に出すと戻ったり戻らなかったり。
どーでもいいけどな（藁

CSSをHTMLに適用した様子をプレビューできるエディタとか無いのかな。

>>575

TopStyle

<style TYPE="text/ccs">
<!--
BODY { background: url(bg1.gif); background-repeat: repeat }
BODY { font-size: 11pt; line-height: 200% }
-->
</style>
をヘッダ内に書いてるのに反映されないんですけど、なんででしょうか。

よくよくみたら、ｃｓｓがｃｃｓになってました…。(*´д｀*)ﾊｧﾊｧ ｵﾊｽﾞｶｽｨ

さくらたんのエ（略

説明うまく書けずにすみません。なお、559,561はわたしではありません。

あと、>574のいう、ちょっとしたレンダリング失敗は何度も経験があります。
たとえばsolidボーダーがdottedになったり、line-height指定が無効になったり。
ただ、これまではこういう状況になっても、F5押すだけで直っていたものですから。

放置可。

漏れも、TopStyle使ってる。結構、いいよ。

>>580
フィルターガシガシにかけたり
文字をいくつも重ねたらそういう傾向あるかもしれません。

答えになってませんが。

>>580
原因は全くよくわからんが
背景にtransparentでも何でもいいから何か指定するとか
borderの無い辺があったら、何でもいいから指定してみると
直ることもあったぞ。

<hr />をCSSを適用した時のみ表示させないようにしたいのですが、
教えていただけませんでしょうか。

>584
hr {display: none;}

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

ふと、思ったのですが、IE4や3を使ってブラウジングしている人って
どれぐらい居るんですかね。やっぱ少数でしょうか。

>>587
少数です。アクセス解析でも付けて調べてみましょう。
次からはCSSの質問をどぞー。

>>4にあるサイトで、NC4を省く方法を見ていたのですが、
media属性にscreen以外の値を指定すればいいというのはallでもprintでも
どちらでもいいと言う事ですか？
どちらを指定するかによっての違い等はあるのでしょうか？
また、あるとすればどちらを推奨されますか？

それと、screen以外の値を指定すれば読み飛ばされるというのは
弾くのではなくてcssの読み込み自体をさせないで、プレーンなHTMLを
表示させるという事なんでしょうか？

質問ばかりで申し訳ありませんが、よろしければ教えてください。

>>589
media属性にscreen以外を指定してるとこのスタイルシートだけ読まれない。
だから
<link rel="stylesheet" href="hoge.css" media="screen">
<link rel="stylesheet" href="hogehoge.css" media="screen,tv">
とかにするとNC4ではhoge.cssだけ読まれる。

media属性をどうするかはぐぐったほうがいいんじゃないかな？

>>589
ネスケ4除けという意味では、allでもprintでも効果は同じ。
allはあらゆるメディアに適応、printは印刷時に適応、という意味なので、
media="screen,print"として、通常のモニターと印刷の両方に対処した
cssを書くのが適切かと。

後者の質問については、その通りです。

>>590
ぅゎ、かぶった。ケコ（略）

>>590-591
レスありがとうございます。
つまり、media属性というのはどのメディアで出力させるかを
こちらでコントロールできる要素という事なんですね？

で、NC4はscreenの値でしか、認識しないので、
それを利用して除けるという事でよろしいでしょうか？

なんだか理解できてきました。お二人共どうもありがとうございました。

>>593
それで合ってます。ちなみにたぶんこのスレの過去ログにあったんだけど、
media="screen,"ってscreenの後にカンマつけるだけでNC4は
スタイルシート読まないそうです。

<link rel="stylesheet" href="doukou.css" type="text/css" media="print,screen," />

という事はこれでいいって事ですよね？
どうもありがとうございました。

>>594
それって、仕様的には正しい記述なんですかね？

mediaにprojectionも指定しておかないとOperaでフルスクリーンにしたときに
CSSが適応されない。

>>596
どうなんでしょう？
僕は無難にmedia属性はscreen,tvを指定してます。
つってもテレビで自分のサイト見た時にどうなってるのか
わかんないんですけどね。

>>598
media="tv"っていうのは、ドリームキャストとか、ちょっと前によくCMで
やってたインターネット・テレビみたいなのを想定してるのかなあ。
それらが実際、media="tv"と指定されたCSSに対応してるかどうかはともかく。

>>580
465で質問した者ですけど、
レンダリング失敗という状況は似てます。

漏れの場合はwidthを指定してやったら、
きちんとレンダリングされるようになりました。

状況によって違うような気がするから
参考にならないかもしれないけど。

positionを使って2段組にして、左にコンテンツ、右にページ内容で
両段ともdivで囲ってるんですが、ウィンドウの幅を狭くすると
右の段に貼った画像がdivの領域からはみ出たりしてしまいます。

divのwidthを絶対指定しないで、ある程度幅を狭くすると
表示がおかしくならないよう横スクロールバーを
出すようにする方法はありますでしょうか？

上手く説明しにくくて、ちょっと状況が分かりづらいかもしれませんが、
何卒よろしくお願いします。

>>601
img に overflow を指定してみてはどうだろう

>>602
overflowを指定してみましたが、だめでした…。

NC6だと画像がはみ出て、IE5.5だとdivの領域が画像のサイズよりも
小さくならず、文字だけ改行されて狭くなってしまいます……。

それと、NN4にも対応させた作りにさせてますんで、出来れば
overflowは使いたくないんですが…うーん……。

幅の値をxxx〜xxxまで…という風に指定する事は出来ますでしょうか？

>>604
min-width, max-widthとか

>>605
こんなのがあったんでつか…。
ぐぐってみたんですが、どうやらIEには対応してないみたいでつね…。

他の段組サイトはどうやってるんだろう…。
ソース見てみたけどさっぱり分からないぃ…。

他の段組サイトはどうやってるんだろう…。
ソース見てみたけどさっぱり分からないぃ…。

<h1>でサイトのタイトルを入れている人は多いと思いますが、
代替スタイルシートなどを使った場合に、
テキストでタイトルが表示されるのではなく
<h1>への背景画像で表示したいことってありませんか？

この場合、背景画像は表示、テキストは非表示とするのでしょうが
{display:none;}だと背景も表示されなくなってしまいますし
{color:hoge;}でtransparentは設定できないしで悩んでいます。
<h1>タグだけでは解決できない問題なのでしょうか。

>>608
<h1>のfont-sizeを0にしてみるのはどうでしょうか？

>608
前にも同じような質問があったけど，「見出し」の中身が「背景だけ」って
のは
どうも変な気がするんだけどなあ…strictスレ向きかも．
前に僕が答えた時には「JavaScriptなり使えば？」だったんだけど．

ｼﾂﾓｿ。
背景色をCSSで固定しようと思って
h1{background-color:#FFDAB9;}
って書いたんだけど、反応しないんです。
タグ間違ってますか？

>>608
font-sizeを0にしても最小サイズになるだけでした…。ｽﾏｿ
うーん、IE5で見たらテキスト消えてるようにみえたんですが…
物凄くちっちゃく残ってたんですね。

<h1>をvisibility:hiddenにすれば、h1は表示されなくてスペースだけ
確保されるので、そこに背景画像をposition:absoluteで配置する
というのはどうでしょうか？

>>610
　言われてみればそうなんですが、ＣＳＳを切った時には
　見出しとしてタイトルが表示されるわけですし、
　タイトルのためだけに<img>タグを貼付けるのも
　却って混乱するだけなのではとも思います。
　strictスレはちょっと怖くて近付けない・・・。

>>612
　visibility:hiddenはまだ試していませんでした。
　やってみます。ありがとうございました。

>>608-612
画像を読み込まない設定しているユーザーとかは無視ですか。
おまえら馬鹿か。それぐらいのこと考えろよ。

><h1>のfont-sizeを0にしてみるのはどうでしょうか？
font-size に「0」を指定しても、
実際に文字が見えなくなるとは限りません。
何故ならば、UA は環境制限に応じて実効値を導き出すからです。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#actual-value

>>614
＞画像を読み込まない設定しているユーザーとかは無視ですか。
だから「代替スタイルシート」を使うんじゃないかと言ってみるﾃｽﾄ。

pxってブラウザによって大きさ微妙に変わるんですか？

>>616
ブラウザによっても解釈が違うし、解像度によっても解釈が違うらしいよ

[CSSファイル]
.title1{
width:150px;
height:50px;
padding:0px;
float:left;
border:1px dashed #CCCCCC;
background:#FFFFFF
}
.title2{
width:500px;
height:50px;
padding:0px;
float:left;
border:1px dashed #CCCCCC;
background:#FFFFFF
}
[HTMLファイル（省略してます）]
<body>

<div class="title1">
<img src="title.jpg" width="150" height="50" alt="俺の部屋">
</div>

<div class="title2">
TITLE-02
</div>

</body>

今、こんな感じなんですけど、ウィンドウが小さいとtitle2クラスが下に下がってしまいます。
ウィンドウをどれだけ小さくしても、そのまま横に並ぶように固定するにはどうしたらいいんでしょうか？

そりゃfloat使ってんだから当たり前だよな
postion使え

って言うか、解りやすいＤＩＶ厨だネ、imgにclass振るとか見出しはh1かなとか言う発想は出て来ないか

>>618
backgroundに対するcolorは設定したか？

<div> <div> <div> <div> <i><div>you</div></i>
<i> <i> <i> <i> ウェブハムズ！

<div> <div> <div> <div> <i><div>you</div></i>
<i> <i> <i> <i> ウェブハムズ！

ウェブハムズ！

∩
∽
∽

|￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
|こんな感じにスタイルシートししたいんですけどどうすればいいですか？
|＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿


くだらない質問を書くだけのスレ4
http://pc2.2ch.net/test/read.cgi/hp/1026576633/767
にまちがってさきに投稿しちゃいました。マルチだと言わないでください。

>>623

<p>こんな感じにスタイルシートししたいんですけどどうすればいいですか？</p>


P{
border-style: solid;
border-width: 1px 0px 1px 1px;
border-color: お好みで;
}

>>624
できました。
即レスありがとうございます。

>>624
> こんな感じにスタイルシートししたいんですけどどうすればいいですか？
には突っ込まないんですか？

<p class="title">こんな感じにスタイルシートししたいんですけどどうすればいいですか？</p>

P.title{
border-style: solid;
border-width: 0px 0px 1px 1px;
border-color: black;
display:block;
font-style:
font-size: 18px;
font-weight: normal;
margin: 3px;
padding: 1px;
}
こんなのにしました。

>>626
まちがってますね。すいません。じぶんで突っ込んどきます。
(=ﾟωﾟ)ﾉなんでやねん

>>627
display:block;いらない．フォントサイズ固定は読ませる文章なら止めてくれ．

>>627
てか P.title って <hn> でマークアップすべき部分じゃないか？スレ違いだが。

>>619
img要素ってbody直下に置けたっけ？ｗ

w

[CSS]
body {
background-color:#FFFFFF;
margin:0px 0px 0px 0px
}
.title{
width:150px;
height:50px;
position:absolute;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
.menu{
width:100%;
height:50px;
position:absolute;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
----------
[HTML]
<body>
<span class="title">[TITLE]</span>
<span class="menu">MENU01 / MENU02</span>
</body>
----------
>>618です。
DIV厨とか言われてDIV使わんでもいいことに気付きました(´･ω･｀)
今、こんな感じでposition使ったんですけど、TITLEがMENUにかぶさって見えなくなってしまいました。
横に並べたいんですが、どうしたらイイんでしょう。。。

びっくり！divがspanになっちゃった！

っていうか変わらんよなぁｗ
DIV厨ってなんだYOヽ(`Д´)ﾉ
別にいいじゃんかYO！

っていうか日付変わってないのにID変わった？
なんでだろうケーブルなのに

>>632
タイトルにはhn要素使え．メニューにはリスト使え．

>>634
マジレスするが、別にいいと思うなら反応するな。
突っ込まれないソースを書く機会と思えば有意義だとは思うんだがな。

本人が良けりゃいいってもんでもないけどな

>>638
デブ厨、スパン厨とかは自分からよくしたいと思わん限り更正するのは無理っぽいよ。

>>639
>デブ厨、スパン厨とか
　　　　　　　　　　　~~~~~

とかのとかって何？

>>640
最初、「とか」はつけなかったんだが、テーブルレイアウト厨とかフォントサイズ固定厨とかも同じようなもんだから、
特定する事もないかな、って思って。

>>632
とりあえずあなたはブロック要素とインライン要素について勉強したほうが
いいと思います。

もういいじゃねえか
div厨とかスパン厨とか
余計な干渉はうざいだけだろ

<body>
<div>
<h2 class="title">TITLE</h2>
<dl class="menu">MENU-01 / MENU-02</dl>
</div>
</body>
ブロック要素、インライン要素を勉強して、
>>636さんを参考にさせてもらい、HTMLは完成しました。
なんとなくわかって来ました！
.title{
width:150px;
height:50px;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
.menu{
width:100%;
height:50px;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
CSSは今こんなんですけど、横に配置するプロパティがよくわかりません。。。

デジタルKEIです。重いけど見てくれ
http://homepage3.nifty.com/digikei/ten.html

中央に配置したいdivの事で解からない事があります。
<div>文章</div>そのものを
<div style text-ailgn="center">でさらに囲んだら、このブロックは
中央にきましたが、この中の文字まで中央揃いになっちゃいました。
だからといって、文章部分をleftにするのって、何かおかしいですよね？
どうすれば良いですか？宜しくお願いします。

>>618→>>632→>>644
ｵﾓﾛｲ

div ってデヴって読むの？
今までディヴだと思ってたんだけど

divはディヴィ。
hrにhtmlとスタイルシートで
<hr style="color:#ff00ff" size="1" noshade>
とするのはへんですか？

>>648
DIV厨を愚弄してる、という事くらい気付けよデブ。
と言って欲しいのか？

>>644
完成してないよ。リストの書き方が変。
もうちょっとHTMLの基礎を勉強しれ。
ValidなHTMLじゃないとCSSはまともに機能せんぞ。

>>639
pica厨も含まれているのでつか？

>>644
｜<body>
｜<div>
｜<h2 class="title">TITLE</h2>
｜<dl class="menu">MENU-01 / MENU-02</dl>
｜</div>
｜</body>
Hn, dlを何故わざわざdivで囲むのか。
見出しになぜh1を使わずにh2を使うのか。
dlではなく、普通は ul 若しくは ol を使うべきだ。
（で、display:inline; とかcontentを使う。）

HTMLも書けないと、CSSは上手く適用されない。

>>644 =618

CSSで凝った見栄えを工夫する前に、下記のサイトでHTMLについて勉強し直すことをお勧めします。

はじめてのWebドキュメントづくり
http://www.asahi-net.or.jp/~sd5a-ucd/www/index.html

ごく簡単なHTMLの説明
http://kanzaki.com/docs/htminfo.html

>>644 を読むに至り、これはネタだと確信した。

>>644
.title{
float: left;
width: 150px;
height:50px;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
.menu{
float: left;
margin-left: 1px;/* 右ブロックとの余白 */
width:60%;/* この値はお好みで */
height:50px;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC
}
いまいちやりたいことがよくわかんないけどとりあえずこれでウインドウ小さくしても
横に並んだままになる。
ポイントはfloatさせるボックスのwidthを%などの可変の値にすること。
んで正しくCSSを使うためには正しいHTMLを覚えましょう。

>>646
えっととりあえずボックスのセンタリングについて勘違いしてると思うので説明すると
text-align: centerでボックスがセンタリングされるのはIEの間違った仕様です。
だからこの場合、<div style="text-align: center;margin-right: auto;margin-left: auto;">
が正しいセンタリングの方法です。

で中の文章もセンタリングされるということですが、それが正しい仕様なんで、
解決法として、文章をちゃんと<p>でくくって、
<div style="text-align: center;margin-right: auto;margin-left: auto;">
<p style="text-align: left;">
文章
</p>
</div>
とすれば、divでくくったボックスはセンタリングされて中の文章は左揃えになります。

657の補足で正しいセンタリングと書きましたが、正しいのではなくて
IEでも他のブラウザでもセンタリングさせるためには、という意味です。

>>657-659
れすさんくす。成る程…大変解かりやすかった。思ったんですけど、
text align:center　の部分も必要なのですか？div要素はmargin以降だけで
センタリングされそうですが。

>>660
IEだとmargin: auto;が効かなくてセンタリングされないようです。
IE6.0の標準準拠モードでは大丈夫ですが。
というわけで旧バージョンのIE対策としてtext-align: centerを入れておくのが
無難だと思います。

>>661
そういうことかぁ。UAの事を考えてという事ですね。かっちりしたcode、
凄く参考になりました。本当に有難うございました。

>>656さん
小さくしても下いきますね。。。。

.menuのwidthを100%にして、尚かつ下にいかないようにしたいんです･ﾟ･(ﾉД`)･ﾟ･

ずうずうし過ぎ
もう消えろ

＞divはディヴィ
ﾊｧ?

[Div]ision

[Div]inely

>>664
.title{
position: absolute;
top: 0;
left: 0;
width: 150px;
height:50px;
padding:0px;
border:3px dashed #666666;
background:#CCCCCC;
}
.menu{
position: absolute;
top: 0;
left: 151px;
width: 100%;
height: 50px;
padding: 0px;
border: 3px dashed #666666;
background: #CCCCCC;
}

width: 100%にするんだから横スクロールバーでるけどいいの？
とりあえずこれでウインドウ小さくしても下に回りこまないから。
あとは自分で調べてやってくれ。
って俺釣られてる気するんだけど…明日テストだっつーのに

釣られついでにhtmlも直す。上のに追加して
ol {
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 0.5em;
}
でhtmlは
<body>
<h2 class="title">TITLE</h2>
<ol class="menu">
<li>MENU-01</li>
<li>MENU-02</li>
</ol>
</body>
もう寝る。

<h1>を差し置いて<h2>から始めちゃいかーん

h1{
　　　　　display: fuck！すっこんでろ！;
}

>>671
まあそうなんだけど644の例がh2から始まってるからさ。
もうdivでいいんじゃねとか思ってきた。

/* そんなに怒らないでよ！ */

ごみん、>>674は>>672宛てね。

hr{
　　　　　たまにはdisplay : none以外にも何か設定してよ;
}

>>676
ﾏｼﾞﾚｽだけど、UAによって解釈が違うので、borderやcolorで色々調節してるよ。
とは言っても、間もなく漏れのHTMLから<hr />は全て消えてしまうんだけど。

>>676
h1 {
visibility: hidden
}

…ごめんなさい。ほんとにもう寝ます。

スタイルシートでこういうことは出来ますか？

各ページに「○○ランキング」というランキングが書かれた表
を掲載しようと思います。
そのランキング内容をCSSに書く。コードを各HTMLに記述する。
CSSの内容を変えると毎回ランキング内容を変えられる。

誤爆の予感

XSLTの予感。
どっちかというとXMLスレ向き？

……display:noneを駆使する？
未対応ブラウザでは意味が無いけど。

>>682
誰に言ってるの？

>>679
スタイルシートは見た目をコントロールするもので、
内容のコントロールをするものではありません。

なにがしたいか意味はわかりますが(似たような事をしようとした)
インラインフレームで別のページを読み込むか、
GCIに頼るしか方法はみつかりませんでした。

>>684
あーGCIね。

・・・えっGCI？

>>684
そうですか・・・そうですよね。
私もあれから調べたらCSSは見た目の変化で
内容は関係ないみたいですね。

そういうことができるCGIもないし、あってもシェアだし・・・難しい。

>>686
気を落とさずに他で相談すれ

>>679
ssiでインクルード、の方向で検索をすすめる。
やり方はｽﾚﾁｶﾞｲなので言わんけど。

<div class="mainmenu">
<h2>メインメニュー</h2>
<ul>
<li><a href="page1.html">page1</a></li>
<li><a href="page2.html">page2</a></li>
<li><a href="page3.html">page3</a></li>
<li><a href="page4.html">page4</a></li>
</ul>
</div>

というhtmlに

div.mainmenu ul li{
display: inline;
margin: 0;
padding: 0;
border-right: solid 1px #000000;
}

div.mainmenu ul li a{
padding: 5px;
text-decoration: none;
}

というスタイルを摘要すると、IE5.5 IE6 ネスケ7 Mozilla 1.0.1 Opera6.05では
page1 | page2 | page3 | page4 |
というように線で区切って適度に間隔を空けli要素が横に並ぶのですが、
IE5.01だと
page1 page2 page3 page4
というように線は出ないし間隔はあかないし（文字としての半角スペースは空きますが）全然メニューとして使えないものになってしまいます。
私の記述がまずいんでしょうか？それともIE5.01が悪いのですか？バグ辞典には載ってないようなのですが・・・。
また、対処方法はなにかあるのでしょうか。

どの様にしたら、このサイトのように腐ったリファレンスが制作できますか？
ttp://homepage2.nifty.com/yoshi-m/makehp/css/index.htm

>>690
ここまでくると、確信犯とさえ思えてくるな……

>>690
(　ﾟдﾟ)ﾎﾟｶｰﾝ．．．いや，690にじゃないけど．

>>689
div.mainmenu ul li{
display: inline;
margin: 0 5px 0 0;
padding: 5px;
border-right: solid 1px #000000;
}

div.mainmenu ul li a{
text-decoration: none;
}

手元にIE5.01ないんでわかんないんですけどこれでどうですか？

>>689
インライン要素へのborder修飾が可能となったのはIE5.5から。效かなくて當然。
>>2-6にもある「CSS対応状況表」を見よ。
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html

div.mainmenu ul li a{　} ではa要素が素の状態でしか效かないのでは。
.mainmenu ul li a:link, .mainmenu ul li a:visited, .mainmenu ul li a:hover {　}
と擬似クラスを含めて指定してやればどうか。

おっとゴメン。
WinIE5.0以前ではpaddinngも
「テキスト(置換要素以外)のインライン要素には適用されない」んだった。
　http://www.zspc.com/documents/css2/box/padding.html

ま、ＣＳＳの眞價を堪能したかったら
ＩＥは5.5以降にバージョン・アップしろってことで。

┌─┬──┐
│　│　　│
│　│　　│
│　│　　│
└─┴──┘
右側がコンテンツメニューで
左が日記の文章出力先。

こんなかんじのでカコイイCSS　くれ

随分ｶｺｲｲな

<ul>あああ
<li>hoge1
<li>hoge2
</ul>

あああ
　　・hoge1
　　・hoge2
↑ここのマージンをなくすにはどうしたら良いでしょうか?

<ul>と<li>にmargin-left:0を設定すれば
IEではマージンがなくなるのですが
NN7ではなくならないのです。

padding-leftも0にしる。

>>699
素早いレスありがとございます。
解決致しました。

>>696
こっちに書け
http://pc2.2ch.net/test/read.cgi/hp/1026576633/

売るセーバか

>>690
すばらしい。感動しますた。

擬似クラスa:link a:hover を外部CSSでページごとに指定する方法が
解りません。head内で今やってますが、.cssで全てやりたいので。
宜しくお願いします。

>690
私もある意味感動しますた。

>704
>4

>>704
bodyにID振るみたいな。>>4

うわさの>>690のCSSリファレンス見た。
最初から飛ばしていて感動した。

<H1><P>スタイルシート</P></H1>

解説もいい加減でステキ。
>spanでやってみたらできなかったのでdiv使いました。
>こういう物だと暗記しましょう

でも、関心するよ。FrontPage使いこなせてるなぁ〜って。
CSSとテーブルレイアウトのフュージョンを見た。ハーモニーだね。これこそ、WEBのインプロ。
IT　JAZZみたいな。

>>709
マジで言ってるんでしょうか？

マジレッサーﾊｯｹｿ

>>710
うん、マジで言ってるよ。徹夜してる状態のテンションだけどね。

>>712
ハーモニーですか。
通常のテンションで見てほしかったですね。

どっかの書籍のパターンに似てるとこも素敵だよね。
説明つかないとこは、いいかげんだし。俺も解説サイトつくってみよう。
muvc.netあたりで。

アダルトがらみかよ！

http://www.project-ir.com/web/

のサイトのようにリンクにマウスを乗せると
文字に色がつくようにするにはどうしたら良いのでしょうか？
（これってCSSですよね？）

>>716
ﾋﾋﾋﾋッ>>4

>>690のサイトいきなり引用からはじまってるんですが
引用元はどこですか？

>>690もテンプラに加えないとな

>>719
だな．
あれをみて「わかりますた！」とかいわれても困るけど．

ttp://www.tees.ne.jp/~pokochan/style/style.html
>CSS Level1およびCSS Level2（動作確認済のもの）リファレンスをまとめています。
どの様にしたら、知ったか振りリファレンスが制作できますか？

ここは厨なリファレンスサイトを晒すスレでつか？

厨なリファレンスサイトを晒すスレきぼんぬ。

>>723
思い立った奴が動けよ

外部シートでクラスを設定したクラスを<div class="***">と設定したときは
ちゃんと反映してたのに、見直したら反映されてません。なぜだか解りません。
他にもstyle〜なら反映されるのに外部シートにすると反映されない事があって、
外部CSSってバグが多いのかな？とか思ってます。教えて下さい。。。

>>725
サーバ上に上げた時の話か？
もうちょっと環境を書け。

いえ、まだ上げてません。が、ほぼ完成しています。
<div class=>に設定したクラスの中身（外部シートから）をコピーして、タグに直接
<div style=***>に貼り付けたら反映されます。？？？何故でしょうか？

>>727
CSSファイルへのパスは正確に指定した？

>>727
その外部シートにはどう記述してるの？
そしてその外部シートはどう読み込んでるの？
あとOSと使用ブラウザも書いて

>>725
とりあえずCSSのソースを出そう。

>>717
すみません、、そこを見たけどさっぱりわかりません・・。

すみません、DWをいじってたらできました

パスはちゃんと通ってます。（他の全てのクラスは反映される）
Win98/tttでブラウザで同時に見ながらやってます。
.aaa{"border-color:#000000;..."}の中の、""部分（他にマージンとか沢山）を、
<div style=>に入れるとちゃんと出る。という感じ。

.aaa{"border-color:#000000;..."}

の""は激しく余計。

>>733
" " で囲わないでください。

.aaa { border-color : #000000; .... }

>>733
どこでプロパティと値を""で囲むなんて教えられてきたんだ？
そっちのほうが知りたい

埋め込むときのstyle="〜"の記述からの類推じゃない？

仕様を類推するなよ。

激しく余計でした。ﾊｽﾞｶｽｳｨ。。。今までこんなまちがい無かったのに。
途中まで見えてたから（類推してくれてた？）余計気付かなかった。
でも素早いレスで解決してウレスィ。有難う。

まぁ、コピペにミスったんだろ。よかったね。

>>696
<html><body>
<div class="menu">
<h2>メインメニュー</h2>
<ul>
<li><a href="page1.html">メニュー１</a></li>
<li><a href="page2.html">メニュー２</a></li>
</ul>
</div>
<div class="main">
<p>本文</p>
</body></html>

↓でお礼言っとけ
くだらない質問を書くだけのスレ4
http://pc2.2ch.net/test/read.cgi/hp/1026576633/

類推して望みどおりになるということは、それだけそのブラウザが
優れているのだな。どんなに変なのを書いても類推してくれる
IEはやはり素晴らしい。ちょっとでも変なのは完全無視するネスケは
ユーザーに優しくない。普及しないのも当たり前。

早くcontentプロパティ対応して欲しいナァ。
ユーザースタイルシートにattr書いてもIEだと意味無いよ…(ノД｀;)

>>742
でもそのせいで
新しく追加された（別のプロパティと類推してくれるような）プロパティで誤作動する罠。

>>742
それにより「変な書き方をしても良い」と解釈する厨が量産される罠

HTMLが
<div class="main">
<div class="hoge">
hoge<br>hoge<br>hoge<br>hoge
</div>
<div class="geho">
geho<br>geho
</div>
</div>
<div class="footer">
footer
</div>
CSSが
.main{background-color:#333333;}
.hoge, .geho{float:left;}
.footer{clear:left;}
このときに背景色がつかないんですが、
どうすればいいですか？

.hoge .geho .footer に background-color 指定すればいいんじゃないの

ってゆう問題じゃないのかな

もしくは .main div{background-color:〜;}とか。

>>747
.mainにwidth: 100%; 等を指定するってのは？

>>749
それで出来ました。ありがとうございます。

追加で質問なんですが、>>746のCSSを
.main{background-color:#333333;width:100%}
.hoge, .geho{float:left;}
.geho{background-color:#999999;}
.footer{clear:left;}
にしたとき、hogeの右側全部にgehoの色をつけたいときは
どうすればいいんでしょうか？
このままだと"geho"と書いてある部分しか色がつきません。

>>751
.main{background-color:#999;width:100%}
.hoge, .geho{float:left;}
.hoge{background-color:#333;}
.footer{clear:left;}

無理矢理だけど。

すみません。聞き方悪かったです。
率直に言うと、hogeの右側全部をgehoの範囲にしたいんです。

>>742
そのCSS観は安い高校生の日本語観そっくりだな．

>>754
いくらで買ってんの？

>>754
そんな抽象的な物を引き合いに出す前に、もうちょい日本語を勉強したほうがいいと思う。

>>755-756
必死？

そういう話題はよそでやって下さい。
もしくは質問形式にしてください。

>>757
たぶん、君は「必死」と書くことで優勢な立場にあるという錯覚、或は勘違いをしてるよ。
真性ではないことを祈る。

もうやめれ

しかし必死だな

position:relative
top: -100px;

↑みたいな感じでボックスを底上げした時、
そのボックスが本来あるはずだったと位置まで余白が
開いちゃうんですが、これを解消する方法はありませんか？

ちなみにWinにてIE6とネスケ6で確認。

>>762
relative属性について、よく調べてみると。何か書いてあるはず。
relativeは他要素、レイアウトに影響を与えると。

今までテーブルレイアウトで乗り切ってきたんですが、現ページをツール使ってcssに変換すると
所謂div病ってやつになってしまいます。
css覚えるに超した事は無いと思うんですが、div病状態でもcssで公開するべきなんでしょうか？

>>764
まずはHTMLの書き方を覚えましょう

>>764
その状態だと、公開してもしなくても（現状ままでも）変わらないと思います。
マークアップを修正してから公開するか、公開してからマークアップを修正するかはお好みで。
どっちにしても「テーブル厨」「div厨」と言う心ない人はいるわけですから・・・

>>764
文脈セレクタを使えばdivの数も減ると思うよ．
cssを使うためには正しいhtmlが必須だから，テーブルよりはよっぽどまし．

おマイら、ユーザースタイルシートにどんなプロパティ書いてますか？

漏れはスクロールバーの色が変わったり、カーソルが変わるのがウザイから
* {
scrollbar-base-color:#bbb !important;
scrollbar-3dlight-color:#bbb !important;
scrollbar-（中略）
cursor:auto !important;
}
って書いてます。

あの、
ページの幅を固定したい（６００ｐｘを最大の幅として、そこからコンテンツがはみ出ないようにしたい）
のですが、どういう設定が一番スマートな方法でしょうか？

Divタグで全体を囲む
使用する全てのタグ（Ｈ１とかＰとか）に設定
ぐらいしか思いつきません・・・。

ＢＯＤＹにwidth:600;を設定できるとありがたいんですが、ききませんでした。
下位のＰやＨＲに継承されると思ったんですが。

┃attention
￣￣￣￣￣
　・このサイトは横幅600ピクセルで最適化されています
　　　なのでウィンドウのサイズを600ピクセルに合わせて
　　　閲覧してください。

　┃attention
　 ￣￣￣￣￣
ズレ補正テスト

そんな不便なサイト作るなよ

floatの次に来る内容は、ブロック要素ではダメなんですか？
テキストだとうまくいくのに、それをdivで囲んだだけで
下にいっちゃうんですけど。

駄目じゃない

自分でも色々試してみたんですが、どうも駄目でした…。
601でも書いたんですが、詳しく申し上げますと
HTMLが
<div class="contents">
<h2>contents</h2>
<ul>
<li>あああ
<li>いいい
<li>ううう
</ul>
</div>
<div class="page">
<h3>ページの内容</h3>
<p>文章とか</p>
<img src="http://xxx/" width=200 height=40>
</div>

CSSが
div.contents{position:absolute; top:5em; left:1em;
background-color:#fbfbfb; width:15em; padding:0.5em;}
div.page{background-color:#fbfbfb; padding:0.5em;
margin-left:17em;}
大体こんな感じで段組してるんですが、
ウィンドウサイズを小さくしてdiv.pageの幅がある程度狭くなっても
それ以上小さくはならないようにしたいんですが
どうすればいいのでしょうか？
それともこの段組の仕方では無理なのでしょうか？

min-width　はIE未対応だったっけか

html見ると、コンテンツ部分の幅が200px以下になったときに
画像がはみ出てるんだろうけど
そこまでウィンドウ小さくして見てる人はいないんじゃないかと。

>>776
min-widthは、未対応。

>>776
あ、そうそう。透明の画像で最低幅を確保する、っててもあるな。

>>778
そんな糞みたいな方法書くなよ

>>779
IEでmin-widthの代用ってあるか？
それ提案してから言えよ。

>>778はテーブルレイアウトと同レベルだろうが。

>769
単位が書いてないからだめなんじゃないの？

>>781
確かにstrictじゃないやり方を推奨するような書き方をしたのはまずかったな。すまん。
しかし、min-widthに代わるもの、ってある？

>>783
透明の画像で最低幅を確保する

スタイルシートって携帯アクセスには対応しないですか？

教えて下さい。ぶちきれそうです。
外部CSSで　.aaa{float:left;}　として、
<div class="aaa">BBB</div>
<div>CCC</div>
とした時に、ie5.5ではちゃんとBBBCCCとでるのに、動作確認のため入れた
NN7.0だと、ほぼ重なってしまいます。divの幅、高さともpxでしていしています。
なんですかこれは？うがー！

>786
>6

>>786
　　　　　　　　　　　 ／　　　　　　　　　　　/　 /　　 /( ∧　　）　ﾍ　ﾍ　　 　　　 　
　　　　　　　　　　 く　　　　　　　　　　　／/　（　/| | V　)ﾉ（　(　（　　ﾍ＼　　 お　 て
　　　　┘／＾|　　　 ＼　　　　　　　　 （　　|　|ﾍ|　ﾚ　　　＿ﾍ|ﾍ　)　＿ﾍ 　　　し　 め
　　　　/|　　 .|　　　　　　　　　　　　　　|　　）） )/⌒""〜⌒""　　 iii＼　　　　え　｜
　　　　 .|　　α　　＿　　　　　　　　　　ﾍ　ﾚﾚ　　"⌒""ﾍ〜⌒"　　||||＞　　　　て
　　　　　　　　　 ＿∠＿　　　　　　　ｲ　|　　|　 /⌒ｿi　　 |/⌒ﾍ　　＜　　　　や　に
　　　　　＿　　　　 (＿　　　　　　　　) ﾍ　　|　‖ （） ||　　|| （） ||　 ＿＼　　　ん　は
　　　　　／　　　　　　　　　　　　　　 (　 )　ﾍ |i,ﾍゝ=彳　 入ゝ=彳,i|＼　　　　ね
　　　 ／ー　　　　　　　　　　　　　　　（　／　　"""/　 　ー""""　　　＞　　　｜
　　　　　 ＿）　　 ｜　　　　　　　　　 ﾍ（||ii　　　 ii|||iiii＿/iii)ノヘ|||iiiii＜　　 |||||
　　　　　　　　　　｜　　　　　　　　　 ( ﾍ|||||iiii∠;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;　 　　 ﾌ　　　 ""'
　　　　/////　　　ﾍ＿／　　　　　　　) ﾍ|||""ﾍ===二二二===７ﾌ　/　ﾑ／∧　∧　∧
　　　 /////　　　　　　　　　　　　　　(　 | ii　 | |ＬＬ|＿|＿ＬＬＬ//　|　 　 ）（　∨|　∨)
　　　・・・・・　　　　　　　　　　　　　　　 )　)| || | |||||||||||||||||||||||| |　|　 　（　ﾍ |　ﾍ ) (
　　　　　　　　　　＿＿＿　　　　　　　　| | /|　.| |||/⌒／⌒ヘ | |　|　 iiiiﾍ　( |　（ | /
　　　　　　　　　　　　／　　　　　　　　　/　(|.|　| |　　　　　　　| |　|　 iii　 ) | ﾍ　）(　)
　　　　　　　　　　　 （　　　　　　　　　　(　/..|　 | |＿＿＿＿_/ |　|　 iii　 ( ）（　// /
　　　　　　　　　　　　＼　　　　　　　　 )　）..|　　|ﾍＬ|＿|＿Ｌ/ / /　 ,,,,--（/Vﾍ）(／

>>788 これは誰なんだろう…。

>>788
なんですかそれは。教えて下さい。うがー。もうヤになりそうです。

>>786
ネスケで段組やろうとしなければいいんじゃないの？
インポートでエスケープ。見栄えなど二の次。

>>791
＞インポートでエスケープ。見栄えなど二の次。
？

>>792
@importでネスケには読ませなかったらいいんじゃないの？って意味。

CSS validatorでチェックして、エラーも警告も出ない。
でもvailed認定もされない。
間違ってるのか正しいのか何もわかりましぇん。

NNみなきゃよかったよ。…でも、ひょっとして回り込みをさせるものって、
ブロック要素はだめ（NNの動作が正しい？）なんですか？
>6あたりかたっぱしから見てもイマイチ解らん。

>>793
ネスケ4は@importで回避できるけど、7は無理だろ、というツッコミなのでは。

>>795
とりあえず、もうちょっと詳細にソースさらしてみ。
あと、「ほぼ重なってしまいます」の意味がよくわかんないから、
そこらへんも第三者に理解できるよう詳しく。

2つのボックス（縦600px横200px）を作り、それぞれのブロックに文章を
いれています。ソースはそのまんま。全くシンプル。他に複雑な事もしてません
（lintチェック100）
外部CSS　.aaa{float:left;}　として、
<div class="aaa">文章</div>
<div>文章</div>

┏━━━━┓
┃┏━━━━┓
┃┃　　　┃┃
┗━━━━┛┃
　┗━━━━┛
こんなんなっちゃいます。ieではちゃんと　文章→文章　と出るのに。

.aaa,.bbb {width:600px;height:200px;float:left;}

<div class="aaa">文章1</div>
<div class="bbb">文章2</div>

このあとに続く要素には clear

>>798
ボックスには２つともfloat: leftしてる？

かぶった。>>799のやり方にすれば絶対問題ないはず。
他のスタイルが影響してなければ。

>>798
以下>>6より
>Q: なんかMacIEやOperaでフロートの表示が崩れるみたいなんですけど？
>A: floatさせる要素にはwidth指定が必須（img要素以外）。
>　　これ、CSSの仕様書の決まりなんです。WinIEが勝手に補ってるだけです。

読んだのか？

漏れもｶﾌﾞった。ｺﾞﾒｿ。

>>799>>800
3番目にはclearしてますが、2番目にもfloarを？…してません。
さっそくやってみます。

>>804
二つ目のボックスもfloatしないと二つ目のボックスの内容が一つ目のボックスより
大きかったら、一つ目のボックスの下に回りこむよ。
回り込まないIEの仕様が間違っている。
よってブラウザ責める前に>>6読みなさい。

で・出来ました。感激。文章2の後、回りこみをしないので、floatはいらなく、
3番目でclearすればよいかと思ってました。仕様ではなくIEそのものに合わせて
しまっている事が結構あるみたいです…勉強不足でした。
皆さん本当に有難う。ごめんねNN7。

>>806
おーよ。精進しろや。

俺が言ってるのは文章が横にだだっ広いと
読みにくいから指定幅以上に拡げたくないのと、
それに会わせてＨＲとかも一括で
サイズを合わせられる方法を知りたいんです。


>>770
ウィンドウのサイズはどうでもいいんですよ。
俺が言ってるのは、ウィンドウのサイズを極端に
拡げたときにコンテンツまで横に伸びるのが嫌なだけです。
あと、あんまりにもウィンドウを縮めた時に、最低でも５００ｐｘ
ぐらいあった方が読みやすいと思ってるからです。


>>772
どの辺が不便でしょうか？

ずいぶん偉そうですね

http://pc2.2ch.net/test/read.cgi/hp/1045046001/

>>809
　　　　　　　　　　　／　　　　 ＼
　　　　　　　　　 ／　　 ∧　∧　＼
　　　　　　　　　 |　　　　 ・　・　　　|
　　　　　　　　　 |　　　　 ）●（　　 |
　　　　　　　　　 |　　　＼＿＿／　|
　　　　　　　　　 ＼　　　 ＼ﾉ　　／
　　　　　　　　　 　 ＼＿＿＿_／
　　　　　　　　　　　　 ＿|　|＿
　　　　　　　　　　　／　　　　 ＼
　　　　　　　　　　<　<~|　　　|~> 〉
　　　　　　　　　　　＼｀| 　 　|'_ノ
　　　　　　　　　　　 ／　　　 ＼
　　　　　　　　　　／／O| |O＼＼
　　　　　　　　 ／／　　//　　　＼＼
　　　　　　　　|　|　　　//= 　ヽ　　|　|
　　　　　　　　|　|　 ／/　二　 ＼｜｜
　　　　　　　　|　| （_ノ　―　＝　 )|　｜
　　　　　　　（＿）　　　　　　　　　（＿）

バナナが一本ありました〜バナナンバナナンバナナ♪

>>809
　　　　　　　　　　　　　　　　　　ζ
　　　 　　　　　　　　　　　　／￣￣￣￣＼
　　　　　　　　　　　　　 　/　　　　　　　　　＼
　　　　　　　　　　　　　　/＼ .　　＼　　　／｜
　　　　　　　　　　　/´ 　　　ヽ 　　.一　　一｜.　ヽ
　　　　　　　　　　　| /　　　　|-----◯⌒つ｜　　|
　　　　　　　.　　 　|　　　　　|　　　＿||||||||| ｜　　|　　一生、一緒にいてくれや〜
　　　　　　　　　 　|　　 　　　|　／　＼＿/ ／ 　　|
　　　　　 　.　　　　|　　　　　|＼＿＿＿_／　　　 丿　　
　　　　　　　　　 　ﾉヽ｀ 　　ノヽ　　　　　 ｀　　　/
　　　　　　　　　 /　　　,/ｿ　　　　　　　　　＼ /　　　　
　　　　　　　　　（　　　　　　　,/　　　 ｀´　　　|
　　　　　　　　　 ＼　　　イ　 ´　 　　　　　　　|
　　　　　　　　　　　＼　　ヽ　＼　　　　八　　ﾉ
　　　　　　　　　　　　 ヽ　　　　｀　ー ´人｀　/
　　　　　　　　　　　　　　＼ 　　　　／ ´,､ヽﾉ
　　　　　　　　　　　　　ノ⌒　　　　/　　 　　 |
　　　　　　　　　　　　/　　　　　　　　　　　　ﾉ_
　　　　　　　　　　　　|　ﾉ　　　　　ヽ　　　 丿　＼
　　　　　　　　 /⌒l　|.　　　　　　　　　　/ 　　　　＼
　　　　　　 　 /　　l,丿　,　　　　　　　っ　　　　 .　　＼　　
　　　　　　 　|　　/　　´　　　　　 ／⌒`l　　　　　　　 ＼　
　　　　　　　丿 /　　　,　　　　 .／　　　ヽ　　　ヽ　　　　|.　　
　　　　　　/　　|,　　　|　　 　／　　　　　 ）＼　　　　　　ヽ　　　
　　　　　　ヽ　ノ　 　 ヽ__,／　　　　　 .　（　 _＼＿ 　　　　| 　　
　　　　　 (_)__)|＿＿＿,/::::::::　　　　　　::::::(__)_)_)ヽ、＿＿/:::::

　　　　　　　　　　　 　　 _,,.. -─‐- .､.._.
　　　　　　　　　　　,. ‐''"´　　　　　　　　 ｀`'‐.､
　　　　　　　 　 ,.‐´　　　　　　　　　　　　　　　｀‐.､
　 　 　 　 　 ／　　　　　　　　　　　 　 　 　 　　　 ＼.
　　　　 　 ,i´　　　　　　　　　　　　　　　　　　　　　　 `:、
　　　 　 /　　　　　 　　　　　　　　　　　　　　　　　　　 ヽ.
　　　　,i　　　　　　　　　　　 　　　　　 ,,,,;;::'''''　　　　 　　 i、
　　　 .i　 　　　　　　,,,,;;:::::::::::::::　　　　　　　__ 　 　　　　　 i.　　
　　　.i　 　　　　　　"　　　＿＿　::::　　'"ゞ'-'　　　　　　　　l　　　　
　　　|　　　　　　　　　- '"-ゞ'-'　::::::...　　　　　　　 　　　 　 |.　　　／￣￣￣￣￣￣
　 　 |　 　 　　　　　　　　　　　　 :::::::　　　　 　（⌒）　　　　 .| 　＜ 劣悪遺伝子は根絶やしな 　　
　　　|　 　 　 　　　　　　　　　　(　,-､ ,:‐､　　 　￣　　　　　 | 　　 ＼＿＿＿＿＿＿
.　　　l　　　　.　　（⌒）　　　　　　　　　　　　　 　　　　 　　 l.
.　　　 i、 　 　 　　￣　　　　　 __,-'ﾆニニヽ .　 　　　　　　 ,ｉ
.　　　　i、 　 　　　　　　　　　　　ヾニ二ン" 　 　　　 　 　,!
.　　　　 ヽ 　 　 　 　　　　　　　　　　　　　　　　　　　　　/
.　　　　　 `:､ 　 　 　 　　　　　　　　　　　　　　　　 　　,‐'
　 　 　 　 　 ＼　　　　　　　　　　　　　　　　　　　　 ／
　　　　　　　 　 `‐､ 　 　　　　　　　　　　　　　　 , ‐´
　　　　　　　　　　　｀ '‐.､ _　　　　　　　　　 _, ‐''"
　　　　　　　　　　　　 　 　 ｀` ‐-----‐ '"´

>>809
田舎者はだまっていろ
埼玉でおとなしくしてろ

なんだ　キチガイか

なんていうか、教えてやるんだからって偉そうな奴ばっかりだな。
文句があるなら来なきゃいいですか？(^-^)

　　　　ヽ::::::::::::::::::/　　　　　　　　　　　　　 ::::::::　　　　　　　 ＼::::|_
　　　　　）:::::::::::::::|　　　　　　　　　　　　　 ::::*:::::　　　　　　　　ヽ:|::::ヽ
　　　　 /::::::::::::::::|　　　　　　　　　　　　　　::;;;;:　　　　　　　　　　l::::::::ヽ
　　　　/::::::::::::::::::|　　　　　　　　　　　　　ﾉ::ii:ヽ::　 　　　　　　　　l::::::::::|
　　　　|::::::::::::::::::::|　　　　　　　　　　　　/::::;ﾘ:::l::::　　　　　　　　　|::::::::::::|
　　　　|:::::::::::::::::::::l　　　　　　　　　　　...l::::;ﾘ:::/::　　　　　　　　　/:::::::::::::|
　　　　.|::::::::::::::::::::::l　　　　　　　　　　. /:ア／:::　　　　　　　　／:::::::::::::::i
　　　　l:::::::::::::::::::::::::l　　　　　　　　　 ./::`^:::::　　　　　　　　／:::::::::::::::::/
　　　　ヽ::::::::::::::::::::::::l　　　　　　　　 /::::::::::　　　　　　　　／:::::::::::::::::::/
　　　　　/:::::::::::::::::::::::l　　　　　　　 /:::::::::::::　　　　　　／::::::::::::::::::::::/
　　　　　/::::::::::::::::::::::::i　_＿-ー--=;;;::::::::::::::　　....::::／:::::::::::::::::::::::／
　　　　./:::::::::::::::::::::::::::i":::::::::::::::　　ヾ─ 、／"ヽ:／::::::::::::::::::::::::::::l
　　　　　ヽ::::::::::::::::::::::丶::::::::::　　　/　　　il　　　.ヽ:::::::::::::::::::::::::::/
　　　　　　 ＼::::::::::::::::::::ヽ:::::::　　/　　　　l !　　　　ヽ:::::::::::::::::::/
　　　　　　　　　ii::::::::::::::::::` -::-/　　　　 / .i　　　　　ヽ::::::::／
　　　　　　　　　　-----￣丶/　　　　　lヽ　　　　　　　ヽ/

（・３・）　アルェ〜　ここの住人てどっちもばかなのかＮＡ？

>>769
widthはブロック要素と一部のインライン要素にしか適用できません。
だから全体を<div>で囲うとかしかないと思います。
あとてめーが読みやすいと思うサイズが全ての人にとって読みやすいわけではない
ことがわかればもっとCSSを上手に使いこなせると思います。

（・３・）　エェー　ぼるじょあよりばかがいるＹＯ！

荒れてるんで具体的に不便だと思う点を言うと、
ウインドウサイズ小さくしてる人は横スクロールバーが出る→これはかなりうざい
逆にウインドウサイズが大きい人も600pxで折り返されるのが読みづらいって
思う人もいるってことです。

つまり、レイアウトは禁止と。

（・３・）　アルェ〜　ぼるじょあは荒らしてないＹＯ！

　　　　　　　　　 人 人 人
　　　　 　　　 　(　 Y　Y　 )
　　　　　　　　／＼＿＿／
　　　　　　　/　／　　　　＼
　　　　　　/ ／ 　　　　　　ヽ
　　　（⌒ /　　 　　･ つ ･　｜
　　（　　(6　　　　　 　　　　｜　　／￣￣￣￣￣￣￣￣￣￣￣￣￣
　　　（　｜　　　　 ー―　 ｜ 　＜　ファックユー
　　　　　 ＼　　　　　　　　/　　　 ＼＿＿＿＿＿＿＿＿＿＿＿＿＿
　　　　　　　＼＿＿＿_／　　　

>>821
min-widthとmax-widthをきちんと実装しているブラウザ以外は無視する
というのであれば、横幅固定もいいかもしれないが。
今のところ、MozillaとOperaぐらい？

# min-widthとmax-widthで柔軟に対応するなら、そもそも横幅固定する
# 必要ないんじゃ、というのは内緒な。

受験が終わったからかねぇ……

幅固定ウゼーよ。

>>822
いやwidth固定はよくないってことを言いたいだけで。
ってのはユーザにとってwidth固定はあまりにも閲覧の自由度が制限されるから。
つかレイアウトだって第一には見やすさを考慮するでしょ？
ならユーザーCSS使えって言うならそれは製作者としてどうかと思う。
>>824
max-widthを相対指定にするってことだよね？

div {
width : 600px; /* 通常、幅は600px */
min-width : 90%; /* ただし、ウィンドウ幅の90%以上には広がらない */
max-width : 60%; /* また、ウィンドウ幅の60%以下には縮まらない */
}

これで、ウィンドウ幅が狭い場合も横スクロールバーは出ないし、
ウィンドウ幅が広い場合も、左右が極端に空くこともない。
ただし、IEは対応してない。

ttp://www.fromdfj.net/index1.html

↑のサイトのgreenというスタイルのCSSの段組の一番したの階層の
緑色はRGBカラーを教えてください。

CSSのソースを見てみたのですがわかりませんでした。

>>828
なるほど。それなら横スクロールバーでなくていいね。
今使ってるPC800×600だから横幅600pxに固定されるとお気に入り表示した時に
横スクロールバー出るからさ。スレ違いか。

>>829
「色取鳥」で検索。
あとは自分で頑張れ。

>>830
自分で例示しておいてなんだが、正直、ここまでやるぐらいなら、
body { width : 90%; }
とだけ指定して、ウィンドウ幅が広くて読みづらいって奴は、自分で
エクスプローラバー（IE）なり、スライドバー（Netscape）なり、
ホットリスト（Opera）なりを出してお好みの幅に調節してもらった方
がいいな、と思わないでもない。

スタイルシート使うヤツのレベルが下がってきてる。
頼むから、幅固定したいヤツは黙ってテーブルレイアウトしとけ。

>>833
レベルの高かった昔でも幅固定しているページはあったけどな。

CSSのレベルは今のところ２までしかない訳だが。



・・・あれ？違うの？(´Д｀;)

>>819
そうなんですか。
やっぱり、全体を囲むか・・・。
全ての方の満足のいくようにするにはなかなか難しいと思いますし、現実的にはどこかで
妥協も必要じゃないかと思うんです。僕の線引きは、大多数だと思うＰＣからＩＥ・ネスケ・オペラでブラウジングしている
方で、少なくとも５００ｐｘ以上で閲覧する方々を対象にしたいと思っています。
レイアウトや技術的な面でも私の現状ではこれが精一杯ですし、それほど時間的な
余裕もありません。


>>821
横スクロールバー→少なくともそれ以上で見て欲しいと言うことなんです。たいていの方は５００ｐｘ以上の環境で
閲覧していると思うんです。

僕は横に画面イッパイに文字が拡がるのが読みにくいという感覚をもっていますし、
２ちゃんねるの書き込みでも改行をいれろという文句をたまに聞くので、たいていの方は
アル程度の幅が読みやすいんではないかと思うんですよ。

>>828
僕へのレスでしょうか。
親切にありがとうございます。

でも、ＩＥユーザーを切り捨てるのはちょっと。

>>832
ＢＯＤＹへはwidth指定できないそうですよ。
それだと簡単でいいんですけどね。

あ、言い忘れましたが、６００ｐｘじゃなくて、５００〜６００ｐｘの間で
800×600の環境でお気に入りとかを拡げても多少余裕のあるサイズで幅を制限したいんですよ。
一応解像度を変えて確認もしてます。
これでもダメなんでしょうか。

確かに、大きい幅に固定されてスクロールバーが表示されると非常に見にくいですが、
それが幅固定が絶対だめとは僕は思いません。
当然、固定しない方が自由度が高いですし、中には画面いっぱいの横幅に拡げて読みたい方もいらっしゃるのかもしれませんが、僕的には通常文章に関して言えば限度によりますが、適度な幅というのがあると思うんです。
そして、その幅にあわせて画像や文のタイトルなども位置を合わせたいのです。
そうすると、表示する幅自体を固定するのが適当な方法だと思うんですよ。
そうすれば、画像などもalignでleftと指定できますし。（表示する幅を固定しなければ、本当に画面の左の端にいってしまって文章とずれてしまうんですよ・・・。数値で指定もできますが・・・。）

>>836
おっけーわかりました。その辺は自己判断で。
ただ一個だけ質問させてください。煽りじゃないですよ。
確かに今多くの人は1024×768のディスプレイ使ってるとは思いますが、
その人達にとってみやすい幅が500pxとするならば、width: 50%、
つまりウインドウ最大で512pxくらいになるわけですがこれじゃだめなんですか？
逆に僕には幅を固定しなければならないコンテンツってのが想定できないんですよ。
どうしても見せたい画像が500pxあるとかならわからないでもないんですが。

俺はウィンドウ最大化してブラウズすることなんて滅多にない。
幅固定は迷惑。こっちの好きなように調節させて欲しいと思う。

あ、書き込んでるうちにレスが・・・
画像の位置はcssでやるべきじゃないですか？
ある程度自由な位置にレイアウトできますよ。

>>838
ああ、それでもいいですね・・・。
あまりにも幅が狭い時にレイアウトが崩れちゃうのが嫌だったこともあって
固定がてっとりばやいかなと思ってたんです。
透明ＧＩＦでつっかえ棒して最低幅を指定するやり方（ダメらしいですが）を
前に使っていたのでスタイルシートに移行するにあたって、
横スクロールバーが出なければ幅固定でもイイかなと。

確かにどうしても固定しなければ行けないコンテンツなんかないですが・・・。
それ以前に本当にそれをネットで世界中に公開したいのかと問われると
困ってしまうようなコンテンツですが。

>>839
いえ、だからそう言う方の場合も考慮してだいたい５００ｐｘぐらいなら
支障ないんじゃないかなと思ってるんですが・・・。
僕も最大化はしないです。

>>840
基本的にレイアウトは全てＣＳＳでやってます。
ただ、数値でがちがちに固定するのはちょっと抵抗があるので、出来るだけ
親要素を基にして相対的に指定したいんですよ。（ここの所、幅固定と矛盾してますね・・・・）

ん？やっぱり、838さんの言うとおりでいいのかな・・・。
ちょっと実際に試してからまた来ます。
お騒がせしました。

>>842
>いえ、だからそう言う方の場合も考慮してだいたい５００ｐｘぐらいなら
>支障ないんじゃないかなと思ってるんですが・・・。
だったら見る側が500pxぐらいにウィンドウをリサイズするだろーが。
親切だと思ってるようだが、はっきり言って余計なお世話だぞ。
自分が見やすいと思ったからと言って、他人もそう思うとは限らない。
見る側が調節できるという自由を奪ってどうする。文字サイズ固定と変わらんぞ。

>>776
実際にはコンテンツ部分で15em分の幅を取っているため、
そこまで小さくなくてもはみ出てしまうんです。

>>784
透明の画像で幅を確保しようとしても駄目でした…。

>>844
min-widthの使い方分かってる？

>>845
IEで見てるんじゃない？

>>842
おれ、タブブラウザ使っているから、左にエクスプローラバーがあるのよ
だから、幅は500pxも保てない

>>846
いや、min-widthの代用の透明画像を使う、って事は、
「これ以上縮まないように」って事になるはずだけど、
601の言ってることは、「はみ出る」だから、上のやり方では解決しないと思って。

#透明画像の場合、大きいときは%指定、縮めてもこのサイズ以下にならない（改行されない）ように、みたいな使い方かな。

>>843
最後に一つ。
色々試したらきっと相対指定のメリットに気付けると思います。
特にcssで凝った段組とかする時幅を相対指定したほうが
ウインドウサイズに依存せずにレイアウトできるし。
それと最初のほうのレスで煽りっぽいこと書いてごめんなさい。
がんばって。

>>849
あんた、いいやしだな。

>>849
さっきまでは利用者のことを考慮してる風な発言だったのに、
なぜ急に「作り手側の利便性」を述べ始める？
「気付ける」とか「がんばって」とかいちいち人を見下すのはやめてくれ。

>>846
動作はIEとNNとoperaとmozillaで確認してます。

NNでは画像がはみ出て、IEだとdiv.page部分が画像サイズに固定され
横スクロールバーが出てウィンドウサイズから出るんですが、
文字だけウィンドウサイズに収まるという状況になってしまうんです。

>>848
透明画像を使ってもそれ自体が「はみ出て」しまいますからね…。

>>851
いや基本的にレイアウトはCSSでやってるって言ってたからそれならと思って
アドバイスしたんだけど。
ウインドウサイズに依存しないレイアウト＝利用者側のメリットだと思うし。
気に障ったならすまんです。

なんかレス間違いでケンカになってないか

>>854
俺もそう思った

>>854
うわーほんとだ！>>849のレスの相手は>>842だった。
>>843ごめんなさい。つかどっちにしても>>849のレスは高圧的でいくない。
みんなまとめてごめんなさい。罰としてなんとか>>848の問題解決してみます。
…僕のスキルじゃ無理そうだけど。

↑>>848でなくて>>852だった…
ごめんなさいごめんなさい。ついでにサーバに負荷かけてごめんなさい。
もうだめだ逝ってきます…

>>857
がんばって。

>>601
N7でdiv.page {min-width: 200px}で画像はみ出す？
やってみたけどちゃんと右側が200pxで収まってるけど・・・？
あととりあえず仕様通りwidthも指定しなきゃならないよね。

んでIE対策としてdiv.page h3{width: 200px}にしてつっかえ棒的にしてみたんだけど
<p>の幅がやっぱりおかしくなって駄目だった。
もう少しがんばってみるけど僕のスキルじゃ無理っぽい。

今思いついたんだけど
<p><img src="200pxのgif">文章とか</p>
で駄目か？全然スマートじゃないけど。

>>860
だめでした無視してください。
つかやっぱり無理でした・・・。でしゃばってすいません。

俺はこいつの慌てぶりを楽しんでる

>>862
楽しんでないでアドバイスくれよう

あの、教えて下さい。
外部CSSファイルの中で、…}　と、/**/　の間の空白（スペース）をいくつか
削る前と後で動作が全く変わるのは、なんですかこれは！！
もういやになりそうです。

幅固定されるのが嫌な香具師はユーザー定義スタイルシートつかえ。

>>864
意味不明．そのソース全部書け．

>>838
さんのやり方で行くことに決めました。
ありがとうございました。


>>843
えー・・基本的にデザインに凝ったりしたいので（その是非については個人的なことなのでご勘弁を）
画面サイズはある程度固定したいわけで・・・。
それを前提として、できるだけ多くの人にも見ていただけるにはどうしたらいいかと思ってお聞きしています。
ですので、親切ではないです。　

閲覧できないなどの致命的なものや、大多数の方に不都合が生じる
場合を除いて、レイアウトと自由度とを比べるならばレイアウトを取らざるをえません。
僕が悩んでいるのはこの両者の釣り合いのことです。
自分の思い描いたレイアウトを実現すると同時に、できるだけ読み手側を配慮する。


・・・まあ、僕がウィンドウサイズに関係ないデザインを創れるようであれば最良なんですが。
それほどのデザインかよ！とかいうのはやめて下さい。

>>849
ありがとうございました。
解決しました。