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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

VScodeのCSSが適用されないので困っている

gori-mutyu
gori-mutyu

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0評価

0クリップ

81閲覧

投稿2020/03/29 06:42

編集2022/01/12 10:58

前提・実現したいこと

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> <!-- Jumbtron --> <div class="container-fluid"> <div class="row jumbotron"> <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10"> <p class="lead">A web hosting service allows individuals and organizations to make their website accessible via the World Wide Web. </p> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2"> <a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></a> </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> <!-- Two Column Section --> <div class="row padding"> <div class="col-md-12 col-lg-6"> <h2>If you built it...</h2> <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p> <p>Resize the browser window to see the effect.Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic.</p> <p>It can also display the web page differently depending on the screen size or viewing device.</p> <br> <a href="#" class="btn btn-primary">Learn More</a> </div> <div class="col-lg-6"> <img src="img/desk.png" class="img-fluid"> </div> </div> <hr class="my-4"> <!-- Fixed background --> <figure> <div class="fixed-wrap"> <div id="fixed"></div> </div> </figure> <!-- 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>

試したこと

コードの見直し

補足情報(FW/ツールのバージョンなど)

Bootstrapの練習

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344
kei344

2020/03/29 07:01

https://teratail\.com/questions/250121 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail\.com/help#delete-question https://teratail\.com/contact/input
gori-mutyu
gori-mutyu

2020/03/29 07:13

削除申請してきました。教えていただきありがとうございます。
tsubaki961
tsubaki961

2020/03/30 05:48

``` @import url\('https://fonts\.googleapis\.com/css\?family=Poppins:400,500,700'\); ``` 以下の文は同じhtmlファイルの中に記述されている形ですか? そうであればそもそもスタイルシートとして見なされていないことになってしまうのですが
gori-mutyu
gori-mutyu

2020/03/30 06:17

見直して修正したら適用されました。指摘していただきありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。