記事をもっとかっこよくする！デコレーション技10選

この記事では、記事をかっこよく見せるための「デコレーション技」を紹介するよ！ コードをコピーして使ってね。

---

技1：ヒントボックス

書き方：

<div class="hint-box">
ここにヒントを書く
</div>

---

技2：注意ボックス

書き方：

<div class="warn-box">
ここに注意点を書く
</div>

---

技3：重要ボックス

書き方：

<div class="strong-box">
ここに重要なことを書く
</div>

---

技4：画像＋説明文

書き方：

<div class="img-frame">
  <img src="/images/ファイル名.png" alt="画像の説明" />
  <p>↑ キャプション（説明文）</p>
</div>

画像は public/images/ フォルダに入れてからファイル名を書いてね！

---

技5：ランキング表

ランク	武器名	強さ
1	ダークブレード	★★★★★
2	フレイムソード	★★★★☆
3	アイスブレード	★★★★☆
4	シルバーソード	★★★☆☆

書き方：

| ランク | 武器名 | 強さ |
|--------|--------|------|
| <span class="rank rank-1">1</span> | 武器名 | ★★★★★ |
| <span class="rank rank-2">2</span> | 武器名 | ★★★★☆ |
| <span class="rank rank-3">3</span> | 武器名 | ★★★☆☆ |
| <span class="rank rank-other">4</span> | 武器名 | ★★☆☆☆ |

---

技6：引用ブロック

これが引用ブロック！誰かの言葉や、ゲーム内のセリフを目立たせるときに使える。

書き方：

> ここに引用したい文章を書く

---

技7：箇条書きリスト

• 項目1
• 項目2
  • 入れ子にもできる（スペース2つ＋ハイフン）
  • こんな感じ
• 項目3

---

技8：番号付きリスト

1. まず最初にやること
2. 次にやること
3. 最後にやること

---

技9：太字・斜体

太字にしたいときは **文字** で囲む。

斜体にしたいときは *文字* で囲む。

太字と斜体を組み合わせることもできる。

---

技10：区切り線

本文の途中に区切りを入れたいときは --- を1行だけ書く。

---

こんな感じに区切り線が入るよ！

---

ボックスを組み合わせる