スペースキーで文章を整えようとすると上手く揃わない
ブログやページの記事を入力する時に、スペースキーを使って改行位置をコントロールしたり、一行目と二行目で開始位置を揃えることはよくあると思います。
でも頑張って揃えたのに、他の人のパソコンやスマートフォン、ホームページブラウザなどのホームページを見る環境が変わると、思った通りに揃わない事はありませんか？
WordやExcelなどの印刷物であれば、印刷する前にしっかり整えておけば紙面上では変化が起こりませんが、ホームページの場合は表示させる仕組みの違いや、パソコンが持っているフォント、見ているホームページブラウザの横幅などの環境に影響される部分が多く出てきてしまいます。
これは見る人にとって見やすい環境で表示させることのできるWebの利点であり、記事の発信者にとっては不便な部分です。
スペースキーは1文字分しか認識されない
スペースを入れるには半角と全角の2種類がありますよね。半角はアルファベットなどの半角文字1文字分、全角はひらがな、カタカナ、などの全角文字1文字分のスペースを入力することができます。
一見すると、全角半角の組み合わせで問題なく揃うように思いますが、実際はパソコンや書体によってスペースや全角、半角の文字が異なる場合があります。
また、ホームページの場合では半角スペースはどれだけ連続して入力しても1文字分しかスペースが空きません。
なので思う様にそろえる事ができないんですね。
「半角スペースを連続して入力しても1文字分にしかならない」という事について納得できませんが、ホームページの表示を行うHTMLを基準に考えると、少し分かりやすくなります。
ホームページを表示させるためのHTMLと呼ばれる言語の場合、半角スペースはタグを見やすくするために使われたり、タグの一部として使われます。
もしも全ての半角スペースが認識されてしまったなら、思わぬ部分でスペースが大量に入ってしまうことになるので、ページの表示が大変なことになってしまいます。
改行についても同様で、もしもHTML上での改行を全て表示に反映させてしまったなら、思わぬ部分で大量の改行が入ってしまう事になるので、ページデザインがひどいことになる事は想像できるかと思います。
半角スペースや改行が全て反映されてしまうとしたら、HTMLを改行などを一切なくして、全てを続けて一行で書かなければならなくなってしまうでしょう。
ページに表示させる文字については全角かなや半角英数字を使えますが、HTMLには主に半角英数字が使われます。
主に英数字を使って書かれるHTMLを順番に探して、どこからどこまでの記述がどのコンテンツなのかを探す作業にとても時間がかかるようになってしまうので、制作や運営がとても大変なものになってしまいます。
実際にどういった問題が起こるのか
WordやExcelの感覚で文字を入力してみるとすぐにわかりますが、いくつか例をあげてみます。
ホームページを制作していて、この辺りは困りそうだなと思うものを3つ考えてみました。
1.右寄せの行を作ったときに位置がおかしくなる
文章を作成して、最後に名前や社名を入れる場合、ビジネス文章だと右寄せにして書いたりしますよね。
その表現がWebページでは難しくなります。
例えば、「完全に右に寄せて文字を入力できない」「画面幅が変わると位置が大きくずれる」といった点が問題になりそうです。
右寄せにするにはCSSを使って、「text-align:right;」をつかうようにしましょう。
2.画面幅が変わった時に表示がおかしくなる
主にスマートフォンやタブレットを意識したマルチデバイス対応をしているページに当てはまります。
それはスペースを使って無理やり改行をする時に、画面幅の広い・狭いに影響されてしまうからです。
もしもタブレットの幅で文字が改行されるように整えたとしても、スマートフォンの幅になると横幅が大きく変化しますよね。
狭くなった分、文字が押し出されてしまうので、改行位置がおかしなことになってしまいます。
こうなってしまっては、せっかく整えた意味が無くなってしまいます。
なので改行はbr要素を使いましょう。またHTMLタグを入れることのできない場合は改行を妥協するか、改行を必要としない文章を考えて入れてください。
3.金額など、英数字を使った複数行が揃わない
半角スペースはどれだけ入力しても、1文字分しかスペースが空かないので、整える作業が難しくなります。
理論的には全角は半角2個分になりますが、実際に入力してみると微妙に揃わない事がほとんどです。
また、こちらも表示させる画面幅が変わると1行に収まる文字数も変わるので、揃える事が難しくなります。
この例では微妙なズレですが、気になる人は気になる部分ですね。
また、文字数が変わればその分ズレも大きくなるので、スペースを入力して位置を揃えるには難しい場合があります。
無理せずtable要素を使って配置するようにしましょう。
まとめ
・半角スペースはどれだけ連続して入力しても1文字分しか認識されない
・スペースを使って文章を整えると一見して綺麗に見えるが、見る環境によっては改行位置がおかしなことになる
・無理せずtable要素やCSSを使ってホームページを整えてデザインするようにする
