添付画像のようなサイトを製作したい場合。

解決済

質問者：maccccco
質問日時：2010/12/20 19:39
回答数：3件

こちらにはいつもお世話になっております。

添付画像のようなサイトを製作したいと考えております。
パソコン画面に対して、内容を中央に配置するのですが、
タイトル部分等をワンポイントにはみ出すように配置したいのです。

添付画像のように、はみ出す部分はタイトル等の下に引くラインです。
はみ出す部分は画像にするつもりです。

このようなはみ出す部分がない、中央に内容を配置するだけのサイトは製作出来ます。
既に製作しております。基本的にdivタグ等を使っております。
自分でも色々調べてやってみているのですがなかなか上手くいきません。
どのようにタグを組めばキレイに見えるか、ご伝授下さいませ。
どうぞ宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： metametamu
回答日時：2010/12/20 20:03

例えばはみ出す部分だけ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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
ネガティブマージンを使うやり方ですぐ解決致しました！
こんなに簡単な事だったのか…と反省です(笑)
本当にありがとうございました。

通報する

お礼日時：2010/12/21 10:22

No.3

回答者： Java-Java
回答日時：2010/12/21 10:00

背景画像にしたいのであれば

全体幅 + 「この部分」の幅×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>