今年の夏こそ!スリムな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に載っています。
僕はやっつけなので、ここまでやる必要は感じないけれど、レスポンシブに作ったり、複数人で開発するなら、こういう方法を採った方が分かりやすいですね。