![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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ベストアンサー
- 回答日時:
「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
- 回答日時:
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;}
のように、最初の3つだけ新着マークをつけるときです。
★ セレクタをいきなり
.contentTable と書くスタイルシートを時々見かけますが、CSS2以降は基点となるセレクタを書くルールになりました。
「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。セレクタの構成要素のすべてが一致する場合、単体セレクタはマッチする。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
.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
- 回答日時:
もう一つ思い出した事がありますので。
古いブラウザ全般ではなく、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
- 回答日時:
見出しの中に画像(アイコン)を入れてもいいのかどうか、ということであれば、
文法上は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
- 回答日時:
すでに回答が出ているようですが・・・
必要な時にだけ、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
- 回答日時:
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
- 回答日時:
新着ならこちらかな(^^)
_<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
- 回答日時:
文書構造を良く確認して、適用したい要素の: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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- ヤフオク! ヤフオクに出品したいのですが、タグを実行出来ません。 2 2022/09/16 12:36
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ヘッダーとフッターだけ背景を...
-
HTML属性での「""」 「''」違い
-
1時間30分を簡単に表したいで...
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
3カラムレイアウトで「常に残り...
-
hタグの右横に画像を表示
-
1サイト内にHTML5とXHTMLが混在...
-
divの中に外部のHTMLを埋め込む
-
画面を縮小するとカラムが落ち...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
SSIを利用してCSSレイアウトを...
-
hタグを使わずに小見出し
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
WEBデザイン ― ブラウザの横幅...
-
CSS: divタグ内のリンク表示に...
-
HTML5コメント欄の<article>に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報