WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:スタイルシート 縦中央(垂直中央)

0:[投稿] 樹里 [2003/01/15 23:41 ][環境:IE6 NN7 ---]

3532では CGIで 大変お世話になりました。
今回は スタイルシートでの 質問です。 よろしくお願いします。

まず ソースを書きます。
<html><head><title>untitled</title>
</head><body>
<div style='background-color:#999; width:100%; height:100%; text-align:center;'>

</div>
</body></html>
これで ■は ウインドウを 大小しても 横位置中央に 配置されました。

<html><head><title>untitled</title>
</head><body>
<div style='background-color:#999; width:100%; height:100%; text-align:center; vertical-align:middle;'>

</div>
</body></html>
こうすれば 縦横中央位置に 配置されると 思ったのですが
上のソースと 変わらない位置に あります。

画面上 縦横中央に ■が 来る様にしたいのですが…。
現在は tableで 中央に来ましたが
スタイルシートで これを やりたいです。 よろしくお願いします。


1:[回答] Impossible [2003/01/16 02:15 ]

この例示での DIV要素の height にパーセント指定した場合、
BODY要素の height に対する割合となるのですが、

>コンテナブロックの高さが明示されておらず、内容領域の高さに依存していれば、'auto'として解釈する。
>'height'の指定値が'auto'ならば、その要素がインラインの子供要素のみを持つ場合、最上段にある行ボックスの上辺から、最下段にある行ボックスの下辺までの距離が、'height'の算出値になる。
>その要素がブロックの子供要素を持つ場合、最上段にあるブロックボックスのマージン上辺から、最下段にあるブロックボックスのマージン下辺までの距離が、'height'の算出値になる。

という仕様なので、正しくは「auto」として解釈されます。
IE6 などの標準準拠モードでは正しく解釈されますが、
互換モードの時や、旧式のブラウザでは都合良く解釈されてしまうのです。
こういった表現は、将来性に欠けますし、全てのブラウザで同じ様に解釈される保証はありません。

次は vertical-align についてです。
vertical-align の適用要素は「インライン要素とセル要素」であり、
かつ継承性を持たないので DIV要素に指定しても全く無意味です。

vertical-align の概説は次の通りです。
>行ボックス内における、インラインボックスの垂直方向の位置を指定する。
>親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。そのような親を持たない要素に対しては何の効果も無い。

結論を言うと、厳密な CSS の仕様では「画面に対して縦横中央配置」など不可能です。
同様に、厳密な HTML 及び CSS の仕様では「tableで 中央」にも不可能です。
特定の環境に依存しても良いと云うのであれば、可能かもしれませんが。


2:[質問] 樹里 [2003/01/16 16:18 ]

Impossible様 ご回答ありがとうございます。
厳密には HTML CSS で 縦横中央は 無理なんですか…。

table でも 不可との事ですが 現在のソースを 書きます。
<html><head><title>untitled</title>
</head><body>
<table style='background-color:#999; width:100%; height:100%;'>
<tr><td style='text-align:center; vertical-align:middle;'>

</td></tr></table>
</body></html>
この方法じゃ 厳密には 駄目だ。 って事ですよね??

これで 縦横中央表示に なったのですが (IE6 NN7)
実際 ■は ボックスで あったり その中の tableで あったり…。

レイアウトの為の tableを 削除しようとしたのですが…。

IE6 NN7 と opera で 見てみたのですが
operaでは tableを外したり CSSを外したり 出来るので
意図するように表示されるのを 諦めてみました…。

上記のソースは 何故 厳密には駄目なのか も お教え願えたら 幸いです。


3:[回答] やじうま1号 [2003/01/16 17:09 ]

tableでも不可と言うのは、テーブル周りの要素のDTDにheightの属性が無いためです。


4:[回答] ・・ [2003/01/16 17:41 ]

厳密には、とは、 HTML4.01strictに従っていないってだけです。
少し中央からずれているという意味ではない(と思います)。


5:[回答] やじうま1号 [2003/01/16 18:31 ]

>4
細かいことでは在りますが、HTML 4.01 "strict"ではなくて、そもそもHTML 4.01にはありません。

但し、HTML 4.01及びXHTML 1.0のなかのTransration及びFramesetにはTD及びTHにheightがあります。


6:[質問] 樹里 [2003/01/16 19:31 ]

やじうま1号様 ・・様 ご回答ありがとうございます。

<!doctype html public '-//w3cdtd html 4.01 transitional//en' 'http://www.w3.org/TR/html4/loose.dtd'>
フレームは 使わないので 上記(小文字へ省略…)を 宣言すれば 2のソースでも 良いのでしょうか??

もし その様な方法で 最初の目的である スタイルシートで 縦横中央が 出来るならば
出来れば 厳密に書きたいのですが…
方法は あるのでしょうか?? お教えいただけなくても ヒントを…。
よろしくお願いします。


7:[回答] Impossible [2003/01/16 20:34 ]

><!doctype html public '-//w3cdtd html 4.01 transitional//en'
> 'http://www.w3.org/TR/html4/loose.dtd'>
>フレームは 使わないので 上記(小文字へ省略…)を 宣言すれば 2のソースでも 良いのでしょうか??

駄目です。第一に不明な文書型宣言です。
「小文字へ省略…」の意味もわかりません。
文書型宣言の意味を勉強してください。
http://www.kanzaki.com/docs/html/doctype.html

W3C の如何なる HTML の仕様にも、table要素に『height属性』はありません。
>但し、HTML 4.01及びXHTML 1.0のなかのTransration及びFramesetにはTD及びTHにheightがあります。

そもそも、「縦横中央」を実現することによって誰が利益を得ますか。
著者の自己満足ですか。ユーザにとっては、どうでもいいことです。
「縦横中央」に執着せずに、もっと広い視野でウェブデザインを考えて下さい。


8:[回答] 平野 敬 [MAIL] [URL] [2003/01/16 21:16 ]

HTMLとCSSの枠にこだわるのでなければ、JavaScriptで画面サイズを取得してうんぬん、ということもできそうですが。

HTMLの文法チェックには専用のチェッカをご利用ください。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html


9:[回答] Peach [2003/01/16 22:04 ]

>>7
>そもそも、「縦横中央」を実現することによって誰が利益を得ますか。
>著者の自己満足ですか。ユーザにとっては、どうでもいいことです。
>「縦横中央」に執着せずに、もっと広い視野でウェブデザインを考えて下さい。


デザインの勉強をしてみればわかる事ですが、レイアウト(に、限らず色や形等の全ての情報)には製作者の意思を込めることが可能で、視覚系ブラウザのユーザに与える効果は存在します。
もちろん、効果には個人差があるので、あなたが何も利益を得ないこともまた、本人が言うのだから間違いないのでしょうが、それは万人に共通していえることではありませんので思い違いをしないでください。


10:[回答] Impossible [2003/01/17 08:55 ]

>>9
ウェブブラウザは、閲覧領域の幅に最小値を設け、高さは文書量によって決まり、収まりきらない場合はスクロール機構を提供します。
従って、制作者は「縦横中央配置」を実現する為に対象とする閲覧領域の広さを定め、その広さに収まりきるように内容量を制限しなければなりません。
何故ならば、閲覧領域の高さよりも内容量が多いと「縦に中央に配置」する意味がないからです。
果たしてそういった制限は、制作者及びユーザにとって利益になるでしょうか。

>operaでは tableを外したり CSSを外したり 出来るので
>意図するように表示されるのを 諦めてみました…。

ユーザスタイルシートを使わせずに済むようなウェブデザインが必要なのではないですか。
あるいは、ユーザスタイルシートが使い易くなるようなウェブデザインが必要なのではないですか。


11:[回答] Peach [2003/01/17 09:23 ]

>>10
>従って、制作者は「縦横中央配置」を実現する為に対象とする閲覧領域の広さを定め、その広さに収まりきるように内容量を制限しなければなりません。
本末転倒?。
内容がまずあって、それに対してマークアップを行い、効果的な装飾(レイアウトなど)を施すのです。
その過程で、縦に中央配置というレイアウトが出てきたのであれば「既に制限は発生していない」という事ではないのでしょうか?
閲覧領域に収まりきれないほどの内容量がある時に、中央配置なんて誰も考えないとは思いませんか?(その状態は縦横に中央配置という要件を満たしているともいえるし。)


12:[回答] ・・ [2003/01/17 09:33 ]

いつも思うことですけど、現在の主流ブラウザにできることで、ユーザビリティーではないことは良くない、といった主張を他人に押し付けるのはどうかと・・・

見た目の美しさのみが重要なページもあります。

たとえば、Flashや画像を見せるページで、文字ブラウザや音声ブラウザに配慮するなんて意味無いですし。


13:[質問] 樹里 [2003/01/17 10:24 ]

Impossible様 またまたありがとうございます。
平野 敬様 Peach様 ありがとうございます。

6の発言中の Document Type Definition 周りを修正します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
書き方は これで 宜しかったでしょうか??

table には 高さ指定が 無い事を他で読みました。
<table height="100%"> は 駄目なんですよね??
<tr> や <td> に なら 良いのですよね??
<table style="height:100%;"> でも 駄目なんでしょうか??

配置の為のテーブルを 削除したい。
ってのが 今回の目標なので 参考までに。って事になりますが…。

なんだか ちょっと 話が ずれてしまった 気もしなくないですが。
縦横中央の実現での利益 って事に対し
損も 得も ありません。 損得で 考える事も 無いと思いますが…。
著者の自己満足です。
しかし ユーザーにとって けむたくない程度のものと 思います。
この発言自体が けむたい気もしますが…。

何故 中央配置をするか を 書きます。
800x600 で 見る方も いらっしゃるでしょう。
もしかしたら 640x480 以下で 見る方も 居るかもしれませんが。

800x600で 横にスクロールしないでも見れるページ は 少ないと思います。
横幅を 800 に あわせて考えてみよう。 と 思いました。
それを 1280x1024 で 見た場合
右側が 大きく空きますよね?? で 横中央に 配置してみよう。 と 考えました。

これを 縦でも考えたので 縦も中央に と なりました。
自己満足です。 ですが 1024x… 以上で見て と あり
それ以下では 配置の為の tableが 崩れて 微妙な改行に なってる。
それよりは 良いのでは?? と 考えます。

私の職業は デザインです。
例えば 背景や文字色を 変えたら リンクの色も 変えたくなります。
見た目です。 作っている物は 見られるものですから。
個人でデザインの仕事をして そのページを見て 発注される。
そのページに 自己満足があっては 駄目でしょうか??
自己満足 と 言うより 個性 って 語を 使いたいですが…。

発注する側は DTD うんぬん 文法 うんぬん 関係ありません。
きちんと見れれば。 IE5 NN6 位で 満足です。

罫線に 色付けたら 駄目ですか??
NN から 見れないから?? IE 拡張だから??
駄目なら 1px x 1px の 画像を 横に引っ張ります。

最近までは そんな事も 解りませんでした。
table を 配置以外も目的に 使う事も 考えませんでした。
そうじゃなく 勉強しようと しています。
ここで できるなら 教えていただき 学ばせていただき
そして 本を読むなり 自分でも 学ぶ。
その為に ここを 利用したら 駄目ですか??
勉強してください と 言われるのは 解ります。
でも 解らないから 聞いています。
頼るのは 簡単でしょう。
それに 甘えるつもりは 無い。 と 言ったら 嘘ですけど
それを ふまえて 勉強では 駄目でしょうか??

長くなってきたので 一旦切ります…。


14:[お知らせ] 樹里 [2003/01/17 10:33 ]

長々と 書いてしまっているうちに…
Peach様 ・・様 ありがとうございます。

ちょっと 私が熱くなってしまっているので
1〜2時間 落ち着こうと 思います。
その時 改めて お礼に伺いたいと 思います…。


15:[回答] Malic [2003/01/17 16:53 ]

結局、スタイルシートの仕様がまだまだ不足しているって事ですな・・・
画面中央に表示したい、という、どこにでもありそうな欲求に対応しきれないんだから。

現行バージョンのスタイルシートで正しく書けないなら、テーブルで書いておくのが良いと思いますね。


16:[完了] 樹里 [2003/01/18 12:10 ]

Malic様 ご回答ありがとうございます。

解決してないですけど…。一旦 完了 に したいと思います。
ご回答いただいた皆様 本当に ありがとうございました。
私の 勉強不足から ご迷惑をおかけした点が ありました。

私も 勉強して ここで 回答にも 参加できるように なりたいと思います。
では 微妙な切り方で 失礼とは 存じますが…。
完了です。 ありがとうございました。


17:[完了] ma-to [2003/01/20 05:52 ]


// 酷い。

// 掘り起こすことになるのか。完了者には悪いが。


当たり前すぎるが、一応書いておく。幾つかの要素型にあるレイアウト専用の属性と CSS のプロパティは、名前が同じでも、基本的には独立した仕様に則して実装されているべきである。しかし、誰もそのような実装を望んでいない。ましてや、レイアウトの言語を完全に CSS 一つに絞っている人にとっては全く関係ない。
CSS 以前に、レイアウトに関する仕様詳述が公開されていたという記憶はない。詳述されることも公開されることもなかったと想像される、「ブラウザで表示確認して各自が慣れて下さい」というスタンスで提供されていた実装を俗に「レガシーなレイアウト」とか、「レガシーな HTML」とか呼ぶようだ。後者の呼称はおかしいかもしれないが、HTML 仕様書に、レガシーなレイアウトに関する記述が散見されるから、妙な言葉というわけではないようだ。
この流れの中で、当然、一様ではない部分が出てくる。レイアウトに関しては、一様ではない部分を一様であるかのように扱うことを「標準準拠」と呼んでいるのであろうと私は感じている。例えば、ie6 と Mozilla の類で、blockquote 要素が、表示に際して、左右に正のマージンを取っている事を前提とした場合、

    <body>
        <blockquote>
            <table width="100%">..</table>
        </blockquote>
    </body>

を正しく描く (横スクロールが出現する) のは、ie6 の互換モードだけである。


CSS 仕様書に関して。

大概は、一つ以上の章を通読すれば解決する。これを難しいと言う人はいない。しかし、難しいという意見をよく目にする。

    html
    {
        width: 100%;
        height: 100%;
    }

などは、難しい部類に入る。自信を持ってこう指定できる人は希である。私はこういうリニアの端っこを心の中で特異点と呼んでいる。もし html 要素の表示に関して、height が auto と解釈されると思い込んでいる人がいるとしたら、それは少なくとも正解ではない。特異点に於いては思考不要では済まない。だから難しいのかもしれない。


逸れた話の先にある雑談。テーブルレイアウトに関して。

データ保存を目的としたものを HTML の各要素型からどうしても挙げなければならないとすれば、それは form 関連の要素型である。もし仮に、table 関連の要素型を挙げるとすれば、例えば Mozilla の類を使っていれば、何気なく書かれた HTML が一瞬にして expat でデータになってしまうわけで、全ての要素が table 同様の扱いを受けなければならないことになってしまう。この事実は今時の視覚系メジャーブラウザに大概当てはまる。
そもそも、HTML の仕様では、各要素型はどれも、とてもデータ保存には使えない。table 要素型に関しては、複数の table 要素を関連付ける仕様すら存在しないのに、table 関連の要素にデータを保存しようとする人がいるだろうか。
従って、table 関連の要素は人の知覚に訴えなければ、その要素型の存在意義が薄い。視覚に対しては、平面上の表という体裁で訴えてくれる。視覚だけを相手にするのであれば、pre 要素型でも間に合うが、人の知覚は視覚だけではない。
明らかに (曖昧) レイアウト目的で使用していたとしても、制作者に、「各セルの内容は、たとえレイアウト調整画像であろうとも、紛れもないデータである。」と、もっともらしい理由でも続けて主張されれば、反論は難しいと想像されるし、相手にする気も失せる。倫理上必須である summary と caption は、寧ろ、この主張をしなければならない制作者の為にあるのではなかろうかと密かに怯えている。


width と height。

MS-CSS (造語) は、これらを求めてくる。これは、n4 で、absolute positioning を求められたのと酷似している。仕様書をある程度読めば、これらを明示することが必要になってくる局面の少なさに気付く。


display。

これ無しで話が進むことはあり得ない。だから、というわけでもないが、この酷いスレッドでは話が逸れていってるねえ。


例示。

Mozilla の類は以下を意図通りにレンダーしますが、それは CSS の不足を勝手に補足した結果ですか?
それとも、この条件でのレイアウトに関しては、CSS に不足は存在しないということですか?
それとも、この条件でのレイアウトに関しては、CSS に不足は存在しないと仮定して、Mozilla の類が何らかの補足をしているとしてもそれは存在していない CSS の不足というものではない、ということですか?

    <html>
        ..
        <body>
            <div>■</div>
        </body>
    </html>

    ---------

    /* box */

        html
        {
            display: table;

            margin: 0;
            padding: 0;

            width: 100%;
            height: 100%;

            border-spacing: 0;
        }

        body
        {
            display: table-row;
        }

        div
        {
            display: table-cell;

            padding: 0;
        }

    /* text */

        div
        {
            text-align: center;
            vertical-align: middle;
        }


18:[質問] 樹里 [2003/01/20 12:14 ]

一度 完了を解除したい と 思います。 状態を 完了以外にすれば 出来るのか??


19:[質問] 樹里 [2003/01/20 12:39 ]

ma-to様 ご回答ありがとうございます。

酷いものになった事とに 反省してます。
掘り起こしていただいて 良かったです。
このままにして置くのも なんかなぁ…。 と 思ってました…。

>17
Mozilla でって事ですが… IE6 では (当然??) 無理でした。
NN6.2 でも 確認できました。 この表示が 欲しかったです。 至極。

display で table とか セル に 出来るんですね??
インライン とか ブロック には 出来ると 思ってましたが そんな事出来るとは…。

…</head><body><div>■</div></body></html>
見た目も かなりすっきりしました。

でも IEで表示できないのが 難点ですね…。
IE & NN (各 ver.は 高めでも) どちらでも 同じ(似た)様に 表示できて レイアウトの為の table を 使わないもの。 を 目指していたので…。

でも 今現在 私の書いた頁(.html)では
IEなら<hr>色付きで。 NNなら先頭に<center>を とか
各々で 似た表示になるように JavaScriptで 切り替えているので
NN用の部分で 大幅に変更できそうです。

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

折角 あげてもらったので…
引き続き IEでも 出来る方法を 質問しても 宜しかったでしょうか…。
もしくは IEなら 出来る方法でも…。
色々 調べたり 試したり してますが まだ 出来ていません。 よろしくお願いします。


20:[回答] yuu [2003/01/20 16:26 ]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>天地中央</title>
<style type="text/css"><!--
body {
    margin:0;
    padding:0;
}
div {
    position:absolute;
    top:50%;    /* 内容に応じて調整 */
    right:auto;
    bottom:auto;
    left:50%;    /* 内容に応じて調整 */
}
--></style>
</head>
<body>
<div>■</div>
</body>
</html>


21:[回答] yuu [2003/01/20 16:40 ]

ただし、内容が本当に ■ なら良いけど、これより大きいものになってくると、調整するにも限度があったりもするだろうから、IEに関しては position:absolute での配置位置をある程度妥協しつつ、Mozillaなどでは >>17 のような感じで実現する。という前提にすると、IEのみが解釈する謎のコメントを使って、IEだけ position:absolute されるものと見なすようにする。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>天地中央その2</title>
<style type="text/css"><!--
html {
    display:table;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    border-spacing:0;
}
body {
    display:table-row;
}
div {
    display:table-cell;
    padding:0;
    text-align:center;
    vertical-align:middle;
}
--></style>
<!--[if gte IE 5 ]>
<style type="text/css">
html,body,div {
    display:block;
}
div {
    position:absolute;
    top:50%;    /* 内容に応じて調整 */
    right:auto;
    bottom:auto;
    left:50%;    /* 内容に応じて調整 */
}
</style>
<![endif]-->
</head>
<body>
<div>■</div>
</body>
</html>


22:[お知らせ] 樹里 [2003/01/20 23:37 ]

yuu様 ご回答ありがとうございます。

>20-21
やってみました。 一応 出来ました。
実際は 内容が■で ないので 50% の 部分を換えて やってみました。
何故 一応と書いたのかは ウインドウのサイズを 変えたときです。
元々やっていた table での配置では ウインドウのサイズを800x600の画面で 最大化した時も中央に
1280x1024でも 最大化した時でも 内容が収まるギリギリまで ウインドウを小さくしても 中央に あったので
それを 再現したかったから。です。

1280x1024で位置合わせをした後 800x600で見たら かなり 右に寄ってしまっていました。
JavaScriptと組み合わせて…。 なら 出来そう(と 思っただけ…)ですが
>17
の NNでの表示が 思う様に成り過ぎているので IEでの表示が いまいち に 見えてしまいました。

凝り過ぎ ですかねぇ…。
HTML で デザインした物を 閲覧して頂く。 って考えが 間違えてる気も してきました…。
NNと IEで 似た様に見せる意味があるのか?? と 言われれば それまで かもしれませんが…。
もう少しの間 ねばってみたいと 思います。

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


23:[回答] ひじ [2003/01/21 00:22 ]

CSS2仕様書に基づいて書くのであれば、ポイントは2点。

1. 閲覧領域(The viewport)に対して固定されたボックスを用意する。
position:fixed; を指定するのがCSSにおいて閲覧領域に対して固定されたボックスを作成する唯一の方法です。
position:absolute; では、包含ブロック(Containing blocks)に対する配置で、閲覧領域に対して固定することはできません。初期包含ブロック(initial containing block、HTMLではhtml要素が該当する)は、heightプロパティがautoの場合は、高さは文書の内容量に合わせて変化することになります。閲覧領域の高さには依存しません。
http://www.parkcity.ne.jp/~chaichan/qanda/qa3382.htm#r6 では嘘を書いてしまいました。申し訳ありませんでした。

2. ボックスを閲覧領域に対して中央配置する
この例の場合は、CSS2仕様書の10.6.4 Absolutely positioned, non-replaced elements (絶対配置される非置換要素) に当たります。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#abs-non-replaced-height
に従って位置を決定します。
ここで、
「この時点でまだ'margin-top'と'margin-bottom'の値が両方とも'auto'のままなら、上下のマージンが等しくなるように上の等式を解く。」に着目します。
この条件を満たすには、top, height, bottom すべてをauto以外の値にすればOKです。この場合は、margin-top と margin-bottom が同じ値になるように計算され、ボックスが中央寄せできます。

以上をまとめると、下記のような HTML/CSS になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>untitled</title>
 <style type="text/css">
  #a {
   position:fixed;
   top:0; bottom:0;
   height:1em;
   margin:auto;
   text-align:center;
  }
 </style>
</head>
<body>
 <p id="a">■</p>
</body>
</html>


24:[お知らせ] 樹里 [2003/01/21 00:57 ]

ひじ様 ご回答ありがとうございます。

毎回そうなのですが…
ちょっと話が 今の私には 難しく それを 理解しようと しているのですが そのうちに 混乱してきてしまいます…。
頑張って 読ませていただきます。 何か それが嫌だ と 思われるような 書き方 してしまいましたが そうではないです。 失礼だったら すいません。

(内容を理解するより)先に 試してみました。
>23
IE6 では 上中央に
NN7 では 縦中央で左側に ■が 配置されてしまいました。
読み取り不足が あると思いますので もう少し 理解してから もう一度 試してみようと 思います。

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


25:[回答] ひじ [2003/01/21 23:17 ]

>>24
>IE6 では 上中央に
これはIE6のバグです。Microsoftにバグの修正を要求すべきでしょう。
このIEのバグに対処する方法は私は知りません。
(Windowsがないので確認できません)

> NN7 では 縦中央
この解釈も変です(left, right, width プロパティが全部autoのときは、left:0; right:0; width:auto; margin-left:0; margin-right:0; (Floatsがない場合)になるはずですが、そうなっていません)が、Netscape7の場合は、明示的に left:0; right:0; と指定しておけば水平方向についても中央寄せできるようです。


26:[質問] 樹里 [2003/01/22 15:18 ]

ひじ様 どうもありがとうございます。

NN7
>>25
> left:0; right:0;
で 思う表示が 出来ました。

IE6 では やはり…出来ません。
MSに聞いたら それは '仕様'だそうです。 困りました。

現状 NN6up では
>>17
>>25
の 2通り出来て
IE は ちょっと 難しい。 と なりました。

ちょっと 最初と外れてしまうかも しれませんが…
XML とかで書いたら 出来るのでしょうか?? とも 思ったのですが どうでしょう…。


27:[回答] qwer [2003/01/22 18:18 ]

興味深く拝見しています。

最近のバージョンのIE限定で、CSSの仕様に基づいてなくても構わないのでしたら、IE独自拡張の"expression()"を使う方法もあります。
()の中にJScriptの式を記述しますので、ブラウザがスクリプト無効だと、効果がありませんが。

以下に簡単に例示します。
適当に改行をいれてみましたが、それでもかなり横方向に長くなってるので見づらいかもしれません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitianal//EN">
<html>
<head>
<title>untitled</title>
<style type="text/css">
 #a {
   position: absolute;
   top: expression((((document.body.clientHeight > document.all.a.clientHeight) ?
                    ((document.body.clientHeight - document.all.a.clientHeight) / 2) :
                    0) + "px");
   left: expression((((document.body.clientWidth > document.all.a.clientWidth) ?
                     ((document.body.clientWidth - document.all.a.clientWidth) / 2) :
                     0) + "px");
 }
</style>
</head>
<body>
<p id="a">■</p>
</body>
</html>


IEのパージョン5.0以降が対応しています。ただ、Windows版以外でも使えるのかは、私には検証できません。
IE6では、CSSの解釈が「互換モード」の方が、狙いどおりの結果が得られるような気がします。
「互換モード」では、「+ "px"」を省いても可。

樹里さんの望む方向とは違っているかも知れませんが、何かのお役に立てば幸いです。


28:[保留] 樹里 [2003/01/23 02:11 ]

qwer様 ご回答ありがとうございます。
>>27
やってみました。
私の環境が 現在 win2000pro IE6 なので 動作すると 思いましたが
最初 丸写しさせて頂いたら 思う様に動かず 改行 スペースなど 調整しても 同じでした。
ステータスバーに ページ内でエラーが… と JavaScript での エラーの様に表示されました。
>expression
が 気になったので いろいろ 試してみています。
今は
<body style="margin:0px;">
<div style="position:absolute;
width:expression(document.body.clientWidth);
height:expression(document.body.clientHeight);
padding-top:expression(document.body.clientWidth /2);
padding-left:expression(document.body.clientHeight /2);
background-color:#dcdcdc;">

</div></body>
と 試してみました。
中央には 行かないですが 実際中に入るものは ■ではないので
何とか調整すれば 思う表示が 得られそうです。

興味深く と 頂きましたが
沢山の方々に ご回答いただき 本当に ありがとうございます。
ご回答の中の意味が まだ よくわかっていない部分もあり 申し訳ありません。
これだけ ご回答を頂き まだ 解ってないじゃすまないので 一旦 保留にさせていただき
まとめたいと 思います。

ご回答いただいた皆様 そして 目を注いでいただいた方々 この場を 提供して頂いている管理人様 本当に ありがとうございます。


29:[回答] qwer [2003/01/23 10:13 ]

かえってご迷惑おかけしたようで、申し訳ありません。

実際に投稿した内容(27)をコピー&ペーストして確認したら、確かにスクリプトエラーが出ました… ()の対応が正しくないようです。

手元のソースと比較したところ、"expressin"の後に"("が 1つ余分に入っています。正しくは"expression((("と"("が3つになります。

完全に私のミスであり、余計な手間をおかけしたことをお詫びします。

よろしければ、上記の修正を施して再度お試しください。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World