URLの色の丸を表現したいです。

Question

いつもお世話になっております。

画像部分の作り方について質問です。
カテゴリーの表示で色を色の円で表現したいと思っています。
画像のような円の部分htmlでどのようにすれば作成可能でしょうか？
よろしくお願いいたします。

https://search.rakuten.co.jp/search/mall/%E9%9B%91%E8%B2%A8/?l-id=s_search&l2-id=shop_header_search###HR######IMG03a2154f7142901b075bf6a97dbf2704d.jpegIMG0###

Accepted Answer

ECマスターズの大谷です。

>画像のような円の部分htmlでどのようにすれば作成可能でしょうか？
>よろしくお願いいたします。

こちらはお送り頂いた参考ページをもとに、
円の形（黒色）を作成しました。

下記ソースコードを使用して、
ご確認頂ければと思います。

===============================
【HTML】


===============================

===============================
【CSS】
.maru {
box-sizing: border-box;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
}
===============================

色のご変更は下記のカラーコード表をご参考に、
#から始まるカラーコードをコピーしてソースコードに
貼り付けて、ご変更をお願い致します。

https://www.colordic.org/

例）
赤の場合
style="background-color:#ff0000" ←#から始まる番号部分をご変更
紫の場合
style="background-color:#800080"←#から始まる番号部分をご変更

リンク先のご変更は下記ソースコード部分に、
URLをご入力下さい。

href="リンク先のURL"

ご確認の程、
宜しくお願いいたします。

Answer

ECマスターズの中野です。

いただいたご質問につきまして、
週明け担当よりご確認の上
返信させていただきます。

お時間いただきますがしばらく
お待ちいただきますよう
よろしくお願いいたします。

Answer

大谷さんありがとうございます。

イメージ通りできました！
ありがとうございました！