謎の■マーク出現20150909

２０１５年９月９日

今まではタブレット端末のNexus7(2013)で、otosan pageを見ると、指定したつもりが全く無いはずの、不思議な■が表示されていました。

これは最近分かった事ですが、Ieで見ている限り全く見えません（ソースを見ない限り指定していることすら分からない）。スペースとしての効果はちゃんと出ていますからデザイン上全く問題にしていませんでした。ところが、OSをandroidにすると解釈されず、単に四角い点に置き換わりそれが表示されてしまいました。これは前後の文字に色を指定すると、■は文字色に変わっていることからテキストとしての■表示と思われます。

この四角い点（■）は、androidでは丸見えになっていました。 今まで知らずに使用して来ましたが、遅ればせながらこれに気が付き、otosan pageを修正しました。

今回の現象はPC版Google Chrome・FireFox・Safariでは、全く表示に変化なく、意思通りの表示がされていて、全く発見できませんでした。あくまでもandroidタブレット端末での話です。

PC版でhtmlをRWD化後、簡易試験で効果を確認するのに、インターネット画面を左原点に合わせて、マウスで左右へ強制的に伸縮させてみる方法を使いますが、この方法では■マークは現われません。

今回使った「 」は辞典等文献で調べると、「non-breaking space」の略であり、本来の使い方は、「改行されない空白文字（半角スペース）」作成が目的で、結果として自動改行禁止の空白となります。その為字下げする時などに使われます(ただし、解釈しないブラウザもあります)となっていました。

HP作成時には、複数のスペースを連続して使いたい場合があります。ワープロソフトなら、スペースキーなどで必要なだけ空白を入れれば良いですが、この方法ではウェブページが希望通り反映されない場合があります。

HTMLソース中に書かれた半角のスペース・改行等は、いくつ連続していても「1つの空白」として解釈されてしまうようです。

しかし文字実体参照の「 」を連続して書けば、空白文字が連続して表示されるため便利なこともあり、今までは無意識で多用していましたが、今後は使い分けして行きたいと思います。

  今回問題であるとした場所の実例

1. iconとotosan pageの距離を半角分空けたいため使用していた。→positionで指定しても良かったが、もっと簡単な半角英数字モードでのスペースキーの使用で対策しました。
2. サブタイトルの中で、一行分ではない部分的な文字間隔の確保に使用していた。→上記と同じにスペースキー使用で対策した。
3. blog記事と共通(そのもの)であることを記号と色分けで識別するのに、文字間隔を空けた方が良いとの判断で使用していた。→この場合は記号ｂと■へ続けての表示の方が、更に分かり易くなり識別する効果は大きいと思われる為、この部分については全て修正せず(意識して)このまま使うことにした。
4. 使用例画像で見えていない部分についても、スペースを使用し■に変わった部分がありましたが、その他は全て修正する事にしました。

  Google Nexus7(2013)で確認する

 写真はクリックするとlightboxで拡大表示します。「」ボタンのクリックで連続表示します。

1 【ポートレートモードで見た従来のもの】緑○印6ヶ所。

2 【ポートレートモードで見た改善後のもの】。

3 【ランドスケープモードで見た従来のもの】緑○印6ヶ所。

4 【ランドスケープモードで見た改善後のもの】。