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?

Markdown形式の表から、再編集できる表の画像を出力するツール

0
Last updated at Posted at 2026-08-05

noteなどの記事へ表を貼り付けたいとき、Markdownの表をそのまま使えない場合があります。

そこで、Markdown形式の表を入力すると、PNG画像として保存できるツールを作りました。

Markdown形式に関する知識がない人も、「ひな形挿入」ボタンで表が作れると思います。

ブラウザでアクセスするだけで使えます。

markdown-table-2026-08-05 (10).png

主な機能

  • Markdown形式の表を画像化
  • 文字サイズや余白、画像幅、見出し色を変更
  • 太字や列の寄せ方向に対応
  • PNGとして保存
  • 保存したPNGを読み込み、元のMarkdownと画像設定を復元

PNG画像の表外にある白い余白部分へ、元のMarkdownと画像設定をrgba各先頭1bitに埋め込んでいます。

そのため、このツールで保存した元のPNGを再び読み込むと、表を編集し直せます。

noteの記事へ表を貼る用途を想定

主に、noteの記事内へ簡単に表を貼り付ける用途を想定しています。

スマートフォンでは、保存した画像をそのまま端末へ残しておく人も多いと思います。その場合は、後日PNGを読み込むだけで再編集できるため、特に便利です。

PCでも、出力したPNGを削除せず保管しておけば、同じように再編集できます。

注意点

noteなどへアップロードした後の画像は、サービス側で再圧縮や変換が行われ、埋め込んだ情報が失われる可能性があります。

再編集用として、ツールから直接保存した元のPNGを残しておくことをおすすめします。

公開先

👇アクセスするだけで使う事ができる公開先

👇GitHub

GitHub の URL は、悪意のあるコードが含まれていないかをご自身で目視確認したい方向けに公開しています。

網羅的な確認はできませんが、ChatGPT にコードを添付して、悪意のあるコードが含まれていないか確認してもらう方法も有効です。

ご自身が使いやすいように ChatGPT などを活用してチューニングし、利用することも推奨します。

より使いやすいサイトを作成できた場合は、私も利用したいので公開していただけるとうれしいです。

なお、全面的に作り直したものではなく、本リポジトリを改造して作成したものを公開する場合は、MIT ライセンスの条件に従って公開してください。(著作権表示とMITライセンス文を含めてください)

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
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?