Webで罫線素片を使って表や線図を等幅表示するためのフォント選択と設定

(1)iPadのSafariでは,標準等幅フォントのMenloやCourier Newを選択

(2)Firefoxなどでは,追加等幅フォントSource Han Code JPなどを選択

(3)メディアクエリでブラウザの種類を判別し,フォントの選定と設定を切換

 公開日:2025年07月16日(水)
 更新日:2025年08月02日(土)

Ⅰ 要旨

 表や線図は,NumbersやExcelなどの表計算アプリで作成する方法,PagesやWordなどのリッチテキストエディタアプリで罫線素片を使って作成する方法,テキストエディタアプリで罫線素片を使ってWebページを作成する方法とがあります;計算機能が不要なら,罫線素片を使って作成する方法が簡単です;Webページを作成する方法はアプリより汎用性があります;細線,太線,二重線などの罫線素片がUnicodeに含まれており,実用的な表や線図を作成できます;
 罫線素片を使って表や線図を作成するには,等幅表示するためのフォントの選択と設定が重要です;作成する表や線図に対応して,全角和文文字フォント,半角欧文文字フォント,全角罫線素片フォント,半角罫線素片フォントの各等幅フォントを選択します;そして,罫線がずれたり,途切れたりしないように,各フォントのサイズ,行間隔を設定します;
 iPadのSafariでは,標準で利用できる等幅フォントのMenloやCourier Newを選択します;全角和文文字フォントはHiragino Sansを使用します;Menloの全角和文文字と字体が同じでウェイトの種類が多いです;
 一方,Firefoxなどの多くのWebブラウザアプリでは,追加したフォントが使えます;iPadのPagesでも追加したフォントが反映されます;ネットから無料でダウンロード可能なSource Han Code JpやFirple Slimなどのすぐれた等幅フォントをiPadに追加します;MenloやHiragino Sansよりもすぐれたお気に入りの追加フォントでいろいろ特長のある表や線図を作成することができます;
 HTMLやCSSにメディアクエリを記述し,Safari向けフォント設定とFirefoxなど向けフォント設定を切換します;メディアクエリは,ウィンドウの幅と高さを判別するのが簡単でおすすめです;例えば,iPadのSafariは常にフルスクリーンの高さで表示させ,Firefoxなどはそれ以外で表示させることにします;2025年の秋にリリースされるiPadOS 26ではMacのようなマルチウィンドウになり,ウィンドウサイズをより細かく調整できるようになります;また,幅と高さを独立して調整できるようになります;フルスクリーンの高さかそれ以外かで切り換えるので,幅は自由に設定可能です;ウィンドウを横に2〜3個並べて表示することも可能です;また,アプリを閉じて再度開くと元のウィンドウサイズになります;ブラウザ全般ではChromeが人気のようですが,iPadのブラウザでは連携機能などでSafariが人気なので,こういった設定がおすすめです;
 メディアクエリは,Webページのフルスクリーン高さがWebブラウザアプリ毎にわずかに異なっているのを利用します;例えば,SafariはFirefoxより8csspx大きいです;判別に使用するのは幅と高さだけなので,HTMLとCSSだけで判別できます;高さが異なるのは,Webブラウザの上方にあるURLバーのデザインが各ブラウザ毎に異なるからです;Safariと,FirefoxやChromeなど多くのWebブラウザを判別できます;
 例えば,12.9インチiPad Proの場合,Safariのウィンドウの判別には,幅1366csspx,高さ896csspxと938csspxを使います;

Copyright ©︎ 2025-2025 Appli Ponto. All rights reserved.

Ⅱ 目次

Ⅲ はじめに

Ⅳ 研究の背景と目的

1. 研究の背景

 iPadを購入する前は,Windows(以降Winと略記)を使っていました;Winのメモ帳では,フォントを等幅のMSゴシックに設定することで,罫線素片を使って表や線図を簡単に作成することができました;メモ帳だけでなく,Turbp PascalやDelphiのエディタでも同様にできました;
 最近ではふだん使いがWinから使い勝手にすぐれたiPadになりました;Winはアプリ開発でDelphiを使うために必要なので所有していますが,現在ではほとんど使わなくなりました;
 iPadはWinよりもアプリが豊富なのですが,Winのメモ長と互換のメモアプリはありません;iPad純正のメモアプリは,いろいろ優れた機能がありますが,罫線素片を使ってきれいな表や線図を作成できません;半角欧文文字幅と全角和文文字幅が整数比からずれているからです;また,追加した等幅フォントを使用することができません;iPadで罫線素片を使って表や線図を作成するには,メモアプリではなくPagesを使う必要があるのです

2. 研究の目的

 本研究の目的は,iPadで罫線素片を使って表や線図を容易に作成できるようにすることです;

Ⅴ 研究の方法

1. 罫線素片を使った表や線図の作成

 罫線素片を使った表や線図を作成するには,等幅罫線素片フォント,等幅和文文字フォント,等幅欧文文字フォントを適切に選択することが必要です;
 FirefoxなどではiPadに追加した好みの等幅フォントが使えるのですが,iPadのSafariでは標準の等幅フォントのみを使用しなければなりません;このため,iPadのSafari向きとFirefox向きの両方について,フォントの選択と設定について検討する必要があります;

(1)罫線素片フォント
・罫線素片とは

 けいせんそへん【罫線素片,Box-drawing character】とは,罫線を文字の組み合わせで表記するために罫線を複数の部分に分解した文字のことです;
 細線,太線,二重線などの罫線素片がUnicodeに含まれており,実用的な表や線図を作成できます;

・罫線素片に使うフォント

 罫線素片の字体はフォント毎に異なります;また,全角と半角の両方があります;字体や全角,半角の異なる罫線素片を混在して使うと,罫線がずれたり途切れたりします;このため,作成する表や線図毎に罫線素片のフォントを一つ選んで使用する必要があります;

・全角罫線素片フォントHiragino Sansなどの選択

 iPadのSafariの標準ゴシック体のヒラギノ角ゴシックの欧文名称です;標準明朝体のヒラギノ明朝 ProNの罫線素片と同じ字体なので,都合の良いフォントを選択します;
 なお,二重線は半角で混在しての使用は難しいので,全角の太線や細線のみ使います;

・半角罫線素片フォントMenloなどの選択

 iPadのSafariの標準の欧文等幅フォントです;Courier Newも標準の欧文等幅フォントです;ウェイトが異なるので,好みのフォントを選択します;本文がヒラギノ角ゴシックでは,ウェイトが近いMenloとの相性が良いです;
 全角幅:半角幅=5:3ということになっていますが,実際には文字間隔がわずかに異なるのでフォントサイズの微調整が必要です;

(2)和文文字フォント
・全角和文文字フォントHiragino Sansなどの選択

 和文文字は全角のひらがなや漢字です;欧文文字と異なり,多くの和文文字フォントは等幅です;本文や見出しなどに使う好みのフォントと同じで問題ありません;例えば,Hiragino Sansの半角欧文はプロポーショナルフォントなのですが,全角和文は等幅フォントです;
 多くの和文文字フォントの文字間隔は同じなのですが,FirpleやFirple Slimだけは文字間隔が異なるのでフォントサイズの微調整が必要です;

(3)欧文文字フォント
・半角欧文文字フォントMenloなどの選択

 欧文文字は半角の英数字や記号です;等幅欧文文字フォントや,欧文文字が等幅のプログラミング向き等幅和文フォントなどを選択します;等幅欧文文字フォントはMenloやCourier Newなどがあります;等幅和文フォントはSource Han Code JpやFirpleなどがあります;

Ⅵ 研究の考察

Ⅶ 研究の結果

iPadのSafari向け等幅フォントの選定と設定

全角和文文字:<hg18>Hiragino Sans, 18px
全角罫線素片:<hg18>Hiragino Sans, 18px
半角欧文文字:
 全角幅:半角幅= 2:1=2.000 <m20>Menlo, 19.94px
 全角幅:半角幅= 3:2=1.500 <m18>Menlo, 17.95px
 全角幅:半角幅= 4:2=2.000 <m20>Menlo, 19.94px
 全角幅:半角幅= 5:3=1.667 <m15>Menlo, 14.95px
 全角幅:半角幅= 6:3=2.000 <m20>Menlo, 19.94px
 全角幅:半角幅= 6:4=1.500 <m15>Menlo, 14.95px
 全角幅:半角幅= 7:4=1.750 <m-->Menlo, --.--px
 全角幅:半角幅= 8:4=2.000 <m20>Menlo, 19.94px
 全角幅:半角幅= 8:5=1.600 <m-->Menlo, --.--px
 全角幅:半角幅= 9:6=1.500 <m18>Menlo, 17.95px
 全角幅:半角幅=10:5=2.000 <m20>Menlo, 19.94px
 全角幅:半角幅=10:6=1.667 <m15>Menlo, 14.95px
 全角幅:半角幅=11:7=1.571 <m-->Menlo, --.--px
 全角幅:半角幅=12:7=1.714 <m-->Menlo, --.--px
 全角幅:半角幅=12:8=1.500 <m18>Menlo, 17.95px
 全角幅:半角幅=13:8=1.625 <m-->Menlo, --.--px
 全角幅:半角幅=14:8=1.750 <m-->Menlo, --.--px
 全角幅:半角幅=15:8=1.750 <m-->Menlo, --.--px
 全角幅:半角幅=16:8=2.000 <m20>Menlo, 19.94px
          黄金比=1.618
┌───┬───┐
123456
├───┼───┤
1234567890
└───┴───┘
罫線素片は,等幅の半角フォントのMenloを選択
半角欧文文字:
全角幅:半角幅=5:3(=10:6)に設定の場合
┌─────┬─────┐
123456黄金比に最も近い→◎視認性や読解性が最も良好
├─────┼─────┤
│12345│67890│比の整数値が大きい→△全角半角混在には使いづらい
└─────┴─────┘
全角幅:半角幅=3:2(=9:6)に設定の場合
┌───┬───┬───┐
123456黄金比に近い→○視認性や読解性が良好
├───┼───┼───┤
│123│456│789│比の整数値が小さい→○全角半角混在に使える
└───┴───┴───┘
全角幅:半角幅=2:1(=12:6)に設定の場合
┌──┬──┬──┬──┬──┬──┐
黄金比から遠い→△半角の視認性や読解性が劣る
├──┼──┼──┼──┼──┼──┤
│12│34│56│78│90│12│比の整数値が最小→◎全角半角混在に使いやすい
└──┴──┴──┴──┴──┴──┘
全角罫線素片のフォントを選択
┌─┬─┐
│罫│線│Ume Mincho S3またはHiragino Mincho ProN
├─┼─┤
│素│片│
└─┴─┘
┌─┬─┐
│罫│線│Ume Gothic S4またはHiragino Sans
├─┼─┤
│素│片│
└─┴─┘
╓−−╥−−╖
║二║重║ Ume Gothic S4またはHiragino Sans
╟−−╫−−╢
║縦║線║ Ume Gothicは二重罫線が半角で間隔が狭いデザイン
╙−−╨−−╜
源頼朝
╟─ 大姫 Migu 1Mは婚姻関係を表す二重縦線に好適
北條政子

Ⅸ 研究の結論

Ⅹ 残された課題

Ⅻ 付録