Markdownの取り消し線の書き方

Markdownの取り消し線の書き方

公開: 更新:
CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

Markdownで文書を編集していると、テキストに取り消し線を引きたい場面があります。訂正や変更履歴を残す際に便利な装飾ですが、記法を忘れてしまう方も多いのではないでしょうか。

Markdownの取り消し線は、チルダ(~)を2つ並べてテキストを囲む書き方が実務上最も一般的です。ただし、サービスによっては記法が異なる場合もあるため、利用環境ごとの違いを押さえておくと安心です。

この記事では、Markdownの取り消し線の基本的な書き方から、サービス別の対応状況、反映されないときの対処法、HTMLタグを使った代替手段までを解説します。



Markdownで取り消し線を引く書き方【一覧表】

Markdownで取り消し線を表す方法として、実務では~~テキスト~~が最も一般的です。この記法はGitHub Flavored Markdown(GFM)の拡張構文(Strikethrough extension)に由来しており、GitHub、GitLab、Qiita、Zennなど多くのGFM系サービスで利用できます。GFM仕様本文でも、取り消し線は「2つのチルダで囲まれたテキスト」と定義されています。

Strikethrough text is any text wrapped in two tildes (~).

GitHub Flavored Markdown Spec - 6.5 Strikethrough (extension)

サービス間の互換性を考慮すると、取り消し線は~~テキスト~~を基本形として覚えるのが確実です。

記法 表示結果 説明
~~テキスト~~ テキスト 基本の取り消し線(推奨)
~~複数の単語を囲む~~ 複数の単語を囲む 複数語にも適用可能
~~**太字**~~ 太字 太字との組み合わせ
~~*斜体*~~ 斜体 斜体との組み合わせ

なお、Markdownのチルダ記法が使えない環境では、HTMLの<del>タグで取り消し線を代用できる場合があります。詳しくは後述の「Markdownの取り消し線をHTMLのdelタグで記述する方法」を参照してください。

チルダ(~)とは、キーボードのShiftキーを押しながら「へ」キー(日本語キーボードの場合)を押すと入力できる波線の記号です。必ず半角のチルダを使用してください。全角の「〜」では取り消し線として認識されません。

以下のサンプルコードは、最も基本的な取り消し線の記述例です。

~~この文章に取り消し線が引かれます~~

上記のコードをMarkdown対応エディタに入力すると、「この文章に取り消し線が引かれます」のように、テキストの中央に横線が引かれた状態で表示されます。基本形では、~~と文字の間に空白を入れず~~テキスト~~のように続けて書くと、意図どおり解釈されやすくなります。

Markdownの取り消し線と他の装飾を組み合わせる記法

Markdownの取り消し線は、太字や斜体など他のテキスト装飾と組み合わせて使用できます。~~...~~を主構文として、その内側に他の装飾記号を入れる形が、説明しやすく実務でも扱いやすい書き方です。装飾の入れ子はMarkdownパーサー(Markdownの記法をHTMLに変換するプログラム)の実装によって細かな差が出ることがあるため、複雑な組み合わせを使う場合は対象サービスでプレビュー確認すると確実です。

取り消し線と太字を同時に使う

取り消し線と太字を同時に適用するには、チルダ2つ(~~)の内側にアスタリスク2つ(**)を配置します。太字はMarkdownで文字を強調する装飾の1つで、アスタリスク2つまたはアンダースコア2つでテキストを囲むと適用されます。

~~**この文章は太字かつ取り消し線です**~~

上記を入力すると「この文章は太字かつ取り消し線です」と表示されます。逆に**~~テキスト~~**の形も多くのGFM系サービスで動作しますが、迷った場合はチルダを外側に配置する書き方を選んでおくと無難です。

取り消し線と斜体やリンクを同時に使う

斜体との組み合わせも同様の考え方です。チルダ2つ(~~)の内側にアスタリスク1つ(*)を配置すると、斜体と取り消し線を同時に適用できます。斜体はイタリック体とも呼ばれ、テキストを傾けて表示する装飾です。

~~*斜体かつ取り消し線*~~
~~[リンクテキスト](https://example.com)~~

1行目は「斜体かつ取り消し線」、2行目は「リンクテキスト」のように表示されます。リンクとの組み合わせについても、まずはチルダの内側にリンク記法を入れる形で考えると整理しやすくなります。

ただし、取り消し線付きリンクはクリック可能かどうかが視覚的にわかりにくいため、読者の混乱を避けるために利用場面は限定的にしましょう。


Python研修一覧はこちら

目的に合うPython研修を一覧形式から探したい方は、ぜひご利用ください。

Python研修を比較する

Java研修一覧はこちら

目的に合うJava研修を一覧形式から探したい方は、ぜひご利用ください。

Java研修を比較する

PHP研修一覧はこちら

目的に合うPHP研修を一覧形式から探したい方は、ぜひご利用ください。

PHP研修を比較する

新入社員研修

目的に合う新入社員研修を一覧形式から探したい方は、ぜひご利用ください。

新入社員研修を比較する

全ての研修からも探したい方はこちら

Markdownの取り消し線の主要サービス対応状況

以下の表は、主要なサービスにおける取り消し線の記法をまとめたものです。GFM系サービスでは~~テキスト~~が共通して使えます。NotionやSlackはMarkdownパーサーではなく独自の入力ショートカットやmarkupを採用しているため、参考情報として併記しています。

サービス 取り消し線の記法 ベースとなる仕様 備考
GitHub ~~テキスト~~ GFM Markdown記法
GitLab ~~テキスト~~ CommonMark + GFM拡張 Markdown記法
Qiita ~~テキスト~~ GFM Markdown記法
Zenn ~~テキスト~~ GFM Markdown記法
Notion ~テキスト~(チルダ1つ) 独自仕様 入力ショートカット(Markdownではない)
Slack ~テキスト~(チルダ1つ) 独自markup 独自markup(Markdownではない)

GFM系サービスでの取り消し線(GitHub・GitLab・Qiita・Zenn)

GitHub、GitLab、Qiita、Zennはいずれも GFMベースのMarkdownを採用しているため、共通して~~テキスト~~で取り消し線が動作します。GitHub Docsでも、実務上の基本形として~~テキスト~~が案内されています。

Any text that is between two tildes will be crossed out.

GitHub Docs - Basic writing and formatting syntax

~~修正前のテキスト~~ 修正後のテキスト

上記のコードは、これらのサービスのいずれでも「修正前のテキスト」に取り消し線が引かれ、「修正後のテキスト」がそのまま表示される結果になります。なお、GitHubではGFMをHTMLに変換した後にセキュリティのためのサニタイズ処理を行うため、利用箇所によってはHTMLの一部が制限される場合もあります。

GitLabはCommonMarkベースにGFMの拡張を取り込んだGitLab Flavored Markdown(GLFM)を採用しています。Qiitaの公式チートシートでも~~打ち消し~~が案内されており、Zennの公式ガイドでもインラインスタイルの例として~~打ち消し線~~が掲載されています。

打ち消し線を使うには ~~ で囲みます。

Qiita - Markdown記法 チートシート

NotionとSlackでの取り消し線(独自仕様)

NotionやSlackはMarkdownパーサーではなく、独自のリッチテキスト装飾やmarkupを採用しています。そのため、GFM系サービスとは記法が異なり、どちらもチルダ1つ~テキスト~)で取り消し線を表現します。GFM系サービスの~~テキスト~~(チルダ2つ)とは別物として覚えてください。

Notionは、公式ヘルプで~テキスト~を入力ショートカットとして案内しています。入力後はチルダの記号自体が画面上から消え、リッチテキスト装飾に変換されます。キーボードショートカット(WindowsCtrl + Shift + S、MacはCmd + Shift + S)でも取り消し線を適用できます。

Type ~ on both sides of your text to strikethrough.

Notion Help Center - Intro to writing & editing

Slackも同様に~テキスト~で取り消し線を適用します。

Strikethrough — Surround text with tildes: ~your text~

Slack Help Center - Format your messages in Slack with markup

Markdownの取り消し線ができないときの原因と対処法

Markdownで取り消し線が正しく表示されない場合、いくつかの典型的な原因が考えられます。以下の3つのケースを確認し、該当するものがないかチェックしてください。

チルダと文字の間に空白がある

取り消し線が反映されないよくある原因として、チルダとテキストの間に半角スペースや全角スペースが入っているケースがあります。基本形では、チルダとテキストが隙間なく接している状態で記述すると意図どおり解釈されやすくなります。

<!-- NG: チルダと文字の間にスペースがある -->
~~ テキスト ~~

<!-- OK: チルダと文字が隙間なく接している -->
~~テキスト~~

上記のNG例では、チルダの直後と直前にスペースが入っているため、取り消し線ではなくそのまま「~~ テキスト ~~」と表示されます。OK例のようにスペースを除去すると、正しく取り消し線が適用されます。

また、全角のチルダ「~~」を使用しているケースも同様にエラーの原因になります。取り消し線に使うのは半角のチルダ~です。全角の「〜」や「~」はMarkdownの記法として扱われません。


Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

サービスやエディタが未対応

取り消し線の記法(~~テキスト~~)はGFMの拡張構文であり、CommonMark本体の仕様には含まれていません。CommonMarkとは、Markdownの標準仕様を策定するプロジェクトのことです。そのため、GFM拡張をサポートしていないエディタやサービスでは取り消し線の記法が動作しない場合があります。

  • 一部のMarkdownエディタでは、設定画面でStrikethroughオプションを有効にしないと取り消し線が動作しないことがある
  • 静的サイト生成環境では、Markdownエンジンや拡張設定によって取り消し線の可否が変わることがある
  • 独自のMarkdownパーサーを採用しているサービスでは、取り消し線自体が未実装の可能性がある

対処法としては、利用しているエディタやサービスの公式ドキュメントを確認し、取り消し線(strikethrough)がサポートされているか調べてください。未対応の場合は、後述するHTMLの<del>タグを代替手段として検討する方法があります。

コードブロック内で使用している

コードブロックとは、バッククォート3つ(```)で囲まれた範囲のことで、ソースコードをそのまま表示するために使用されます。コードブロック内では通常のMarkdownのインライン装飾が解釈されないため、チルダ2つで囲んでも取り消し線は適用されません。

```
~~この部分は取り消し線にならない~~
```

上記のコードブロック内では、「~~この部分は取り消し線にならない~~」がそのまま文字列として表示されます。通常のMarkdown記法では、コードブロック内のテキストに装飾を適用する方法はないため、仕様上の制限と理解してください。

コードの変更箇所を示したい場合は、取り消し線とは別の表現方法として、diff記法(差分表示)を利用できます。以下のように、コードブロックの言語指定にdiffを指定し、削除行の先頭に-、追加行の先頭に+を付けると、変更箇所が色分けされて表示されます。

```diff
- 削除された行
+ 追加された行
```

上記のdiff記法はGitHubやQiitaなどの主要サービスでサポートされています。取り消し線の代替というよりも、コードの追加・削除を視覚的に示すための別の表現方法として活用してください。

Markdownの取り消し線をHTMLのdelタグで記述する方法

Markdownのチルダ記法が使えない環境では、raw HTML(Markdownファイル内に直接記述するHTMLタグ)を許可している処理系に限り、<del>タグを直接書ける場合があります。ただし、Markdownパーサーや公開先によってはHTMLが無効化・制限されることもあるため、互換性は一律ではない点に留意してください。

delタグの基本的な書き方

<del>タグは、HTMLで「文書から削除されたテキスト」を意味する要素です。delはdelete(削除)の略で、ブラウザのデフォルトスタイルによってテキストに取り消し線が引かれます。

<del>この文章は削除されました</del>

上記のコードをMarkdownファイル内に記述すると、「この文章は削除されました」と表示されます。チルダ記法の~~テキスト~~と見た目は同じですが、HTMLとしての意味(セマンティクス)が異なる点が特徴です。

GFMでは、取り消し線の出力例として<del>要素が示されています。一方、HTMLには類似のタグとして<s>タグも存在します。<del>は「文書編集において削除されたテキスト」を表し、<s>は「もはや正確ではない、または関連しなくなった内容」を表すという意味的な違いがあります。用途に応じて使い分けるとより厳密です。

<del> は HTML の要素で、文書から削除された文字列の範囲を表します。

MDN Web Docs - <del>: 削除済みテキスト要素

なお、HTMLの旧来の<strike>タグは、現在ではobsolete(非推奨)とされており、新規の記述では使うべきではありません。削除済みの内容を表したい場合は<del>、単に取り消し表示をしたい場合は文脈に応じて<s>を使用してください。

delタグとinsタグを併用する

<ins>タグは、<del>タグの対になる要素で、「挿入されたテキスト」を意味します。insはinsert(挿入)の略です。<del><ins>を組み合わせると、テキストの修正履歴を明確に表現できます。

<p>会議は<del>月曜日</del><ins>火曜日</ins>に開催します。</p>

上記のコードは「会議は月曜日火曜日に開催します。」と表示されます。delタグ部分には取り消し線が、insタグ部分には下線がデフォルトで適用されるため、どの部分が削除されどの部分が追加されたかが一目でわかる構成になっています。

さらに、<del>タグにはdatetime属性を指定することもできます。datetime属性には変更が行われた日時を機械可読な形で記録でき、HTML上で変更履歴を明示したい場面で有用です。

<del datetime="2026-03-19">旧テキスト</del>

datetime属性の値はブラウザの画面上には直接表示されません。あくまで機械可読なメタデータとして記録される情報であるため、変更日時を管理したい場合に活用してください。Markdownのチルダ記法(~~)では日時情報を付与できないため、変更日時の記録が必要な場面ではHTMLの<del>タグを選択する価値があります。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

企業・法人向けのIT・プログラミング・生成AI研修を探す、比較する - IT・プログラミングを知って学べるコネクトメディア CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプが提供する無料で学べるプログラミングスクール講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア 配属3ヶ月で30%の生産性向上を実現するいよぎんコンピュータサービスの新人研修に迫る - IT・プログラミングを知って学べるコネクトメディア 金融業界の業務効率化を加速するニッセイアセットマネジメントの生成AI×GAS活用研修事例 - IT・プログラミングを知って学べるコネクトメディア 【製造業のDX人材育成事例】デジタル人材の即戦力化を実現する、日本ガイシ株式会社の異動者向オンボーディング研修 - ITやプログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する