見た目の調整にスペースを使うのは辞めよう

スペース自体のサイズ調整は非常に困難

全角スペースは「日本語の文字ひとつ分」です。和文というのは基本が 等幅フォント (monospaced font) です(数字やアルファベットは除く)から、スペースも同じく等幅。従って文字ひとつ分。全角スペースは欧文にはありません。

では半角スペースはどうかというと、半角スペースというのは逆に日本語にはありません。そして フォント種によって横幅が様々 です。和文の等幅フォントに対し欧文の通常は プロポーショナルフォント (proportional font) で各アルファベットの幅は一定ではありません。

欧文にも等幅に属する「フォント種」は存在します。htmlやJSなどのソースコードを記すときによく用いられます。そしてモノスペースフォント(等幅フォント) は シングルスペースフォント (single space font) という名称も持っています。なんとなく意味は伝わりますよね。「スペースが文字一個分に相当する」というのが名称によって理解できます。

ソースコードは一文字が同じ大きさで示されたほうが視認性が高くなりますしカウントもしやすいので、等幅フォントでの表示が好まれます。とはいえ書物など一般ではプロポーショナルが用いられます。

プロポーショナル欧文の半角スペースがどのぐらいの大きさか、なんですが、そもそも一文字一文字がバラバラな大きさなわけで(笑)
半角スペースはフォント種によって様々で、大体 0.2em〜0.6em ではないかと思います。

emという単位

em というのは 相対単位 で 親要素へのフォントサイズ指定と同等で1em です。

「相対」というのは「基準にするものがある」という意味で、emが基準とするのは 親要素の文字の大きさ指定 です。

<div style="font-size: 18px;">
この文章は1emです。親要素と同じ18pxです。<br>
<span style="font-size: 1.2em;">この文章は1.2emです。親要素の1.2倍の同じ21.6pxです。</span>
</div>

半角スペースの横幅は em ですから、親要素のフォントの大きさ次第、そしてフォント種次第であるということですね。要するにここで大事なのは 半角スペースは常に一定の大きさなわけではない という点。もちろん全角スペースも「1em」ですからフォントの大きさに影響されますが、半角スペースは全角のそれ以上に扱いが難しいんですね。

よくあるスペースを用いた見た目調整の例

比較的よく目にするパターンとその解決法。

画像間の余白にスペース

この件については以下の記事を参照のこと。

レスポンシブテンプレートで画像を横に並べる方法

レスポンシブデザインテンプレートでの画像の横並べがちょっとコツが要るんですね (´・ω・｀) htmlコード的コツと併せて 思考のコツ も必要です。今回は画像の並列htmlソースコードをいくつか提案しようと思います。...

vanillaice000.blog.fc2.com

補足しますと、画像の width への% 指定は基準が 親要素の横幅 です。一方半角スペースの大きさの基準は 親要素のフォント指定 なのですから、別々ものもを参照して計算が上手く行くはずありませんよね。「全部足して(親横幅の)100%」を実現するときに基準となる親要素の横幅を参照しない半角や全角スペースがしゃしゃり出てしまえば計算自体が成り立ちません。

文章の位置揃えのための全角スペース

これは固定幅テンプレートの提供しかなかったブログサービスからのお引越し組さんに非常に多いです。一定の記事横幅、一定のデバイスでしか確認せずに作業をしていたことが明白。

記事の大体中央で揃ってますね。いわゆる センタリング というやつですけども。見えない部分を可視化すると以下のようになります。

赤い部位は 全角スペース です。全角スペースでもってテキストを右へ移動というか、本質は「見えない文字がテキストの左側に8個ある」ということなんですが。これスマートフォンから見ると以下のようになります。

意図したことを全く実現できていない。センタリングや右寄せというのはスペースで行うものではありません。

<div style="text-align: center;">中央揃え</div>

<div style="text-align: right;">右寄せ</div>

どこのブログサービスでもエディターのツールに文章の位置揃えぐらいは設備されているはずなので、もしかしたらガラケーからの投稿かもしれないなぁ、と思います。その場合はパソコンからは全くセンタリングになっていないわけで、なんだかもうめちゃくちゃな感じになっている(笑)

上記コードを利用した場合の結果は以下の通り。

見た目だけの問題ではないんですね。全角スペースというのは半角スペースと違い 文字として認識されます ので、例えば 音声読み上げ を行うとサンプルの場合は「すぺーすすぺーすすぺーす(… 8回繰り返し)かくごはいいかおれはできてる」となります(読み上げ機能の精度にもよります)し、音声読み上げとクローラーは情報の受け取り方がよく似ていますので、Googleの検索クローラーも同じように取得している可能性が高いです。「何故か検索結果に出てこない」「検索順位がひどく低い」などの結果を招くこともあります。というか基本的に テキスト中に全角スペースを多用するのはダメ です。それは寧ろ検索避けに使う手法です。
「りんご」でヒットせず「 り　ん　ご」でないとひっかからない、とかそういう感じ。

こういうのも多いですよ。

： の記号の位置を揃えるために全角を利用。全体像を大体中央に。

もうめちゃくちゃ。こういうときはめんどうでも table要素 などを利用しないと思い通りにはなりません。

<table style="margin: auto;">
<tr>
<td style="padding: 0; text-align: right;">開催日時：
<td style="padding: 0;">２０１９年１月１日
<tr>
<td style="padding: 0; text-align: right;">開催場所：
<td style="padding: 0;">xx県xx市　xxxxx体育館
<tr>
<td style="padding: 0; text-align: right;">出演：
<td style="padding: 0;">xxx, yyy, zzz
</table>

table要素のhtmlというのは非常にややこしいんですが、ボーダーが無い場合はここまで簡素化できます。ボーダーをつけようと思うと border border-spacing border-collapse border-spacing などのプロパティが必要になります。上記コードを利用した場合の結果は以下の通り。

「tableとかそんなん使えるわけねーだろ」「htmlとかCSSとか知ってる人ばっかじゃねーや」と思う方もきっといらっしゃいますね。そうなんです。htmlを知らないからスペースを使って見た目を整えようとするんです。そしてそれでは意図した結果にならないわけです。だからhtmlやCSSを知りたい、知ろうと思う んですYO

そしてこういったhtmlを書きたいと思えば FC2ブログの旧投稿画面が非常に役に立つ ということです。新投稿画面のデフォルトモード(WYSIWYG)ではコードが書けませんので、やってみたいなと思えば旧投稿画面を利用する。FC2ブログはこういうことができる(しやすい)ので一定の需要を保てているのだと思います。
* 新投稿画面にも「HTMLモード」はありますがリアルタイムプレビューが無いなど上級者向けです。

トップページやOGPも総崩れ

全角スペースで整形した文章が要約記事タイプのテンプレートのトップページでどのように掲載されるのか見てみましょう。

全角を用いた方はもうわけがわからない。ブログのトップページでこのように表示されるということは、SNSシェアやRSSなどもこの表示です。ブログトップの概要文がこのような(後者のような)表示になっていたら「あぁ、全角スペース使っとんやな」と思えば合ってます(笑)

まとめ

今回「全角スペース」が中心になりました。というのは、半角スペースというのは全角スペースと違い「文字」という捉え方ではありません。半角スペースは欧文に存在しており、「単語の区切り」を意味していますので、折返しの機会 になります。

折返しというのは、<br> というhtmlタグは「改行」を意味しますがこれは「任意改行」「意図的な改行」のことです。文章というのは画面内に収まらないと判断されると <br> が書かれていなくても自動で下の行へ移動しますよね。これを「折返し」と言います。

半角スペースは全角スペースには無いルールがあります。例えば「文頭のスペースは自動的に削除される」など。見た目を整形するのに都合の良いのは半角よりも全角のスペースなので、自ずと全角の利用が多くなるということです。

というわけで、スペースでの見た目の調整を行って良いことは何一つありません。「これこれこの見た目を実現したい」というのであればそれは「htmlやCSSを学ぶ機会」です。それか潔く諦める(笑)