一歩ずつ学ぶ

最終更新日:

罫線を使って、テキストベースでツリーリストを作る

ロジックツリーのようなツリーリスト

ロジックツリーのようなツリーリストで情報を表示したい時があります。

かといって、図形描画ソフトでツリーを描く程でもない時に、 罫線を使ってテキストベースでツリーリストを作ることができます。

自分用にメモしていますけれど、必要な方はご自由にコピペしてください。 「テキスト用」と「HTML用」の2種類あります。

基本形

テキスト用

見出し
┣ 1
┣ 2
┗ 3

HTML用

<pre>タグで囲って、見出しを太字にしました。

<pre>
<b>見出し</b>
┣ 1
┣ 2
┗ 3
</pre>

基本形 + α

プラスアルファとして各項目の後ろにさらに項目を付け足しました。

テキスト用

見出し
┣ 1 ━ A1
┣ 2 ━ A2
┗ 3 ━ A3

HTML用

<pre>タグで囲って、見出しを太字にしました。

<pre>
<b>見出し</b>
┣ 1 ━ A1
┣ 2 ━ A2
┗ 3 ━ A3
</pre>

使える記号

┣
┗
━
┃
┏
╋
┓
┛
┳
┫
┻

↑ PAGE TOP