掲示板/スタイルシート質問板/過去ログ/一覧/ CSSでページ内スクロールを入れるとMACIEで・・・

0 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: CSSで縦横固定サイズのサイトをつくっています。

CSSのoverfrowでページ内スクロールを入れると
MAC-IEでページのスクロールが下まで出てしまいます。
スクロール内が長いページだと、空白が延々と続いてしまいます。
見えなくなるように出来ないでしょうか？

ページのスクロールを強制的に消すことは避けたいと思っています。

以下にページを置いております。
http://page.freett.com/supermama/index.html

どうぞ、よろしくお願いします。

1 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: 投稿者です。すいません。
先ほどのアドレス、Winで見ると広告がたくさん出るようなので
こちらのアドレスでお願いします。

http://abcc.web.fc2.com/
よろしくお願いします。

2 名前： utt ： 2006/10/06（金） 15:27 ID:JARqwFtT: 初めまして、rhino様。通りすがりのuttと申します。
正直質問の意味がよく分からなかったのですが
WinIEでhttp://abcc.web.fc2.com/を見る限り
延々と続く無駄な空白などは見えませんでしたよ

何のアドバイスにもなっておりませんが
報告させて頂きます

3 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: ありがとうございます。
すいません。言葉足らずで。

そうなんですよ。MACのIEでだけ起こるんです。
なんとか解消したいのですが。
よろしくお願いします。

4 名前： Z ◆XTzyosZXcL ： 2006/10/06（金） 15:27 ID:m5yPteAd: >>2を拝見しましたけれど、単純に「DIV要素で段組を実現しようとしているにもかかわらず全体を一行（TR要素）でくくってTABLE要素で画面の縦横幅いっぱい（width="100%" height="100%"）にしている」ことが原因だと思われます。

　まず、TABLE要素とついでに余分な改行のみの行を削除してはいかがでしょうか。

段組によるマルチカラム講座：
http://www.geocities.jp/multi_column/

また、

.mainnowaku {
border: 2px solid #330000;
width: 800px;
height: 589px;/*ie5\*/height:585px;/*--*/
text-align: center;
margin:0 auto;
}

とCSSハックを用いることにより.mainnowakuの高さがUAによって違う結果になるようです。

"通"御用達、CSSハック - CSS Dencitie：
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

5 名前：園葉： 2006/10/06（金） 15:27 ID:OfLW8a3R: こんにちは、rhinoさん。

> CSSのoverfrowでページ内スクロールを入れると
> MAC-IEでページのスクロールが下まで出てしまいます。

以下のバグだと思われます。
overflow:auto; を指定した要素の下に空白ができる(5.x)：
http://cssbug.at.infoseek.co.jp/detail/macie/b050.html

自分のサイトではoverflow:auto;のコンテンツを更新履歴として利用していますが、
ページ上部に配置して中身が大量にならないようにして回避しています。
rhinoさんの例だと大量の中身を必要とされているようですので、
Z ◆XTzyosZXcLさんの挙げておられるCSSハックで回避されるのが良いのではないでしょうか。

余談：このバグを該当スレッドに報告したのは自分です。もう3年以上前でしたか。

6 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: Z ◆XTzyosZXcLさん、園葉さん　ありがとうございます。

Z ◆XTzyosZXcLさんの言っていた、
周りのテーブルを消そうと思ったんですが、
CSSで左右はセンターに出来るのですが、
縦がセンターに出来ません。

何か方法があるのでしょうか？

7 名前： Z ◆XTzyosZXcL ： 2006/10/06（金） 15:27 ID:m5yPteAd: 　確認なのですが・・・そもそもHTML(XHTML)編集に何をお使いなのでしょう？下手すると、>>4-5「以前」の問題解決を探らないといけなくなるかもしれません。

関連しそうなFAQ(よくある質問と回答）：
http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%A5%BD%A1%BC%A5%B9%A4%CB%CA%B8%BB%FA%CE%F3%A4%AC%C1%DE%C6%FE%A4%B5%A4%EC%A4%EB

その他参考：
http://www.shoshinsha.com/pukiwiki/pukiwiki.php

8 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: Z ◆XTzyosZXcL さん　ありがとうございます。

作成、編集には
Dreamweaver8 を使用しています。

それ以前とはどういったコトですか？

9 名前： Z ◆XTzyosZXcL ： 2006/10/06（金） 15:27 ID:m5yPteAd: >>8
　使用しているツール類（エディタ、Webオーサリングツール、サーバ側提供編集ツールなど）によっては編集そのものに制限がかかる場合があるからです（一部分の編集しかさせなかったり、自動的にソースを書き換えてしまったりなど）。
（>>0からたどったら、http://tools.freett.com/というページにいきあたったため。）

　Dreamweaverであれば、HTML(XHTML)ソースの編集機能があるでしょうから、それを使えば不要な部分の除去は簡単に出来ると思います。

　なお、既出ではありますが直接の操作に関する問題などのご質問については、公式コミュニティ（http://forums.adobe.co.jp/）や、そういった話題も取り扱っているコンピュータ関係の質問掲示板のほうがよろしいでしょう。

Dreamweaver サポート（Adobe社）：
http://www.adobe.com/jp/support/dreamweaver/

余談：
http://t-studio.com/column/index.php?ID=275
http://www.mag2.com/m/0000169311.html

10 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: いろいろありがとうございます。

でも操作には一応問題無いと思っています。
すいません、伝えきれず。

>>4　を拝見して
コンテンツをセンターに指定しているテーブルを無くし、
<div>で囲んでCSSでセンターにすればいいってコトだと
思ったのでやろうと思ったのですが、

縦のセンターに指定する方法が分からなかったのです。

それで解決するのならばと思ったのですが。

11 名前： Z ◆XTzyosZXcL ： 2006/10/06（金） 15:27 ID:m5yPteAd: 　あまり「縦のセンタリング」って考えたことがないので（ユーザースタイルシートで設定の上書きが可能（参考：http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html ）ですしね）直接の回答はできませんが、理解のための資料としてお奨めなのは下記ですね（書籍なら「セオリー・オブ・スタイルシート」（技術評論社）でしょう）。

スタイルシート2-CSSのプロパティ/ボックスモデル：
http://www.kanzaki.com/docs/html/htminfo17-2.html#box

　UAのBugも含めた話であれば下記でしょうか。

ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

　より新しい話（今後出てくるであろうIE7対応問題）も含めてなら下記なども。

ADP: Web Design アーカイブ：
http://adp.daa.jp/archives/cat_web_design.html

12 名前： 五月雨 ： 2006/10/06（金） 15:27 ID:q0XLEugU: 横から失礼します。

> 縦のセンターに指定する方法が分からなかったのです。
CSSで縦方向の位置を指定するには、vertical-alignプロパティを用います。
が、vertical-alignプロパティはセル要素、もしくは、インライン要素にしか適用できないので、div要素だけで縦方向の位置を指定することは出来ません。
この場合は、td要素に指定するのがスマートかと思います。

視覚整形モデル詳細
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align

ちょっと私にはrhinoさんの意図が見えてこないのですが、「縦のセンターに指定」にはどういった狙いがあるのでしょうか？
overflowプロパティを外す代わりにセンタリングしたい、ということでしょうか？

13 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: ありがとうございます。

なんかちょっとブレてきましたね。
僕の質問。
すいません。

整理すると

とりあえずは、見た目は今の状態
http://abcc.web.fc2.com/
（コンテンツ自体は常にセンターにいる）
で、MacのIEで無駄なスクロールが出ないようにしたいだけなんです。

その方法として>>4で教えていただいた
tableを外すというのを試してみようと。
思ったんですけどね。

14 名前： 五月雨 ： 2006/10/06（金） 15:27 ID:q0XLEugU: んーと、誤解があるようですが、>>4で紹介された手法はCSSハックと言いまして、<table> を外すことが直接的な解決手段ではありません。
>>4の場合、

/*ie5\*/height:585px;/*--*/

の部分だけは、Mac-IEで適用されます。

あと、縦方向のセンタリングですが、「ウインドウの縦幅に従って、センタリングする」という事は出来ません。

Webブラウザはウインドウの横幅を超えるコンテンツがある場合に、自動的に折り返します。
つまり、「Webページの横幅」と「ウインドウの横幅」は一致するので、横方向ならウインドウ横幅を基準にしたセンタリング用のタグやCSSプロパティが用意されています。

これに対して、Webブラウザはウインドウの高さを超えるコンテンツがある場合に、スクロールバーを出して表示します。
「Webページの高さ」と「ウインドウの高さ」は一致せず、body要素は高さにおいて「最大値」の概念がありません。
よって、body要素の中において縦方向にセンタリングすることは出来ません。
# 縦方向にセンタリングできるのは、高さを指定済みのブロックレベル要素の内部でセンタリングすることだけです。

どうしてもやるとしたら、<table> の高さをウインドウサイズいっぱいまでpixelサイズで引き延ばすことになりますが、ウインドウサイズや解像度に依存するので、ユーザービリティの低いサイトになってしまいます。
Zさんが>>11で紹介されたように、横方向のセンタリングはよく見られますが、縦方向のセンタリングはあまり見ないかと思います。

例えば、紹介されたサイトでは、1280x960の環境でウインドウをめいっぱいに拡大表示すると、縦方向にセンタリングできているように見えます。
1024x768の解像度では、<table> に対して余白がほとんどありません。
800x600の解像度に至っては、縦スクロールバーが出来ています。

ふと思ったのですが、

Internet Explorer (MacOS) CSSバグリスト
http://cssbug.at.infoseek.co.jp/detail/macie/b050.html

には、「overflow:auto; を指定した要素をbody要素内の最後に置いた場合」とあるので、</body> の手前に適当なタグを置くだけで回避できませんか？
<br /> や内容のない <div></div> など、差し障りのない要素を試してみては如何でしょうか？

15 名前： 五月雨 ： 2006/10/06（金） 15:27 ID:q0XLEugU: 偉そうなことを言っておいてあれですが、<table> をウインドウの高さめいっぱいに広げる方法ありました(汗)
失礼しました。m(_ _)m

GAC なぜなにGAC->HTML->テーブルを天地100%にするには？
http://www.gac.jp/article/index.php?stats=question&category=3&id=17463&command=msg

table { height: 100% } だけで出来ないと思いこんでいましたが、html,body にも、"height: 100%" を指定する必要があったんですね…。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
html,body { height: 100%; width: 100%; margin: 0px; padding: 0px }
table { height: 100%; width:100%; background-color: #fee }
td { vertical-align: middle }
</style>
</head>
<body>

<table border="1">
<tr>
<td style=''><div style='background-color: #eef'>left</div></td>
<td>right</td>
</tr>
</table>

</body>
</html>

# ブロックレベル要素もセンタリングできているようです。

16 名前： rhino ： 2006/10/06（金） 15:27 ID:tI3hgAwE: 五月雨さんありがとうございます。

とりあえず>>14の下に書いていただいた
</body>の前に何か要素を入れるというのを試してみましたが
だめでした。

テーブルでセンターにするなら、
今アップしているものでもいいってコトですよね？
http://abcc.web.fc2.com/
一応センターにいるんで。

あと、ページのCSS
http://abcc.web.fc2.com/style.css
を見ていただけたら分かると思うのですが、
>>4　で書いていただいたハックは、僕の入れていたモノなんですけど、
これをどう指定すればいいのでしょうか？

よろしくお願いします。