![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
テーブルでどうしてもうまく表現できない箇所だけをレイヤーにしてサイトデザインを完成させました。
うっかりIE6でしか確認していなかったので、しまったと思い、すぐに以下のブラウザを使用して見栄えを確認してみました。
その結果も合わせて以下に記します。
windows/IE6 問題なし
windows/Netscape7.1 問題なし
windows/Netscape4.7 レイヤー使用箇所だけずれる
windows/Opera7.1 問題なし
Mac/IE5 レイヤーの部分だけが表示されて、その下部にページ全体が表示されます。このIE5のずれが一番ひどかったかもしれません。
レイヤーを使い方がまずいのでしょうか。それともブラウザの使用上、これは仕方がないことなのでしょうか。
ちなみにDreamweverMXによる作成です。
レイヤーは凄く便利ですが、それだけ扱いが難しいのだなと痛感いたしました。
No.1ベストアンサー
- 回答日時:
Netscape Navigator4.7のスタイルシートは、バグが多いため、私の場合は、無視しています。
というか、Netscape6~があるため、ver4.7のブラウザは無視しています。ってことを踏まえて、回答します。私の場合、ウェブデザインは全てスタイルシートを活用し、デザインもレイヤー(この場合のレイヤーとは、<div style="position:~">の事)をふんだんに使用しています。
今のところ、WindowsでもMacintoshでも問題なく同じように表示されています。強いていうなら、WindowsIE6から導入されたセンタリングのスタイル<div style="width:500px; margin-right:auto; margin-left:auto;">は、WindowsIE5以前では、反映されません。よって、レイヤーを使ったデザインで、ブラウザの表示で全体をセンタリングする設定は、可能です(JavaScriptを使用しなくても)が、ちょっと、コツが必要です。
>Mac/IE5 レイヤーの部分だけが表示されて、その下部にページ全体が表示されます。
WindowsIE6では問題ないのに、Macintoshでは、問題があるのは、スタイルシートの指定に何か不適切な指定があるものと思います。是非一度、WindowsIE5で見てみてください。Macintoshの表示と同じような現象が起きているかもしれません。(←経験者^^;)
問題としては、positionは、absoluteになっていますか?そのレイヤーのwidth指定は正しいですか?left, top, width, heightなど、ピクセル数値で指定されてますか?数値は、100pxといったピクセル数か%値でしか指定できません。Dreamwaverを使用しているので大丈夫だと思うのですが、また、レイヤーが入れ子になっている場合は、親もまた、レイヤーになっていることが必須です。この場合のレイヤーとは、スタイルでposition指定が、absoluteもしくは、relativeの指定になっていなければなりません。いくら、親が<div>になっていても、レイヤー指定(absoluteかrelative)がなっていなければ、そのさらに上の親になります。もし、その上が<body>なら、親は<body>になります。確かに<body>はレイヤー指定されていないですが、全てのレイヤー(absoluteの場合)は<body>に準じるので、入れ子になっていても、親がレイヤーでなければ、<body>に対してのレイヤー位置になります。
あと、DreamwaverMXは、バージョンアップしましましたか。確か今は6.1だったと思います。6の時のレイヤー指定にバグがあったみたいですよ。(もっとも、ブラウザでのプレビューは問題ないですけど....)
回答ありがとうございます。
再び色々と試行錯誤を繰り返してみました。
まず、
windows2000/IE5 問題なし
Mac/Netscape7.1 問題なし
となりました。
ご指摘のwindowsにおけるIE5で問題なく表示されてしまったので、
非常に範囲の限定された障害であるようです。
つまりまとめますと問題があるのは、
window/Netscape4.7
Mac/IE5
となります。
おそらく、Mac/Netscape4.7でも間違いなく問題があると考えられます。
absoluteですが、指定しておりました。
私のレイヤーの使用はきわめて勝手な使い方で、
---------------
| |
| |
| |
| |
| |
---------------
と大きなテーブル740*660(実際はセルが多数含まれます)があったとしてそれの中にいきなり、
---------------
| |
| |
| ----- |
| | | |
| ----- |
---------------
というようにポンとレイヤーを配置しました。というのも、どうしてもうまくテーブルでは思うような場所に表示できなかったからになります。
MacのIE5では、以下のようになります。
-----
| |
-----
---------------
| |
| |
| |
| |
| |
---------------
なぜかレイヤーが飛び出して上部に表示されて、そのあとに、テーブルがきます。
実際はレイヤーをこんな感じで5,6個配置しているのですが、
そのタグを一つ挙げますと以下の通りです。
<div id="Layer8" style="position:absolute; left:450px; top:562px; width:179px; height:46px; z-index:8">
特に指定はabsoluteですし問題はないかと思われます。
どこか怪しい箇所がありましたら容赦なくご指摘ください。お願い致します。
No.2
- 回答日時:
Netscape Navigator4.7のスタイルシートは、バグちゅうよりも実装の不備ですね。
ウインドウ内の全ての要素がレイヤーにより絶対的に配置されていないと表示位置がずれます。特殊な事情がないかぎりは切り捨ててかまわないと思います。>なぜかレイヤーが飛び出して上部に表示されて、そのあとに、テーブルがきます。
私の場合Mac版IE5/ネスケ4.7で確認しながら作りますんで逆にMac版IE5で表示がおかしいというのがピンときません。ためしにレイヤー指定のサンプルを用いてMac版IE5.1.6で確認しまたがそのような異常はありませんでした。
htmlソースの全体像がわかれば具体的な問題点はわかるかもしれません。
ありがとうございます。
4.7がバグというよりも、そのもの自体の問題だということはよくわかりました。
ただ、ここにすべてのソースを載せるのは少し無理がありますので、何とか試行錯誤トライしてみます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イラストレータで「ファイル」⇒...
-
塗りつぶしすると全部塗りつぶ...
-
イラストレーターCS2頂いた...
-
デジタル画像を写真で引き延ば...
-
JW-CADのレイヤー間の移動を教...
-
gimpで複数レイヤーを一括移動...
-
複数の画像を同じ色合いに補正...
-
Photoshopで文字を違和感なく背...
-
複数画像の明るさを揃えたい
-
photoshop CS2でレイヤーに分け...
-
フォトショップで描いた線を消...
-
Photoshop 夜の画像を昼間のよ...
-
イラストで色を塗るときは線画...
-
逆光になってしまった動画を明...
-
新聞紙をPDFにスキャンした際の...
-
Photoshopでドロップシャドウだ...
-
photoshopで黒髪を白髪に
-
フォトショップでレイヤーを複...
-
モノクロデータに色をつける方法
-
スキャナで取り込んだロゴを明...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
イラストレーターCS2頂いた...
-
イラストレータのレイヤーパレ...
-
イラストレータで「ファイル」⇒...
-
GIMP2、スキャンした画像の黒を...
-
gimpで複数レイヤーを一括移動...
-
JW-CADのレイヤー間の移動を教...
-
デジタル画像を写真で引き延ば...
-
photoshopで黒髪を白髪に
-
Photoshop 夜の画像を昼間のよ...
-
新聞紙をPDFにスキャンした際の...
-
逆光になってしまった動画を明...
-
フォトショップで描いた線を消...
-
Photoshopでスキャンして太くな...
-
Photoshopで白黒を指定したレイ...
-
勝手に全てのレイヤーが統合さ...
-
フォトショップでレイヤーを複...
-
FireAlpacaの「アクティブ」と...
-
フォトショップで下の色を透け...
-
イラストで色を塗るときは線画...
-
塗りつぶしすると全部塗りつぶ...
おすすめ情報