ベストアンサー

ヘッダーを左右に二分割する方法を教えて下さい！

2013/10/10 22:29

ヘッダーを左右に二分割して右半分にリンク付きの画像を設定する方法はありますか？ css,htmlを使用すると思うのですが具体的な方法を教えて頂けると幸いです。宜しくお願い致します。

zenchizennou
お礼率12% (1/8)

CSS
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/10/11 11:34 回答No.3

<header></header>(HTML5)もしくは、<div class="header"></div>、<div id="header"></div>(HTML4)でマークアップされた部分に含まれる要素のうち、左に表示したい物は左に、右に表示したい物は右にスタイルシートで指定すれば良いです。 [HTML5の例] <body> 　<header> 　　<h1>ページタイトル</h1> 　　<p>ページの簡単な説明</p> 　　<nav> 　　　<ol> 　　　　<li><a href="/">Top</a></li> 以下省略でしたら header h1,header p{margin-keft:50%;min-height:100px;position:relative;} header nav{position:absolute;width:50%;top:0;right:0;height:100%;} [HTML4の例] <body> 　<div class="header"> 　　<h1>ページタイトル</h1> 　　<p>ページの簡単な説明</p> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="/">Top</a></li> 以下省略でしたら div.header h1,header p{margin-keft:50%;min-height:100px;position:relative;} div.header div.nav{position:absolute;width:50%;top:0;right:0;height:100%;} とでも書けばよい。　HTMLさえちゃんと書けていれば、スタイルシートでいかようにも指定できます。

その他の回答 (2)

play_with_you
ベストアンサー率37% (112/301)

2013/10/11 10:30 回答No.2

単に「右半分」に当たる位置に<a><img /></a>を入れるだけです。例： <h1>zenchizennou</h1> ↓ <h1>zenchizennou<a href="http://example.com/"><img src="http://example.com/example.jpg" /></a></h1> あとはCSSで幅や高さなど調整。実質はこれだけのことなので、分からないということはあなたの「ヘッダー」の構造上上記のようにただ突っ込むことができないのでしょうか。あなたの現在のソースも分からん状態でこれ以上は説明できません。