今年の夏こそ！スリムなNavbarでモテかわウェブサービスに

Bootstrap3のNavbarを使うとヘッダー領域が50px確保されます。
しかし、野暮ったい…。どのサイトを見ても、ページロゴとメニューとユーザー管理機能くらしか置いていないんだし、夏のビーチのお姉ちゃんのように、Navbarはキュッと締まっていた方がいいと思うんだ。

気になったので、手短なサイトのヘッダーを調べてみると、やっぱりヘッダーの高さは50pxより低く設定されている。
Hatena Blogのヘッダーは37px
JIRA/Bitbucketは40px
StackOverflowは32px（これは流石にやりすぎな気がスル）
Facebookは42px

ちなみに、ヘッダーが50pxより高くされているサイトもある。検索と閲覧が中心で、あまり画面内でコメントを書いたりしないサイトが多いようだ。
Githubは60px
Googleも60px
RubyGemsは75px

閑話休題。

僕は、bootstrap-sass v3.3で、夏のモテかわウェブサービスを実現すべく、高さ40pxの細いNavbarに挑戦してみた。

前提条件

bootstrapのnavbar（ヘッダー）の高さを細くするための設定を記しています。モテかわウェブサービスの作り方ではありません。
今回は、あらゆる端末での表示が 40px のNavbarを定義します。レスポンシブでも何でもないやっつけ仕事なので、真面目な仕事をする方はご注意ください。
最後に、環境は、Rails4でbootstrap-sass 3.3.5を使っています。

HTMLの設定

極々一般的な、html.erbのパーシャルです。

CSSの設定

CSSは以下の内容を追記しました。

"body"のpadding-topの45pxは、Navbarでbodyが隠れないようにするための措置です。今回はNavbarの高さが40pxの想定なので、Navbarとbodyがくっつかないように、5pxの余白をとって、45pxから始まるように指定しました。

".navbar"と".navbar-brand"のheightは、説明するまでもないと思います。Navbarの高さになります。

".navbar-brand" と ".navbar-nav > li > a"のpaddingですが、bootstrapの初期設定でline-height（行の高さ）が20pxに指定されているので、navbarの縦の長さの中心に文字列が表示される、つまり、（上の余白：10px）+（行の高さ：20px）+（下の余白：10px）= 40px  になるように、10pxづつ上下にpaddingを設定してあります。

終わりに

これで、細いNavbarができました。

世の中には凄い人がいるもので、navbarのカスタムクラスを作って、クラスの指定だけで高さを変更する方法がStackOverFlowに載っています。

僕はやっつけなので、ここまでやる必要は感じないけれど、レスポンシブに作ったり、複数人で開発するなら、こういう方法を採った方が分かりやすいですね。