5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :1:02/09/12 04:52 ID:???
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

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

質問の前には過去ログを WinIEの場合[Ctrl+F]で検索しましょう。

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

また、「環境を書け」 とか 「ソースは?」 と求められたときは
応じるようにしましょう。 回答が早く返るようにするためです。

※ マターリ進行推奨 ※

939 :859:02/10/15 12:03 ID:???
正しいかどうかはちとわからないんだけど(initial containing blockとかもわからなかったし)
CSSでページ領域の真中表示できた。
以下必要部分書いてみます。

html, body { margin:0px; padding:0px; width:100%; height:100%; }
h1 { line-height:1; position:relative; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center; top:50%; }
.header { position:relative; top:-0.5em; }

<body>
 <h1><span class="header">まんなか</span></h1>
</body>

これは文字だけどimgとかブロックとかでも.headerのtopをうまく書き換えればいけると思う。
どうでしょ? いちおうMozilla1.0.1とIE6SP1では確認しますた。
なんかCSS的にまずいとこあるかな?

940 :Name_Not_Found:02/10/15 12:43 ID:???
>>930
スレ違いっぽい話題をあんまり引きずりたくないんだけど、
改行をコメントアウトして空白文字として出さない、って小技を見たことがある。

〜〜〜行末<!--[改行]
-->行頭〜〜〜

全部の改行にかけるとすると、ちょっと馬鹿馬鹿しいけど。

941 :Name_Not_Found:02/10/15 12:54 ID:uiSrQ8pk
>>939
いいんでないの? 
でもOpera6では上の方に配置されるね。垂直方向の中心にはならない。
NN4.7では全然駄目。それどころかウインドウ最大化したら墮ちた。

942 :859:02/10/15 13:35 ID:???
>>941
あぁ・・・Operaの存在忘れてました(すまそ)
NN4.xは無視の方向です。 NN4.xのこと考えるとそもそもCSSなんか使えないですし。
んー、Operaで表示されないってのはOperaが駄目なのかCSSでやっちゃいけないこと
やってるのか・・・ちとOperaでの検証してみます。

943 :Name_Not_Found:02/10/15 13:46 ID:uiSrQ8pk
>>939
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}

944 :943:02/10/15 13:48 ID:???
>>939を下の通りに直せば、OperaでもIE6でもN7でも真ん中配置になる。
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}


945 :859/939:02/10/15 13:52 ID:???
>>944
ですね。 私も確認しました。
この変更により、html要素へのCSSは不必要になりますね。
なんとなく、すっきり。

946 :Name_Not_Found:02/10/15 13:59 ID:???
>>939-945
しかしオペラだけなぜposition:relative;ではうまくゆかなかったんですかね。
どんな計算してるのかなあ? positioning算出のバグか? 理窟がよくワカラン。
誰かわかったら、こちらへ報告してくれませんか。
 CSS/DHTMLバグ辞典スレッド ver2.0
  http://pc3.2ch.net/test/read.cgi/hp/991666454/l50

247 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)