中央揃いのナビゲーションメニュー - WEBデザイナーを目指して。

気づけばもう１０月で、今年も残り３ヶ月。早いですね。時の流れ早い怖い。
就活とか大学の研究室とかもいい加減考えなきゃいけない時期ですね・・・気が重いです・・・_(：3 」∠)_

まぁ、新卒での就職が厳しそうなので、今のところの目標は卒業後WEBデザイナーのバイトで経験積んでから就職という形なんですが・・・・・・新卒で就職したかったなぁ(´・ω・`)

さておき。今回の内容ですが、今のこのブログでも使っている、横並びで中央揃えになっているナビゲーションメニューのつくり方について書いていきます。思い出そうとして危うい部分もあったりなかったりですし、改めて調べると新たな発見があったりしたので、まとめていこうと思います。

ナビゲーションメニューの形

そもそもナビゲーションメニューというと大体どのサイトにも見られますけど、その形というか形式はどこも結構違いますよね。背景色や罫線、影付けなどなど・・・

その形式の違いとして、横並びの場合に、メニュー内の項目を左（右）に揃えるか中央に揃えるかという選択肢があります。（縦並びでもそうかもしれませんが・・・

そのサイトのデザインや運営してる方の考え方によって変わるので、どちらの方が良いというわけもなく、どちらの揃え方でもメニューを作れるようにはするべきだと思うのですが、当然どちらもコードの書き方は大きく異なります。

この書き方、左揃えの場合では単純にfloatでメニュー内のリストのボックスを左に順々に積んでいくだけでいいのですが、メニュー中央揃えの場合には少し一手間加える必要があります。

中央揃えメニューを作る方法

先ほど言った通り、中央揃えで横並びのナビゲーションメニューを作る場合、左揃えの様に単にfloatで並べていくという方法は使いません。

displayプロパティで横並びに

具体的なコードは、下の様になります。ここでは、navというid名のナビゲーションメニューを横並び中央揃えにしています。

#nav ul {
width: 100%;

padding: 0;

list-style-type: none;

text-align: center;
}
#nav ul li {
display: inline-block;　/* メニューを横並びにする */

line-height: 100%;
}

これで横並び中央揃えのナビゲーションメニューが一応出来ます。

要は、displayプロパティでリストの項目をインラインブロック要素にする事によって、メニューの項目を回り込ませて横並びにしている感じですね。また、文字を中央にする為にtext-alignでcenterを指定しています。

余計な空白を削除する

上記のコードで横並び中央揃えのナビゲーションメニューができるわけですが、実際にやってみると一つ問題が起きます。

背景色を加えるとよく分かるのですが、メニューの項目間に余計な空白ができてしまっています。これは、先ほどメニューの項目をインラインブロック要素にした事が原因となっています。

何故かというと、「HTMLでボックスをインライン要素にしている部分を改行すると、その改行した部分に空白が挿入されてしまう」という特性があるからです。

要はHTMLをいじってli要素の改行を無くし、一行内に収めれば解決する話ではあるのですが、メニューの項目が多い場合は一行にすると見づらくなりますし、そもそもはてなブログではHTMLを編集する事はできませんので、どの道私の場合はこの方法を取れませんでした。
ほかの方法として、改行した前後の部分にコメントアウトをはさんで、改行をしていても無理やり一行ということにする事もできます。

<ul>

<li>項目１</li> <li>項目２</li><li>項目３</li>

</ul>

こうすれば見やすさはあまり変わらず空白を削除できますが、これもやはりHTML編集ができないはてなブログでは不可能でした。

それでは結局どうやったのかという事ですが、CSSで文字の間隔を調節するプロパティのletter-spacingを使いました。

.nav ul {
letter-spacing: -6px; /*空白を消す*/
}
.nav li {
letter-spacing:normal; /*文字の間隔を戻す*/
}

ulのletter-spacingの値は適宜調節してください。liに宣言したletter-spacing:normal;は、ulの設定で文字の間隔が縮まって文字が重なってしまうので、その間隔を戻すための設定です。

こうすることで、CSSだけで改行分の余計な空白を削除する事ができました。

ただ、後から調べたのですが、どうやらこの方法にも問題があるようです。
というのも、このletter-spacingで値を指定すると、ブラウザ毎に値の解釈が違う為に、使うブラウザによってはうまくいかない場合があるみたいです。

これに代わる別のCSSでの手段として、ul内でfont-sizeを0pxに設定し、li内でfont-sizeを元の指定したい値にしなおすという方法があるようです。文字のサイズを0pxにすることで、空白も0pxにして無くす事ができるわけですね。

.nav ul {
font-size: 0;/*空白を消す*/
}
.nav li {
font-size: 15px; /*任意の値に戻す*/
}

こちらの方法なら、ブラウザ毎の値の解釈の違いに悩まされる事もなさそうです。後で私も書き直しておかなきゃいけませんね・・・

この中央揃えのナビゲーションメニューについて調べ直してみて再確認しましたが、やはり同じ事について書いていても内容が異なる事が多いですね。最初見つけたサイトでは、font-sizeプロパティでの方法は書いてませんでしたし・・・

何かしらの方法について調べる時は、一つを見つける事ができたとしても、そこから更にもう少し調べてみるという事も大事なのかもしれませんね_(：3 」∠)_