1. FumiyaMizuguchi

    Posted

    FumiyaMizuguchi
Changes in title
+BootstrapでNavbarにロゴ画像をいれるとズレる問題の解決法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,34 @@
+<img src="http://media02.hongkiat.com/twitter-bootstrap/twitter-bootstrap.jpg" style="border:none;">
+
+Bootstrap使ってますか??エンジニアとってデザインがぐっと楽になるBootstrapは使ってる方も多いと思いますが、Navbarに画像を入れると下に偏った配置になるんだけど、、、
+という声がどこからか聞こえてきたので、今回はその解決法を紹介します。
+
+## つかうもの
+- [Twitter Bootstrap3](http://getbootstrap.com)
+
+## 問題点
+
+Bootstrapのnavbarのheaderに
+`<a class="navbar-brand" href="#">Brand</a>`
+こんな記述がされていると思うのですが、ここにロゴ画像を埋め込めばいいじゃん!
+ということで
+`<a class="navbar-brand" href="#"><img src="logo.png"></a>`
+と記述しても上手くいきません。画像が下寄りに配置され、navbarからはみ出したりしてしまいます。
+
+## 解決法
+
+画像を放り込まないで、aタグの背景にせっていしてあげると上手くいきます!
+`<a class="navbar-brand" href="#"></a>`
+そして、cssで
+
+```css
+.navbar-brand {
+ background: url("logo.png") no-repeat left center;
+ background-size: contain;
+ height: 50px;
+ width: 250px;
+}
+```
+
+これで上手くいくはずです♪
+お疲れさまでした^^