- ベストアンサー
添付画像を使ったワンポイント配置のサイトを製作したい！
- 添付画像のようなサイトを製作したい場合、パソコン画面に対して内容を中央に配置し、タイトル部分等をワンポイントにはみ出すように配置する方法があります。
- はみ出す部分はタイトル等の下に引くラインで表現し、画像にすることで効果的なデザインを作ることができます。
- また、普通の中央配置のサイトも製作できますが、上手く見えるタグの組み合わせやデザインテクニックが必要です。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
例えばはみ出す部分だけbodyの背景画像にしたり、ネガティブマージンやポジションを使って左に出すのもいいと思います。 多分一番簡単なのはネガティブマージンを利用した方法だと思います。 <body style="text-align:center;"> <div style="margin:auto;text-align:left;width:800px;"> <h1><img src="header.jpg" alt="タイトル" style="margin-left:-100px;" /></h1> </div> </body>
その他の回答 (2)
- Java-Java
- ベストアンサー率41% (14/34)
背景画像にしたいのであれば 全体幅 + 「この部分」の幅×2(左右分)で画像を作成し、centerで配置してやればいいです。 <style type="text/css"> #content-area { background: url(xxx.gif) no-repeat center top; } #content { margin: 0 auto; width: 500px; } </style> <div id="content-area"> <div id="content"> <p>メインコンテンツ</p> <p>メインコンテンツ</p> </div> </div>
お礼
ご回答ありがとうございました！ 今回は背景画像にしないやり方を選択したので、最終的にNo,2の方のやり方を選ばせて頂きました。 最初の情報が少なく申し訳ありませんでした。 こちらも今後サイトを製作する際に参考にさせて下さい。ありがとうございました！
- kernel_kaz
- ベストアンサー率23% (665/2872)
ページの基本がセンタリングなら、画像の右側を左側と同じだけ白もしくは透過ではみ出して作るのが一番簡単
お礼
ご回答ありがとうございました！ 最終的にNo,2の方のやり方を使う事になりましたが、このようなやり方もあるのだと勉強になりました。 今後の参考にさせて頂きます。
お礼
ご回答ありがとうございます。 ネガティブマージンを使うやり方ですぐ解決致しました！ こんなに簡単な事だったのか…と反省です(笑) 本当にありがとうございました。