• ベストアンサー

dreamweaverMX－CSSを使った画像の配置について

s_hukamiの回答

  • ベストアンサー
  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.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名を付けてレイアウトしています。

参考URL：
http://wakabano.cool.ne.jp/dream/layout/layout.html
Saburo-03
質問者

お礼

お返事ありがとうございます。 またわざわざご丁寧にタグの説明までいれてもらって、とても嬉しかったです。 あれからCSSも自分なりに調べて、今試行錯誤中ですけど、s_hukamiさんのおっしゃるようなやり方が、すっきりしてていいなと思いました。

この回答がついた質問に戻る
回答 全件
　方法その1　margin、padding等の数値を変えて表示位置をず…
  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • cssで好きな位置に好きなボックスを配置するには？

    お世話になります。 cssで文字の大きさを制御したりはできましたが、 ボックスをページの任意の箇所に配置するコードの 書き方がわかりません。 どのプロパティを用いて制御すればよろしいでしょうか？ また参考になるおすすめのサイトはありますでしょうか？ 教えてください。 お願いします。

    • ベストアンサー
    • CSS
  • VC++.netのボタンを透明にしたいのですが

    VC++.netのボタンを透明にしたいのですが MFCだと出来るみたいなのですが VC++.net2008のExpressEditionで製作している為MFCが使えません フォームに任意のイラストを貼り付け イラストのある部分をクリックするとイベントが始まる というプログラムを作りたいのですが イベントを発生させるのに、ボタンを使用している為 ボタン形状が四角というのがよろしくありません 透明で使用できれは、任意の場所に配置でき イラストの景観がよくなります 何かヒントでも良いので よろしくお願いします

  • ホームページをCSSで配置しているサイトを最近見かけます。

    CSSでデザインすると、HTMLのテーブルよりもすっきり見えるからだと思うのですが。 しかしCSSだけで配置やデザインをしっかり組むと、 HTMLのテーブルタグで作成した場合とタグの量がそんなに変わるとは思えません。 よく変わっても倍半分くらいかなと思います。 CSSでデザインするとDreamWeaverなどではデザインをチェックすることができません。 ブラウザに表示して確認しないといけません。 ↑これが結構手間 あとCSSを使う理由としてデザインの変更が簡単ということや、 検索エンジンに優しい？というのもあります。 以上を考えるとCSSでの大きなメリットがあまり見出せないのですが、 スッキリとしたサイトはCSSでデザインされています。 なぜCSSでデザインするほうがいいのでしょうか？ CSSでデザインすることの大きなメリットを教えてください。

    • ベストアンサー
    • HTML
  • CSSの使われていない属性

    DreamweaverがCS4になってコードナビゲータが追加されたおかげで該当のCSSの箇所を容易に特定できるようになりましたが、逆にCSSファイルから、ローカルサイト内で使われている場所を見つけたり、使われている箇所数を知ることはできないのでしょうか？ 古いサイトの改訂にあたりCSSが重くなってきているので、使われていない属性を削除したいのです。Dreamweaverの機能としては無くても、他に可能な方法があればお願いします。 よろしくお願いします。

  • ホームページ作成する時のCSS,HTMLデザイン作業（Indesign Fireworks　Illustratorなど）

    皆様いつも回答ありがとうございます。 早速ご質問ですが(素人ながら稚拙なご質問申し訳ないです） １．IndesignとFireworks、どちらがDreamweaverで応用が利くか（HTMLやCSSを作成する点で） ２．プロはDreamweaverのみでHP（HTMLやCSS）を全部作成しますか？ Indesign（cs3)やFireworksなど？のソフトウェアを使ってデザインしたついでにHTMLやCSSもそのまま出来上がり、それをDreamweaver(cs3)に埋め込めないかと思ったのですが、可能というか実践向けなのでしょうか？ 実際のWEB現場ではどのように一連の作業していますか、やはりdreamweaverだけでHTMLやCSSを最初から作っていく、みたいな感じでしょうか？またもしIndesignやFireworksなどでCSSやHTMLも可能であるならばどちらがHPを製作・デザインする上でいいでしょうか？ 私としてillustratoｒでロゴや画像などはすべて処理しようかと考えています。つまり画像やロゴを配置したイメージがそのままHTMLやCSSが出来上がり、それをDreamweaverで使えるかどうかお聞きしたいのです。。両方とも無料体験したのですが、イマイチ使えるのかどうかって感じなのです・・。 m(__)m回答いただければ大変助かります、よろしく尾根がいたします。

  • Dreamweaver CS3で画像のボタンを押した時に画像を変えたい

    photoshopでボタン画像3つ作りDreamweaver CS3で配置し、挿入バーの一般にある『ロールオーバーイメージ』でボタンのロールオーバーはできたのですが、画像のボタンを押ている時だけ別の画像に変えるにはどうしたらよいでしょうか？ Dreamweaver CS3でやる方法が知りたいです。 Flashでボタンを作る方法と背景画像にボタン画像を使用してCSSでやる方法は知っています。

  • CSS+JavaScript

    下記サイト http://www.dreamvs.jp/pc/ の上部にあるCSS+JavaScriptの動的なテーブル？のような物 を作りたいと思っています。 (FLASHは考えてません) ただ、左側にあるボタンを切り替わる画面の下に配置して、 上部の切り替わる部分を大きく表示したいと思っております。 ボタンを下に配置してJavaScriptで動かすことは可能でしょうか？ よかったらボタン下に配置したCSSのソースをアドバイスして頂けるとうれしいです。 詳しい方、よろしくお願いします。

  • CSSを使ったサイトデザインについて

    最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。（当然、場合によって違うので答えはないのでしょうが） たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。

    • ベストアンサー
    • CSS
  • cssの整理

    dreamweaver8を使用している初級者です。 サイトを作っていくうちに使用しなくなったcssもあるのですが、どれを使用していて、どれを使用していないのか分からなくなってしまいました。使用していないcssを一括表示させて整理できるような便利な機能はありませんか？

  • Dreamweaver8でCSSを始める入門サイトはありますか？

    これまでHTMLでサイトを作っていたので、CSSを取り入れたいと思うのですが、Dreamweaver8でCSSを扱う方法を説明した入門サイトはないでしょうか？ （ググったのですが関係の無いサイトばかりでてきました；；）

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する