34文字・コピー無料
テキストのピクセル、ブロック要素
UnicodeのU+2580からU+259Fまでのブロックには、文字セルを決まった割合で塗りつぶす32種類の文字が収録されています——4段階の網掛け、8段階刻みの高さ、半分、そして四分割です。これによってテキストは、非常に低解像度のビットマップとして使えるようになります。ターミナルがプログレスバーやスパークライン、棒グラフをテキストだけで描けるのは、まさにこのおかげです。以下の文字はクリックでコピーでき、それぞれにUnicode名とコードポイントが記載されています。
網掛け
25%から100%（塗りつぶし）までの4段階の濃度です。色を使わずに奥行きや減光を表現するもっとも手早い方法です。
縦8分割
セルを下から上へ8段階で埋めていきます。スパークラインや棒グラフに使うセットです。
横8分割
セルを左から右へ8段階で埋めていきます——プログレスバー用のセットです。1セル分の解像度が8段階に細分化されます。
半分と四分割
4つの四分の1セルのあらゆる組み合わせです。1つの文字セルを2×2のピクセルグリッドと見なすと、これがそのすべて16通りの状態になります。
文字をクリックするとコピーされます。ダウンロードは発生しません——これらは画像ではなくテキスト文字です。
Unicodeブロック
- U+2580–U+259F ブロック要素
ブロック要素の使い方
横8分割でプログレスバーを作る
埋まっている部分は█で描き、端数のセルはもっとも近い8分割の文字で仕上げます。20文字分のバーが、20段階ではなく一気に160段階の解像度を持つようになるため、バーがカクカクせずになめらかに動きます。
縦8分割でスパークラインを作る
各データポイントを、最大値に対する割合に応じて▁▂▃▄▅▆▇█のいずれかに対応させます。グラフ全体が1行のテキストになり、コミットメッセージやログにそのまま貼り付けられます。
四分割を2×2のピクセルグリッドとして使う
16通りの四分割の組み合わせにより、1つの文字セルで4つの独立したピクセルを表現でき、縦横それぞれの実効解像度が2倍になります。テキストモードの画像レンダラーは、まさにこの仕組みで動いています。
テキストだからこそ、テキストとして色をつける
█は他の文字と同じようにCSSの`color`を受け取るため、棒グラフをCanvasも画像も使わずCSSだけで完全にスタイルできます。縦に隣接するブロック同士を接触させるには、line-heightを1に設定してください。
ブロック要素について
ブロック要素ブロックは、プレーンテキストがピクセルにもっとも近づいた形と言えます。各文字はセルの決まった割合——8分の1、4分の1、半分、あるいは全部——を塗りつぶすため、テキストを非常に低解像度のビットマップとして扱えます。4つの網掛け文字░▒▓█はコードページ437に由来し、グレースケールにまったく対応していないディスプレイでグラデーションやディザリングを疑似的に表現するために、何十年も使われてきました。
このブロックの中でも、地味ながら特に優れているのが8分割の文字です。セルを8つに細分化しているため、20列のターミナルに描かれたプログレスバーは、20段階ではなく160通りの状態を持てます。バーはガクガクと進むのではなく、なめらかに前進し、しかもそれをパイプでつないだり、ログに残したり、コピーしたりできるプレーンテキストのまま実現しています。現代のCLIのプログレスバーのほとんどは、U+2588とその7つの部分的な兄弟文字から作られています。
四分割の文字はさらに一歩進んで、1つのセルを2×2のグリッドとして扱い、オン/オフの16通りの組み合わせすべてを表現します。これにより縦横同時に解像度が2倍になり、ターミナル画像ビューアの基礎になっています。画像の2×2ピクセルのまとまりをそれぞれ四分割文字に対応させ、前景色と背景色を設定すれば、写真がテキストとして表示されます。
このサイトは、ブロック要素をゲーム描画の主要な素材として使っています。テトリスのブロック、ブロック崩しのパドルとブロック、迷路の壁、スネークの体は、すべてスプライトではなく█とその部分形から組み立てられています。だからこそ、どのゲームもページのアクセントカラーを引き継ぎ、どんなズームレベルでもくっきりと表示されます——文字だからこそ、文字と同じようにスケールするのです。
これらの文字で描かれたゲーム
このサイトのボードはすべて、スプライトではなくUnicodeで作られています。ここに挙げるゲームは、上記の文字を使用しています。
よくある質問
Unicodeのブロック文字でプログレスバーを作るにはどうすればいいですか？
完了した部分は█（フルブロック）で描き、残った端数はもっとも近い横8分割の文字（▏▎▍▌▋▊▉）で表現します。残りの余白はスペースか薄い網掛け░で埋めます。パーセンテージを8倍して余りを求めれば、正しい部分文字が選べます。
ブロック文字の間に隙間ができるのはなぜですか？
原因はline-heightです。ブロック文字は文字セルの端ぴったりに描かれるため、余分な行間があると行と行の間に横方向の隙間として現れます。line-heightを1に設定してください。もし列と列の間に隙間ができる場合は、フォントが等幅ではなくプロポーショナルになっています。
░ ▒ ▓と█の違いは何ですか？
同じセルの4段階の濃度を表しています。薄い網掛けはおよそ25%、中間の網掛けは50%、濃い網掛けは75%、フルブロックは100%の塗りつぶしです。テキストなので、この4つはすべてテキストカラーを引き継ぎます——つまり1色から見た目上4段階の明るさを作り出せます。
ブロック文字の色は変更できますか？
できます。ごく普通のテキスト文字なので、CSSの`color`、ターミナルのANSIカラー、エディタのテーマがそのまま適用されます。これこそが画像に対する最大の利点です。1つの文字がどんな色にも、どんなサイズにもなり、どのズームレベルでもくっきりとしたままです。
ブロック要素はどのフォントでも使えますか？
対応状況はほぼ普遍的ですが、品質には差があります。フォントによっては8分割のブロックがわずかに狭く描かれ、塗りつぶした部分に細い継ぎ目が見えることがあります。JetBrains Mono、Cascadia Code、DejaVu Sans Mono、Menloのような、ターミナル向けに作られた等幅フォントは端まできっちり描画するため、安全な選択肢です。
Support the arcade
ゲームを楽しんでいただけていますか？
UnicodeGamesは無料で、広告は一切なく、今後もそれは変わりません。コーヒー休憩が少しでも楽しくなったなら、恩返しをしていただけると助かります。
コーヒーを1杯おごるOne-off · No account needed · Handled by Buy Me a Coffee