cssで見出しが複数行になると先頭の画像と重なってしまいます

お世話になります。
以下のように先頭に画像付の見出しを枠で囲った上で
本文も枠内に記入するような形にしているのですが、

■css

.title1 {
height:12px;
}

.title2 {
border-radius:5px;
padding:6px 10px;
margin-left:10px;
font-weight:bold;
padding-left: 48px;
color: #000000;
background-color: #ffffff;
background-image: url(http://hogehoge.com/pointer.jpg);
background-repeat: no-repeat;
background-position: left;
}

.title3 {
border:2px solid #000000;
padding:30px 15px 10px;
margin-bottom:30px;
border-radius:5px;
}

■html

<div class="title1"><span class="title2">見出しテキスト</span></div>
<div class="title3">
本文テキスト
</div>


ブラウザの横幅に比例して枠の幅が変わるようなブログ上で掲載しているため、
見出しテキストが複数行になった場合、見出しの先頭の画像と重なってしまいます。
これを重ならないようにする方法はないでしょうか。
（画像は45pxの高さ）

※■が画像で実際には下のあああと画像の一部が重なってしまいます。

■ああああああああああああああああ
あああああああああ

※理想（テキストの左側が揃って画像と重ならない）
■ああああああああああああああああ
　ああああああああああああ

お忙しい中お手数をおかけしますが
ご教授いただけるようでしたらとても幸いです。
何卒よろしくお願い致します。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/01/29 18:24

divを安易に使わないように・・

・HTMLはそれを構成する要素を示すタグでかこって文書構造を示します。
　 <h1>ここは見出し</h1><p>ここから一つの段落・・</p>
　これでは【文書構造を示しきれないために】、DIVやSAPNAにid属性やclass属性と併用して文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。
※質問とは直接関係ないのですが、とっても重要なことですから、

その上で、本文記事---HTML5では<section>要素--内の見出しを装飾したしたいとします。
<div class="section">
　<h2>本文見出し</h2>
　<p>HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。</p>
</div>
とマークアップされていたとします。・・・一目でわかるようにメンテナンスも楽でしょ。

　その上でスタイルシートは
div.section
div.section h2{ /* 本文中の見出し */
　　margin-left:10px;
　　color: black;
　　background-color: white;
}
div.section h2:before{
　　content:url(/image/pointer.jpg);
　　float:left;
}

HTML5だと、
<section>
　<h2>本文見出し</h2>
　<p>HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。</p>
</section>
section h2{ /* 本文中の見出し */
　　margin-left:10px;
　　color: black;
　　background-color: white;
}
section h2:before{
　　content:url(/image/pointer.jpg);
　　float:left;
}

(補足)
　class名をつけるときには文書構造を示す物にしましょう。メンテナンスがとても楽になります。

　記事が段落一つしかない場合でしたら
<dl>
　<dt></dt>
　<dd></dd>
　<dt></dt>
　<dd></dd>
</dl>
のように定義リストを使うほうが文書構造上は適しているかもしれません。

この回答へのお礼

大変遅くなってしまいまして申し訳ありません。
アドバイスいただきありがとうございます。
とても勉強になりました。
お忙しい中、ご教授いただき本当にありがとうございました。

お礼日時：2015/03/28 12:10