hタグの右横に画像を表示

質問

hタグ（今回は<h3>タグ）の右横に、「new」の画像を表示したいと思っています。
<h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。
全てに「new」がつく訳ではなく、任意のものだけに表示です。

css の background image で試してみたのですが
当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。
right 指定で％で指定していけば、なんとなくバランスよくはできますが
あくまでなんとなくであって、
更にタイトルの文字数によって変わってきてしまうので
個別にcssを指定していかなければなりません。
（そういうものなのでしょうか。）

※例えば「new」画像が左置きなら、
background image を使って、hタグの css に padding-left:100px;
などとすれば済みますよね（画像の分だけpaddingで空きを作る）。
でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。
hタグのタイトルから右横に（例えば）20px空きをつくり画像を配置、
ということが簡単には出来ないものでしょうか。

それとも
<h3>テキストテキストテキスト<img src="********"></h3>
なんてことをしてもいいものでしょうか。

宜しくお願いします。

回答No.7

神崎 渉瑠（@taloo） · ベストアンサー

「newアイコン」に限定するのであれば、
このように書けば、文書構造、文法ともに適した書き方になると思います。

<style>
.new {
overflow: auto;
}
.new h3 {
float: left;
}
.new img {
width: 30px;
height: 20px;
}
</style>

<div class="new">
<h3>テキストテキスト</h3>
<p><img src="" alt="この記事は何年何月以降に書かれた新着記事です。"></p>
</div>

alt属性を嫌うのであれば、イメージリプレースを使う事もできます。

<style>
.new {
overflow: auto;
}
.new h3 {
float: left;
}
.new p {
width: 30px;
padding: 20px 0 0 0;
height: 0;
background: url(new.gif);
overflow: hidden;
}

</style>

<div class="new">
<h3>テキストテキスト</h3>
<p>この記事は何月何日以降に作られた新着記事です。</p>
</div>

ご参考まで。

お礼

今回は他の皆様もご回答くださった
<h3>テキストテキスト<span style="background:略"></span></h3>
で行くことにしましたが、

-------------------------
<style>
.new {
overflow: auto;
}
.new h3 {
float: left;
}
.new img {
width: 30px;
height: 20px;
}
</style>
-------------------------
や、

-------------------------
<h3>テキストテキスト<!--[if lte ie 7]><img><![endif]--></h3>
-------------------------
など、

目から鱗の方法をご回答くださったtalooさんにベストを決めさせて頂きました。

回答No.8

ORUKA1951

No.3です。
≫IE7以下に対応させる方法はあるものでしょうか。
過去のブラウザに対応させるなら簡単に、
<h3>STAP細胞のその後<img src="./images/icon/new.gif" width="40" height="20px" alt="(新着)"></h3>
で全く問題ないです。テキストブラウザ、検索エンジンには

STAP細胞のその後(新着)

と読まれるでしょう。

スタイルシートを利用する時に有効なのは
<div class="contentTable">
　<h2>記事一覧</h3>
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ol>
</div>　
のような場合に、
モダンブラウザに対して
div.contentTable ol li:after{content:url();}
div.contentTable ol li+li+li+li:after{content:none;}
のように、最初の３つだけ新着マークをつけるときです。
★　セレクタをいきなり
.contentTable と書くスタイルシートを時々見かけますが、CSS2以降は基点となるセレクタを書くルールになりました。
「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。セレクタの構成要素のすべてが一致する場合、単体セレクタはマッチする。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#selector-syntax )」

.contentTable　は、後方互換のため、*.contentTableの省略形とみなされるため省略可能ですが、詳細度は[0010]です。出来れば、基点となるセレクタ、この場合はdiv、あるいは他のすべての要素なら*(全称セレクタ)を書く癖をつけましょう。

　セクションの場合は
div.section h3:after{content:url();}
div.section+div.section+div.section+div.section h3:after{content:none;}
[HTML5]
section h3{content:url();}
section+section+section+section h3{content:url();}

　IE7以前への後方互換を考慮する必要があれば、<img>を追加する。この新着アイコンの表示のように、さして重要でなければ、スタイルシートで対応しているブラウザのみ表示させるという判断で良いと思いますよ。

お礼

迅速な回答と、そして補足質問にも細かくお答えくださりいつもありがとうございます。
<h3>見出し<img src="****" width="**" height="**" alt="(新着)"></h3>
でも、正式ではないにしろ特に問題なく通用すると
豊富な知識のあるORUKA1951さんから頂いたことで安心しました。

回答No.6

神崎 渉瑠（@taloo）

もう一つ思い出した事がありますので。

古いブラウザ全般ではなく、IEに限定できるのであれば、

<style>
h3:after{
content: url();
width: ---;
height: ---;
}
</style>
<h3>テキストテキスト<!--[if lte ie 7]><img><![endif]--></h3>

という方法もあります。

この方法は文法違反にならず、また、文書構造も（基本的には）変えることなく、IE7（IE6なども）と、IE8以上の:afterをサポートしているブラウザも表示できます。
ただしアイコンを変更したい場合は、CSSとHTMLの両方を書き換えなければなりません。

回答No.5

神崎 渉瑠（@taloo）

見出しの中に画像（アイコン）を入れてもいいのかどうか、ということであれば、
文法上はNGです。
（画像が見出しの一部であれば、OKです。）

そもそもCSSというのは、「CSSをサポートしていないブラウザでは表示しない事を良しとする」という考え方の元にありますから、
:afterなどを使って、IE7はアイコンが表示されなくても良しとする、
というのが、Web標準の考え方です。

で、それをふまえて、古いブラウザでも同じように表示させたい、というのであれば、<img>が無難だと思います。
<h3>テキストテキスト<img></h3>

TwitterBootstrapというデザインテンプレートでは、アイコンを<img>ではなく<i>になっています。
（<i></i>の中には何も書きません。）
世界的に最も有名なデザインテンプレートですし、デファクトスタンダードとも言える方法です。
（文法チェッカーではエラーメッセージが出る事があります。）

<h3>テキストテキスト<i style="background:略"></i></h3>

文法（文書構造）として、良いか悪いかで言えば、個人的には、悪いと思いますけどね。

画像を表示する事が目的で、
display:inline-block
のサポート状況（代替方法）を考えれば、
透明GIFを使って<img src="spacer.gif" style="background:略">が簡単で理にかなってると思いますが、画像（スペーサー）を用意しなければならないという手間が増えます。

<h3>テキストテキスト<img src="spacer.gif" style="background:略"></h3>

SEOでは<img>や<i>よりも<span style=""></span>がいいと思いますが、

<h3>テキストテキスト<span style="background:略"></span></h3>

<i>がデファクトスタンダードになっていますので、特にGoogleは<i></i>を無視するのではないかと思います。

<img>でも<i>でも<span>でも、毒食らわば皿まで、ですかね。
同じ文法違反でも、多少なりとマシな物は何だろうか、的な所はありますが。
ご参考まで。

回答No.4

noname#206842

すでに回答が出ているようですが・・・
必要な時にだけ、spanを利用してnewマークを付ければいいのでは？・・・

<h3>テキストテキストテキスト<img src="********"></h3>
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<h3>テキストテキストテキスト<span class="new"><img src="********"></span></</h3>

*****************************************************************************
CSS
↓↓↓↓↓↓
.new{padding-left:20px;color:#fffff;font-weight:bold;background-color:#f5ef52;}

この程度でいいのでは？？？

お礼

他の方からも同じ回答を頂きましたが、
nanden1548さんのシンプルな回答が個人的にはヒットでした。
ありがとうございます。

回答No.3

ORUKA1951

IE7以前に対処させるためには、
[jsを使わない]
<h3>見出し<span class="latestMark"><img src="./images/icon/new.gif" width="40" height="20" alt="【新着】"></span></h3>
span.latestMark{color:red;}

[js]
　⇒jQuery Pseudo Plugin (:before and :after in Internet Explorer)( http://jquery.lukelutman.com/plugins/pseudo/ )

回答No.2

ORUKA1951

新着ならこちらかな(^^)
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

div.section div.section h3{background-color:yellow;}
div.section div.section h3:after{content:" 新着 ";color:red;}/* 画像でもよい */
div.section div.section+div.section+div.section h3{background-color:transparent;}
div.section div.section+div.section+div.section h3:after{content:none;}

body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
＿</style>

補足

いつもありがとうございます！
そうだ、afterがありました。
…
と思いましたが、
afterはIE7以下は非対応なのですよね。
IE7以下に対応させる方法はあるものでしょうか。
もしくはafterが出てくる前はどのような方法を使っていたのかなんて
ご存知でしょうか。

回答No.1

ORUKA1951

文書構造を良く確認して、適用したい要素の:after擬似要素に、contentプロパティです。

サンプル
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で確認済みのHTML4.01strict+CSS2.1　リキッド、ウィンドウ幅は、スマホ以上対応
★タブは＿に置換してあるので戻す。
★htt:はhttp：(全角)に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

div.section div.section.new h3{background-color:yellow;width:auto;line-height:22px;position:relative;}
div.section div.section.new h3:after{content:url(http：//cdn.oshiete.goo.ne.jp/images/common/powered_by_okwave.jpg?fcfd2d7);}
div.section div.section.new h3:before{content:"新着!!";position:absolute;left:-3em;color:red;}

body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section new">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section new">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>