
前提・実現したいこと
テキストエディタAtomで、cssを表示させる。
質問内容:atomでhtml,cssのコードを作成しました。それをatom内で実行すると、htmlの表示は行われるのですが、cssは表示されません。
同じコードをprogateの練習画面で入力したところ表示されました。よって、atomに問題があることがわかりました。cssを適用させる方法、教えてください。
該当のソースコード
[index.html]
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sample</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="main"> <div class="main-inner"> <div class="main-title"> <h1>俺のチョイス</h1> </div> <div class="contents-left"> <div class="content-left"> <a href="http://orenokininarukoto.com/2019/05/05/hello-world/"><img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjkIKmIvM6NrRLYj1_3zVoMn4K8JGEPtXXin8bzhq2u3ipvXzb8A" width="150"></a> <p>ART</p> </div> <div class="content-left"> <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjkIKmIvM6NrRLYj1_3zVoMn4K8JGEPtXXin8bzhq2u3ipvXzb8A" width="150"> <p>MUSIC</p> </div> <div class="content-left"> <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjkIKmIvM6NrRLYj1_3zVoMn4K8JGEPtXXin8bzhq2u3ipvXzb8A" width="150"> <p>SKATEBOARD</p> </div> </div> </div> </div>[stylesheet.css]
.main{
width:100%;
height:500px;
background-image:url(https://assets.media-platform.com/gizmodo/dist/images/2017/04/170417blackhole3.jpg);
background-size:cover;
}
.main-title h1{
color:white;
text-align:center;
margin-bottom:60px;
}
.content-left{
color:white;
margin-left:30px;
margin-bottom:20px;
}
.content{
display:block;
}
.pic{
transition:all 1s;
}
.pic:hover{
opacity:0.2;
}
試したこと
atomでhtml,cssのコードを作成しました。それをatom内で実行すると、htmlの表示は行われるのですが、cssは表示されません。
同じコードをprogateの練習画面で入力したところ表示されました。よって、atomに問題があることがわかりました。cssを適用させる方法、教えてください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。