Q&A
「同様の質問」とは何と「同様」なのでしょうか。また、HTMLは省略せずに提示ください。
###HTMLでstyle指定をすると正常に作動するのですが、CSSの外部ファイルを使うと、Navbarの左にどうしても余白が出来てしまいます。これはなぜですか？解決法と一緒に教えてください。簡単なことだとは思いますが、よろしくお願いします。
###該当のソースコード
HTML
1<html lang="ja"> 2 <head> 3 <title></title> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <link rel="stylesheet" href="navbar_style.css"> 9 <!-- Bootstrap CSS --> 10 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 11 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 12 <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css"> 13 </head> 14<body> 15<div class="container-fluid"> 16 <nav class="navbar navbar-expand-sm"> 17 </nav> 18</div> 19</body> 20</html>
###該当のソースコード
CSS
1.navbar{height: 50px; width: 100vw; position: fixed; top: 0px; left: 0px; background-color: #323232;}
###試したこと
CSSでポジション指定をして、left: 0px;にしたのですが、左に余白が出来てしまいます。left: -15px;だと自分が思っている位置に来るのですが、理由が分からず、できれば0pxで合わせたいので、教えてください。また、htmlでstyle指定をすると正常に作動しました。
###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrapの最新版を使用しています。
回答2件
0
ベストアンサー
該当のコードだけでは分からないんですが、おそらく外部CSSにするとダメって事であればbootstrapのCSSを読み込んでるより後に作成した外部CSSを読み込むようにすれば良いと思います。
.navbar自体はBootstrapで定義されているので、これで直ったのであればCSS等は基本「後で呼んだ物で上書きされる」という原則を覚えていて下さい。
投稿2018/01/07 03:12
総合スコア1614
0
「landy77」さんの回答が全てと思いますが、確認のために･･･
HTMLでstyle指定をすると正常に作動する
(1)このコードを提示して下さい。
(2)メタ部分<link rel="stylesheet" href="navbar_style.css">の読込順を最終にする。および、CSSファイルの階層位置の確認。
(3)提示のCSSファイルは「navbar_style.css」の内容すべてですか？
上記の回答があれば、皆さんから、より良い回答が得れると思います。
投稿2018/01/08 03:17
総合スコア3523
あなたの回答
tips
プレビュー
