【画像・アイコンフォント・CSS・SVG】HTML/XHTMLでチェックマークを表示する4つの方法

2024-05-19

HTML/XHTMLにおけるチェック記号の生成方法

チェックボックス (input type="checkbox")

HTMLフォームで利用するチェックボックスを用いる方法です。ユーザーがクリックすることで選択状態を切り替えられます。

<input type="checkbox" id="checkbox1" name="checkbox" value="value1">
<label for="checkbox1">チェックボックス</label>

上記コードは以下の結果となります。

四角い枠が表示されます。
ユーザーがクリックすると、枠内にチェックマークが表示されます。

Unicode文字 (U+2713)

Unicodeに定義されているチェックマーク記号 (U+2713) を直接挿入する方法です。

<p>✓ チェックマーク</p>

単体のチェックマークが表示されます。
クリックによる選択状態の切り替えはできません。

補足

XHTMLは現在、HTML5に置き換えられつつあります。XHTMLでチェック記号を表示する場合は、XHTML 1.0 TransitionalまたはXHTML 1.0 Strictを使用する必要があります。
CSSを用いることで、チェック記号の外観をカスタマイズすることができます。

上記以外にも、画像を用いたり、JavaScriptライブラリを利用したりしてチェック記号を表示する方法もあります。用途や目的に合わせて最適な方法を選択してください。

HTML

チェックボックス

<!DOCTYPE html>
<html>
<head>
<title>チェックボックス</title>
</head>
<body>
<input type="checkbox" id="checkbox1" name="checkbox" value="value1">
<label for="checkbox1">チェックボックス</label>
</body>
</html>

Unicode文字

<!DOCTYPE html>
<html>
<head>
<title>Unicode文字</title>
</head>
<body>
<p>✓ チェックマーク</p>
</body>
</html>

XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>チェックボックス</title>
</head>
<body>
<input type="checkbox" id="checkbox1" name="checkbox" value="value1">
<label for="checkbox1">チェックボックス</label>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unicode文字</title>
</head>
<body>
<p>✓ チェックマーク</p>
</body>
</html>

上記のコードを保存して、Webブラウザで開くと、それぞれチェック記号が表示されます。

上記のコードはあくまで基本的な例です。必要に応じて、スタイルや属性を追加することができます。
コードを実行するには、XHTML対応のWebブラウザが必要です。

HTML/XHTMLでチェック記号を表示するその他の方法

画像を使用する

利点:
- 自由度の高いデザインが可能
欠点:
- ファイルサイズが大きくなる可能性がある

<img src="check_mark.png" alt="チェックマーク">

Font Awesomeなどのアイコンフォントを使用する

利点:
- ベクター画像なので、サイズ変更しても画質が劣化しない
欠点:
- すべてのブラウザでアイコンフォントが正しく表示されるとは限らない
- 使用するアイコンフォントライブラリを事前に読み込む必要がある

<i class="fas fa-check"></i> ```

**3. CSS pseudo-elementを使用する**

- 利点: 
    - 画像やアイコンフォントを使用するよりも軽量
    - デザインの自由度が高い
- 欠点: 
    - 比較的新しい機能なので、古いブラウザでは正しく表示されない可能性がある
    - 複雑なデザインの場合は、CSSコードが煩雑になる可能性がある

```css
#checkbox::before {
  content: "✓";
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #ccc;
}

#checkbox:checked::before {
  background-color: #007bff;
}

欠点:
- HTMLとXHTMLの知識に加えて、SVGの知識も必要
- コードが複雑になる可能性がある

<svg width="20" height="20">
  <rect width="20" height="20" fill="none" stroke="#ccc" stroke-width="1"/>
  <path d="M 6,10 L 12,16 L 18,10" fill="#007bff"/>
</svg>