HTMLで打ち消し線を入れる方法｜簡単に価格や文章に横線を引く

html

ホームページやブログの記事で

「この価格はセール前の値段だから横線を引きたい」
「訂正箇所を打ち消し線で見せたい」

と思ったことはありませんか？

HTMLには文章に**打ち消し線（取り消し線）**を入れるための専用タグがあります。

この記事では、

  • もっとも簡単な打ち消し線の方法
  • CSSで色や太さをアレンジするコツ

を初心者向けにやさしく紹介します。

これを読めば、値下げ情報や訂正部分をすぐにわかりやすく見せられるようになりますよ。

スポンサーリンク

HTMLで打ち消し線を入れる基本方法

<s>タグの使い方

打ち消し線を入れるもっとも簡単な方法は<s>（エス）タグを使うことです：

<p>通常価格：<s>3,000円</s> → セール価格：2,000円</p>

ブラウザでの表示：

通常価格：~~3,000円~~ → セール価格：2,000円

このように、<s>で囲んだ部分に横線が引かれます。

<del>タグとの違い

実は同じように線を引く<del>（デリート）タグもあります：

<p>旧情報：<del>この商品は販売終了しました</del></p>
タグ意味使用場面SEO効果
<s>視覚的な打ち消し価格変更、装飾的な用途意味的効果は薄い
<del>削除された内容訂正、更新された情報検索エンジンが理解

どちらを選ぶべき？

<!-- 価格表示（装飾的用途） -->
<p>定価：<s>5,000円</s> → セール価格：3,000円</p>

<!-- 記事の訂正（意味的な削除） -->
<p>イベントは<del>4月10日</del><ins>4月20日</ins>に開催されます。</p>
  • 装飾目的：<s>タグ
  • 内容の訂正・削除：<del>タグ

<ins>タグとの組み合わせ

挿入タグ<ins>

<del>とセットでよく使われるのが<ins>（インサート）タグです：

<p>
  営業時間：<del>9:00-18:00</del><ins>10:00-19:00</ins>に変更になりました。
</p>

より詳細な更新履歴

<p>
  この商品の価格は
  <del datetime="2024-12-01" cite="price-update.html">8,000円</del>
  <ins datetime="2024-12-25" cite="xmas-sale.html">5,000円</ins>
  に変更されました。
</p>
属性説明例
datetime変更日時datetime="2024-12-25"
cite変更理由の参照URLcite="update-log.html"

CSSで打ち消し線をカスタマイズ

text-decorationプロパティ

HTMLタグを使わず、CSSで打ち消し線を指定することもできます：

<span style="text-decoration: line-through;">5,000円</span>

詳細なスタイル指定

.strikethrough {
  text-decoration: line-through;
  text-decoration-color: red;      /* 線の色 */
  text-decoration-style: double;   /* 線のスタイル */
  text-decoration-thickness: 2px;  /* 線の太さ */
}

線のスタイルバリエーション

<style>
.strike-solid { text-decoration: line-through solid red; }
.strike-dashed { text-decoration: line-through dashed blue; }
.strike-dotted { text-decoration: line-through dotted green; }
.strike-double { text-decoration: line-through double purple; }
.strike-wavy { text-decoration: line-through wavy orange; }
</style>

<p><span class="strike-solid">実線の打ち消し</span></p>
<p><span class="strike-dashed">破線の打ち消し</span></p>
<p><span class="strike-dotted">点線の打ち消し</span></p>
<p><span class="strike-double">二重線の打ち消し</span></p>
<p><span class="strike-wavy">波線の打ち消し</span></p>

線の太さと位置の調整

.custom-strike {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-underline-offset: 2px; /* 線の位置調整 */
  color: #666;
}

実用的なデザインパターン

ECサイトの価格表示

<style>
.price-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

.sale-price {
  color: #e74c3c;
  font-weight: bold;
  font-size: 18px;
}

.discount-badge {
  background-color: #e74c3c;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
</style>

<div class="price-container">
  <span class="original-price">¥8,000</span>
  <span class="sale-price">¥5,500</span>
  <span class="discount-badge">31% OFF</span>
</div>

タスクリスト（完了項目）

<style>
.task-list {
  list-style: none;
  padding: 0;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.task-checkbox {
  margin-right: 10px;
}

.task-completed {
  text-decoration: line-through;
  color: #888;
  opacity: 0.7;
}
</style>

<ul class="task-list">
  <li class="task-item">
    <input type="checkbox" class="task-checkbox" checked>
    <span class="task-completed">HTMLの勉強</span>
  </li>
  <li class="task-item">
    <input type="checkbox" class="task-checkbox" checked>
    <span class="task-completed">CSSの勉強</span>
  </li>
  <li class="task-item">
    <input type="checkbox" class="task-checkbox">
    <span>JavaScriptの勉強</span>
  </li>
</ul>

記事の訂正表示

<style>
.correction {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 10px;
  margin: 15px 0;
}

.correction-label {
  font-weight: bold;
  color: #856404;
  display: block;
  margin-bottom: 5px;
}

.deleted-text {
  text-decoration: line-through;
  color: #dc3545;
  background-color: #f8d7da;
  padding: 2px 4px;
}

.inserted-text {
  background-color: #d4edda;
  color: #155724;
  padding: 2px 4px;
  font-weight: bold;
}
</style>

<div class="correction">
  <span class="correction-label">【訂正】</span>
  イベント開催日が変更になりました：
  <span class="deleted-text">12月20日（水）</span> → 
  <span class="inserted-text">12月22日（金）</span>
</div>

アニメーション効果付き打ち消し線

フェードイン効果

<style>
.animated-strike {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.animated-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #e74c3c;
  transition: width 0.5s ease;
}

.animated-strike.striked {
  color: #999;
}

.animated-strike.striked::after {
  width: 100%;
}
</style>

<p>価格：<span class="animated-strike">¥10,000</span></p>

<script>
// 3秒後に打ち消し線を表示
setTimeout(() => {
  document.querySelector('.animated-strike').classList.add('striked');
}, 3000);
</script>

ホバー効果

<style>
.hover-strike {
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}

.hover-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #e74c3c;
  transition: width 0.3s ease;
}

.hover-strike:hover {
  color: #999;
}

.hover-strike:hover::after {
  width: 100%;
}
</style>

<p><span class="hover-strike">マウスを乗せると打ち消し線が表示されます</span></p>

段階的な打ち消し効果

<style>
@keyframes strikethrough {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

.progressive-strike {
  position: relative;
  display: inline-block;
}

.progressive-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #e74c3c;
  animation: strikethrough 2s ease-in-out forwards;
}
</style>

<p><span class="progressive-strike">段階的に打ち消し線が表示されます</span></p>

特殊な打ち消し線パターン

斜め線の打ち消し

<style>
.diagonal-strike {
  position: relative;
  display: inline-block;
}

.diagonal-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top right,
    transparent 45%,
    #e74c3c 47%,
    #e74c3c 53%,
    transparent 55%
  );
  pointer-events: none;
}
</style>

<span class="diagonal-strike">斜め線で打ち消し</span>

X印の打ち消し

<style>
.x-strike {
  position: relative;
  display: inline-block;
}

.x-strike::before,
.x-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.x-strike::before {
  background: linear-gradient(
    to top right,
    transparent 45%,
    #e74c3c 47%,
    #e74c3c 53%,
    transparent 55%
  );
}

.x-strike::after {
  background: linear-gradient(
    to bottom right,
    transparent 45%,
    #e74c3c 47%,
    #e74c3c 53%,
    transparent 55%
  );
}
</style>

<span class="x-strike">X印で打ち消し</span>

複数線の打ち消し

<style>
.multi-strike {
  position: relative;
  display: inline-block;
}

.multi-strike::before,
.multi-strike::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e74c3c;
}

.multi-strike::before {
  top: 30%;
}

.multi-strike::after {
  top: 70%;
}
</style>

<span class="multi-strike">複数線の打ち消し</span>

アクセシビリティを考慮した打ち消し線

スクリーンリーダー対応

<!-- 価格変更の場合 -->
<p>
  <span aria-label="元の価格">
    <s>¥10,000</s>
  </span>
  <span aria-label="現在の価格">¥7,000</span>
</p>

<!-- より詳細な情報 -->
<p>
  通常価格
  <del aria-label="削除された価格">¥10,000</del>、
  セール価格
  <ins aria-label="新しい価格">¥7,000</ins>
</p>

色覚に配慮したデザイン

<style>
.accessible-strike {
  text-decoration: line-through;
  position: relative;
}

/* 色だけでなく、アイコンも追加 */
.accessible-strike::before {
  content: '✗ ';
  color: #e74c3c;
  font-weight: bold;
}

.accessible-price {
  text-decoration: line-through;
  opacity: 0.6;
}

.accessible-price::after {
  content: ' (終了)';
  font-size: 0.8em;
  color: #666;
}
</style>

<p>
  <span class="accessible-price">¥8,000</span>
  → ¥5,000
</p>

よくある問題と解決法

打ち消し線が表示されない場合

問題1：CSSが適用されていない

<!-- ❌ 間違った書き方 -->
<span style="text-decoration: strikethrough;">テキスト</span>

<!-- ✅ 正しい書き方 -->
<span style="text-decoration: line-through;">テキスト</span>

問題2：優先度の問題

/* 他のCSSで上書きされる場合 */
.important-strike {
  text-decoration: line-through !important;
}

問題3：特定フォントでの表示問題

.font-safe-strike {
  text-decoration: line-through;
  font-family: Arial, sans-serif; /* フォールバック設定 */
}

ブラウザ間の表示差異

/* より安全な打ち消し線 */
.cross-browser-strike {
  text-decoration: line-through;
  /* IE対応 */
  filter: alpha(opacity=60);
  /* 古いブラウザ対応 */
  -webkit-text-decoration: line-through;
  -moz-text-decoration: line-through;
}

印刷時の対応

@media print {
  .print-strike {
    text-decoration: line-through;
    color: black !important;
    background: none !important;
  }
  
  /* 印刷では色付きの装飾を無効化 */
  .no-print-color {
    color: black !important;
    text-decoration: line-through;
  }
}

SEOと意味的マークアップ

検索エンジンに適した使い方

<!-- SEOに効果的な訂正マークアップ -->
<article>
  <h2>商品情報の更新</h2>
  <p>
    価格改定のお知らせ：
    <del datetime="2024-12-01">従来価格 ¥5,000</del>
    <ins datetime="2024-12-25">新価格 ¥4,000</ins>
  </p>
</article>

構造化データとの組み合わせ

<div itemscope itemtype="https://schema.org/Product">
  <h3 itemprop="name">商品名</h3>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price" content="4000">
      <s>¥5,000</s> ¥4,000
    </span>
    <meta itemprop="priceCurrency" content="JPY">
  </div>
</div>

モバイル対応の考慮事項

タッチデバイスでの見やすさ

.mobile-friendly-strike {
  text-decoration: line-through;
  text-decoration-thickness: 2px; /* モバイルで見やすい太さ */
  line-height: 1.6; /* 行間を広めに */
}

@media (max-width: 480px) {
  .mobile-strike {
    text-decoration-thickness: 1.5px;
    font-size: 1.1em; /* モバイルで少し大きく */
  }
}

高解像度ディスプレイ対応

@media (-webkit-min-device-pixel-ratio: 2) {
  .retina-strike {
    text-decoration-thickness: 0.5px;
  }
}

まとめ

HTMLで打ち消し線を実装する方法は用途に応じて選択することが重要です。

手法の使い分け

方法適用場面メリット注意点
<s>装飾的な打ち消しシンプル意味的効果なし
<del>削除された情報SEO効果あり適切な文脈が必要
CSS line-throughカスタムデザイン自由度高スタイル管理必要

ベストプラクティス

  1. 意味に応じた選択：装飾なら<s>、削除なら<del>
  2. アクセシビリティ配慮：色だけでなく形状でも区別
  3. モバイル対応：適切な太さと間隔の設定
  4. SEO最適化：適切な属性と構造化データの活用

実用的な活用場面

  • ECサイト：価格変更、セール表示
  • ブログ記事：訂正、更新情報
  • ToDoリスト：完了項目の表示
  • ドキュメント：改訂履歴の管理

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました