【CSSエディット】『＆nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整していて、『昔やらかしたままだったのに最近気づいた』内容について取り上げます。サイトを作っているとたまに使うことになる『＆nbsp;』。レイアウト上入っていると、不都合になる部分もありますし、改行タグについても同様。どういうことか、詳細にみていきましょう。

『＆nbsp;』とは？

今回ポイントになる『＆nbsp;』についでです。htmlファイルや、PHPでhtml出力部分などで見られる記号で、半角のスペースになっています。管理人が行っているWordPressサイトで、記事内に入れても、こんな感じでスペースを作ってくれますね。

実は『no break space』のことで、本来の意味は『改行をしないスペース』だそうです。『文字や単語の間隔をちょっと開けたい・でも改行が入るとイヤ』なとき使うのが、本来の意味に近いかもしれません。

■参考リンク・ノーブレイクスペース(wiki)
https://ja.wikipedia.org/wiki/ノーブレークスペース

『＆nbsp;』でレイアウト調整してはいけない理由～細かい調整が効かない・margin指定したのに反映されないなど

管理人のやらかし→スペースが入っているのを忘れており、marginをどんなに詰めてもスペース分は空く

そのスペースの件で、管理人がこのサイト上でやらかしてしまった(しかも最近気づいた)という、レイアウト調整上の問題があったので紹介します。

その場所がコレ。このサイトの一覧部分ですが、タイトル下部分の空白は、タイトル部分のmargin-bottomや、下メタ情報部分のmargin-topをどんなに詰めても変わりません。
理由は、『スペースになる＆nbsp;が、親要素の持つline-height:24pxで出力されている』からです。24px単位でしか調整できないのも、新しくここだけブロックにしてline-heightを設定するのも、ちょっとめんどくさくなりそうですよね。

対応方法→スペースは消してmargin・paddingなどで制御できると管理しやすい

そういうわけで、phpファイル（itiran.php・元が昔のstingerなのでこういうファイル名）のスペース出力部分をカットして、marginだけで対応できるようにしました。基本的な推奨方法はコレです。

改行タグ連発も同じ理由で避ける

同じ理由で、『改行タグ連発でスペース作るより、ブロック間marginの方が良い』も言えます。
例えば、行高さに余裕持たせるために『line-height』を『24pxとか2.5em』など広めに取ってしまうと、『一個改行タグ消して24pxとか2.5em単位で調整』みたいな、ざっくり調整しかできなくなるからです。

一時は『seo上よろしくない』と言われていた改行タグですが、現在のアルゴリズムから考えると『大量に改行タグを入れてスペース取っていると、逆に読みにくい』→『ユーザーがより読みやすい競合サイトを検索で見つけて、そちらに乗り換える』→『読みやすいライバルサイトが検索されるようになり、相対的に順位が下がる』みたいな処理がされていると予想しています（あくまで予想だよ）。

あとがき・まとめ

まとめるとこんなところでしょうか。特にリンク部分などは、『スマートフォン・タブレットなどで、少しmarginを取ってやっただけでミスタップが減り、押しやすくなる』みたいなところもあるので、細かい調整をできるようにしておくのが良いでしょう。
レイアウト調整に改行やスペースがある場合は、これを機に、CSS指定に切り替えてみてはいかがでしょうか。

また、『レイアウト調整に使うと不都合がある』というだけで、『改行や単語間のスペースがあったほうが、ユーザーが読みやすくなる』といった用途であれば、どんどん使って大丈夫です。