質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

463閲覧

Bootstrap4でcssを外部ファイルにすると、背景画像がグレー一色になる。

asa_1

総合スコア10

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/02 00:47

編集2019/06/02 02:25

Bootstrap4を使用したサイトの、トップページに背景画像を使用中です。

<!doctype html> <html lang="ja"> <head> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <style type="text/css"> <!-- .jumbotron{ background: url("material/background.GIF") no-repeat center center; } --> </style> <body> <div class="container"> <div class="row bg-primary"> <div class="col-md-1"> <a name="top" href="index.html"><img class="float-left mt-1" src="material/logo.GIF" alt="ロゴ"></a> </div> <div class="col-md-11"> <h1 class="text-white ml-3">タイトル</h1> <p class="text-white text-right" >サブタイトル</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="btn-group-vertical btn-sm btn-block"> <div class="dropdown btn-block"> <a class="btn btn-outline-primary btn-sm btn-block" href="index.html">ホーム</a> <a class="btn btn-primary btn-sm btn-block" href="main/index.html">メイン</a> <a class="btn btn-primary dropdown-toggle btn-sm btn-block" id="dropdown4" data-toggle="dropdown" href="#">ドロップダウンメニュー4</a> <div class="dropdown-menu btn-primary btn-block" aria-labelledby="dropdown4"> <a class="dropdown-item" href="dropdown4/index.html">ドロップダウンメニュー4-1</a> <a class="dropdown-item" href="dropdown4/sub.html">ドロップダウンメニュー4-2</a> </div> </div> </div> </div> <div class="tate col-lg-9"> <div class="jumbotron"> <h3>本文</h3> <p class="col-md-2">文章</p> </div> </div> </div> <a class="badge badge-primary" href="#top" title="このページの最上部へ">&nbsp;PAGETOP</a> <hr class="bg-primary"> <p><a href="main/sitepolicy.html">サイトポリシー</a></p> <p>&copy;SINCE2007&nbsp;asa_1&nbsp;All&nbsp;Rights&nbsp;Reserved.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

上述の内容ですと想定通りとなります。

この記述からcss部分を削除し外部ファイルにすると、背景画像の部分が、グレーの塗りつぶしになってしまいます。
何故でしょうか?どこが誤っているのか分かりません。

ど素人の私に、どなたか御教示頂けないでしょうか?
よろしくお願い致します。

以下がcssの内容です。

<style type="text/css"> <!-- .jumbotron{ background-repeat: no-repeat; background-position: center; background-image: url("../material/background.GIF") } .tate{ writing-mode: vertical-rl; } --> </style>

以下は「切り出した」ファイルの内容です。

<!doctype html> <html lang="ja"> <head> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <div class="container"> <div class="row bg-primary"> <div class="col-md-1"> <a name="top" href="index.html"><img class="float-left mt-1" src="material/logo.GIF" alt="ロゴ"></a> </div> <div class="col-md-11"> <h1 class="text-white ml-3">タイトル</h1> <p class="text-white text-right" >サブタイトル</p> </div> </div> <div class="row"> <div class="col-md-3"> <div class="btn-group-vertical btn-sm btn-block"> <div class="dropdown btn-block"> <a class="btn btn-outline-primary btn-sm btn-block" href="index.html">ホーム</a> <a class="btn btn-primary btn-sm btn-block" href="main/index.html">メイン</a> <a class="btn btn-primary dropdown-toggle btn-sm btn-block" id="dropdown4" data-toggle="dropdown" href="#">ドロップダウンメニュー4</a> <div class="dropdown-menu btn-primary btn-block" aria-labelledby="dropdown4"> <a class="dropdown-item" href="dropdown4/index.html">ドロップダウンメニュー4-1</a> <a class="dropdown-item" href="dropdown4/sub.html">ドロップダウンメニュー4-2</a> </div> </div> </div> </div> <div class="tate col-lg-9"> <div class="jumbotron"> <h3>本文</h3> <p class="col-md-2">文章</p> </div> </div> </div> <a class="badge badge-primary" href="#top" title="このページの最上部へ">&nbsp;PAGETOP</a> <hr class="bg-primary"> <p><a href="main/sitepolicy.html">サイトポリシー</a></p> <p>&copy;SINCE2007&nbsp;asa_1&nbsp;All&nbsp;Rights&nbsp;Reserved.</p> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suama

2019/06/02 01:55

「切り出した」ファイルのソースを張っていただけますか? (css/stylesheet.css でしょうか) もしかしてコメントアウトの<!-- --> が残っているとかではないかと思いますが...。
guest

回答1

0

ベストアンサー

下記はHTMLの記法なので、CSSファイルには書いてはいけません。

HTML

1<style type="text/css"> 2<!-- 3 4--> 5</style>

投稿2019/06/02 04:01

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asa_1

2019/06/02 08:39

ありがとうございました。解決いたしました。 css外部ファイルには、これまで、ずっとご指摘の記述をしており、運良く何の問題も起きませんでした。 これを機に、正しくさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問