Q&A
CSSではなくHTMLに<img />を書けばいいと思うのですが、何か問題があるのでしょうか？
前提・実現したいこと
overflow_flame内に並んでいる、最も上部のnews_contents_item内のnews_contents_contentの日付の直後にnewのアイコンを表示するようにしたいです。
html初心者ですが、よろしくお願いいたします。
発生している問題・エラーメッセージ
特にありません。
該当のソースコード
html
1<div id="new_contents"> 2 <div class="content_tittle">新着情報</div> 3 <div class="overflow_flame"> 4 5 <div class="news_contents_item"> 6 <div class="news_contents_thumb"><img src="picture/test20_20.gif" width="40px" height="40px"></div> 7 <div class="news_contents_content"><p>2018.09.07<br><a href="#">ホームページを更新しました。</a></p></div> 8 </div> 9 10 <div class="news_contents_item"> 11 <div class="news_contents_thumb"><img src="picture/test20_20.gif" width="40px" height="40px"></div> 12 <div class="news_contents_content"><p>2018.09.07<br> 13 <a href="#">ホームページを更新しました。</a></p></div> 14 </div> 15 16 </div> 17</div>
試したこと
日付の後ろにアイコンをつけることを妥協し、日付の前につけようとして、
cssで下記のように記述してみましたが、2つ目の新着情報にもアイコンが現れてしまいました。また、下記cssであるとpタグ内にaタグを含んでいるときのみアイコンが現れます。aタグを取り除き、pタグ単独とした場合には１つ目、２つ目両方ともに現れませんでした。
.overflow_flame .news_contents_item .news_contents_content p:first-of-type:before {
content: url(../picture/index_icon/icon_new.gif);
}
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答いただきましてありがとうございます。<img/>を書くというのは具体的にどのような方法でしょうか？まだ、勉強中の身ですので、分からず申し訳ありません。どの部分に書けばよいのかご教示いただければと思います。
提示されたHTMLは自分で書いたコードではないのでしょうか？
これは間違いなく私が書いたものです。<img/>をつけるのは<img src="picture/test20_20.gif" width="40px" height="40px">の後でよろしいのでしょうか？
「日付の直後」と言っているので日付の直後なのでは？ <img />が何を意味しているのかわかっているのですよね？
コメントありがとうございます。よくわからないので、調べてみます。とても詳しい方がいるようで、素人の私のようなものが質問して申し訳ありませんでした。自分で解決します。
"picture/test20_20.gif"はその画像を表示したくて書いたのではないのですか？ 自分で書いたのでしょう？
yoshinaviさんの回答についたコメント「更新したときに手間なくNEWを表示させたい意図」を説明しておかないと、「HTMLにimgタグ使えばいいじゃん（日付の後に<img src="～">を直接入れれば？）」というx_xさんの指摘もおかしくはないと思います。 test20_20.gifは記事のサムネイルなんですね。私は初めこれが新着アイコンかと勘違いして混乱しました（news_contents_thumbって書いてあった…）。あともう一つ、CSSではなくHTMLの場合、単位にpxは不要です。
ditさんありがとうございます。まだまだ、未熟なもので、ご教示いただけると助かります。
回答2件
0
「日付の後にアイコン表示」は方法がいくつかあります。下記に「torano_manji」さんのご提示以外で単純に画像を入れる方法もあります。
※class等を割り当ててCSSで位置の微調整も行えます。
質問のコメントで「x_x」さんの「CSSではなくHTMLに<img />を書けばいいと思う」もこのような意味合いだと思います。
※違っていたらスミマセン。
HTMLの日付を表す文字の後に<img src="../picture/index_icon/icon_new.gif">を記入します。
HTML
1<div id="new_contents"> 2 <div class="content_tittle">新着情報</div> 3 <div class="overflow_flame"> 4 5 <div class="news_contents_item"> 6 <div class="news_contents_thumb"><img src="picture/test20_20.gif" width="40px" height="40px"></div> 7 <div class="news_contents_content"><p>2018.09.07<img src="../picture/index_icon/icon_new.gif"><br><a href="#">ホームページを更新しました。</a></p></div> 8 </div> 9 10 <div class="news_contents_item"> 11 <div class="news_contents_thumb"><img src="picture/test20_20.gif" width="40px" height="40px"></div> 12 <div class="news_contents_content"><p>2018.09.07<br> 13 <a href="#">ホームページを更新しました。</a></p></div> 14 </div> 15 16 </div> 17</div>
投稿2018/09/25 07:32
総合スコア3523
こんにちは。
ありがとうございます。今回質問させていただいたのは、更新したときに手間なくNEWを表示させたい意図がありました。確かに日付の後に画像を直接挿入すれば問題ないですよね！
「x_x」さんの仰られるいることは、私にはよくわかりません。かみ砕いて教えていただけると思い、コメントを返していたのですが、核心の部分は教えてもらえないようです。
yoshinaviさんありがとうございました！
新記事を追加する場合（今の日付部分のHTMLを残す場合）、私の回答も「torano_manji」さんの回答も、そのままでは「NEW」がダブるので、旧記事にあたる日付部分は「削除」が必要となります。
（私の場合はimg部分、「torano_manji」さんの場合はspan部分）
HTMLで日付と文章を<br>で改行ではなく、<p>で分けて作成すると、spanを使わないので最初の「torano_manji」さん提示のCSSで行けるので、HTMLの再検討も良いかと思います。
有難うございます。
pタグを使うことで行間が空いてしまうので、marginで調節しながらやってみようかと思います。
なんかディスられてますが最後までコメント返してないでしょう？
回答に足る情報は得られていないと思っています。
to ykari さん
x_xさん
コメントありがとうございます。この質問は解決しましたので、これ以上の追記は必要ありません。ベストアンサーの方も選択させていただきました。また、今回の投稿は初心者と公表して質問させていただいております。初心者である私に対して、「これはわかっているのでしょ？」という内容の聞かれ方をされても困ります。もう一つ申し上げると、このコードは確かに私が自身で書いたものですが、特に自身で書いていないもについても質問の題材にしてはならないという決まりはないはずです。自身の知識を秘匿し、このような多数の方が閲覧する場所において、辱める、他者を下に見る行為は慎んでいただきたい。
また他の質問がありましたら、解決に力を貸していただけるようお願いいたします。
以上です。この投稿以降コメントをお返しいただく必要はございません。重ねてお礼申し上げます。
0
ベストアンサー
はじめまして。
ご指定のcssの記述だと、以下のような意味になります。
.overflow_flameの中の
.news_contents_itemの中の
.news_contents_contentの中の
p:first-of-type:beforeに対して以下のスタイルを指定します。
{
content: url(../picture/index_icon/icon_new.gif);
}
ですので、newアイコンはすべてのpについてしまったんだと思います。
一番最初の新着情報に対して、newアイコンを表示させたい場合は、以下のように変更すれば出るのではないかと思います。
.overflow_flame .news_contents_item:first-child .news_contents_content p:before { content: url(../picture/index_icon/icon_new.gif); }
.news_contents_itemに:first-childをつけました。
:first-of-typeでも良いかもですが、わかりやすく:first-childにしています。
検証はしていないので憶測ではあるのですが・・・
aタグを除去した際に表示されなかった云々・・・は、ちょっと原因がわかりませんでした。
もしかしたら、.overflow_flameでoverflow:hidden;でもかけていて、本当は表示されていたものの見えなかった可能性もあるかもです。
投稿2018/09/25 05:18
編集2018/09/25 05:21
総合スコア34
torano_manjiさん
回答いただきまして、ありがとうございます。
検証してみたところ、うまくいきました！
news_contents_content内の日時の直後にNEW！のアイコンを表示させることは可能でしょうか？
ykariさん、うまくいってよかったです！
news_contents_content内の日時の直後にNEW！アイコンを・・・とのことなのですが、p:beforeへの指定は以下のみでしょうか？
```
content: url(../picture/index_icon/icon_new.gif);
```
これ以外の指定があれば教えてください。
できれば、新着情報へのcss指定をすべて見たいです・・・
回答ありがとうございます。
p:beforeの指定はコレだけです。いろいろ聞いてしまってすみません。
ykariさん、ありがとうございます。
どういうデザインで見せたいかがわからないので、あくまで、NEWアイコンのみでの指定として考えてみました。
現在あるソースを活用する形での修正となります。
HTMLを少し修正しました。
変更したのは、.news_contents_contentの部分です。
```
<div class="news_contents_content">
<p>
<span>2018.09.07</span>
<a href="#">ホームページを更新しました。</a>
</p>
</div>
```
pタグの中にある日付をspanタグでくくりました。
その上で、cssに以下の指定をします。
```
.overflow_flame .news_contents_item .news_contents_content p span {
display: block;
}
.overflow_flame .news_contents_item:first-child .news_contents_content p span:after {
content: url(../picture/index_icon/icon_new.gif);
}
```
spanタグに対して、display:blockを指定するのと、アイコンの指定はspanの:afterへ変更しました。
これで望んでいる形の表示ができると思います。
p:beforeへの指定は削除してくださいね。
丁寧な回答ありがとうございます！
希望通りの形となりました！魔法のようです！
お手数おかけしました。
ykariさん、良かったです(^^)
説明不足などもあるかもしれませんが、希望通りの形になったようで安心しました。
がんばってくださいね(^^)
あなたの回答
tips
プレビュー
