「Markdownで取り消し線ってどう書くんだっけ？」
「TODOリストで完了したタスクに線を引きたい」
「コードレビューで削除予定の部分を分かりやすく示したい」
こんな場面、よくありませんか？
実は、VSCodeでは取り消し線を様々な場面で活用できるんです。
単なる文字装飾だけじゃなく、タスク管理やコードレビュー、ドキュメント作成まで、使い方次第で作業効率が大幅アップ！
この記事では、VSCodeでの取り消し線の基本から、知られざる活用法まで、たっぷりご紹介します。
Markdownでの取り消し線：基本と応用
基本的な書き方
Markdownで取り消し線を使う方法は超簡単！
~~取り消したいテキスト~~
例：
~~これは古い情報です~~
新しい情報はこちらです
プレビューでの見え方：
- ~~これは古い情報です~~
- 新しい情報はこちらです
VSCodeでのリアルタイムプレビュー
プレビューを表示する方法：
- 方法1：サイドバイサイド表示
- Ctrl/Cmd + K → V
- エディタの横にプレビューが表示
- 方法2：プレビューのみ表示
- Ctrl/Cmd + Shift + V
- プレビュー画面に切り替え
便利な設定：
// settings.json
{
"markdown.preview.scrollEditorWithPreview": true,
"markdown.preview.scrollPreviewWithEditor": true,
"markdown.preview.markEditorSelection": true
}
スクロールが同期して、編集位置が分かりやすくなります！
実践的な使用例
タスクリストでの活用：
## 今日のTODO
- [x] ~~メール返信~~ ✅ 完了
- [x] ~~会議資料作成~~ ✅ 15:00に提出
- [ ] コードレビュー
- [ ] ドキュメント更新
## 変更履歴
- ~~v1.0の機能~~ → v2.0で削除
- ~~旧API: /api/users~~ → 新API: /api/v2/users
価格表示での活用：
### 期間限定セール！
- ~~通常価格：¥5,000~~
- **特別価格：¥3,000** (40%OFF!)
Markdown拡張機能で更に便利に
Markdown All in One（必須！）
インストール後の便利機能：
<!-- ショートカットで取り消し線を追加 -->
選択してAlt + S → 取り消し線追加
<!-- 自動フォーマット -->
Alt + Shift + F → Markdown整形
<!-- TOCの自動生成 -->
Ctrl/Cmd + Shift + P → "Create Table of Contents"
HTMLでの取り消し線
基本的なHTMLタグ
<!-- 非推奨だが使える -->
<strike>取り消し線</strike>
<!-- 意味的に削除を表す -->
<del>削除されたテキスト</del>
<!-- 見た目だけの取り消し線 -->
<s>在庫切れ</s>
<!-- CSSでカスタマイズ -->
<span style="text-decoration: line-through;">カスタム取り消し線</span>
VSCodeでのEmmet活用
素早くHTMLタグを入力：
<!-- "del"と入力してTab -->
del → <del></del>
<!-- "s"と入力してTab -->
s → <s></s>
<!-- カスタムスニペット登録 -->
strike → <span class="strikethrough">$1</span>
スニペット登録方法：
// snippets/html.json
{
"Strikethrough": {
"prefix": "strike",
"body": [
"<span class=\"strikethrough\">$1</span>"
],
"description": "取り消し線付きspan"
}
}
CSSでの取り消し線カスタマイズ
基本的なCSS
/* シンプルな取り消し線 */
.strikethrough {
text-decoration: line-through;
}
/* 色を変える */
.red-strike {
text-decoration: line-through red;
}
/* 太さを調整 */
.thick-strike {
text-decoration: line-through solid 3px;
}
/* 点線の取り消し線 */
.dotted-strike {
text-decoration: line-through dotted;
}
アニメーション付き取り消し線
/* おしゃれなアニメーション */
.animated-strike {
position: relative;
display: inline-block;
}
.animated-strike::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: #ff0000;
transition: width 0.3s ease;
}
.animated-strike:hover::after,
.animated-strike.completed::after {
width: 100%;
}
タスク完了時のスタイル
/* チェックボックスと連動 */
input[type="checkbox"]:checked + label {
text-decoration: line-through;
opacity: 0.6;
color: #888;
}
/* 完了アニメーション */
.task-completed {
animation: strikethrough 0.5s ease forwards;
}
@keyframes strikethrough {
to {
text-decoration: line-through;
opacity: 0.5;
}
}
コードコメントでの取り消し線活用
TODOコメントの装飾
Better Comments拡張機能を使う：
// ! 重要：これは削除予定
// ? 本当に必要？
// TODO: リファクタリング必要
// * ハイライト表示
// // 取り消し線風のグレーアウト
/**
* @deprecated この関数は非推奨です
* 代わりに newFunction() を使用してください
*/
function oldFunction() {
// 古い実装
}
設定でカスタマイズ：
// settings.json
{
"better-comments.tags": [
{
"tag": "//",
"color": "#808080",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "DONE:",
"color": "#00FF00",
"strikethrough": true
}
]
}
Git差分での取り消し線
GitLensやGit Graph使用時の表示：
- 古いコード（赤色で取り消し線）
+ 新しいコード（緑色で追加）
差分表示の改善設定：
{
"diffEditor.renderSideBySide": true,
"diffEditor.ignoreTrimWhitespace": false,
"diffEditor.renderIndicators": true
}
タスク管理での取り消し線活用
TODO Highlight拡張機能
// TODO: 実装する
// DONE: ~~実装済み~~ ← 自動で取り消し線
// FIXME: バグ修正必要
// HACK: 一時的な対処
// カスタムキーワード
// REVIEW: コードレビュー待ち
// DEPRECATED: 廃止予定
設定：
{
"todohighlight.keywords": [
{
"text": "DONE:",
"color": "#888",
"backgroundColor": "transparent",
"textDecoration": "line-through"
}
]
}
Project TODOでの管理
<!-- .vscode/todos.md -->
# プロジェクトTODO
## 完了 ✅
- ~~ログイン機能実装~~ (2024/01/10)
- ~~データベース設計~~ (2024/01/08)
## 進行中 🚀
- API開発 (50%)
- テスト作成
## 保留 ⏸️
- ~~パフォーマンス改善~~ → v2.0で対応
便利なショートカットと設定
キーボードショートカット
// keybindings.json
[
{
"key": "alt+s",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == markdown",
"args": {
"snippet": "~~${TM_SELECTED_TEXT}~~"
}
},
{
"key": "ctrl+shift+x",
"command": "editor.action.toggleLineComment",
"when": "editorTextFocus"
}
]
マルチカーソルで一括取り消し線
1. Alt + クリックで複数箇所選択
2. ~~を入力
3. すべての箇所に取り消し線追加
実践的な活用シーン
コードレビューでの使用
// レビューコメントで使用
/**
* ~~古い実装方法~~
* 新しい実装方法を使用してください
*
* @deprecated ~~getUserName()~~ → getUsername()
*/
// 削除予定のコード
function oldMethod() { // ~~削除予定：2024年3月~~
// 実装
}
ドキュメント更新
## API仕様書
### エンドポイント
- ~~GET /api/users~~ (廃止)
- GET /api/v2/users (現行)
### パラメータ
| 名前 | 型 | 説明 |
|------|-----|------|
| ~~id~~ | ~~number~~ | ~~廃止~~ |
| uuid | string | ユーザーID |
価格表・料金表
<table>
<tr>
<td>基本プラン</td>
<td><s>¥10,000</s> <strong>¥7,000</strong></td>
</tr>
<tr>
<td>プロプラン</td>
<td><s>¥30,000</s> <strong>¥20,000</strong></td>
</tr>
</table>
トラブルシューティング
問題1：Markdownで取り消し線が表示されない
原因と解決法：
× ~取り消し線~ （チルダ1個）
○ ~~取り消し線~~ （チルダ2個）
× ~~ 取り消し線 ~~ （スペースあり）
○ ~~取り消し線~~ （スペースなし）
問題2：HTMLで取り消し線が効かない
CSSの優先順位を確認：
/* 他のスタイルに上書きされている場合 */
.strikethrough {
text-decoration: line-through !important;
}
/* リセットCSSの影響を受けている場合 */
del, s, strike {
text-decoration: line-through;
}
問題3：プレビューと実際の表示が違う
レンダラーの違いを考慮：
// settings.json
{
"markdown.preview.fontFamily": "system-ui",
"markdown.styles": [
"https://example.com/custom-style.css"
]
}
拡張機能おすすめリスト
取り消し線を活用できる拡張機能
- Markdown All in One
- Markdownの取り消し線をショートカットで
- Better Comments
- コメントに取り消し線を適用
- TODO Highlight
- 完了タスクを自動で取り消し線
- Bracket Pair Colorizer
- 無効化コードを視覚的に表示
- GitLens
- 削除行を取り消し線で表示
まとめ：取り消し線を使いこなして生産性アップ
VSCodeでの取り消し線は、単なる装飾以上の価値があります。
覚えておくべきポイント：
- Markdown：
~~テキスト~~ - HTML：
<del><s>タグ - CSS：
text-decoration: line-through - ショートカット：Alt + S（カスタム設定）
- 拡張機能で更に便利に
活用シーン：
- タスク管理
- ドキュメント更新履歴
- コードレビュー
- 価格表示
- API仕様書
今すぐ試すこと：
- Markdownファイルで
~~テキスト~~を試す - Better Commentsをインストール
- ショートカットを設定
- TODOリストで活用
- CSSでカスタマイズ
取り消し線をマスターして、より分かりやすいドキュメントとコードを書きましょう！
コメント