Q&A
https://teratail.com/questions/250121 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input
前提・実現したいこと
CSSを適用させたいのにもかかわらず、反映されなくて困っているので助けてほしい
発生している問題・エラーメッセージ
CSSにbackgroud-colurなど打ち込んでも、反映されない
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width", initial-scale=1> <title>Complete Bootstrap 4 Website Layout</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdm.com/Bootstrap/4.0.0/css/ bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/ popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/ bootstrap.min.js"></script> <script src="https://use.fontawesome.com/release/v5.0.8/js/all.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"> <div class="container-fluid"> <a href="#" class="navbar-brand"><img src="img/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Service</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Connect</a> </li> </ul> </div> </div> </nav> <!-- Image Slider --> <div id="slides" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#slides" data-slide-to="0" class="active"></li> <li data-target="#slides" data-slide-to="1"></li> <li data-target="#slides" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/background.png"> <div class="carousel-caption"> <h1 class="display-2">Bootstrap</h1> <h3>Complete Website layout</h3> <button type="button" class="btn btn-outline-light btn-lg">VIEWDEMO </button> <button type="button" class="btn btn-primary btn-lg">Get Started </button> </div> </div> <div class="carousel-item"> <img src="img/background2.png"> </div> <div class="carousel-item"> <img src="img/background3.png"> </div> </div> </div> <!-- Welcome Section --> <div class="container-fluid padding"> <div class="row welcome text-center"> <div class="col-12"> <h1 class="display-4">Built with ease</h1> </div> <hr> <div class="col-12"> <p class="lead">welcome to my Bootstrap 4 Website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs. </p> </div> </div> </div> <!-- Three Column Section --> <div class="container-fluid padding"> <div class="row text center padding"> <div class="col-xs-12 col-sm-6 col-md-4"> <i class="fas fa-code"></i> <h3>HTML5</h3> <p>Built with the latest version of HTML,HTML5.</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <i class="fas fa-bold"></i> <h3>Bootstrap</h3> <p>Built with the latest version of Bootstrap,Bootstrap 4.</p> </div> <div class="col-sm-12 col-md-4"> <i class="fab fa-css3"></i> <h3>CSS3</h3> <p>Built with the latest version of CSS,CSS3.</p> </div> </div> <hr class="my-4"> </div> <!-- Emoji section --> <button class="fun" data-toggle="collapse" data-target="#emoji">click for fun </button> <div id="emoji" class="collapse"> <div class="container-fluid padding"> <div class="row text-center"> <div class="col-sm-6 col-md-3"> <img class="gif" src="img/gif/panda.gif"> </div> div class="col-sm-6 col-md-3"> <img class="gif" src="img/gif/poo.gif"> </div> div class="col-sm-6 col-md-3"> <img class="gif" src="img/gif/unicorn.gif"> </div> div class="col-sm-6 col-md-3"> <img class="gif" src="img/gif/chicken.gif"> </div> </div> </div> </div> <!-- Meet the team --> <div class="container-fluid padding"> <div class="row welcome text-center"> <div class="col-12"> <h1 class="display-4">Meet the Team</h1> </div> <hr> </div> </div> <!-- Card --> <div class="container-fluid padding"> <div class="row padding"> <div class="col-mg-4"> <div class="card"> <img class="card-image-top" src="img/team1.png"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">John is an Internet entrepreneur with almost 20 years of experience. </p> <a href="#" class="btn btn-outline-secondary">See Profile</a> </div> </div> </div> <div class="col-mg-4"> <div class="card"> <img class="card-image-top" src="img/team2.png"> <div class="card-body"> <h4 class="card-title">Mary Jo</h4> <p class="card-text">Mary is a designer with almost 10 years of digital design experience. </p> <a href="#" class="btn btn-outline-secondary">See Profile</a> </div> </div> </div> <div class="col-mg-4"> <div class="card"> <img class="card-image-top" src="img/team3.png"> <div class="card-body"> <h4 class="card-title">Phil Ho</h4> <p class="card-text">Phil is a developer with over 5years od web development experience.</p> <a href="#" class="btn btn-outline-secondary">See Profile</a> </div> </div> </div> </div> </div> </body> </html> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700'); html,body { height: 100%; width: 100%; font-family: 'Poppins' ,sans-serif; color:#222; background-color:blue; } navbar { padding: .8rem; } .navbar-nav li{ padding-right: 20px; } .nav-link{ font-size: 1.1rem !important; } .carousel-inner img{ width: 100%; height: 100%; } carousel-caption{ position: absolute; top: 50%; transform: translateY(-50%); } /*---Media Queries --*/ @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 576px) { } /*---Firefox Bug Fix --*/ .carousel-item { transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-backface-visibility: visible; backface-visibility: visible; } /*--- Fixed Background Image --*/ figure { position: relative; width: 100%; height: 60%; margin: 0!important; } .fixed-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #fixed { background-image: url('img/mac.png'); position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } /*--- Bootstrap Padding Fix --*/ [class*="col-"] { padding: 1rem; } /* Extra small (xs) devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap Small (sm) devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } Medium (md) devices (tablets, 768px and up) @media (min-width: 768px) { ... } Large (lg) devices (desktops, 992px and up) @media (min-width: 992px) { ... } Extra (xl) large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } */
試したこと
コードの見直し
補足情報（FW/ツールのバージョンなど）
Bootstrapの練習
削除申請してきました。教えていただきありがとうございます。
```
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
```
以下の文は同じhtmlファイルの中に記述されている形ですか？
そうであればそもそもスタイルシートとして見なされていないことになってしまうのですが
見直して修正したら適用されました。指摘していただきありがとうございました。
自己解決
