- 締切済み
DREAMWEAVER 2004 MX のレイヤーについて。
DREAMWEAVER 2004 MX でHPを制作始めました初心者です。 わからない事だらけなのですが、、 今回質問させていただきたいのは、レイヤーの事です。 イメージやテキストを入れるのに選択するだけなので、初心者の私には たいへん使いやすいレイヤーですが、CSSなどと違ってディスプレイサイズ 合わせて位置が移動してくれません。どうしてもワイド画面で見た場合レイヤーで作ったイメージ、テクストだけが左端によってしまいます。 どうすれば、常にセンターをキープできるのでしょうか？
- Hony_Bee
- お礼率25% (1/4)
- ホームページ作成ソフト
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- tenderfeel
- ベストアンサー率56% (215/379)
CSSとタグを少し覚えた方がすんなり理解できると思います http://www.tohoho-web.com/css/index.htm あと、表示サイズは人によって違う、というのもお忘れなく。 レイヤーは、position:absoluteによる絶対位置指定でもって表示する位置を決めています。 ”絶対”位置指定ゆえにどの位置にでも持っていけるのですが、逆に中央寄せのような相対的な指定での表示はできません。 レイヤーではご希望の見た目にするのは不可能、と思ってください。 相対的に中央寄せにする為にはどのようにするかといいますと、単純に中央寄せにするのであれば 新規で１行１列のテーブルを挿入して中央位置にして、その中にコンテンツを作るか、 レイアウト＞Divタグを挿入 で適当にDivタグを入れてIDやclassを決め そのDivタグにCSSで相対的に中央寄せするスタイルをつけます。 作ったDIVを選択してCSSスタイル（Shift+F11かメニューのテキスト内）から新規CSSルールで text-align:center;（ブロック＞テキストの行揃え＞中央） または margin:0 auto;（ボックス＞マージン＞左と右を自動、上と下を0） を指定。 このDivタグの中にコンテンツを作ります。 ただし、どれもレイヤーを使っている場合スルーされてしまいます。 今あるものを上の方法で囲う場合、その囲ったDIVかTableにCSSスタイルで 位置：相対的（position:relative）を指定しておくと、そのDivかTableタグの位置を基準にした絶対位置指定になります。 ここまで書いておいてアレですが、多分Divタグよりテーブルで作る方が楽だと思います。 タグとか良く分からないなら、DWは難しいかもしれません。
- yosoho
- ベストアンサー率59% (19/32)
レイヤー内のテキスト等を常にレイヤー内の中央に表示したいということなのでしょうか？ 手元にDREAMWEAVER 2004 MXは無いのですが、 レイヤーを作成すると自動でCSSが作成されると思うのですが、 その中にtext-align: center;を書き込めばどうでしょう。 たとえば・・・、 <style type="text/css"> <!-- #Layer1 { position:absolute; left:14px; top:18px; width:773px; height:139px; z-index:1; text-align: center; } で、どうでしょう。
補足
ご返答ありがとうございます。 >レイヤー内のテキスト等を常にレイヤー内の中央に表示したいということなのでしょうか？ ではなくてですね、私のデュスプレイではちょうど良いのですが、 ワイド画面など、ちがう画面で見た場合レイヤーで作成した物だけが、 じっとしてるのです。CSSスタイルの新規作成からの画面などは、ディスプレイに合わせ良い感じに移動してくれます。 説明が下手ですみません。一応ソース紹介します。 <body> <div id="Layer3" style="position:absolute; left:173px; top:266px; width:266px; height:370px; z-index:3"> <div align="center"><img src="/start/maasai.png" width="390" height="535" /></div> </div> <div id="Layer4" style="position:absolute; left:872px; top:270px; width:348px; height:461px; z-index:4"> <div align="center"><img src="/start/maasai5.png" width="399" height="548" /></div> </div> <div id="Layer2" style="position:absolute; left:332px; top:439px; width:0px; height:11px; z-index:5"></div> <div id="Layer5" style="position:absolute; left:209px; top:392px; width:0px; height:8px; z-index:6"></div> <h1 align="right" class="up_line"><a href="http://li.pixelmind.net/index.html">† Home </a>† About † Blog † Contact † </h1> <p align="center" class="back_line"> </p> <p> </p> <p> </p> </body> </html>