ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ

リンク追加でデザインが崩れる例

テンプレートをカスタマイズする際に html専用エディターに内容を移してから行う方 と ブラウザ上(テンプレート編集画面)で直接行う方 とがいらっしゃいますよね。
ナビゲーションの崩れは html専用エディターを利用している場合は起こりません。
崩れるという方はまず間違いなくブラウザで作業を行っているはず。

私のテンプレートはほとんどの場合こんなhtml内容になってます。

<ul>
  <li><a href="URL">リンク1</a>
  <li><a href="URL">リンク2</a>
  <li><a href="URL">リンク3</a>
  <li><a href="URL">リンク4</a>
  <li><a href="URL">リンク5</a>
</ul>

実際はもう少し複雑になってますが、直接関わるのはこの部分です。
ここに追加リンクを設けようと思った場合以下の内容を追加しますよね。

<li><a href="URL">追加リンク</a>

前後内容と照らして <li> 以降をコピペしてURLとテキストを変更。
それ自体は合ってます。
問題は追加の仕方 = ペーストの仕方 です。

htmlソースコードは視認性の意味で入れ子の状態がわかるようにところどころインデントが行われています。
ブラウザ上での実際の様子はこんな感じ ↓
中ほどにリンクを追加してみます。

このレンダリング結果がどうなるかがコチラ ↓ 一見しただけでは気づかなかったりするんですが、これもう既に崩れてしまってます。
よく見るとブログタイトルの上部が隠れてる。
わかりやすいようにナビゲーションの縦幅が今どうなっているかの図示がコチラ ↓ 縦幅がこんなに大きくなっちゃった。
リンクテキストは上で揃ってるもんですから この状態になっていることに気づいていない 方もいらっしゃるんです (´・ω・｀)
特にナビゲーションに背景色が付いていない場合には縦幅の目視確認が難しいもんですから、気付かずそのまま放置してしまうことがあります。

どの部分が縦幅を増大させているかというと、コチラ ↓ 縦幅を大きくしているのは追加したリンクではなく、直前のリンク です。
htmlソースでいくと追加リンクの「上」に書いてあるリンクです。
これが何故起こるのかという説明が次章。

何故縦幅が大きくなったのか【原因】そして【対処】

それはみなさんがカスタマイズされる際に
htmlソースの頭出しを揃えるために 全角スペースを入力しているから です。

先程記したように、htmlソースはインデントが行われています。
リンクを追加する時に、前後リンクのhtml内容と見た目を揃えたいという理由で 全角スペース を入力してしまう方がとっても多いんです。
htmlソース内で全角使用が許されるのは日本語の文章を打ち込むときだけです。
それ以外では全角の使用は絶対ダメですYO (o'ω')
スペースに限らずアルファベットや数字も全角はダメ。必ず半角を利用してください。
htmlエディター使ってる、という方はこのあたり知っておかないとまともに作業できないはずですので、ブラウザでカスタマイズしてる人に起こるというのはそういう意味です。

htmlでの全角は「文字」として扱われますので、見えない文字が入ってるんだからそりゃ場所取ることになりますわね (´・ω・｀)

で、ブラウザ上でカスタマイズをされる方はhtmlソースの整いは考えない方が良いと思います。
こうで良いんです ↓ 寧ろこの方が良い。安全。
コードの見た目が整ってないと気になって仕方がない、という方はhtmlエディター事始めってことで良いんじゃないかしら。
カスタマイズをしょっちゅうやってるという自覚のある方はエディター使った方が絶対捗りますよ。

ここまでで原因と対処とがわかりましたので、ここからは 何故追加したリンクでなくその前のリンクが大きくなるのか の説明です。
htmlのことを知りたい・興味がある、という方はお読みください。
こういったことも無駄にはならない。寧ろ勉強になります。

inline-block値の特徴

リンクは大抵の場合 ul要素 としてマークアップされてます。
html5であればさらに nav要素 として周りが囲まれてます。
ul要素は必ず「子」として li要素 を内包しています。

<ul id="shopping-list">
  <li>りんご</li>
  <li>みかん</li>
  <li>牛乳</li>
  <li>たまご</li>
</ul>

リストってのはこういうのですよね。買い物リストとかさ。
上記html内容がレンダリング(描画)されるとこうです ↓

• りんご
• みかん
• 牛乳
• たまご

これが初期値です。CSSで何も操作していない状態。
見て頂くとわかる通り li要素は横には並びません。
でもナビゲーションって横並びでしょう？並ばせるために以下のようなCSSを書きます。

#shopping-list li {
  display: inline-block;
}

li要素のボックスモデル、displayプロパティの初期値は list-item で、blockと同じふるまいなんですね。
displayプロパティの値がblockの場合は横には並んでくれません。
そこで値を inline-block に変更します。
block(並ばない)の特徴とinline(並ぶ)の特徴を併せ持つ inline-block
blockは横に並びません。上下marginやpaddingが効きます。vertical-alignが効きません。
inlineは横に並びます。上下marginやpaddingは効きません。vertical-alignが効きます。
inline-blockは横に並びます。上下marginやpaddingが効きます。vertical-alignも効きます。

すごく便利そうに思えるinline-blockですが、普通の書き方をしたらぴったりくっつきません。

• あいうえお
• かきくけこ
• さしすせそ

横に並んでますが、隙間 が空いてますね。
こうした隙間があると 横幅計算が狂う 場面が出て来るんですね。
例えば横100%の中に5つの要素があるからそれぞれのwidthに20%を指定する、と。
20%が5つなのですからぴったり100%になるはずですが、実際には隙間ができますので100%を超えてしまいます。

隙間ができたhtml内容はこれです ↓

<ul>
  <li style="display: inline-block; border: 1px solid red;">あいうえお</li>
  <li style="display: inline-block; border: 1px solid red;">かきくけこ</li>
  <li style="display: inline-block; border: 1px solid red;">さしすせそ</li>
</ul>

至ってフツーですよね。htmlを書く時はこうしてソース内で改行を行なって見た目を整えるわけで、ほとんどの場合改行が描画に影響を与えることはありません。
もちろん今回の主題「全角の利用」は別として。

この隙間を無くすためには3つの方法があります。

方法① ソース内改行を行わない

<ul>
<li style="display: inline-block; border: 1px solid red;">あいうえお</li><li style="display: inline-block; border: 1px solid red;">かきくけこ</li><li style="display: inline-block; border: 1px solid red;">さしすせそ</li>
</ul>

inline-blockが指定されている要素は改行を行わずに横に続けて書く、と。
これってどうですか？テンプレートのナビゲーションhtmlがこんな風に書かれていたら、これだけでカスタマイズ難易度って上がってしまいますよね。
繋がっているだけでものすごくわかりづらいものになってしまいます。

方法② letter-spacingによる調整

ul {
    letter-spacing: -0.4em;
}
li {
    letter-spacing: normal;
}

親要素で文字間を詰め、子要素で引き戻す。
これは一歩間違えると文字同士が重なってしまいます。

方法③ 終了タグを書かない

<ul>
  <li style="display: inline-block; border: 1px solid red;">あいうえお
  <li style="display: inline-block; border: 1px solid red;">かきくけこ
  <li style="display: inline-block; border: 1px solid red;">さしすせそ
</ul>

末尾に付くはずの </li> を 書かない という方法です。
htmlルールとしては問題ありません。html要素のいくつかは終了タグを省略できるものがあり、li要素もそれにあたります。
私が取っている方法はこちらです。みなさんの「カスタマイズ」を考えた時にベターという私の判断です。

方法① のレンダリング ↓

• あいうえお
• かきくけこ
• さしすせそ

方法③ のレンダリング ↓

• あいうえお
• かきくけこ
• さしすせそ

どちらも同じく隙間が無くなりました。

li要素に終了タグを書かないとどうなるか

終了タグが省略された場合、ブラウザが補完を行います。
その「補完」がどのように行われるか、なんですけども。
そしてそれが「スペースが追加リンクでなくひとつ前のリンクに影響」の答えになります。

ブラウザが </li> を入れる場所は 次の <li> 要素の直前 です。
後続のli開始タグを見つけて、そのすぐ前にくっつけます。

<ul>
  <li style="display: inline-block; border: 1px solid red;">あいうえお
  </li><li style="display: inline-block; border: 1px solid red;">かきくけこ
  </li><li style="display: inline-block; border: 1px solid red;">さしすせそ
</li>
</ul>

こうですね。ということは、入力されている全角スペースは先行要素の後ろに含まれる ことになるわけです。

ま、そんな感じ (´・ω・｀)
htmlっておもしろいよねー。
というわけで以上です(ぇ？)