Q&A
bootsrapというものは存在しません。
決まっているものの名前は正確に記載し、使用言語も含めてバージョンを記載してください。
「読み込めない」にも状況が色々とあるので正しく現状を伝えてください。
前提・実現したいこと
stylesheetが読み込めません。
htmlとstyle.cssは同じ階層にあります。
bootsrapのフレイムワークも使用しています。
どなたか教えて頂けると助かります。
よろしくお願いいたします。
該当のソースコード
html <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ユーザートップ</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <main> メイン </main> <footer> フッター </footer> </body> </html>
style.css main{ background:pink; }
補足情報（FW/ツールのバージョンなど）
開発環境 XAMPP
使用言語 html,css,php
コードブロック内にファイル名を含めないでください。
「コピペでそのまま再現確認ができる」が原則ですが本当にファイル名のような文字列が入っているのか単なる補足なのかは他者にはわかりません。
デベロッパーツール等で<main>要素に、どのCSSが適用されているかを、確認してみてください。
回答3件
0
再現しません。
上記は提示のコードからコードブロック内の「html」「style.css」だけを除いたものです。
もっと「どういう挙動を想定しているのか」「起きている現象は何なのか」
具体的に記載する必要があるのではないでしょうか。
単に「自分で入れたいCSSが効かない」だけなら、正しく配置したファイルを正しく読み込んでいる場合は先に添付した画像のように効いてます。
「読み込めない」かどうかはもっと色々な検証をする必要があります。
外部CSSを利用している場合に「CSSが効かない」には主に3種類あります。
その3種類のどれであるか、1つ1つ検証を行って問題の切り分けをしてください。
- CSSファイルのパスが合っていない、破損している
- CSSの構文が間違っている
- 別の指定で上書きされている
1.CSSファイルのパスが合っていない、破損している
指定されているように背景色は確かに問題切り分けには有効な手段ですが本当に「読み込めてない」なら
ブラウザの開発ツールのコンソールに「NotFound 404」のエラーが出ているはずです。
つまり「読み込めてない」のはこの404エラーを確認してようやく言えることです。
Chromeであればソース表示から外部ファイルがリンク表示になっていてクリックで直にアクセスできますのでアクセスして表示されるしないを確認してください。
2.CSSの構文が間違っている
全角が混じっていたり（空白も）、クラスとIDとタグがごっちゃになっていたり階層が違ったりスペルミスだったり。
これについては構文チェックにかけるのが最も早いです。
W3C CSS 検証サービス
これでNGが出ていない ＝ 用意したCSSを使えていない or 実現したい指定ができてない
だと思いますので、見直してください。
基本は「用意したCSSを使う」です。先にCSSを正してHTMLに反映します。
もしCSSファイルに「style.css」や別の指定があってそこが間違えていればもちろん効きません。
3.別の指定で上書きされている
CSSは基本的に後勝ちです。
!importantの指定などがない限りは後に書いたものが有効になります。
BootstrapのCSSをきちんと見てみれば分かります。
minでは読みづらいでしょうから、https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.cssのほうで。
もし自身が適用したいタグが既にあれば上書きしているということになります。
自身が入れたいのはmainタグへの背景色なんでしょうが、Bootstrapのmainタグへの指定は下記のみです。（コード内を「main」で検索）
css
1article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 2 display: block; 3}
つまりこれで「上書きされている」は消えました。
確かにBootstrap本体ではbodyに対してbackground-color: #fff;が指定されてはいますが、
mainタグはbodyよりもより内部の要素なので実は影響を受けていません。
pink以外の色を指定してみても反映されていました。
カラーネームではなくもっといろいろなカラーコードを試してみてください。
それか、背景色だけではなく文字のサイズ入れてみるとか、https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.cssに入っていない指定を追加して試せばわかるでしょう。
つまり
1,2いずれかである可能性が高い ということですね。
確認の仕方はすでに書きましたので、「自身がどういう結果を想定しているか」も含めて調整してください。
ただ、「上書き」という原則がある以上、フレームワークよりも前に自身のCSSを読み込ませるのは決して賢明とは言えないでしょう。
今回はmainに指定していますが、bodyに指定していたら上書きの原則により効きませんからね。
すでに出ている回答のように読み込ませる順番を変えるのが第一歩です。
（もちろん直接の原因は読み込ませる順番ではないのでこれだけでは解決しないと思いますが）
1つ忘れてました。 4.キャッシュ
スーパーリロードを試したり、クエリストリングつけたりして、キャッシュクリアを試してください。
投稿2019/06/28 23:15
編集2019/06/28 23:49総合スコア80875
0
bootstrap.min.cssで上書きされて白になっているため
順序を下記に変えれば直ります。
html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 2<link href="style.css" rel="stylesheet" type="text/css" media="all">
投稿2019/06/28 12:01
総合スコア2939
別途検証しましたが、そこじゃないみたいですね。
読み込ませる順番は大事なのでこの回答は参考にすべきと思います。
0
/を付けてみてください。
html
1<link href="/style.css" rel="stylesheet" type="text/css" media="all">
投稿2019/06/28 11:31
総合スコア245
あなたの回答
tips
プレビュー
