文脈と関係のないアイコンをCSSで実装する方法について

Question

前提・実現したいこと

文脈と関係ない、アイコン
たとえば、(´∀｀*)がアイコン画像だとして

(´∀｀*)文脈(´∀｀*)

こういったものを、htmlで実装するのは好ましくないということを知りました。

 <div class="let">       
   <img src="img/nikoniko.jpg">
   　<p>文脈</p>
　　<img src="img/nikoniko.jpg">
</div>

これを、CSSだけで実装するヒントが欲しいです。

初心者な質問で申し訳ありません。
よろしくお願いします。

Answer 1

疑似要素を使って前後に画像を配置するなら、下記でいいかと。

.let {
  margin-bottom: 50px;
  & p{
    display: flex;
    align-items: center;
    &::before {
      content: url(https://placehold.jp/100x40.png);
      margin-right: 10px;
    }
    &::after {
      content: url(https://placehold.jp/100x40.png);
      margin-left: 10px;
    }
  }
}

Comments

[nomura02]

こちらの方が、すくないコードで思い通りの表現が出来ました！！
意外とシンプルですね…
いつもありがとうございます！！！たすかりました！！

Answer 2

疑似要素のbeforeとafterを使えば可能です。
擬似要素 before afterで検索したら方法が解説されたサイトがヒットします。

Comments

[nomura02]

ああ、擬似要素ですね！！

.let{
margin-bottom: 50px;
& p:before {
content: '';
display: inline-block;
background-image: url(img/nikoniko.png)
no-repeat 50% 50% ; /*アイコン画像*/
/* その他の設定でスタイル調整 */
}
& p:after {
content: '';
display: inline-block;
background-image: url(img/nikoniko.png)
no-repeat 50% 50% ; /*アイコン画像*/
/* その他の設定でスタイル調整 */
}

やってみたのですが・・・今度は、画像が消滅してしまいました。
どうしてだ・・・泣

エラーも出ていなくて・・・
すみませんよろしければご指摘頂けますと幸いです。
よろしくお願いします。

[Jon_do]

pにposition: relative;
:beforeと:after にそれぞれに
任意のwidth、height
position:absoluteをつけて
top:0
left:0;　(right:0)
で任意の場所に位置調整する。
みたいな感じだと思います。

[nomura02]

出来ました！！ありがとうございます！！！

Answer 3

htmlで実装するのは好ましくないということを知りました。

これがどういうことかよくわかりませんが、
下記が一番さっくり実装できます。

.let {
  display: flex;
}

上記の好ましくないというのが、HTMLの文法上の問題でしたら、
その認識は古く、（〜HTML4）
HTML5では、imgは文脈に関係ない配置の場合、装飾の意味合いを持たせることができるため、特に問題ありません。

Comments

[nomura02]

そうなんですか、ちょっと今回は、
正論言わない方がいいパターンのような気がするので、擬似要素で実装してみます！！
ありがとうございます！！

[miyabi_pudding]

> 正論言わない方がいいパターンのような気がするので

どういう意味ですか？？

[nomura02]

私へ指示を出した方が、htmlでimgを用いることは良くないという認識がありまして…！(私のほうが立場が弱い)
「HTML5では、imgは文脈に関係ない配置の場合、装飾の意味合いを持たせることができるという情報も入手しましたっす！」と言ってみます！！

[miyabi_pudding]

そういう状況は、明記しないと、第三者が知り得ることではないので、
主語がないと勘違いされるかと思いますよ。
私に対して正論言わないでほしいと言っているようにもとることができてしまうので。

まぁ、そういう状況なら、無理せず、擬似要素でいいのでは？

[nomura02]

すみません！！失礼いたしました！！
ありがとうございます！