[[Obsidian]]でタスクを管理するときに使っているチェックボックスの種類と定義について。[[Minerva]](公開部分)では基本的に装飾以外の目的チェックボックスを使っていない。
## 使っているもの
- [ ] タスク (未完了)
- [x] タスク (完了)
- [-] タスク (取りやめ)
- [~] タスク (進行中)
![[2025-09-21-16-32-43.webp|frame]]
*[[Live Preview]]での表示イメージ*
## [[CSS]]の例
> [!caution]
> プレビュー表示は未対応。基本的にローカルの[[Live Preview]]でしか使わないため。
```css
/*
https://gist.github.com/OliverBalfour/b87459fd55cf1f5832a2e0996a6f45a0
Obsidian styled checkboxes snippet (Oliver's version)
See https://github.com/deathau/obsidian-snippets#checkboxes for a demo.
This supports live preview editor mode and reading mode.
Tweaks: search this file for "tweak" to find places for common customizations.
Based on:
* https://github.com/deathau/obsidian-snippets/blob/main/checkbox.css (works with reading mode only)
* https://forum.obsidian.md/t/5-checkbox/35758 (works with live preview editor only)
This snippet combines both of the above snippets and irons out some inconsistencies.
*/
/* Hide a weird tick overlay */
.HyperMD-list-line input[type="checkbox"]:checked::after,
.markdown-preview-view input[type="checkbox"]:checked::after {
display: none !important;
}
/* Hide undesirable borders */
.HyperMD-list-line input[type="checkbox"]:checked {
border: none !important;
}
/* Default checkbox styling */
.HyperMD-list-line input[type="checkbox"],
.markdown-preview-view input[type="checkbox"] {
-webkit-appearance: none;
box-sizing: border-box;
/* (tweak): change text-normal to text-faint below to give unchecked checkboxes a lighter border */
border: 1px solid var(--text-normal);
position: relative;
width: 16px;
height: 16px;
margin: 0;
margin-right: 4px;
margin-bottom: 2px;
transition: background-color 200ms ease-out 0s;
cursor: pointer;
filter: none;
border-radius: 100%;
}
.HyperMD-list-line input[type="checkbox"]:checked::before {
position: absolute;
color: white;
text-align: center;
font-weight: 900;
line-height: 15px;
width: 12px;
left: 2px;
right: 2px;
}
.HyperMD-task-line[data-task],
.markdown-preview-view ul > li[data-task] {
text-decoration: none !important;
}
/* コードブロックは独自の色を尊重 */
.HyperMD-list-line[data-task] span.cm-inline-code {
background-color: var(--code-background) !important;
}
/* チェックした状態(preview) */
.markdown-preview-view input[type="checkbox"]:checked {
border: none;
background-color: var(--interactive-accent);
}
.markdown-preview-view input[type="checkbox"]:hover {
background-color: var(--background-primary-alt);
}
.markdown-preview-view input[type="checkbox"]:checked::before {
position: absolute;
color: white;
text-align: center;
font-weight: 900;
line-height: 15px;
width: 12px;
left: 2px;
right: 2px;
}
:root {
--checklist-done-decoration: line-through;
--checklist-done-color: #93a1a1;
--checklist-done-background-color: #85990033; /* e6f2e6 */
--checklist-pending-background-color: #80808033; /* ececec */
--checklist-progress-background-color: #ca4c1633; /* fecaca */
}
/* 完了 [x] */
.HyperMD-list-line input[data-task="x"]:checked,
.markdown-preview-view li[data-task="x"] > input[type="checkbox"]:checked {
background-color: forestgreen;
}
.HyperMD-list-line input[data-task="x"]:checked::before,
.markdown-preview-view
li[data-task="x"]
> input[type="checkbox"]:checked::before {
content: "";
top: 2px;
bottom: 2px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
}
.HyperMD-task-line[data-task="x"],
.markdown-preview-view ul > li[data-task="x"] {
color: var(--checklist-done-color);
}
.HyperMD-list-line[data-task="x"] .task-list-label,
.HyperMD-list-line[data-task="x"] .task-list-label ~ * {
background-color: var(--checklist-done-background-color);
}
/* 中断タスク [-] */
.HyperMD-list-line input[data-task="-"]:checked,
.markdown-preview-view li[data-task="-"] > input[type="checkbox"]:checked {
background-color: darkgray;
}
.HyperMD-list-line input[data-task="-"]:checked::before,
.markdown-preview-view
li[data-task="-"]
> input[type="checkbox"]:checked::before {
content: "✗";
-webkit-mask-image: none !important;
}
.HyperMD-list-line[data-task="-"],
.markdown-preview-view ul > li[data-task="-"] {
color: var(--checklist-done-color);
text-decoration: var(--checklist-done-decoration);
}
.HyperMD-list-line[data-task="-"] .task-list-label,
.HyperMD-list-line[data-task="-"] .task-list-label ~ * {
background-color: var(--checklist-pending-background-color);
}
/* 進行中タスク [~] */
.HyperMD-list-line input[data-task="~"]:checked,
.markdown-preview-view li[data-task="~"] > input[type="checkbox"]:checked {
background-color: var(--interactive-accent);
}
.HyperMD-list-line input[data-task="~"]:checked::before,
.markdown-preview-view
li[data-task="~"]
> input[type="checkbox"]:checked::before {
content: "⏰︎";
-webkit-mask-image: none !important;
}
.HyperMD-list-line[data-task="~"],
.markdown-preview-view ul > li[data-task="~"] {
color: var(--checklist-done-color);
text-decoration: var(--checklist-done-decoration);
}
.HyperMD-list-line[data-task="~"] .task-list-label,
.HyperMD-list-line[data-task="~"] .task-list-label ~ * {
background-color: var(--checklist-progress-background-color);
}
/* 予定タスク(ペンディング) [-] */
.HyperMD-list-line input[data-task="_"]:checked,
.markdown-preview-view li[data-task="_"] > input[type="checkbox"]:checked {
background-color: var(--checklist-done-color);
}
/* '_' icon */
.HyperMD-list-line input[data-task="_"]:checked::before,
.markdown-preview-view
li[data-task="_"]
> input[type="checkbox"]:checked::before {
content: "";
top: 2px;
bottom: 2px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%201.5a.75.75%200%200%201%20.75.75v5.94l1.97-1.97a.75.75%200%200%201%201.06%201.06l-3.25%203.25a.75.75%200%200%201-1.06%200L2.22%207.28a.75.75%200%201%201%201.06-1.06l1.97%201.97V2.25A.75.75%200%200%201%206%201.5z%22%20fill%3D%22currentColor%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.HyperMD-task-line[data-task="_"],
.markdown-preview-view ul > li[data-task="_"] {
color: var(--checklist-done-color);
}
```