04 高度なマークダウン

基礎を終えたら、次はレベルアップ！表、数式、コールアウト、脚注にダイアグラムまで。あなたの文章をもっとプロフェッショナルで豊かにしてみましょうか？😎 実は全部覚えなくても大丈夫！チートシートに全部入っているから。探してクリックするだけですぐ入力されるので、暗記しようとしなくてOKです。

← 基礎固め: 03 マークダウンの基礎 · ホームへ: ObsiKO 101

きれいに整理できる表（テーブル）📊

• 記号をいくつか書くだけであっという間に完成！: | 見出し | 見出し | / | --- | --- | / | 値 | 値 |
• ObsiKOではパッと表が美しく表示されて、レンダリングされた見た目のまま編集できます。セルをクリックするとソースに戻らず、そのセルの上に小さな編集ボックスが現れます — Enter（下のセルへ）・Tab / Shift+Tab（隣のセルへ、最後のセルでは新しい行を自動追加）・Esc（キャンセル）・外側クリック（保存）。マークダウン原文を直接編集したいときは Alt+クリック でソース編集へ！
• 表の上にマウスを乗せると、編集用のハンドルがひょこっと現れます。
• 表の右端の縦の+を押すと列が、下側の横の+を押すと行が追加されます。表のサイズにぴったり寄り添っているので直感的です！
• 各セル（見出し・先頭セル）に表示される✕で、その列・行を削除できます。
• セルの中でTabを押すと次のセルへスイッと移動、Shift+Tabで前のセルへ。一番最後のセルでTabを押すと新しい行が自動でできます！
• 見出し行に表示される小さなボタンで、その列の配置（左・中央・右）を変えたり、この列で並べ替え（昇順↔降順、数値も賢く判定）したりできます。
• 表の左・上の端にあるハンドルをつかんでドラッグすれば、行・列の順序を並べ替えられます！（タッチ端末でもハンドルをドラッグすればOK。）
• 表を右クリック（モバイルは長押し）すると、表に関するすべての操作が一つのメニューにまとまっています。上/下・左/右への挿入、整列、合計行・平均行の追加（数値列を自動計算）、ソース整列（マークダウン原文を列幅に合わせて整える）、CSVとしてコピーまで！

エクセル・CSVを一発で表に📋

• ExcelやGoogleスプレッドシートで表の範囲をコピーして空行にそのまま貼り付けると、ObsiKOが自動でマークダウン表に変換してくれます。CSVのテキストも同じです！
• 逆に表をCSVとしてコピー（右クリックメニュー）すれば、他のアプリへきれいに持ち出せます。

▲ 表にマウスを乗せると、右側の縦の+（列追加）・下側の横の+（行追加）が表にぴったり寄り添って現れます。

目立たせて強調！コールアウト💡

• > [!note] のように書くと、きれいな強調ボックスができます。
• シーンに合わせていろいろなスタイルを選んでみましょう！（note・info、tip・hint、success・check、warning・caution、danger・error、quote、question・help、exampleなど、色ごとにグループ分けされています）
• ボックスの中にタイトルと本文を一緒に入れて、大事な内容をぐっと目立たせられます。

自由な強調ボックス、カスタムコンテナ📦

• コールアウトの種類にない自分だけのラベルでボックスを作りたいなら、カスタムコンテナを使ってみましょう！
• :::名前 で開き、名前なしで::: だけを書いた行で閉じます。 :::まとめ ここに内容を書くとボックスとしてレンダリングされます。**太字**・リストもそのまま！ :::
• 画面上では::: のマーカーが消えて、名前が小さなヘッダーラベルとして付いたくっきりしたボックスとして表示されます。カーソルをその行に置くと、また元のテキストに戻って編集できます。
• 名前は自由です（まとめ・注意・コラム…）。PDF・HTMLで書き出すとmd-container-名前というクラスになるので、お好みで名前ごとに色を変えて装飾することもできます。→ 19 エクスポート
• 💡 閉じるときは名前なしで::: だけ！（:::終わり のように名前を付けると新しいボックスを開くものと認識されて閉じません。）

▲ コールアウト（アイコン内蔵）とカスタムコンテナ（自由ラベルのボックス）— 大事な内容をぐっと目立たせる。

詳しい説明は下へ、脚注📝

• 本文に[^1]と付けておき、文書の一番下に[^1]: 親切な補足説明と書いてください。

複雑な数式もサクサク（KaTeX）🧮

• 文中に入れるときは：$E = mc^2$
• 中央揃えで大きく入れるときは：$$ 数式の内容 $$
• 賢いObsiKOは数式が必要なときだけライブラリを読み込むので、動作も軽快です！

プログラマーの香り、コードブロック💻

• 上下をバッククォート3つで囲めば、かっこいいコードブロックの完成！
• 上の行に言語名（例：python）を書けば、構文ハイライトはもちろん、ワンクリックでコピーできるコピーボタンまでおまけで付いてきます。

長ければ折りたたむ、見出しの折りたたみ🔽

• 見出し（#）にマウスを乗せると、見出しのすぐ横に▾矢印が現れます（Obsidianみたいに！）。押すとその見出しの下の内容が、次の同じレベルの見出しの手前までスッと畳まれます。畳んだ見出しには▸矢印がくっきり残るので、どこが畳まれているか一目瞭然（「…」を押すと再び展開）。
• ショートカットでもOK — Macは⌘⌥[（畳む）/⌘⌥]（開く）、WindowsはCtrl+Shift+[/Ctrl+Shift+]。長い文書をセクションごとに整理しながら読むのにぴったり！
• モバイルでは見出しの横に矢印がうっすら常時表示されるので、トンと押して畳めます。

考えを描くダイアグラム（Mermaid）🧜‍♀️

• コードフェンス（mermaid）の中にコードを書くと、フローチャートやシーケンス図が魔法のように描かれます。
• ObsiKOのテーマにぴったり合う配色でレンダリングされ、設定で3種類のスタイル（classic/neo/handDrawn）からお好みのものに変更することもできます！

• チートシートの「Mermaidダイアグラム」欄から、フローチャート・シーケンス・クラス・状態・ガント・パイ・マインドマップはもちろん、ER（実体関連）・タイムラインまでワンタッチで挿入できます。

• レンダリングされたダイアグラムの ✎ ボタンでその場で編集できます — pieはラベル・値、xychartはX軸項目・系列値のフォームが表示されます。フローチャート・シーケンス・ガント・タイムライン・ジャーニー・象限・状態図は、構造はそのままに文字だけを抜き出したリストフォームが表示され、ノードラベル・メッセージ・タスク名・日付・座標を文法を気にせず直せます。＋行を追加で新しいタスク・イベント・点・接続線を追加でき、タスクやイベントなどの項目行は✕で丸ごと削除もできます（タイトル・セクションなどの構造行は保護）。「テキストで編集」トグルもあります。マインドマップはさらに一歩 — 枝のテキスト編集に加えて ＋（下に枝）・⤷（子の枝）の追加と ✕ 削除もできます。

▲ mermaid の中に書けば、フローチャート・シーケンス図がObsiKOのテーマカラーでパッと描かれる！

数字を絵に、チャート📈

• Mermaidが関係・流れの図解に強いなら、chart ブロックは数値データをすっきりしたグラフに描いてくれます（外部ライブラリなしで軽量に！）。

• ブロックの中にJSONを書くだけで完成です： chart { "type": "bar", "title": "月別売上", "labels": ["1月","2月","3月"], "series": [{"name":"売上","data":[10,20,15]}] }

• 種類はなんと20種類以上！ シーンにぴったりのグラフを選んで使いましょう（"type" の値）：

• 比較：棒（bar）・横棒（hbar）・積み上げ棒（stacked）・ロリポップ／ランキング（lollipop）
• 推移：折れ線（line）・エリア（area）・スロープ／前後比較（slope）・増減累積のウォーターフォール（waterfall）
• 割合・構成：パイ（pie）・ドーナツ（donut）・ツリーマップ（treemap）・ファネル／コンバージョン（funnel）・ゲージ／進捗リング（gauge）
• 分布・関係：散布図（scatter）・バブル（bubble）・レーダー／六角ステータス（radar）・箱ひげ図（boxplot）・ダンベル（dumbbell）
• 特殊：ヒートマップ／行列（matrix）・草活動カレンダー（calendar）・ベン図（venn）・フィッシュボーン（特性要因図、fishbone）
• ベン図：{"type":"venn","sets":[{"name":"A","items":["x","y"]},{"name":"B","items":["y","z"]}]} — 共通項目から積集合を自動で計算してくれます（2つでも3つでもOK）。
• フィッシュボーン：{"type":"fishbone","problem":"問題","categories":[{"name":"人","causes":["原因1"]}]}
• パイ・ドーナツは円が大きくなり、凡例は右側に縦並びになりました。スライス間の隙間は幅が一定で角が丸くなっています（パイはスライスが中心で交わるため、どんな隙間もくさび形になってバラバラに見えるので隙間を設けていません）。
• 目盛線がはっきり見えるようになりました。 以前は目盛線とレーダーチャートのクモの巣がほとんど見えず、値を読み取れませんでした。縦の余白も詰めたので棒が平たく見えません。
• 明るいテーマと暗いテーマで配色が別々です。明るいテーマはクリーム色の背景に合う明るく落ち着いたトーン、暗いテーマは少し鮮やかに。--chart-1〜--chart-6 のCSS変数で自由に変えられます。
• 色はObsiKOのテーマに合わせて決まり、チートシートの「チャート・ダイアグラム」欄から基本形（棒・折れ線・エリア・パイ・ドーナツ・バブル）から専門的なものまで種類ごとにワンタッチで挿入できます。AIエージェントに「このデータでチャート（あるいはレーダー／ベン図／フィッシュボーンなど）を描いて」とお願いすることもできます（デスクトップ）。
• レンダリングされたチャートの ✎ ボタンを押すと、ソースを開かずに小さな編集ポップアップが現れて、タイトル・項目・数値をその場で直せます（行の追加/削除、Enter=保存、Esc=キャンセル）。ベン図（セット・項目）、フィッシュボーン（問題・原因）、散布図/バブル（点の座標）、草カレンダー（日付・値）、ゲージ、ヒートマップ（2次元グリッド）、箱ひげ図まで、すべてタイプに合った入力フォームが表示されます。「JSONで編集」トグルで原文編集もできます。
• チャートもMermaidも、PDF・HTMLへ書き出すときにそのまま画像として収まります！ → 19 エクスポート

▲ chart ブロック一つで、棒グラフ・レーダー・草カレンダー・ベン図まで20種類以上！

書きながらさらさら、インラインドローイング ✏️

書いている途中でふと手描きの絵や手書き文字を入れたくなること、ありますよね？インラインドローイングはBearのように今カーソルがあるその場所にお絵かきパッドをすっと差し込みます。別ウィンドウではなく、本文が下にずれて描くスペースが生まれるんです。 - 開き方は4つ: - スラッシュメニュー: 空行で /手描き（または /スケッチ）を選ぶだけ — マウスもショートカットも不要な最短ルート。 - モバイル: 下の書式バー（✏️フローティングボタン）を開いて鉛筆アイコンをトン！ - コマンドパレット（⌘P / Ctrl+P）で「ドローイング挿入」を検索 — 書式バーのないデスクトップではこれが一番便利。 - ショートカット ⌘⌥Y（Mac）・Ctrl+Alt+Y（Windows・Linux） — カーソル位置にすぐ開きます。 - 広々としたスペース: パッドは本文の行幅に縛られず、エディタの90%ほどまで広がります。パッドの下端（中央のハンドル）をドラッグすれば縦にもっと大きくでき、サイズは覚えておきます。 - 細いツールバーは絵の外に: 左側にとても細い縦ツールバーが付きます（描くスペースを覆いません）。ペン・モード・レイヤーはグループボタンに畳まれていて、押すとポップオーバーでぱっと開きます。 - ペンはマインドマップと同じフルセット 🎨: ソフトペン・ラフペン・ライナー・平筆・筆・サインペン・鉛筆・クレヨン・エアブラシ・蛍光ペン・ブレンドブラシ、そして消しゴムまで — パレット・太さ・不透明度の調整もそのまま。ペンの詳細は 11 マインドマップ のフリードローイングを参照。 - Apple Pencil・Sペン・ワコムの筆圧対応 ✍️: iPadのApple Pencil、AndroidのSペン、デスクトップのペンタブレットの筆圧がそのまま反映されます。手書きの筆記も自然に！ - グリッド・マグネットはオフ: ノートの中のスケッチなので、自由に描けるようグリッドとスナップは既定でオフです。 - キーボードは出ません: 描いている間は仮想キーボードが上がってこないので、画面を広く使えます。 - 保存は自動でスッ: パッドの外をクリック（タップ) するか、Esc・右上の✕を押すと、絵が assets/ フォルダにSVG画像として保存され、その場所に `` が入ります（保存ボタンはありません）。筆の質感・筆圧・にじみまで描いたままの姿で残り、Obsidian・GitHubなど他のアプリでもそのまま絵として表示されます。 - いつでも描き直し ✎: 入れたドローイングをダブルクリック（モバイルはダブルタップ）すると、元の絵に重なってその場に編集パッドが開き直します — 描き足したり直したりして保存すれば、その場で更新（新しいファイルはできません）。ペン（Apple Pencil・Sペン）ならワンタップで開きます！マウスを乗せて（モバイルはワンタップ）出てくる✎ボタンからでもOK。 - スケッチをAIが完成画に 🎨✨: ドローイングパッド（または保存済みのドローイング画像）を右クリック → 「スケッチからAI作画…」 — モデル（ナノバナナ・gpt-image）・サイズ・品質を選んで要望を書けば、スケッチの構図を活かした完成画がドローイングのすぐ下の本文に入ってきます（チャットAPIキーが必要）。詳しくは 11 マインドマップ の「スケッチ → AI作画」へ。 - 💡 画像の上のボタンは普段は隠れています: 本文のすべての画像は、マウスを乗せると（モバイルはワンタップ）altバッジ・✎・サイズ変更ハンドルが現れます。バッジで画面がごちゃつかないよう、必要なときだけ表示します。

▲ 書いている途中でカーソル位置にすっと ― 左の細いツールバーでさらさら描いて、保存すれば画像に！

開いたり畳んだり、折りたたみブロック（トグルボックス）🔽

• 長くて普段は隠しておきたい内容ってありますよね？<details> と<summary> タグで折りたためるボックスを作ってみましょう！
• こんな感じです：

• ObsiKOは折りたたみブロックのタグをエディタ上でそのまま開閉できるきれいなボックスとして表示します。ボックスをタップするとスッと開き、ボックスの中のマークダウンもちゃんとレンダリングされます！

閉じタグは自動で、スマートタグ✨

• <details> だけでなく<mark>・<kbd>、そしてAI文書用の<thinking>・<constraints>・<examples> のようなタグを使う機会、多いですよね？ObsiKOが閉じタグを自動で入力してくれます！
• 開始タグを<thinking> のように> で閉じた瞬間、すぐに</thinking> が続けて入力され、カーソルはその間（<thinking>│</thinking>）にすっと収まります。（<br>・<img> のように閉じる必要のないタグは賢くスキップします。）
• < を打つだけでよく使うタグの一覧がオートコンプリートとして表示されます — HTMLタグから、役割（<role>）・指示（<instructions>）・例示（<examples>）・推論（<reasoning>）のようなAIプロンプト・ガイドライン用タグまで200個以上用意されていて、一度使ったタグは覚えておいて次回もまた提案してくれます。
• こうして付けた構造タグはアウトライン（構造エクスプローラー）にもツリーとして反映されるので、ナビゲーションがぐっと楽になります。→ 09 バックリンクとアウトライン ・AI文書での活用は → 16-4 LLMウィキを作る

他のノートを丸ごと埋め込む、ノート埋め込み🪆

• ![[ノート名]] のようにウィキリンクの前に! を付けるだけで、そのノートの内容がこの文書の中にボックスとして展開されます！よく使う案内文や要約を複数のノートで使い回すときに本当に便利です。
• 特定の区域だけ取り込みたいなら、![[ノート名#見出し]] のように見出しをピンポイントで指定してください。そのセクションだけがすっと差し込まれます。
• ボックスのタイトルをクリックすると、元のノートへスッと移動します。（画像埋め込み`` とは自動で区別されます。）
• 埋め込めるのはノート（.md）📄・マインドマップ（.canvas）🗺・データ表（.base）📊の3種類です。![[タスク.base]] のように書けば、その表の内容がボックスとして展開されます。→ 12 Bases（データ表）
• 💡 ノート埋め込みはリアルタイム反映ではありません。 元のノートを直しても、すでに開いている文書のボックスはそのままで、その文書を開き直すと新しい内容に更新されます。（一方 .base・.canvas の埋め込みは、元を保存・変更した時点でスナップショットが自動で描き直されます。）

YouTube・音楽もノートの中でそのまま再生、メディア埋め込み🎬🎵

• YouTube・Vimeoの動画やSoundCloud・Spotify・Apple Music・Mixcloudの音楽のアドレスをノートに貼り付けるだけで、その場に再生プレーヤーがすっと入ります。（1行にアドレスだけがある場合や`` の形なら自動で認識します。）
• インターネット上の動画・音楽ファイルのアドレス（.mp4・.webm・.mp3・.m4a など）も同じようにプレーヤーとして表示されます。
• プレーヤー上部のタイトル行にある↗ボタン（または右クリック→「参照ビューで開く」）を押すと、右側の参照ビューパネルに大きく表示して見ながら文章を書けます。→ 07 検索とナビゲーション
• 動画はタイトル行の📷ボタンで今の画面をキャプチャしてノートに画像として入れることもできます！（YouTubeのような埋め込みはセキュリティの都合でキャプチャできず、動画ファイル自体の場合に使えます。）
• アドレスを直したいときはプレーヤーのタイトル行をクリックしてください。元のアドレス（ソース）に戻って編集できます。（カーソルをその行に置けば、いつでも元のテキストが表示されます。）

💡 ボルトの中に入れてある自分の音楽ファイル（`` のような相対パス）は、そのままBGM表記として使われます — インターネットアドレス（http）だけがプレーヤーに変わるので心配いりません。またこの埋め込みはアプリで見るときは再生され、HTML・PDFに書き出すとリンクとして残ります。

文書内に目次を自動生成、インライン目次🧭

• 本文のどこでもいいので1行で[toc] と書いてみてください。その場所に見出しから作られた目次が自動でパッと現れます。項目をクリックすると、その見出しへ画面がスッと移動します。
• 見出しを追加したり直したりすると、目次も自動で追従して更新されます。（右パネルのアウトラインとは別に、文書本文に埋め込んでおく目次です。→ 09 バックリンクとアウトライン）

ちょっと上に、ちょっと下に — 上付き・下付き文字⁰¹

• 上付き文字：E=mc^2^ → E=mc²、下付き文字：H~2~O → H₂Oのように^...^ と~...~ でピンポイントに！
• （数式が複雑ならKaTeX $...$ を使うほうがすっきりします。）

自分だけが見るメモ、コメント%% %%

• %%これは秘密のメモ%% のように%% で囲むと書き出しでは常に隠れ、本文にはデフォルトで小さな吹き出しアイコンだけが残ります。アイコンをクリックすれば、ソース表示なしでその場のポップアップから内容の確認・編集・削除まで完了！下書きメモや「ここは後で直す」の印にぴったりです。
• 表示方法は設定 ▸ 「コメント(%%)表示」で吹き出しアイコン(推奨) / 非表示 / 常に薄く表示から選べます。「薄く表示」はコメントの中身だけを薄く見せ、%% 記号は隠すので本文が散らかりません。その行を編集していてもコメントはそっと隠れたまま（カーソルは自動で飛び越えます）。原文を見たいときは、アイコンをクリック · ソース表示（⌘⇧O） · 「常に薄く表示」設定のどれでもどうぞ。

文書の身分証、フロントマター（YAML）🪪

• 文書の一番上に--- と--- で囲んだ空間を作り、title:、tags: のような情報（メタデータ）を書いてください。必ず文書の一番最初の行から始めないとフロントマターとして認識されないので注意してください。
• 自分で入力する必要もありません！本文で右クリック→＋ 挿入 ▸ フロントマター挿入を押すと、title（現在のタイトル）・type（note）・created（今日の日付）が入力済みのボックスがパッと現れます。（＋ 挿入のまとまりは文字を選択していないときにだけ出てきて、すでにフロントマターがある文書では「フロントマター挿入」の項目そのものが表示されません ― 二重にできないようになっています。）
• ボックスの下にある「プロパティを追加」ボタンを押すとキー入力欄が出てきて、これまで使ったキーをオートコンプリートで提案してくれます（矢印↑↓で選んでもOK）。アプリを韓国語で使うと 상태・마감일・태그 のような韓国語プロパティも英語プロパティと一緒に出てきます。そしてキーに合わせて値の入力欄が賢く変わります：
• status（상태）・priority（우선순위）のように決まった値があるキーはドロップダウンから選びます。
• related（관련）・source（출처）のような関係キーは値欄でノートが検索でき、ウィキリンクとしてピンポイントで入ります！（複数もOK）
• tags（태그）のようなリストキーはチップとして複数入力でき、すでにボルトにあるタグを提案してもらえます。
• due（마감일）・created（작성일）のような日付キーはカレンダーで選び、更新日類は今日の日付があらかじめ入ります。
• 詳しいプロパティ一覧・入力方法は 04-1 フロントマタープロパティ へ！
• フロントマターのボックス右上のコピーボタンで、丸ごとコピーすることもできます（他のブロックと同じように！）。
• マークダウン（YAML）ではなくHTML形式のメタデータが必要な場合は？チートシートのHTML欄にある「フロントマター（HTML meta）」をクリックすると、<meta name="title" content="..."> のひとまとまりがすっと入ります — エンジンやプラットフォームを選ばない汎用的な方式です。
• このウィキの文書の一番上を開いてみると、いい例が見つかります！

ハッシュタグでまとめる🏷️

• 文書のどこにでも#タグ を書いておけば、あとでさっと選び出して探せます。→ 詳しくは：08 ウィキリンクとタグ

目が離せないプレゼンテーション🎬

• フロントマターにmarp: trueを書いて、--- でスライドをどんどん区切るだけ？かっこいい発表用スライドの完成！→ 発表の準備をしに行く：18 プレゼンテーションを作る

← 前へ: マークダウンの基礎 · 最初へ · 次へ: 04-1 フロントマタープロパティ →