テキストボックスジェネレーター

好きなテキストを、プレーンな Unicode の罫線文字で描いた囲み枠やボーダーで囲みます。文字を入力または貼り付けて、枠のスタイル・配置・余白を選んだら、その結果をコピーしましょう。画像ではなくただのテキストなので、囲み枠はコメントや README、コードブロック、ターミナル、チャットにそのまま貼り付けられ、入力した内容がブラウザの外に出ることはありません。

あなたのテキスト

枠のスタイル

配置

余白

テキストボックスの使い方

1
テキストを入力または貼り付ける
枠で囲みたいテキストを入力します。1 行でも複数行でもかまいません。囲み枠は一番長い行に合わせて自動で広がります。
2
枠のスタイルを選ぶ
貼り付け先に合わせて、単線・角丸・二重線・太線・ASCII・破線・星・ブロックといった枠のスタイルを選びます。
3
配置と余白を設定する
枠内のテキストを左・中央・右のどこに揃えるかを決め、文字の周りに少しゆとりを持たせたいときは内側の余白を足します。

4
コピーして貼り付ける
囲み枠付きのテキストはすぐ下に即座に表示されます。コピーして、コメントや README、コードブロック、ターミナル、チャットに貼り付けましょう。

テキストを囲む枠やボーダーについて

罫線文字とは何か

グラフィックスが登場するずっと前、ターミナルは表や枠、メニューをまさにその用途のために設計された特別な Unicode 文字を使って描いていました。角、水平線と垂直線、そして継ぎ目なくつながって連続したボーダーになる接合部分です。これらの文字は今でもあらゆる最新のアプリで機能するため、角がうまく合わないダッシュの並びではなく、本物の長方形でメモや見出しを囲むことができます。

それぞれのグリフはただのテキストなので、ここで作る囲み枠は画像ではありません。ほかの言葉と同じようにコピー＆ペーストでき、引用や編集をしても崩れず、テキストを読めるものなら何でも読み取れます。だからこそ、囲み枠付きのテキストは README ファイルやコマンドラインツール、コードコメントなど、あらゆるところで見かけるのです。

Unicode の罫線文字ブロックを覗いてみる

線のグリフは、Box Drawing ブロックと呼ばれる Unicode の専用範囲に収まっています。テキストターミナルの時代に、ソフトウェアが表やウィンドウを描けるよう設計された約 128 文字のセットで、4 つの角、水平線と垂直線、T 字形と十字形の接合部が、細・太・二重といった複数の太さで用意されています。「角丸」スタイルの柔らかい見た目を生む丸い角も同じブロックに含まれており、だからこそ曲線が直線ときれいにつながるのです。

このブロックの存在を知ると、ここの枠が完璧につながる理由と、手入力のダッシュやプラスのボーダーが決してうまく合わない理由がよく分かります。本物の左上角のグリフは本物の水平線とちょうどよい高さで接するよう作られているため、隙間なく長方形が閉じます——キーボードのアンダースコアやバーキーにはそれができません。

スタイルとレイアウトを選ぶ

枠のスタイルが雰囲気を決めます。単線と角丸は控えめで整っていて、ちょっとしたメモに向いています。二重線と太線はより目を引くため、タイトルや警告の表示に適しています。ASCII は、貼り付け先が装飾的な文字に対応しているか分からないときの安全な選択肢で、最も基本的なキーだけを使います。星とブロックは装飾的で、チャットやバナーの中で目立ちます。

配置と余白は、言葉が枠の中でどう収まるかを左右します。中央揃えは短いタイトルに合い、左揃えはリストや文章には自然です。余白を 1 か 2 にすると、テキストが罫線に触れないように間隔が生まれ、文字にぴったり押し付けられた枠よりも読みやすくなります。

Unicode の枠と ASCII のフォールバック

ここには 2 つの枠の系統があり、どちらを選ぶかは主に囲み枠をどこで使うかによります。Unicode スタイル——単線・角丸・二重線・太線——はくっきりとした連続した線を描き、罫線文字ブロックを完全にサポートするモダンなアプリで最も美しく表示されます。今日ではほぼどこでも対応しています。ASCII スタイルはあえてシンプルに作られていて、プラス・マイナス・パイプという、すべてのシステムが最初からサポートしてきた文字だけで枠を組み立てます。

古い端末、素性の分からない環境、文字に厳格な場所——レガシーターミナル、設定ファイル、プレーンテキストのメール、純粋な ASCII を維持しなければならないコードなど——では ASCII を選んでください。プラス記号が本来の角グリフの役割を担うため角はやや角張って見えますが、どの環境でも同じように表示されることが保証されます。それ以外の場面では、Unicode スタイルのほうがより美しい結果を生みます。

等幅フォントが重要な理由と実例

描いた枠が正方形を保てるのは、すべての文字が同じ幅を占める等幅（固定幅）フォントの環境だけです。その設定では、上辺・下辺・両側の縦線がすべて同じ列数になるため、長方形がきれいに閉じます。たとえば「Hello」と入力して単線スタイル・余白 1 に設定すると、角とダッシュの上辺、「│ Hello │」と読める中段、それと対になる下辺という 3 行が得られ、コードフォントではどれも端が完璧に揃います。

同じ囲み枠をプロポーショナル（可変幅）フォントを使うチャットに貼り付けると、「i」のような細い文字と「m」のような幅広の文字の違いで右端がガタガタになります。修正方法は囲み枠を変えることではなく、固定幅フォントが適用される場所——コードブロックやターミナル——に貼り付けることです。

全角文字を含む囲み枠の配置

多くの文字や数字は 1 列分の幅を取りますが、2 列分を占める文字もあります。絵文字や中国語・日本語・韓国語のテキストはターミナルでは全角（2 列分）として扱われるため、ツールが 1 文字としてカウントしている間に、画面上では 2 列分として描画されることがあります。結果として、元のテキストは長方形のはずなのに、右端が 1 列分ずれて見える囲み枠ができあがります——カウントは正しくても、表示上の幅が広くなっているのです。

これはフォントがそれらの文字を表示する性質によるものであり、囲み枠のバグではありません。絵文字や CJK テキストを囲んだ枠が歪んで見えるときは、単線や ASCII スタイルが最もずれを吸収しやすく、余白を少し足せば 1 列分のずれを隠せることもあります。完全な正方形の結果を求めるなら、内容を半角（1 列分）の文字に限定するのが確実です。

囲み枠付きテキストを上手に使う

囲み枠付きのテキストは、何かを際立たせるときに最も映えます。README の冒頭のタイトル、コードコメントの中の注記、ターミナルプログラムの ASCII バナー、フォーラムのコードブロックで強調したいメッセージなどです。あるテキストのまとまりに目に見える枠がふさわしいと感じたら囲み枠を使い、長方形が適度な幅に収まるよう、中身は短く保ちましょう。

大切なルールはただ一つ、フォントです。囲み枠がきれいな四角を保てるのは等幅の環境だけなので、固定幅フォントが使われている場所に貼り付け、確信が持てないときはシンプルな線のスタイルを選んでください。GitHub、Discord、Reddit、Slack ではコードブロックの中に囲み枠を貼り付けるのが定石で、それによって固定幅フォントが強制適用され、すべての端がきれいに揃います。

よくある質問

テキストボックスジェネレーターとは何ですか?

罫線文字（box-drawing characters）で描いた長方形でテキストを囲むツールです。単線・二重線・角丸の枠で使われるような、線や角のグリフを使います。結果はプレーンテキストなので、ばらばらの文字の羅列ではなく、きれいに枠で囲まれたブロックとしてどこにでも貼り付けられます。

囲み枠はどうやってコピーしますか?

テキストを入力してスタイルを選び、囲み枠付きの出力の上にあるコピーボタンを押します。罫線とテキストを含む枠全体がクリップボードにコピーされ、すぐに貼り付けられる状態になります。

囲み枠付きのテキストはどこで一番きれいに見えますか?

すべての文字の幅が同じになる等幅（monospace、固定幅）フォントが使われている場所ならどこでもきれいに見えます。GitHub や Discord、Reddit、Slack のコードブロック、README ファイル、ターミナル、コードコメントなどです。そうした場所では、枠がぴたりと揃ってきれいな長方形になります。

アプリによっては枠がゆがんで見えるのはなぜですか?

多くのチャット欄や文書では、i が m より細いといったプロポーショナル（可変幅）フォントが使われているため、枠の右端がガタガタに見えることがあります。枠をコードブロックの中に貼り付けるか、その範囲を等幅フォントに切り替えると、端がきれいに揃います。絵文字や日本語・中国語・韓国語などの全角文字はターミナルで 2 列分の幅をとるため、それらを囲んだ枠も 1 列ずれて見えることがありますが、これはフォントの性質であってエラーではありません。

スタイルごとの違いは何ですか?

どれも同じ長方形を、異なる線のグリフで描きます。単線・角丸・二重線・太線は、直角・曲線・二重・太めの線を使う Unicode の罫線文字です。ASCII はプラス・マイナス・パイプ（縦線）だけを使うので、最も基本的な環境でも機能します。破線は途切れた線を使い、星はアスタリスクで枠を組み立て、ブロックは塗りつぶしのハーフブロック形状でずっしりとした見た目にします。

入力したテキストはどこかに送信されますか?

いいえ。囲み枠は入力に合わせてすべてブラウザ内で組み立てられます。入力した内容がサーバーにアップロードされたり、記録・保存されたりすることはありません。