読者です 読者をやめる 読者になる 読者になる

New-Village

月間ブログ。だいたい1カ月に1回は更新しているようです。

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

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

f:id:New-Village:20150705121114p:plain

気になったので、手短なサイトのヘッダーを調べてみると、やっぱりヘッダーの高さは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に載っています。

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