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

解決済

質問者：zenchizennou
質問日時：2013/10/10 22:29
回答数：3件

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

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2013/10/11 11:34

<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さえちゃんと書けていれば、スタイルシートでいかようにも指定できます。

- 0
- 件

通報する

No.2

回答者： play_with_you
回答日時：2013/10/11 10:30

単に「右半分」に当たる位置に<a><img /></a>を入れるだけです。

例：
<h1>zenchizennou</h1>
↓
<h1>zenchizennou<a href="http://example.com/"><img src="http://example.com/example.jpg" /></a></h1>

あとはCSSで幅や高さなど調整。
実質はこれだけのことなので、分からないということはあなたの「ヘッダー」の構造上上記のようにただ突っ込むことができないのでしょうか。
あなたの現在のソースも分からん状態でこれ以上は説明できません。