人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●と○は別のロゴ

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


●質問者: mika555
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS H2 Hp はてな コンテンツ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● yumisaiki
●27ポイント

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

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

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

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

<h1>タイトル</h1>

みたいに、書きます。

</div> ◎質問者からの返答

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

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

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


2 ● yumisaiki
●27ポイント ベストアンサー

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

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

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

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

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

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

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

◎質問者からの返答

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

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

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

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


3 ● tilfin
●54ポイント

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

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>

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

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

◎質問者からの返答

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

勉強になります。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ