noteで表を使う5つ＋αの方法
はじめに
noteではMarkdown記法の一部が使えますが、Markdown記法のうち表を作る機能はサポートされていません（2025年8月現在）。そこで、いろいろな方によってnoteに表を作る方法が試行錯誤されてきました。よく見られるのがEXCEL（インストール版）による方法、$${\TeX}$$記法を用いる方法、GitHub Gistを用いる方法の3つでしょうか。
この記事では、ちょっと工夫してこれまであまり試みられてこなかった表の中に装飾やリンクを入れることを試してみます。
試してみるのは次の2つです。
・文字列の色を変更する
・文字列にリンクを設定する
また、これまであまり触れられてこなかったツールも試してみます。
とても長い記事になってしまったので、最初に個人的な結論を書いておきます。使いやすそうだと思ったのは$${\TeX}$$記法とGoogleスライドでした。
１．表計算ソフトによる方法
１－１．EXCEL（インストール版）
まずはパソコンにインストールするタイプのEXCELから。次の画面のような表を作って
noteで使いたい部分を選択してコピー。noteの編集画面に貼り付けます。
貼り付け結果
自動的に画像化されました。色も含めて見た目は保持されていますが、画像なので表の中の文字列は検索にヒットしませんし、文字列を選択してコピーすることもできません。また、リンクも有効にはなりません。
１－２．EXCEL（オンライン版）
ブラウザから無料で利用できるオンライン版でも試してみます。
インストール版と同様の表を作って
noteで使いたい部分を選択してコピー。noteの編集画面に貼り付けます。
貼り付け結果
書式なしテキストnote色付きテキストnoteリンク付きテキストnote
セルの区切りや改行がすべて無視され1行のテキストになりました。
色は反映されていませんが、リンクは有効です。
１－３．Googleスプレッドシート
同じくブラウザから無料で利用できるGoogleスプレッドシートも試してみます。
同じように表を作って
選択してコピー、noteの編集画面に貼り付けます。
貼り付け結果
書式なしテキストnote色付きテキストnoteリンク付きテキストnote
EXCELのオンライン版と同じく、セルの区切りや改行がすべて無視され1行のテキストになりました。色が反映されないこと、リンクが有効なことも同様です。
１－４．表計算ソフトによる方法 まとめ
表計算ソフトからコピー＆ペーストする方法は、EXCEL（インストール版）では結果が画像として挿入され、Webアプリとして提供されているEXCEL（オンライン版）とGoogleスプレッドシートでは表の形が維持されず1行のテキスト（設定したリンクは有効のまま）として挿入される結果になりました。
コピーした段階では画像化はされていないと思われますので（例えば、テキストエディタに貼り付けると色やリンクの設定が省略されたタブ区切りのテキストになりました。）、貼り付けられるときにnote側でEXCEL（インストール版）からのデータであることを認識して処理しているのでしょうか？興味深いですね。
以上から、note用の表を表計算ソフトで作るにはインストール版のソフトが必要で、しかも貼り付け結果は画像になってしまうことがわかりました。手軽な方法ですが、画像では表の中身を利用しにくいですね。
Webアプリを検証するというアイデアは、まりこ🐈⬛寄り道ヨーロッパ旅 さんの次の記事を参考にさせていただきました。ありがとうございました。
２．TeX記法を用いる方法
noteでは$${\KaTeX}$$を利用して一部の$${\TeX}$$記法を使うことができます。$${\KaTeX}$$や$${\TeX}$$という表示もインラインで$${\TeX}$$記法を用いて実現しています。
$${\TeX}$$記法でも表の作成に挑戦してみます。公式のヘルプに
・文字色を変更する一部の機能は利用できません。
・セキュリティの観点からHTML機能は無効化されているため使用することができません。
とあるので文字色やリンクについてはあまり期待できませんが、実行結果がどのようになるのか検証してみたいと思います。
ところで、本筋とは離れますが、noteのヘルプページの記述を参照しやすいようにページへのリンクを埋め込もうとしたのですが、noteのヘルプページははうまく埋め込めないみたいですね（なので上には該当箇所だけ引用しました）。URLに日本語が入っているのがダメなのかと思ったら、Wikipediaの日本語タイトルページは正常に埋め込めるので理由は別にありそう。
気を取り直して$${\TeX}$$記法で表を作っていきます。\textcolorで文字色、\hrefでリンク先のURLを指定しています。また、表示が少し窮屈に感じたので\def\arraystretch{1.5}で行間を広げています。
$$
\def\arraystretch{1.5}
\begin{array}
{|l|l|}
\hline
書式なしテキスト & note \\
\hline
色付きテキスト & \textcolor{red}{note} \\
\hline
リンク付きテキスト & \href{https://note.com/}{note} \\
\hline
\end{array}
$$
生成結果
$$
\def\arraystretch{1.5}
\begin{array}{|l|l|}
\hline
書式なしテキスト & note \\
\hline
色付きテキスト & \textcolor{red}{note} \\
\hline
リンク付きテキスト & \href{https://note.com/}{note} \\
\hline
\end{array}
$$
生成された表について見てみると、EXCEL（インストール版）のときとは異なり、表の中身は文字として再現されています。ただし、予想通り文字色やリンクは反映されませんでした。
面白いのは、2行目の文字色付きテキストでは色を指定する命令「\textcolor{red}」が省略されて単色の「note」が表示されたのに対し、3行目のリンク付きテキストでは先頭の「\href」が表示されてそれ以降のURLや装飾を受けるはずの文字列「note」が省略されていること。機能が無効になっているのは同じですが、処理が違うのでしょうか？
文字色やリンクは表現できませんでしたが、表の中身が文字列として認識されるので、余計な装飾を施さない単色の表であれば十分に実用的だと思いました。$${\TeX}$$記法に慣れる必要はあるものの、noteのサービス内だけで完結できることも魅力です。
なお、再現条件が特定できなかったのですが、同じソースで表を作成していても上側の枠線が表示されたりされなかったりという現象が起こることがありました。貼る場所を変えたら表示されたり、今まで表示されていなかったのに記事の別の場所を編集していたら表示されるようになったり。手元の環境が原因の可能性もありますが、発生を予測できないのでちょっと困りました。
対策を試行錯誤していたところ、表を2つ連続で表示させると2つ目は正常に表示されることに気づきました。そこで、本質的な解決ではないですが、上側の枠線が消えた場合には、なにも表示されない空の表を本命の表の直前に置くことで現象を回避できるというノウハウを得ました。空の表のコードは以下の通り。
$$
\begin{array}{}
\end{array}
$$$${\TeX}$$記法でnote用に表を作成する方法についてはコメさんとおもちさんの記事を参考にさせていただきました。ありがとうございました。
３．コードのスニペットが書けるサービスを使う方法
noteはさまざまなサービスの埋め込みに対応していて、その中にはGitHub GistやCodePenのようにコードのスニペットを書いてその実行結果を確認できるサービスもあります。noteで表を使う方法としてはGitHub Gistが紹介されることが多いようです。
本来、これらのサービスでのコードの公開は「こんな便利なコードがあるよ」という情報の共有が主な趣旨であるように思われます。したがって、表の書き方をシンプルな例を使って紹介するのではなく、有意義なデータを用いた表を作るような使い方はサービスの趣旨を逸脱するのではと心配なところもあります。
３－１．GitHub Gist
GitHub Gist（以下「Gist」といいます。）はGitHubが提供するコードのスニペットなどを共有できるサービスです。GistはMarkdown記法に対応しているので、それを使って表を作成すればnoteに埋め込むことができます。
次のようなコードで表を作成します。
Markdownで表を作成するにあたって次のような工夫をしました。
・Markdownの表では1行目をヘッダーにする必要があるので列タイトルを表示する行を追加しています。
・Markdownには文字色を変更する機能はないのでHTMLの<span>タグで色を指定しています。
|種類|結果|
|---|---|
|書式なしテキスト|note|
|色付きテキスト|<span style="color: red;">note</span>|
|リンク付きテキスト|[note](https://note.com/)|このコードを使ってGistで表を作ります。noteに埋め込むURLは編集画面右上の「Embed」をクリックしてその中の「Share」から取得します。
noteに埋め込んだ状態（のキャプチャ画像）は次のようになります（赤い楕円は加工により追加）。
３－１－１．生成結果の分析
なぜGistの埋め込みそのものではなくキャプチャ画像なのかについては後で触れます。まずは生成された表について見ていきましょう。
ごらんのとおり、なかなかきれいに整形された表が出力されます。
ただし、HTMLによる文字色の変更は反映されませんでした。
一方、画像だとわかりにくいですが、リンクはきちんと反映されていました。リンクがある部分に合わせたカーソルの形が指に変わっているのがわかると思います。
３－１－２．Gistの埋め込みとGitHubアカウント
埋め込みそのものではなくキャプチャ画像にした理由は赤い楕円で囲んだ部分にあります。それぞれがGistへのリンクになっており、そのURLにはGitHubのアカウント名が含まれています。つまり、Gistからnoteに表を埋め込むとリンクからGitHubのアカウント名がわかってしまうということです。
noteとGitHubで同じ（または似ている）アカウント名を使っている場合や別々のアカウント名を使っていてもそれを知られてかまわない場合は問題ありませんが、noteでの活動とGitHubでの活動を分けておきたい場合にはちょっと困ったことになります。
わたしの場合は、両方の活動がつながって問題があるかといえばそんなこともないのですが、せっかく違うアカウント名（しかもnoteのほうはちょっと痛いアカウント名）になってるのになあという感じです。
noteのアカウント名にあわせてGitHubで新しいアカウントを作ってしまえばいいのではと思われるかもしれませんが、GitHubでは無料アカウントを複数持つことはできません。
所属している組織が有償のGitHub Organizationを契約している場合はそこに参加させる無料の業務用のアカウントを個人用のアカウントとは別に保持できるという説明もありますが、逆に言うと、認められるとしてもそのような限定的な場合ということです。
わたしの場合はすでに趣味で無償アカウントを1つ保有しており、趣味のnote用に別の無償アカウントを取得することはできません。したがって、個人的にはnoteでGistを使うのは難しいということになりました。どうしても使いたくなったときは有償アカウントを取るかもしれません（もしくは今使っているGitHubのアカウント名がこのnoteとつながることを容認するか）。
３－１－３．Gistに書いたコードはコミュニティからどう受け止められるか
もう1つ気になるのは、Gistに書いたコード（表を作成するためのMarkdownもコードです）に対するコミュニティの認識です。
Gistは本来、コードのスニペット（コードの断片）を共有するサービスです。そこに書かれたものはどんなふうに利用者に受け止められているのでしょうか。
GitHubではライセンスの明示は義務付けられていません。それでもGitHub本体で公開されているような大きなコードにはなんらかのライセンスが付されていることがほとんどですが、Gistにあるスニペットはライセンスを明記せず公開されていることも多いようです。
ライセンスが明記されてなければすべての権利を保持したままとして著作権法が適用されるはずです。しかし、現実問題としてライセンスなしでのスニペット公開に「便利なコードの書き方があるから公開します。でも使うには許諾を取ってください」という意図が込められているというのも無理がある気がします。スニペットが著作権が生じないアイデアやありふれた表現にとどまっている場合もあるでしょう。
また、GitHubのサービス内での利用に限れば、パブリックリポジトリにコードを公開した場合は、他のユーザーに表示・フォークを許す規約になっていて、これを避けるにはプライベートリポジトリにする必要があるようです。
Gistはパブリックとシークレットで作ることができるので、シークレットにすればコードを隠せるのかもと思ったのですが、シークレットはプライベートリポジトリとは違うようです。シークレットの意味は、作成された新しい Gist を参照できるDiscoverに表示されず、他のユーザーの検索に引っかからないというだけのようです。したがってURLを知っている人はアクセスすることができます。限られた範囲の人にURLを教えることを想定しているのかな。でも、上で書いたようにnoteにGistを貼るとそこからURLをたどれてしまいますよね。
Gistに書かれたコードのライセンスを調べるにあたって読んだ記事をいくつか貼っておきます。どれも個人の意見なので決定的なものにはならないと思いますが、雰囲気はつかめるかなと思います。
Are Github's Gists copyright free? | reddit
埋め込みがうまく働かないのでURLを。
https://www.reddit.com/r/github/comments/sg9sdh/are_githubs_gists_copyright_free/
長々と書いてきましたがはっきりとした結論は出せませんでした。ただ、共有を目的とするサービスなので書いたことを他の人に使われる可能性は意識しておいたほうがいいかなと思いました。
まあ、ライセンスを気にするのは真面目な人で、不真面目な人は明確に著作権が主張されていても勝手にコピーしていくんでしょうけどね。
３－１－４．まとめ
きれいな表が作れて、しかもMarkdown記法は$${\TeX}$$記法よりなじみがある人が多いでしょうから、アカウント名の問題や、スニペット共有サービスにデータを書くことに抵抗がない場合はいいかもしれません。
また、GistはAsciiDoc記法にも対応しています。AsciiDoc記法を使えば、Markdown記法よりも複雑な表を作成することもできます。ちなみにAsciiDoc記法を使った場合もリンクは作れましたが文字色は変更できませんでした。
Gistでnote用に表を作成する方法についてはUliboooo (うりぼう)さんの記事を参考にさせていただきました。ありがとうございました。
３－２．CodePen
結論から言うとCodePenはnoteに埋め込むための表を作るのに向いていないと思います（機能ではなくライセンス的に）。なので余計なものを読みたくないという方はこの部分を飛ばして次の「４．スライド共有サービスを使う方法」に進むことをお勧めします（noteでページ内リンクを使えればここにスライドの章までジャンプするリンクを貼れるんだけどな…）
CodePenはブラウザ上でHTML，CSS，JavaScriptを書いてその実行結果を確認できるサービスです。HTMLやCSSをそのまま使えますから、表も文字色もリンクもHTMLとCSSで作ることができます。JavaScriptも使えますから並べ替えや条件でのフィルタといったことも実現できるかもしれません。
HTMLだけで表を作ってみました。
埋め込み用のURLは画面左下の「Share」ボタンをクリックして「Copy Link」から取得できます。ブラウザのアドレスバーに表示されているURLと同じようなのでアドレスバーからコピーしてもいいでしょう。
noteに埋め込んだ状態のキャプチャ画像は次のようになります。（赤い楕円は加工により追加）。
３－２－１．生成結果の分析
またキャプチャ画像で申し訳ありません。
HTMLの機能を使えるので文字色・リンクともに再現できています。今回はHTMLだけしか使いませんでしたが、CSSと組み合わせるとより見やすい表現も可能だと思います。
３－２－２．CodePenのアカウント
CodePenもGistと同様、赤い楕円で囲んだ部分がサービスへのリンクになっていて、そこにはアカウント名が含まれています。また、Resultボタンを何度も押すと生成結果とアカウント名を含んだオーナー表示が交互に表示されます。CodePenも利用規約で1人1アカウントしか持てないとされているので、noteとCodePenでアカウント名を使い分けたい場合には向かないでしょう。
規約で該当するのは"Your Account"の次の部分
One person or legal entity may not maintain more than one Account.
３－２－３．CodePenに書いたコードのライセンス
ライセンスを指定しないこともできたGistとは異なり、CodePenでは公開されたPen（CodePenに書かれたコードのこと）にはMITライセンスが必ず適用されます。MITライセンスとは、簡単に言えば再配布時に著作権表示とライセンス表示さえすれば自由に使用・複製・再配布等ができるという、とても縛りの緩いライセンスです（詳しくは専門の解説を読んでください）。
つまり、CodePenにコードを書いて公開すると、第三者にそれを使わないでと言えなくなってしまいます。
よって、CodePenに書く内容はサンプル的なものにとどめるべきだと思います。noteに埋め込むために自分オリジナルのコンテンツを含むような表を作成するのには向いていないでしょう。
３－２－４．まとめ
CodePenはHTML、CSS、JavaScriptを書けることから、とても柔軟な表現が可能ですが、公開したものがMITライセンスになってしまうという条件にがあるため、noteのための表作りには使いにくいと思います。
３－３．コードのスニペットが書けるサービスを使う方法 まとめ
GistとCodePen、2つのサービスを使ってnote用に表を作る方法を検討ししてきましたが、両者を通じて感じたのは「便利なコードを共有する」というサービスの趣旨と「noteで公開する1つの記事のために表を作成する」という目的とのミスマッチでした。検討前からなんとなくサービスの趣旨と離れた使い方なのではと感じていましたが、ライセンス関係を調べるうちにその懸念は一層強まりました。
どちらのサービスも柔軟な表現が可能ですが、それをサンプル的なコードの紹介ではなく、noteに埋め込むコンテンツの修飾（表作り）に使うべきなのかは考える必要があると思いました。
４．スライド共有サービスを使う方法（Googleスライド）
noteにはスライド共有サービスを埋め込むこともできます。対応しているサービスはSlideShare、Speaker Deck、Googleスライド、Docswell（2025年8月現在）。ここではGoogleスライドを使用した表の埋め込みを試してみます。
まずは表の作成。Googleスライドでは特別な記法を覚えることなく、メニューから表を作ることができます。「挿入」から「表」を選ぶとマウスで行と列の数を指定することができます。
文字の修飾やリンクの設定も一般的なオフィスソフトと同様の操作でメニューから行えます。
埋め込み用URLの取得は「ファイル」メニューの「共有」から「ウェブに公開」を選択して取得します。画面右上に目立つ形で「共有」ボタンが表示されていますが、こちらからは埋め込み用リンクは取得できないようです。
作成したスライドをnoteに埋め込んだ状態がこちら。今回はキャプチャ画像ではありません。
４－１．生成結果の分析
文字色・リンクともに実現できています。また、スライドに特徴的な機能として複数ページを扱うことができます（スライド左下の数字の両側の＜ ＞をクリックしてみてください）。スライドは1枚だけだと広さに制約がありますが、複数枚を使うことで大量のデータを扱うこともできるでしょう。
４－２．アカウント名等の情報
リンク用に提供されるURLやnoteへの埋め込み結果に一見してアカウント名を推測できるような情報は含まれていないように思われます。右下の「Google Slides」のロゴは埋め込んだ個別のスライドではなくサービス自体へのリンクになっていて、Googleにログインしていなければログインを求める画面が、ログインしていれば自分のGoogleスライドのホーム画面が開くようです。
したがって、アカウント名が簡単に第三者に知られることは避けられそうです。
４－３．コンテンツのライセンス
Googleでは利用規約で次のように定められています。
ユーザーのコンテンツはユーザーに帰属します。つまり、コンテンツに含まれるユーザーの知的所有権はすべてユーザーが保持します。
したがって、ユーザーはすべての権利を保持したままスライドを作成することができます。
まあ、そうでなかったら企業や研究者がスライドを作成して公開なんてできないですものね。
４－４．まとめ
以上のことから、Googleスライドを使うと表現力の豊かな表を作成することができて、アカウント名やコンテンツの権利についての心配も少ないことがわかりました。
特に便利そうなのは特別な記法を覚えなくても表を作成できることです。$${\TeX}$$記法はもちろん、Markdown記法であっても、理系の研究者やエンジニアでもなければ書いたことがない方も多いでしょう。まあ、最近は記法を知らなくてもAIに整形させるということも可能かもしれませんが、出力されるのはそれぞれの記法に整形されたテキストですからね。一般的なオフィスソフトと同様の操作で見たままのものが出来上がっていくGoogleスライドは（WYSIWYGという言葉を何年かぶりに思い出しました）誰にでも使いやすいと思います。
ほかのスライド共有サービスは試していませんが、同じようなことは可能だと思います（それぞれの利用規約等を参照してください）。
５．画像を貼り付ける方法
最初に試したEXCEL（インストール版）では表としてnoteに表示したい部分を貼り付けると自動で画像に変換されていました。
画像としての表示でいいのなら、自分で画像を用意すればどんなツールを使って表を作成してもそれを貼り付けて表示することができます。
この記事でもここまでEXCEL（オンライン版）、Googleスプレッドシート、Gist、CodePenで作った表のキャプチャ画像を貼ってきました。使えるツールはこれらにとどまらないですし、紙に手書きした表を写真に撮ったものだってOKです。
視覚的な表現力の観点からは好きな方法で画像を作ってそれを貼り付ける方法も十分に選択肢になりえます。
まとめ
それぞれの方法についてのまとめはそれぞれの章で書いてきたので、ここでは自分で使ってみたいと思ったのはどれかを書いておきます。
まず、面白いものを見つけられたなと思ったGoogleスライド。文字色の変更もリンクも機能しますし、一般的なオフィスソフトと同様の操作で使えるので表の作成も簡単。
一度に表示できる表の大きさはスライドのサイズに制約されてしまいますが、スライドを複数ページにすることにより1ページで収まらなかった情報も2ページ目以降に表示させることができます。その場合は2ページ目以降もあることに読者が気付きやすくする配慮は必要かもしれません。
また、見た目がいかにも外部からの埋め込みになってしまいますが、これは仕方ないですね。
もう1つは$${\TeX}$$記法を用いる方法。文字色の変更やリンクは機能しませんが、すべての作業をnoteの中だけで完結させることができます。ちょっとだけ手直ししたいようなときにnoteだけで済むのは気が楽です。修飾などがいらない小さな表ならこれでいいかなあという印象です。巨大な表を書くとなったらマーキングが大変かもですが。
また、本文との親和性も高いと思います。デフォルトでもあまり違和感はありませんが、文字サイズやフォントを工夫すればもっと自然にすることもできるでしょう。
noteで$${\TeX}$$記法を用いる場合の文字サイズやフォントの変更については にゃんころもち Ｒ | ankoromoti-nya さんの次の記事を参考にさせていただきました。ありがとうございました。
結論
noteが標準で表の作成機能や文字の修飾機能を備えてくれたらこんな苦労はいらない。
