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

このエントリーをはてなブックマークに追加
952Name_Not_Found:03/07/10 07:47 ID:???
>>950
セレクタは、それでよい。
後はdisplay:none;とdisplay:blockをmediaによって使ひ分けて。
953Name_Not_Found:03/07/10 08:16 ID:???
padding-hegth 使え(うひょげ〜ら
954Name_Not_Found:03/07/10 08:23 ID:???
つまんねえよ。>>953
山田く〜ん、座布団取り上げ。
955Name_Not_Found:03/07/10 08:25 ID:???
>>954
反応すんなヴォケ
956Name_Not_Found:03/07/10 13:31 ID:fwbs3bzF
リンクに
border-bottom: 1px dotted #333333;
という下線を出して、ロールオーバーで消えるようにしたかったので、
普通にa:link、a:visitedに上のを、a:hover、a:activeにborder-bottom: 0 none;といれました。
そうすると、リンクは複数あるのですが、なぜか1番上のリンクだけしか目的のようになりませんでした。
2番目、3番目のリンクは普通のリンクになっています。
何が原因でしょうか。教えて下さい。

よろしくお願いします。
957956:03/07/10 13:51 ID:???
OSはWindows98SE、ブラウザはIE6です。
958Name_Not_Found:03/07/10 13:54 ID:???
>>956
text-decoration: none; でリンクの下線を消してないんじゃないの?
だから重なったようで一番上だけに見えるんじゃない?
959Name_Not_Found:03/07/10 13:55 ID:???
>>956-957
OSとかの環境より、ソースの該当部分を。
960956:03/07/10 14:10 ID:???
ごめんなさい、自己解決しました。
961Name_Not_Found:03/07/10 15:34 ID:???
自己解決でもいいけど原因ぐらい書かないと(ry
962Name_Not_Found:03/07/10 18:52 ID:???
スタイルシートでサイト内のすべての画像サイズを
固定する方法
教えてください
963Name_Not_Found:03/07/10 19:06 ID:???
img {
 width: *px;
 height: *px;
}
964Name_Not_Found:03/07/10 20:30 ID:Y6wRMysG
965Name_Not_Found:03/07/10 22:20 ID:???
:lang(en)が使えれば、英語のみフォント変えとかできる、と思うんですが、
未対応ブラウザでも英語のみフォント変え、ってできませんか?
966Name_Not_Found:03/07/10 22:57 ID:???
英字しかないフォントと日本語フォントを併記しとけばいいんでないか?
967950:03/07/10 23:21 ID:iK4pGoSs
>>952
すいません、>>950 にどうやってdisplay:none;をくみこめばいいんでしょうか・・・

<style type="text/css" media="print">
.printonly{
  display:none;
}
</style>
だと、「印刷時に表示しない」、ってなってしまいますよね・・・
希望は、画面では表示せず、印刷時には表示させたいのですが・・・
968Name_Not_Found:03/07/10 23:24 ID:???
>>967
media="screen"
969Name_Not_Found:03/07/11 00:00 ID:???
>>963
res-thx
できました♪
970Name_Not_Found:03/07/11 00:11 ID:???
ある画像のみ
img {  width: *px;  height: *px; }
の影響を受けないようにする方法を教えて
下さい。
ちなみに
ttp://www.openspc2.org/reibun/css/
を参考にしています。
971Name_Not_Found:03/07/11 00:17 ID:???
>>970
classとかidとか。
>>4へどうぞ。
972950:03/07/11 00:33 ID:???
>>968
あ、そっか
<style type="text/css" media="screen">
.printonly{
display:none;

}
</style>
ね。たしかにうまくいきました。さんくすです
973Name_Not_Found:03/07/11 00:56 ID:???
>>972
違ふ。足りない。
<style type="text/css">
.printonly {display:none;}
</style>
<style type="text/css" media="print">
.printonly {display:block;}
</style>
974950:03/07/11 01:03 ID:???
>>973

あ、>>972>>973 のどちらでも大丈夫ではないかと。。。
挙動は、どちらでもOKでした。

理屈的にも、どっちでも問題ないはず。。。
975Name_Not_Found:03/07/11 01:09 ID:???
>>974 いや。screen以外の媒体でアクセスした者はどうなる?
976Name_Not_Found:03/07/11 01:30 ID:???
>>975
displayなら、初期値はinlineのはずだが
977Name_Not_Found:03/07/11 01:50 ID:???
>>976 
はて、それが何か?
例を出せば、Operaではフルスクリーンモードがprojectionメディアになってます。
したがって>>972のスタイル指定で>>950のHTMLを見ると、画面上で見えます。
printメディアでだけ表示したいなら>>973の方法がよいかと。
または
<style type="text/css">
<!--
.printonly {display:none;}
@media screen {
.printonly {display:block;}
}
-->
</style>
あ、でもMacIEには@mediaで括った指定を無視するバグがあるんだよな……。
978Name_Not_Found:03/07/11 02:12 ID:???
>このホストでは、しばらくスレッドが立てられません。
>またの機会にどうぞ。。。

誰か新スレッド立ててくれい。
979Name_Not_Found:03/07/11 03:23 ID:???
/* CSS・スタイルシート質問スレッド【21】 */
http://pc2.2ch.net/test/read.cgi/hp/1057860130/l50

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

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

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

過去スレや関連リンクは>>2-10
【過去ログ】>>2
【関聯スレ】【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7
cf. http://web2ch.s31.xrea.com:8080/index.php?CSSFAQ
  http://nira.s25.xrea.com/FAQCSS/ls_00.html
982Name_Not_Found:03/07/11 15:04 ID:???
983Name_Not_Found:03/07/11 15:05 ID:???
【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第3版
 http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
 http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
 http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・CSSでイケてるデザインサイト 15
 http://pc2.2ch.net/test/read.cgi/hp/1056190919/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/
9844:03/07/11 15:06 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト (特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け (JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
・* CSS { イケてるスタイルを:"作れ";} 発表所 (消滅?)
 http://strict.jp/~sappari/2ch/css.php
9855:03/07/11 15:06 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

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

1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html
9866:03/07/11 15:07 ID:???
【FAQ】
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://alt.s31.xrea.com/overflow.html
 http://alt.s31.xrea.com/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html

Q4: CSSで段組するには?
A4: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと (ネスケ4でも崩れない段組みの実例)
 http://village.infoweb.ne.jp/~fores/
9877:03/07/11 15:07 ID:???
【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど?
A5: floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
  http://cssbug.tripod.co.jp/detail/winie/b079.html
   http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

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

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

Q8.いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A8.下記に書いてあります。テーブル・レイアウトは段組のFAQ(A4・>>6)をご覧あれ。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
988Name_Not_Found:03/07/11 15:39 ID:???
>>981-987
乙。
でもすごく言いにくいんだけど…もう新スレたってるよ。
989Name_Not_Found:03/07/11 16:05 ID:???
>>981-987は新スレッドからのコピー&ペースト。
990Name_Not_Found:03/07/11 16:17 ID:???
次スレッド
/* CSS・スタイルシート質問スレッド【21】 */
http://pc2.2ch.net/test/read.cgi/hp/1057860130/l50
991Name_Not_Found:03/07/11 16:40 ID:???
>>前スレ976
950の例がpだからblockで構わないと思うが。
それならp.printonlyにしろって話はあるが。

992991:03/07/11 16:40 ID:???
誤爆した。
993Name_Not_Found:03/07/12 00:28 ID:???
994Name_Not_Found:03/07/12 01:17 ID:???
995Name_Not_Found:03/07/12 01:49 ID:???
996Name_Not_Found:03/07/12 03:59 ID:???
997Name_Not_Found:03/07/12 04:53 ID:???
999で止めたい
998Name_Not_Found:03/07/12 05:29 ID:???
998
999Name_Not_Found:03/07/12 05:29 ID:???
999
1000Name_Not_Found:03/07/12 05:29 ID:???
1000 GET ⊂(゚Д゚⊂⌒`つ≡≡≡(´⌒;;;≡≡≡
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。