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

                    更新: 2021/02/23   1909文字

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

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

『 』とは?


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

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

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

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

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


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

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


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

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



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

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

あとがき・まとめ

  • html特殊文字の&nbspは、本来の意味はno break space
  • スペースや改行タグでボックス間を開けるみたいなレイアウトは、CSSで細かい調整が効かないので非推奨(line-heightの値に決まってしまうなど)
  • ボックス間はmarginやpaddingなどの方が、細かい調整もできるしラク

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

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - CSS, webサイト制作関連
【タグ】 - , ,

  関連記事

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点
【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法
baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン
自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)
スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現