【CSS】バツ（×）マークの作り方｜疑似要素・Unicode・SVG・アニメーション付き実装

この記事で学べること

• ::before / ::after 疑似要素でバツマークを作る方法
• Unicode文字（× / ✕ / ✖）で手軽に表示する方法
• SVGで高品質なバツマークを描く方法
• ホバーアニメーション（回転・スケール・色変化）の実装
• モーダル・ハンバーガーメニュー・タグ削除での実務パターン
• アクセシビリティ（aria-label・キーボード操作）の対応
• よくあるミスと注意点

<button class="close-btn" aria-label="閉じる"></button>

.close-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

ポイント：content: '' は必須です。疑似要素は content プロパティがないと表示されません。空文字でも構いませんが、省略するとバツマークが表示されなくなります。

.close-btn {
  --btn-size: 40px;
  --line-length: 24px;
  --line-weight: 2px;
  --line-color: #333;

  position: relative;
  width: var(--btn-size);
  height: var(--btn-size);
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--line-length);
  height: var(--line-weight);
  background: var(--line-color);
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

.close-btn-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.close-btn-circle:hover {
  background: #e2e8f0;
}

.close-btn-circle::before,
.close-btn-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #64748b;
  border-radius: 1px;
}

.close-btn-circle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn-circle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<button class="close-btn-text" aria-label="閉じる">
  &times;
</button>

.close-btn-text {
  font-size: 24px;
  color: #333;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

.close-btn-text:hover {
  color: #dc2626;
}

.close-btn-unicode::before {
  content: '�0D7';
  font-size: 24px;
}

注意：Unicode文字はフォントによって見た目が変わります。特に ❌（Cross Mark）は、OSやブラウザによって絵文字として表示されることがあり、色やサイズの制御が難しくなります。統一的な見た目が必要な場合は、疑似要素やSVGを使いましょう。

<button class="close-btn-svg" aria-label="閉じる">
  <svg width="24" height="24" viewBox="0 0 24 24"
       fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round">
    <line x1="6" y1="6" x2="18" y2="18" />
    <line x1="18" y1="6" x2="6" y2="18" />
  </svg>
</button>

.close-btn-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn-svg:hover {
  color: #dc2626;
}

.close-btn-mask {
  width: 40px;
  height: 40px;
  border: none;
  background-color: #333;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s;
}

.close-btn-mask:hover {
  background-color: #dc2626;
}

ポイント：2024年以降、主要ブラウザすべてで mask-image がサポートされています。ただし、Safari（特に古いバージョン）では -webkit-mask-image が必要な場合があるため、両方記述しておくと安全です。

.close-btn-rotate {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.close-btn-rotate:hover {
  transform: rotate(90deg);
}

.close-btn-rotate::before,
.close-btn-rotate::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  transition: background 0.3s;
}

.close-btn-rotate::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn-rotate::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn-rotate:hover::before,
.close-btn-rotate:hover::after {
  background: #dc2626;
}

.close-btn-scale {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.close-btn-scale:hover {
  transform: scale(1.2);
}

.close-btn-scale::before,
.close-btn-scale::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  transition: background 0.2s;
}

.close-btn-scale::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn-scale::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn-scale:hover::before,
.close-btn-scale:hover::after {
  background: #dc2626;
}

.close-btn-fade {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease;
}

.close-btn-fade:hover {
  background: rgba(0, 0, 0, 0.08);
}

.close-btn-fade::before,
.close-btn-fade::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #555;
  border-radius: 1px;
}

.close-btn-fade::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn-fade::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn-border {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-btn-border::before,
.close-btn-border::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 0;
  border-top: 2px solid #333;
}

.close-btn-border::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn-border::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn-shadow::before,
.close-btn-shadow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

<button class="close-btn-spans" aria-label="閉じる">
  <span class="close-line close-line-1"></span>
  <span class="close-line close-line-2"></span>
</button>

.close-btn-spans {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-line {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.close-line-1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-line-2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div class="modal-overlay">
  <div class="modal" role="dialog" aria-modal="true"
       aria-labelledby="modal-title">
    <button class="modal-close" aria-label="閉じる"></button>
    <h2 id="modal-title">タイトル</h2>
    <p>モーダルの内容</p>
  </div>
</div>

.modal {
  position: relative;
  max-width: 500px;
  margin: auto;
  padding: 2em;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-close:hover {
  background: #f1f5f9;
}

.modal-close::before,
.modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #64748b;
  border-radius: 1px;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<button class="hamburger" aria-label="メニュー"
        aria-expanded="false">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューが開いたとき（.is-activeクラスを付与） */
.hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

補足：JavaScriptで .is-active クラスの付け外しを行います。document.querySelector('.hamburger').addEventListener('click', function() { this.classList.toggle('is-active'); });

<div class="tag">
  JavaScript
  <button class="tag-remove" aria-label="JavaScriptタグを削除">
    &times;
  </button>
</div>

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 16px;
  font-size: 14px;
}

.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(3, 105, 161, 0.15);
  color: #0369a1;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.tag-remove:hover {
  background: rgba(3, 105, 161, 0.3);
}

<div class="notification" role="alert">
  <p>新機能が追加されました！</p>
  <button class="notification-close"
          aria-label="通知を閉じる">&times;</button>
</div>

.notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #0284c7;
  color: #fff;
  border-radius: 8px;
}

.notification p {
  margin: 0;
}

.notification-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.notification-close:hover {
  color: #fff;
}

<div class="search-field">
  <input type="text" class="search-input"
         placeholder="検索...">
  <button class="search-clear"
          aria-label="入力をクリア">&times;</button>
</div>

.search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
}

.search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.search-clear {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}

.search-clear:hover {
  color: #475569;
  background: #f1f5f9;
}

<!-- NG: 読み上げ内容がない -->
<button class="close-btn"></button>

<!-- OK: aria-labelで読み上げテキストを指定 -->
<button class="close-btn" aria-label="閉じる"></button>

<!-- OK: visually-hiddenクラスでテキストを非表示にする -->
<button class="close-btn">
  <span class="visually-hidden">閉じる</span>
</button>

/* デフォルトのoutlineを消すのはNG */
.close-btn:focus {
  outline: none; /* これだけだとアクセシビリティ違反 */
}

/* OK: focus-visibleで独自スタイルを設定 */
.close-btn:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
  border-radius: 4px;
}

ポイント：<button> 要素を使えば、Tab移動やEnter/Spaceでの実行はブラウザが自動で処理してくれます。<div> を使うと、tabindex、role="button"、キーイベントのハンドリングをすべて自分で実装する必要があり、バグの原因にもなります。

/* NG: positionが指定されていない */
.close-btn {
  width: 40px;
  height: 40px;
}

/* OK: position: relativeを追加 */
.close-btn {
  position: relative;
  width: 40px;
  height: 40px;
}

/* NG: ボタンが小さすぎる */
.close-btn-small {
  width: 20px;
  height: 20px;
}

/* OK: ボタンは44px以上、線は小さく */
.close-btn-accessible {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.close-btn-accessible::before,
.close-btn-accessible::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;  /* 線は小さく */
  height: 2px;
  background: #333;
}

/* NG: contentがないので表示されない */
.close-btn::before {
  position: absolute;
  width: 24px;
  height: 2px;
  background: #333;
}

/* OK: content: '' を追加 */
.close-btn::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #333;
}

/* NG: 回転の中心がずれる */
.close-btn::before {
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
  /* 線が中央からずれてしまう */
}

/* OK: translateで中央配置してからrotate */
.close-btn::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

注意：コントラスト比はChromeのDevToolsで簡単に確認できます。要素を検査して、色の横に表示されるコントラスト比の値を確認しましょう。

実装チェックリスト

• <button> 要素を使っているか（<div> や <span> ではなく）
• aria-label="閉じる" などのラベルを設定しているか
• タッチターゲットサイズが44px以上あるか
• フォーカスリング（:focus-visible）を設定しているか
• バツマークの色が背景に対して十分なコントラストがあるか（3:1以上）
• ホバー時の状態変化があるか（色変化やスケールなど）