Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TETSURO1999

PlantUMLのテーブルを極める(2)～SALTを使う

Last updated at Posted at 2025-09-28

はじめに

筆者は Qiita で記事を書くときにテーブルをよく使いますが，以下のような問題があっていつも表記に悩んでいます。

  • 記事の表示領域幅は実質 700 ピクセルくらいしか無い　※要は狭い
  • テーブルのセル内のテキストは自動的に折り返されてしまうこと
  • テーブルタグの NOWRAP オプションが使えないこと　※CSS の同要素も使えない

HTML タグを用いたテーブル表記（参考）

いつも困ってる例を示しましょう。「表１～」というキャプション（タイトル）があり，先頭行でセルの結合を行っていることから HTML タグを用いています。

ただ，この程度の分量なら折り返さずに全体を表示して欲しいと思うでしょう。正直，市川崑作品のテロップじゃないんだから見づらいですよね？

表１　各データサイトの将棋棋士一覧（相違部分のみ）
棋士成績DB 棋士別成績一覧 Wikipedia
清野静男 きよのしずお 清野静男 せいのしずお 清野静男 せいのしずお
桐山清澄 きりやまきよずみ 桐山清澄 きりやまきよすみ 桐山清澄 きりやまきよずみ
武市三郎 たけいちちさぶろう 武市三郎 たけちさぶろう 武市三郎 たけいちさぶろう
達正光 たちまさみつ 達正光 たつまさみつ 達正光 たちまさみつ
髙見泰地 たかみたいち 髙見泰地 たかみたいち 高見泰地 たかみたいち
藤川義夫 ふじかわわよしお 藤川義夫 ふじかわよしお 藤川義夫 ふじかわよしお

セルの内容を折り返さない方法（参考）

ということで，参考までに筆者が編み出した手法1を示します。セルの内容が折り返されないで，テーブル全体が横スクロールします。

表１　各データサイトの将棋棋士一覧（相違部分のみ）
棋士成績DB 棋士別成績一覧 Wikipedia
$\!\textsf{清野静男}$ $\!\textsf{きよのしずお}$ $\!\textsf{清野静男}$ $\!\textsf{せいのしずお}$ $\!\textsf{清野静男}$ $\!\textsf{せいのしずお}$
$\!\textsf{桐山清澄}$ $\!\textsf{きりやまきよずみ}$ $\!\textsf{桐山清澄}$ $\!\textsf{きりやまきよすみ}$ $\!\textsf{桐山清澄}$ $\!\textsf{きりやまきよずみ}$
$\!\textsf{武市三郎}$ $\!\textsf{たけいちちさぶろう}$ $\!\textsf{武市三郎}$ $\!\textsf{たけちさぶろう}$ $\!\textsf{武市三郎}$ $\!\textsf{たけいちさぶろう}$
$\!\textsf{達正光}$ $\!\textsf{たちまさみつ}$ $\!\textsf{達正光}$ $\!\textsf{たつまさみつ}$ $\!\textsf{達正光}$ $\!\textsf{たちまさみつ}$
$\!\textsf{髙見泰地}$ $\!\textsf{たかみたいち}$ $\!\textsf{髙見泰地}$ $\!\textsf{たかみたいち}$ $\!\textsf{高見泰地}$ $\!\textsf{たかみたいち}$
$\!\textsf{藤川義夫}$ $\!\textsf{ふじかわわよしお}$ $\!\textsf{藤川義夫}$ $\!\textsf{ふじかわよしお}$ $\!\textsf{藤川義夫}$ $\!\textsf{ふじかわよしお}$

具体的には MathJax という技術を使っています。セルの中の折り返して欲しくない要素をインライン数式の記号 $...$ で囲むと，それは折り返し不能な要素として取り扱われます。なお，細かいテクニックとしては，セルの中に数式要素を埋め込むと余白が追加されてしまうので空白を削るための \! を入れています。あとは sans serif 系のフォントとして \textsf と指定しています。この指定が無いと他のフォントと違い過ぎて違和感マシマシになるのです。

<table>
<caption>表１　各データサイトの将棋棋士一覧（相違部分のみ）</caption>
<thead>
<tr><th colspan=2>棋士成績DB</th><th colspan=2>棋士別成績一覧</th><th colspan=2>Wikipedia</th></tr>
</thead>
<tbody>
<tr><td>$\!\textsf{清野静男}$</td><td>$\!\textsf{きよのしずお}$</td><td>$\!\textsf{清野静男}$</td><td>$\!\textsf{せいのしずお}$</td><td>$\!\textsf{清野静男}$</td><td>$\!\textsf{せいのしずお}$</td></tr>
<tr><td>$\!\textsf{桐山清澄}$</td><td>$\!\textsf{きりやまきよずみ}$</td><td>$\!\textsf{桐山清澄}$</td><td>$\!\textsf{きりやまきよすみ}$</td><td>$\!\textsf{桐山清澄}$</td><td>$\!\textsf{きりやまきよずみ}$</td></tr>
<tr><td>$\!\textsf{武市三郎}$</td><td>$\!\textsf{たけいちちさぶろう}$</td><td>$\!\textsf{武市三郎}$</td><td>$\!\textsf{たけちさぶろう}$</td><td>$\!\textsf{武市三郎}$</td><td>$\!\textsf{たけいちさぶろう}$</td></tr>
<tr><td>$\!\textsf{達正光}$</td><td>$\!\textsf{たちまさみつ}$</td><td>$\!\textsf{達正光}$</td><td>$\!\textsf{たつまさみつ}$</td><td>$\!\textsf{達正光}$</td><td>$\!\textsf{たちまさみつ}$</td></tr>
<tr><td>$\!\textsf{髙見泰地}$</td><td>$\!\textsf{たかみたいち}$</td><td>$\!\textsf{髙見泰地}$</td><td>$\!\textsf{たかみたいち}$</td><td>$\!\textsf{高見泰地}$</td><td>$\!\textsf{たかみたいち}$</td></tr>
<tr><td>$\!\textsf{藤川義夫}$</td><td>$\!\textsf{ふじかわわよしお}$</td><td>$\!\textsf{藤川義夫}$</td><td>$\!\textsf{ふじかわよしお}$</td><td>$\!\textsf{藤川義夫}$</td><td>$\!\textsf{ふじかわよしお}$</td></tr>
</tbody>
</table>

一部の列だけ折り返さない方法（参考）

下記のように短いキーワード（定数や値）とそれを説明する長めの文（説明）からなる表の場合，できれば定数と値の列は折り返したくないものです。

表１　COFF再配置の型インジケータ（intel386プロセッサの場合）
定数 値 説明
IMAGE_REL_I386_ABSOLUTE 0x0000 再配置は無視されます。
IMAGE_REL_I386_DIR16 0x0001 サポートされていません。
IMAGE_REL_I386_REL16 0x0002 サポートされていません。
IMAGE_REL_I386_DIR32 0x0006 ターゲットの32ビットVA。
IMAGE_REL_I386_DIR32NB 0x0007 ターゲットの32ビットRVA。
IMAGE_REL_I386_SEG12 0x0009 サポートされていません。
IMAGE_REL_I386_SECTION 0x000A ターゲットを含むセクションの16ビットセクションインデックス。これは、デバッグ情報をサポートするために使用されます。
IMAGE_REL_I386_SECREL 0x000B セクションの先頭からのターゲットの32ビットオフセット。これは、デバッグ情報と静的スレッドローカルストレージをサポートするために使用されます。
IMAGE_REL_I386_TOKEN 0x000C CLRトークン。
IMAGE_REL_I386_SECREL7 0x000D ターゲットを含むセクションのベースからの7ビットのオフセット。
IMAGE_REL_I386_REL32 0x0014 ターゲットに対する32ビットの相対変位。これにより、x86相対分岐と呼び出し命令がサポートされます。

このような場合，定数と値の列のみ MathJax を用いれば良いのです。

表１　COFF再配置の型インジケータ（intel386プロセッサの場合）
定数 値 説明
$\!\small\textsf{IMAGE_REL_I386_ABSOLUTE}$ $\small\textsf{0x0000}$ 再配置は無視されます。
$\!\small\textsf{IMAGE_REL_I386_DIR16}$ $\small\textsf{0x0001}$ サポートされていません。
$\!\small\textsf{IMAGE_REL_I386_REL16}$ $\small\textsf{0x0002}$ サポートされていません。
$\!\small\textsf{IMAGE_REL_I386_DIR32}$ $\small\textsf{0x0006}$ ターゲットの32ビットVA。
$\!\small\textsf{IMAGE_REL_I386_DIR32NB}$ $\small\textsf{0x0007}$ ターゲットの32ビットRVA。
$\!\small\textsf{IMAGE_REL_I386_SEG12}$ $\small\textsf{0x0009}$ サポートされていません。
$\!\small\textsf{IMAGE_REL_I386_SECTION}$ $\small\textsf{0x000A}$ ターゲットを含むセクションの16ビットセクションインデックス。これは、デバッグ情報をサポートするために使用されます。
$\!\small\textsf{IMAGE_REL_I386_SECREL}$ $\small\textsf{0x000B}$ セクションの先頭からのターゲットの32ビットオフセット。これは、デバッグ情報と静的スレッドローカルストレージをサポートするために使用されます。
$\!\small\textsf{IMAGE_REL_I386_TOKEN}$ $\small\textsf{0x000C}$ CLRトークン。
$\!\small\textsf{IMAGE_REL_I386_SECREL7}$ $\small\textsf{0x000D}$ ターゲットを含むセクションのベースからの7ビットのオフセット。
$\!\small\textsf{IMAGE_REL_I386_REL32}$ $\small\textsf{0x0014}$ ターゲットに対する32ビットの相対変位。これにより、x86相対分岐と呼び出し命令がサポートされます。

折り返しもスクロールもさせないで全体表示させる方法

そもそもの話として，上記の表の分量であれば折り返しもさせず，スクロールもさせずに全体を表示して欲しいところです。ということで筆者の過去記事では PlantUML によるテーブル表記2を紹介したこともあります。ただ，PlantUML のテーブル表記ではセルの結合ができません。

そこで今回紹介するのは同じ PlantUML のサブプロジェクトである SALT を使ったテーブル表現です。まずは一例を示しましょう。

Markdown のテーブル表記と似ており，縦棒 | を区切り文字としてセルを表現します。なお，Markdown と異なり，両端の縦棒 | は不要です。アスタリスク * は左のセルと結合するという意味です。他にも一部の HTML タグを使うことができます。この例では太字表現のために <b>...</b> タグを使用しています。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
title {
  fontStyle normal
  fontSize 17
}
</style>
title 表１　各データサイトの将棋棋士一覧（相違部分のみ）
{#
<b>棋士成績DB</b>|*|<b>棋士別成績一覧</b>|*|<b>Wikipedia</b>|*
清野静男|きよのしずお|清野静男|せいのしずお|清野静男|せいのしずお
桐山清澄|きりやまきよずみ|桐山清澄|きりやまきよすみ|桐山清澄|きりやまきよずみ
武市三郎|たけいちちさぶろう|武市三郎|たけちさぶろう|武市三郎|たけいちさぶろう
達正光|たちまさみつ|達正光|たつまさみつ|達正光|たちまさみつ
髙見泰地|たかみたいち|髙見泰地|たかみたいち|高見泰地|たかみたいち
藤川義夫|ふじかわわよしお|藤川義夫|ふじかわよしお|藤川義夫|ふじかわよしお
}
@enduml
```

ちなみに # は全ての縦横の罫線を表示するという意味ですが，縦線のみ，横線のみ，あるいは外枠のみといった指定も可能です。

文字 結果
# 全ての縦横の罫線を表示する
! 全ての縦線を表示する
- 全ての横線を表示する
+ 外枠を表示する

せっかくなので # 以外の場合も見てみましょう。

全ての縦線を表示 ! のとき

全ての横線を表示 - のとき

外枠を表示 + のとき

残念ながら，複数の文字を組み合わせて使用することは出来ません。

字を大きくする方法

デフォルトは字が小さ過ぎます。残念ながら，スタイルシートでも skinparam でも字の大きさを調整できません。<size> タグを用いれば文字単位で大きさを調整することは可能ですが，煩わし過ぎてやる気がしません。しかし，全体的な字のサイズは scale オプションで拡大率を指定することで解決できます。ただし，タイトル文字など表以外の要素も一律に拡大されてしまうので注意が必要です。

筆者の目分量ですが，拡大率は 17/12 倍にするとちょうどいい感じです。タイトルも拡大されるので逆算してサイズを小さくしています。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
title {
  fontStyle normal
  fontSize 12
}
</style>
scale 17/12
title 表１　各データサイトの将棋棋士一覧（相違部分のみ）
{#
<b>棋士成績DB</b>|*|<b>棋士別成績一覧</b>|*|<b>Wikipedia</b>|*
清野静男|きよのしずお|清野静男|せいのしずお|清野静男|せいのしずお
桐山清澄|きりやまきよずみ|桐山清澄|きりやまきよすみ|桐山清澄|きりやまきよずみ
武市三郎|たけいちちさぶろう|武市三郎|たけちさぶろう|武市三郎|たけいちさぶろう
達正光|たちまさみつ|達正光|たつまさみつ|達正光|たちまさみつ
髙見泰地|たかみたいち|髙見泰地|たかみたいち|高見泰地|たかみたいち
藤川義夫|ふじかわわよしお|藤川義夫|ふじかわよしお|藤川義夫|ふじかわよしお
}
@enduml
```

余白を広げる方法

上記の表は文字と枠線の間の余白が少なく見づらいです。横方向であればスペース（空白）文字を入れて１文字単位で幅を調整できます。縦方向の調整はスペース（空白）文字の文字サイズを大きくすることで可能ですが，左右方向と独立して調整するのは困難です。ということで今回，余白の調整のためインライン SVG スプライトという技術3を用いました。

今回 S という一文字の名前のスプライトを定義しました。これは大きさを確保するためだけのダミー要素であり，かつての 1px サイズの GIF テクニックのようなものです。使用する際には <$S> とドル記号 $ を付けて参照します。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
title {
  fontStyle normal
  fontSize 12
}
</style>
sprite S <svg width="3" height="16"></svg>
scale 17/12
title 表１　各データサイトの将棋棋士一覧（相違部分のみ）
{#
<$S><b>棋士成績DB</b><$S>|*|<$S><b>棋士別成績一覧</b><$S>|*|<$S><b>Wikipedia</b><$S>|*
<$S>清野静男<$S>|<$S>きよのしずお<$S>|<$S>清野静男|<$S>せいのしずお<$S>|<$S>清野静男|<$S>せいのしずお<$S>
<$S>桐山清澄<$S>|<$S>きりやまきよずみ<$S>|<$S>桐山清澄<$S>|<$S>きりやまきよすみ<$S>|<$S>桐山清澄<$S>|<$S>きりやまきよずみ<$S>
<$S>武市三郎<$S>|<$S>たけいちちさぶろう<$S>|<$S>武市三郎<$S>|<$S>たけちさぶろう<$S>|<$S>武市三郎<$S>|<$S>たけいちさぶろう<$S>
<$S>達正光<$S>|<$S>たちまさみつ<$S>|<$S>達正光<$S>|<$S>たつまさみつ<$S>|<$S>達正光<$S>|<$S>たちまさみつ<$S>
<$S>髙見泰地<$S>|<$S>たかみたいち<$S>|<$S>髙見泰地<$S>|<$S>たかみたいち<$S>|<$S>高見泰地<$S>|<$S>たかみたいち<$S>
<$S>藤川義夫<$S>|<$S>ふじかわわよしお<$S>|<$S>藤川義夫<$S>|<$S>ふじかわよしお<$S>|<$S>藤川義夫<$S>|<$S>ふじかわよしお<$S>
}
@enduml
```

縦方向の余白をもっと広げる方法

筆者としては上記の例で OK としたいところですが，人によってはもう少し縦方向の余白がないと読みにくいかもしれません。

SALT において，行全体としてはセルの縦方向位置は上揃いですが，同一セルの中ではベースラインに合わせた下揃いになります。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
</style>
scale 36/12
{#
<back:pink><size:24>■24■</size></back>|<back:cyan><size:20>■20■</size></back><back:silver>■12■</back>
}
@endsalt
```

セルを中央揃いに見せるため，各セルには高さ 20px，幅 3px のダミー要素を入れた上で，表の左右両端には高さ 24px，幅 0 px のダミー要素を入れました。表の左右両端が二重線に見えるのはそのせいです。

各セル内のダミー要素は <$S>，表の左右両端のダミー要素は <$T>，いずれもインライン SVG スプライトで定義しました。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
title {
  fontStyle normal
  fontSize 12
}
</style>
sprite S <svg width="3" height="20"></svg>
sprite T <svg width="0" height="24"></svg>
scale 17/12
title 表１　各データサイトの将棋棋士一覧（相違部分のみ）
{#
<$T>|<$S><b>棋士成績DB</b><$S>|*|<$S><b>棋士別成績一覧</b><$S>|*|<$S><b>Wikipedia</b><$S>|*|<$T>
<$T>|<$S>清野静男<$S>|<$S>きよのしずお<$S>|<$S>清野静男|<$S>せいのしずお<$S>|<$S>清野静男|<$S>せいのしずお<$S>|<$T>
<$T>|<$S>桐山清澄<$S>|<$S>きりやまきよずみ<$S>|<$S>桐山清澄<$S>|<$S>きりやまきよすみ<$S>|<$S>桐山清澄<$S>|<$S>きりやまきよずみ<$S>|<$T>
<$T>|<$S>武市三郎<$S>|<$S>たけいちちさぶろう<$S>|<$S>武市三郎<$S>|<$S>たけちさぶろう<$S>|<$S>武市三郎<$S>|<$S>たけいちさぶろう<$S>|<$T>
<$T>|<$S>達正光<$S>|<$S>たちまさみつ<$S>|<$S>達正光<$S>|<$S>たつまさみつ<$S>|<$S>達正光<$S>|<$S>たちまさみつ<$S>|<$T>
<$T>|<$S>髙見泰地<$S>|<$S>たかみたいち<$S>|<$S>髙見泰地<$S>|<$S>たかみたいち<$S>|<$S>高見泰地<$S>|<$S>たかみたいち<$S>|<$T>
<$T>|<$S>藤川義夫<$S>|<$S>ふじかわわよしお<$S>|<$S>藤川義夫<$S>|<$S>ふじかわよしお<$S>|<$S>藤川義夫<$S>|<$S>ふじかわよしお<$S>|<$T>
}
@enduml
```

他のテーブル表記法との比較

他のテーブル表記法との比較です。SALT は PlantUML と比べると × 印の出来ないことが増えており，数少ない（唯一）出来るようになった機能がセルの結合機能なんですね。

テーブル記法の機能比較
機能 Markdown HTML PlantUML SALT
タイトル文字列 × ○ ○ ○
ヘッダ指定 先頭行のみ セル単位に
指定可		 セル単位に
指定可※１ 		セル単位に
指定可※１
左右位置 列単位に
指定可		 セル単位に
指定可		 左揃い固定 左揃い固定
上下位置 中央揃い
固定		 中央揃い
固定		 上揃い固定 上揃い固定
枠色指定 × × ○ ×
セル背景色指定 × × ○ ×
セル内改行 ○ ○ ○ ×
セル内余白指定 × × △※２ ×
文字色指定 ○ ○ ○ ○
文字サイズ指定 × × ○ ○
フォント指定 × × ○ ○
文字背景色指定 × × ○ ○
セル内コード ○ ○ △※３ △※３
セル内数式 ○ ○ ○ ○
テキストのコピー ○ ○ × ×
テーブルの中の
テーブル		 × ○ × ×
セルの結合 × 上下左右可 × 左右のみ可
オーバーフロー時
の処理		 セル内
折り返し		 セル内
折り返し		 テーブル全体
を縮小表示		 テーブル全体
を縮小表示

※１：単に太字にしているだけです。
※２：skinparam padding で余白を指定できますが，テーブル外部まで影響を及ぼします。
※３：固定幅フォント指定と文字背景色指定でコードスパンっぽく見せることは可能です。

余談

PlantUML の中にありながら別の言語体系である SALT について本家のサイトでは下記のように紹介しています4。

salt は PlantUML のサブプロジェクトで、グラフィカルなインターフェイスや ウェブサイトワイヤーフレーム、ページ概略図、画面青写真、グラフィカルなインターフェイス、回路図、青写真を作るのにとても便利です。概念的な構造を 視覚的なデザインと整合させ、美しさよりも機能性を強調するのに役立ちます。

この SALT って何の略号かと思って調べたところ，正式な略号は定められていないようです。Copilot に質問したところ，下記の回答が返ってきました。

🧠 SALT の由来について

  • 一部のコミュニティでは「Simple And Lightweight Textual GUI」のような意味で使われているという推測もありますが、PlantUML の公式ドキュメントでは略語の定義はされていません。
  • 名前の由来は、GUI 要素を「味付け（salt）」するように追加するという比喩的な意味かもしれません。

筆者の予想は Script ALTernative です。

不具合事例

SALT を用いたテーブル表記の不具合です。<back> タグを用いて背景色を指定した場合，背景色がセル外にはみ出てしまうのです。ただし，この不具合はブラウザ依存性があり，Windows 版の Edge（Chromium ベース）で起こり，Firefox では起こりません。

```plantuml
@startsalt
<style>
root {
  margin 0
  padding 0
}
</style>
scale 36/12
title TITLE
{#
<back:pink><size:24>24pt</size></back>|<back:silver>12pt</back>
<back:silver>12pt</back>|<back:cyan><size:24>24pt</size></back>
}
@endsalt
```

下記はブラウザの画面をキャプチャして貼ったものです。よく見るとフォントも違います。

  1. Qiitaでテーブルの内容を折り返さずにスクロール表示する方法 - Qiita ↩

  2. PlantUMLのテーブルを極める - Qiita ↩

  3. QiitaのmarkdownでSVGを使って作図する - Qiita ↩

  4. Salt (Wireframe) - plantuml.com ↩

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?