87文字・コピー無料
罫線文字の一覧
UnicodeのU+2500からU+257Fまでのブロックには、枠・表・ツリー構造・グリッドを組み立てるために設計された128種類の文字が収録されています——細線、太線、二重線、点線、丸角、そしてそれらの太さが交わるすべての接合部分です。ターミナルUI、ディレクトリツリー、テキストの表は、実際にこれらでできています。以下の文字はクリックでコピーでき、それぞれにUnicode名とコードポイントが記載されており、必要なパーツ同士がまとまるようにグループ分けされています。
細線
標準となるセットです。この11文字だけで、あらゆる長方形のグリッドを描くことができ、どの文字同士もきれいに接合します。
太線
細線と同じ11種類の形を、より太くしたバージョンです。外枠を強調したり、選択中の行を目立たせたりする際に、細線と組み合わせて使います。
二重線
2本の平行線でできています。DOS時代の定番の枠線で、このブロックの中でも今なお最も装飾的な選択肢です。
丸角
細線の枠を柔らかい印象にする、弧を描く角の文字です。┌ ┐ └ ┘をこれに置き換えるだけで、他は何も変える必要がありません。
点線
3連・4連の点線で、細線と太線の両方があります。目立たせたくない区切り線に便利です。
斜線とハーフストローク
セルに斜線を引いて打ち消すための文字と、セルの途中で止まる線の端を表す半分の長さの文字です。
細線・太線の接合
細線と太線が交わる接合部分です。これがあることで、表の接合部を崩さずに1行だけ太くするといったことができます。
二重線・単線の接合
二重線と単線の接合部分です。二重線の外枠に単線の内部区切りを組み合わせる時に必要なパーツです。
文字をクリックするとコピーされます。ダウンロードは発生しません——これらは画像ではなくテキスト文字です。
Unicodeブロック
- U+2500–U+257F 罫線素片
罫線文字の使い方
必ず等幅フォントを使う
これがすべての前提となるルールです。罫線文字は固定幅のセルを前提に設計されているため、プロポーショナルフォントでは縦線の列がずれてしまいます。JetBrains Mono、Menlo、Consolas、Cascadia Code、DejaVu Sans Monoは、いずれもこのブロックをきれいに表示します。
太さを1つに決めて統一する
細線は細線同士、太線は太線同士で接合します。接合用の文字を使わずに混在させると、線がきちんと接しない隙間が目に見えて残ります。太い外枠に細い内部区切りを組み合わせたい場合は、「細線・太線の接合」グループから接合文字を選びましょう。
角、辺、接合部の順に組み立てる
表は、4つの角、2種類の辺、そしてその交点でできています。まず角を配置すれば、残りは機械的に決まっていきます——だからこそコードで生成しやすいのです。
隙間のない枠にはline-heightを1に設定する
縦線は文字セルの高さいっぱいに描かれます。余分な行間があると、行と行の間に隙間として見えてしまうため、崩れて見える枠はたいてい line-height: 1 を設定するだけで直ります。
罫線文字について
罫線ブロックは、IBM PCのコードページ437文字セットを直接受け継いだものです。グラフィックに頼れなかった時代のDOSアプリケーションに、枠やメニューを提供していました。Unicodeはこの一式をU+2500にそのまま保存し、今も現役で使われ続けています。ターミナルのファイルマネージャーの枠線、ディレクトリツリーの枝、コマンドラインの表の枠、そしてこのサイトのゲームのグリッドはすべて、この128文字から描かれています。
このブロックが際立って優れた設計になっている理由は、接合部分を体系的に網羅している点にあります。横線と縦線があるだけでは十分ではありません。4方向それぞれから、各太さでセルに接続するあらゆる組み合わせが必要なのです。だからこそこのブロックには、「下が細線・横が太線」のような非常に細かい文字まで存在します。これがあるおかげで、表は途中で線の太さを変えても、接合部に隙間が1つも生まれません。
実用上の制約はフォントにあります。これらの字形は、隣り合うセルが1本の連続した線としてつながるように、文字セルの端ぴったりに描かれています。これが成り立つのは、line-heightが1の等幅フォントの場合だけです。余分な行間を与えると行の間に細い隙間が現れ、プロポーショナルフォントを使うと縦線の位置がずれてしまいます。「罫線が崩れて見える」問題のほとんどは、このどちらかが原因です。
このブロックには、意図的な欠落が1つあります。Unicodeは細線・太線の斜線と細線の交差斜線は符号化していますが、二重線の斜線や太線の弧は収録していません。元のコードページにそれらが存在せず、このブロックは網羅性よりも互換性を優先して策定されたためです。太い丸角が必要な場合、それは存在しません——U+256DからU+2570までの4つの弧は、細線のみです。
これらの文字で描かれたゲーム
このサイトのボードはすべて、スプライトではなくUnicodeで作られています。ここに挙げるゲームは、上記の文字を使用しています。
よくある質問
罫線文字がきれいに揃わないのはなぜですか？
ほとんどの場合、フォントが原因です。これらの字形は固定幅のセルを前提としているため、プロポーショナルフォントでは縦線の位置がずれてしまいます。JetBrains Mono、Consolas、Menloなどの等幅フォントに切り替えてください。横方向は揃っているのに行と行の間に隙間がある場合は、line-heightを1に設定してください——余分な行間が縦線を分断させています。
罫線文字とアスキーアートの違いは何ですか？
アスキーアートは、ハイフンやパイプ、プラス記号といったASCIIの128文字で線を疑似的に表現するため、角は近似的で接合部も粗く見えます。罫線文字は、セルの端でぴったり接するように専用に設計された字形で、途切れることのない連続した線を実現します。しばしば混同されますが、罫線文字はASCIIではなくUnicodeです。
シンプルな表を作るにはどの罫線文字が必要ですか？
11文字です。4つの角（┌ ┐ └ ┘）、2つの辺（─ │）、4つのT字接合（├ ┤ ┬ ┴）、そして十字（┼）。どれほど大きな長方形のグリッドも、この11文字だけで組み立てられます。
細線と太線を混在させることはできますか？
できますが、接合用の文字を使う場合に限ります。太い縦線と細い横線が交わる場合は、U+2542のようにその組み合わせ専用に作られた字形が必要です。正しいパーツを使わずに太線と細線を直接つなげると、目に見える隙間ができてしまいます。上の「細線・太線の接合」グループに全種類が揃っています。
罫線文字はモバイルでも使えますか？
現行のあらゆるスマートフォンで表示されます——このブロックは古くから存在し、幅広く対応されています。注意点は、モバイルブラウザではデフォルトでプロポーショナルフォントが使われることが多い点です。デフォルトに任せず、等幅フォントを指定するCSSで囲んでください。そうしないと配置が崩れます。
罫線ブロックに丸角はありますか？
あります。U+256DからU+2570までの4つで、細線のみです。┌ ┐ └ ┘の代わりに使えば、細線の枠を柔らかい印象にできます。太線版や二重線版はありません——このブロックはコードページ437からその内容を受け継いでおり、そこには存在しなかったためです。
Support the arcade
ゲームを楽しんでいただけていますか？
UnicodeGamesは無料で、広告は一切なく、今後もそれは変わりません。コーヒー休憩が少しでも楽しくなったなら、恩返しをしていただけると助かります。
コーヒーを1杯おごるOne-off · No account needed · Handled by Buy Me a Coffee