文字列の位置を揃える

文字列の位置を揃える　　（安倍）

メールやホームページで下記のようなちょっとした表を作成する場合、上下の文字列が半文字程度ズレて位置が揃わず苦労することがある。
これはスペースの幅や文字の字体（フォント）の幅が文字によって違うからです。　例えば下の例は、文字が上下で位置が揃っていません。　半角スペースで調整しても殆どの場合揃いません。

　　　　　　　　　　　　　　　　　　グロス　　　　　ネット
　　優勝　　　　青柳三郎氏　　　　96　　　　　73.2
　　準優勝　　中曽根康氏　　　85　　　　　74.2
　　３　位　　　谷　啓氏　　　　　　90　　　　　74.4

・下の赤文字の揃い方を比較してください。
・画面幅を変えて表示を比較してください。

　通常表記

Windows標準のフォント(MSPゴシック)では、ひとつひとつの文字幅は違います。
MSPの「P」はProportional という意味で、文字外観を優先して文字の大きさは統一されていません。
例えば「V」と「W」は文字幅が違いますから、下記のように同じ数の文字を並べても後ろは揃いません。

　V V V V V　本日は晴天なり。
　W W W W W　本日は晴天なり。

この例で分かるように、通常の表記では文字列をキレイに揃えるのは困難です。　全ての文字幅が同じフォントもありますが、その場合はフォントの種類は限られます。
また、画面右端で自動改行されますから画面幅によってレイアウトは変化します。　

　対策-1)　フォント指定した表記

フォントを MSP ゴシック → MS ゴシックに変えることにより、文字幅は統一されて文字列は揃います。ただし文字のバランスは通常表記に比べるとよくない。

　V V V V V　本日は晴天なり。
　W W W W W　本日は晴天なり。

　対策-2）　プリフォーマット表記

HPビルダーでは「ベタ書き」と言います。ソースコードに　<pre>・・・</pre>　が挿入されるか、point指定になります。
対策-1）と同じく、文字列の位置は揃うし外観も似ています。　そして、1）と違ってフォントの制約もありません。　しかし、編集画面での表記はズレが生じ事前チェックはできない。

　 V V V V V　本日は晴天なり。 
　 W W W W W　本日は晴天なり。
  
この緑色行もプリフォーマット表記です。　このプリフォーマット行は自動改行されません。画面幅を縮小してこの緑色行を他と比較してください。

http://www.tohoho-web.com/html/pre.htm

　対策-3)　表を利用した表記

下の例は、２行２列の表の枠内に文字を入れ、セル枠幅をゼロにして表を非表示にした表記です。

0	V V V V V	本日は晴天なり。
	W W W W W	本日は晴天なり。

右側の「本日は晴天なり」の文字列の位置は揃いますが、左側の文字列は末尾が不揃いのままです。

この枠内の文のように、ピクセル指定の表幅の表枠の中に文章を入れると画面幅が狭くても自動改行されずにレイアウトは保持されます。　しかし、Netscape 旧Versionなど、ブラウザの種類によっては幅が自動縮小され表内のレイアウトは崩れる場合があります。

　対策-4）　画像表記(究極の方法)

下の赤文字はテキスト文でなく、画像です。（赤文字範囲内を右クリックすると「名前をつけて画像を保存する」のメニューが現れるので画像であることが分かります）。

右側の「本日は晴天なり」の文字列も、左側の文字列も位置が揃っています。　しかも、1）2）と違って文字サイズのバランスもＯＫです。

このように、文章を画像に変換すれば、レイアウトは自由にできるし、表幅が広い場合でもブラウザの種類による表示の違いはなくなります。
しかし、画像表記は極めて面倒なうえ、いったん画像にしてしまうと、画像ソフトがないと文字の変更はできないし面倒です。

　冒頭に書いたゴルフスコアの位置をそろえる

フォント変更で文字位置をそろえた例：　

　　　　　　　　　　　　　　　　　　　　　　　 グロス　　　　　ネット
　　優勝　　　青柳三郎氏　　　　　96　　　　　73.2
　　準優勝　　中曽根康氏　　　　　85　　　　　74.2
　　３　位　　谷　啓氏　　　　　　90　　　　　74.4

プリフォーマットでそろえた例：

　　　　　　　　　　　　　　　グロス　　　ネット 
　　優勝　　　　青柳三郎氏　　　　96　　　　　73.2 
　　準優勝　　　中曽根康氏　　　　85　　　　　74.2 
　　３　位　　　谷　啓氏　　　　　90　　　　　74.4

表を使って文字位置をそろえた例：　

		グロス	ネット
優勝	青柳三郎氏	96	73.2
準優勝	中曽根康氏	85	74.2
３　位	谷　啓氏	90	74.4

　　　　　　｜　ホームページ作成体験に戻る　　｜　