- ベストアンサー
dreamweaverMX－CSSを使った画像の配置について
サイトのロゴやイラスト、ボタンなどをdreamweaverで配置しています。(windows使用) 任意の場所に配置したいのですが、CSSで配置するにはどうすればよいのでしょうか？ 詳細な回答の方がうれしいですが、簡単な説明でもヒントを書いてもらえれば自分で調べます。 どうぞよろしくお願いします。
- Saburo-03
- お礼率94% (69/73)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
参考URLは「若葉のDreamweaver入門」レイアウト編目次です。 あまりおすすめはしませんが、自由にレイアウトしたいなら、レイヤー（DIVとCSSを使用します。No.1の方の回答の３番目の方法です）を使用すれば、自由に配置できます。 Dreamweaverのデザインビューモードで視覚的にレイヤーを配置できるので、コード入力が不得手な人でも、比較的簡単に記述できるでしょう。 複数ページに同じレイアウトを共通して使用する場合にはCSSをHTML内ではなく、外部（拡張子css）で記述すれば共有できます。 ただし、この方法でレイアウトした場合、記述の仕方によっては、各OS,ブラウザで異なる表示になってしまう場合があります。 またNetscape 4.xでは各レイヤーが重なって表示されたりしてしまいます。 デザインビューモードでレイヤーを挿入すると、コードは例えば <div id="Layer1" style="position:absolute; left:129px; top:35px; width:133px; height:60px; z-index:1">あいうえおかきくけこ</div> <div id="Layer2" style="position:absolute; left:197px; top:68px; width:130px; height:46px; z-index:2"><img src="image/sam01.gif" width="32" height="32" alt=""></div> のようになります。 しかしこれではあまりスマートではないので、例えば<head>～</head>内に ----------------------- <style type="text/css"> <!-- #text01 { position:absolute; left:129px; top:35px; width:133px; height:60px; z-index:1 } #image01 { position:absolute; left:197px; top:68px; width:130px; height:46px; z-index:2 } --> </style> ----------------------- などと記述して、<body>～</body>内に ----------------------- <div id="text01">あいうえおかきくけこ</div> <div id="image01"><img src="image/sam01.gif" width="32" height="32" alt=""></div> ----------------------- などと記述した方がスマートだと思います。 レイヤーを重ね合わせたい場合には、「オーバーラップ防止」のチェックを外してください。 レイヤーでサイトをレイアウトする場合には、古いブラウザでの閲覧者は切り捨て、フォントサイズもキッチリpx指定して、厳密にレイアウトし、出来上がったサイトを複数のブラウザ・OSで確認する事をおすすめします。 そうでなければ、TABLEでレイアウトした方が良いと思います。 TABLEは、TABLE内の内容を全て読み込んでからでないと表示されないため、ナローバンド（ダイヤルアップやISDNなど）では、状況によっては真っ白な状態が続いてしまったりします。 入れ子（TABLE内に別のTABLEを挿入してレイアウトする事）にする場合、最低限で済むように、切り分けるよう心がけた方が良いと思います。 サイトデザインは簡単なもので良いので、コーディング（HTML作成）する前に、ラフデザインを描いておくと、作業がしやすいのではないかと思います。 レイヤーでレイアウトしているサイトの参考例として、無印良品のURLを以下に記載します。 http://www.muji.net/ このサイトではWindowsとMac用にCSSを設定し、各レイヤーにID名を付けてレイアウトしています。
その他の回答 (1)
- Mac10
- ベストアンサー率44% (17/38)
方法その1 margin、padding等の数値を変えて表示位置をずらす。 方法その2 floatを上手く利用して、段組をする。 方法その3 positionをabsoluteにして座標で指定する。 番外編：テーブルでレイアウトを作ってしまう。 1～3は状況に応じてなので、どれが良いとは言い難いです。試してみて、その状況で一番やりやすい方法を選んでください。
お礼
ご回答ありがとうございました。 いろいろ調べてみましたが、３つの方法を織り交ぜながら、やっていこうと思います。 個人的にテーブルは避けたいところなんで、私もやはり番外編には賛成ですね。
お礼
お返事ありがとうございます。 またわざわざご丁寧にタグの説明までいれてもらって、とても嬉しかったです。 あれからCSSも自分なりに調べて、今試行錯誤中ですけど、s_hukamiさんのおっしゃるようなやり方が、すっきりしてていいなと思いました。