【超便利】ブログで使えるツリー表示の作り方!罫線文字で見やすい階層構造を作ろう
ツリー表示って何?
こういうやつ↓
1の手順
└─2の手順
└─3の手順
└─4の手順
手順や階層構造を表すときに、めちゃくちゃ見やすくなるんだよね。
使う罫線文字はこれ!
実は特殊な文字を組み合わせて作ってるんだ。
└ (左下角)
├ (左T字)
─ (横線)
│ (縦線)
これらを「罫線素片」って呼ぶよ。
基本の作り方
パターン1:シンプルな枝分かれ
親項目
├─子項目1
├─子項目2
└─子項目3
最後の項目だけ「└」を使うのがポイント!
パターン2:深い階層
大項目
└─中項目
├─小項目1
└─小項目2
全角スペースで位置を調整するとキレイに揃うよ。
パターン3:複雑な構造
プロジェクト
├─フェーズ1
│ ├─タスクA
│ └─タスクB
└─フェーズ2
├─タスクC
└─タスクD
継続する枝には「│」を使おう!
罫線文字の入力方法
Windowsの場合
「けいせん」で変換すると出てくる
IMEパッドの文字一覧から選ぶ
スマホの場合
フリック入力で「けいせん」と打って変換
記号一覧から探す
こんな場面で使える!
✅ 手順の説明
✅ ファイル構造の説明
✅ 組織図
✅ プログラムのフローチャート
✅ 思考の整理
注意点
⚠️ フォントによって見え方が変わる
等幅フォントじゃないと崩れることがあるから、プレビューで確認しよう。
⚠️ 全角スペースを使う
半角スペースだと位置がズレやすいよ。
⚠️ スマホ表示も確認
PCで見るのとスマホで見るのでズレることがあるから、両方チェック!
まとめ
ツリー表示を使えば、複雑な内容も一目で分かりやすくなる!ブログの質がグッと上がるから、ぜひ使ってみてね!
※WordPressでも記事を書いてます。良かったらぜひ見に来てください。
https://mk008899.com/
https://mk008899.com/