CSSでHPをレイアウトしています。ブログでいうバナー部分に

h2要素で文字列の横に画像を二つ文字列の横に配置したいと考えています。できれば2つできなければ一つその画像に他サイトへのリンクも張りたい場合のソースを教えてください・

ーーーーーーーーーーーーーーーーーーーーー|
--------------------------------- |
●人力はてな   ○              ← バナー?部分
--------------------------------- |
コンテンツ

ーーーーーーーーーーーーーーーーーーーーー

●と○は別のロゴ

わかりにくい質問ですがよろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2008/10/31 10:19:50
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:yumisaiki No.2

回答回数70ベストアンサー獲得回数3

ポイント27pt

http://www.lemia.co.jp/skins/lemia/main.css

を見てもらったらわかります。ソースを見たらいいと思ってサイトの場所を教えたんですけど。

トップから順番に書いてますので。

あまりキレイな書き方でもないですが。

ボックスの書き方について、あまりわかってないのであれば、

http://www.2step-css.com/

で勉強したらいいと思います。 わかりやすいですよ。

id:mika555

丁寧な回答ありがとうございました。

ソースは見たのですがCSSの在り処ががわからなくて・・・

教えて頂いたサイトで勉強させていただきます。

本当にありがとうございました。

2008/10/31 10:15:37

その他の回答2件)

id:yumisaiki No.1

回答回数70ベストアンサー獲得回数3

ポイント27pt

H2にはどんなにcss 設定しても前後にスペースができてしまい、カチっとしたレイアウトはできないので、h要素に並べる「きっちり」img というのはあきらめた方がいいです。

<h2>キーワード<h2> にした方が楽です。

どうしてもの場合は div でスペースを設定する必要があると思います。

http://www.lemia.co.jp/lemia/comse/sope.html

<h1>タイトル</h1>

みたいに、書きます。

</div>
id:mika555

ご回答ありがとうございます。

サンプルサイトですがidが別CSSファイル定義されているようです。

どのように記述したらよいか教えてくださいますとたすかります

2008/10/30 16:21:10
id:yumisaiki No.2

回答回数70ベストアンサー獲得回数3ここでベストアンサー

ポイント27pt

http://www.lemia.co.jp/skins/lemia/main.css

を見てもらったらわかります。ソースを見たらいいと思ってサイトの場所を教えたんですけど。

トップから順番に書いてますので。

あまりキレイな書き方でもないですが。

ボックスの書き方について、あまりわかってないのであれば、

http://www.2step-css.com/

で勉強したらいいと思います。 わかりやすいですよ。

id:mika555

丁寧な回答ありがとうございました。

ソースは見たのですがCSSの在り処ががわからなくて・・・

教えて頂いたサイトで勉強させていただきます。

本当にありがとうございました。

2008/10/31 10:15:37
id:tilfin No.3

回答回数8ベストアンサー獲得回数0

ポイント54pt

このような感じでどうでしょうか。

http://q.hatena.ne.jp/answer ←ダミー

==CSS==

h2 {

color:#fff;

background-color:#333;

float:left;

width:200px;

height:50px;

margin:0;

}

a.banner {

float:left;

display:block;

width:140px;

height:50px;

}

a img { border:none }

======================

==HTML==========================

<div id="header">

<h2>h2要素の文字列</h2></p>

<a href="他サイトのURL" class="banner"><img src="test.png" width="140" height="50"></a></p>

<a href="他サイトのURL" class="banner"><img src="test.png" width="140" height="50"></a></p>

</div>

==エスケープのため<>を全角にしてます。==

全てブロック要素にしてそれをフロートして並べるというのがポイントです。

id:mika555

丁寧にありがとうございました。

勉強になります。

また機会がありましたらよろしくお願い申し上げます。

2008/10/31 10:17:56

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません