# Ulyssesでソースブロックとテーブルタグを使って、無理矢理テーブルを表示させる方法

URL: https://webrandum.net/ulysses-source-block-table/
公開日: 2022-05-31
更新日: 2022-05-31
カテゴリー: ライティング
タグ: Ulysses
出典: Webrandum（著者: サイトウ マサカズ）

Ulyssesではテーブルの作成ができません。

Markdown形式でテーブル入力をしても、特に反応せずにテキストのままです。

![Markdown形式のテーブル入力](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_1-16.png)

ただ、ソースブロックを使ってテーブルタグを使えば、無理矢理ですがテーブル作成できるなと思いついたので方法をまとめておきます。

## ソースブロックとコードブロックの違い

Ulyssesには「ソースブロック」と「コードブロック」という非常に似た機能が存在します。

違いとしては、ソースブロックがHTMLタグを利用するための機能で、コードブロックがコードをそのまま表示させるための機能です。

細かい違いは[過去に記事](https://webrandum.net/ulysses-code-source/)にしたのでそちらをご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/05/eyecatch-13.png)Ulyssesの「コードブロック」と「ソースブロック」の違いと使い分けhttps://webrandum.net/ulysses-code-sourceUlyssesには「コードブロック」と「ソースブロック」の似たようなマークアップが用意されています。違いが分からなかったのですが、ぱっと見はどちらも同じようなもので、細かな違いについて調べてみました。コードブロックとソースブロック「コードブロック」「ソースブロック」どちらもプログラムのテキスト（ソースコード）を入力するもので、見た目は似ていますが調べてみると使い道がかなり違います。 コードブロックソースブロック入力方法`（グレイヴ・アクセント）を2個続けて入力'（シングルクォート）を2個続けて入力~...](https://webrandum.net/ulysses-code-source)

今回はテーブルタグを使用してテーブルを表示させたいので、ソースブロックを使用します。

## ソースブロックへテーブルタグの入力

ソースブロックを追加し、そこにテーブルタグを入力します。

![ソースブロックにテーブルタグを入力](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_2-14.png)

これでプレビューすると、「HTML」プレビューでは確かにレイアウトが分かれていますが、線もありませんしテーブルっぽくありません。

![テーブルのHTMLプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_5-11.png)

「ePub」プレビューも同様で、レイアウトはテーブルのようになりますが、線がありません。

「PDF」と「DOCX」ではそもそもソースブロック内に入力したテキストは省略されてしまうので表示されません。

![テーブルのePubプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_4-11.png)

仕方ないかと思ったのですが、ふと思いつき「GitHub」にスタイルを変えてみると線も表示されてかなりテーブルっぽい見た目になりました。

![GitHub Styleでテーブルのプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_6-9.png)

「GitHub」スタイルは下記のサイトからスタイルファイルをダウンロードし、Ulyssesの［環境設定］→［スタイル］の右下の「スタイルを追加…」から追加します。

追加したらプレビュー画面の上の「歯車」アイコンをクリックして「Georgia」から「GitHub」に変更するだけです。

[![](https://www.google.com/s2/favicons?domain=styles.ulysses.app)Ulysses Styles & Themes![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/e20bcb4127fc0827196ad64b3a19775b4aeeab5d2fa7f9d6a657be6617b801e0.webp)GitHub - A Ulysses Export Stylehttps://styles.ulysses.app/styles/github-LVRAnyone used to documenting or sharing code online will appreciate this faithful replication of GitHub’s familiar look. If you’re seeking to wrap your coding projects in a nifty conceptual outline, this style is a great starting point.](https://styles.ulysses.app/styles/github-LVR)

### スニペットを使ってすばやく入力

テーブルタグをわざわざ手入力するのは面倒なので、「[Dash](https://webrandum.net/dash6/)」というスニペットアプリを使ってすばやく入力できるようにしています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/04/eyecatch-23.jpg)コードスニペットの管理方法や命名規則についてhttps://webrandum.net/code-snippetこのブログでは過去にスニペットに関して何度か取り上げてきました。今回はスニペットの中でも、コーディング時に使用する「コードスニペット」にフォーカスして、自分なりのルールや使い方を改めて整理します。スニペットの種類テキストスニペット「メールのテンプレート」「課題展開時に使う文章」など、ある程度決まったフォーマットをスニペットとして保存しておきつつ、必要に応じて呼び出して使います。 毎回考えたり、入力する時間が削減できる 手入力によるタイプミス・抜け漏れが減る 決まったフォーマットで来た方が受け取る...](https://webrandum.net/code-snippet)

たとえば、「`t3x3;;`」と入力すると3列3行のテーブルタグが入力されるように登録しています。