コーディングの仕方がわからない

Question

これをサイトに入れたいのですが、どうすればいいでしょうか？
コーディングでなく画像にすべきですか？

よろしくお願いします

Comments

[y_waiwai]

質問が意味不明です。

編集できるので、他人が理解できるように説明を追記しましょう

[Lhankor_Mhy]

「これ」とはなんですか？

[m.ts10806]

画像を見ろ（履歴からリンクを取得して）ということでしょうか。
質問ではなく、クイズですか？

Answer 1

張り付けにしてコーディングはあきらめました

Comments

[Lhankor_Mhy]

画像でもよい、という回答はすでについているので、それを無視して自己解決にするのはいかがと思いましたので、低評価しました。

Answer 2

「これ」とは↓これなんですね。ようやくわかりました。

画像でもいいと思いますが、その場合にはアクセシビリティに気を使ってください。

---

一応、HTMLで書いてみました。

サンプル

body{
  counter-reset: li;
  display: flex;
}
div{
  display: flex;
  flex-flow: column;
  width: max-content;
  align-items: center;
}
p{
  writing-mode: vertical-lr;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px;
  flex-grow: 1;
  text-align:center;
}
div::before {
  counter-increment: li;
  content: "0" counter(li);
  text-align: center;
}
hr{
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MTInIGhlaWdodD0nNTEyJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHRpdGxlPmlvbmljb25zLXY1LWE8L3RpdGxlPjxwb2x5bGluZSBwb2ludHM9JzI2OCAxMTIgNDEyIDI1NiAyNjggNDAwJyBzdHlsZT0nZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NDhweCcvPjxsaW5lIHgxPSczOTInIHkxPScyNTYnIHgyPScxMDAnIHkyPScyNTYnIHN0eWxlPSdmaWxsOm5vbmU7c3Ryb2tlOiMwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDo0OHB4Jy8+PC9zdmc+");
  width: 1em;
  border: none;
  margin: 0;
}

<div>
<p>お問い合わせ・ご依頼</p>
</div>
<hr>
<div>
<p>打ち合わせ・ヒアリング</p>
</div>
<hr>
<div>
<p>お見積り</p>
</div>

やじるし画像はググってちょっと拝借したものなので（一応、ライセンスは確認しています）、適宜入れ替えてください。

Answer 3

サイトに入れたい、というのはサイトに表示したい、ということだと想像します。

文字の場合
Google フォントなどWebフォントを用いてテキストで表示したほうがいいシチュエーションが多いので、HTML + CSSでコーディングしたほうがよさそうです。

写真・ベクタではないのイラストの場合
画像にしたほうがよさそうです。

ロゴ、ベクタのイラスト、Webフォントにない特殊な文字の場合
SVG化したデータを<img>タグで画像として表示するか、ソースコードに<svg>タグで記述するか両方選べます。
CSSでアニメーションさせたいなら、<svg>タグでHTMLファイル内にコーディングしたほうがよさそうです。