Q&A
> 反映されません。
どのように反映されないのでしょうか？
CSSが全て効かないのでしょうか？
それと、ソースコードはコードブロックをお使いください。
```html
ここにソースコード
```
と、
```css
ここにソースコード
```
の形式です。
質問は編集できますので、本質問にて修正を行ってください。
HTMLにcssでデザインを付けていますが、反映されません。
コード入力を間違えているのでしょうか？
添削お願いします。
※初心者のため、できる限りわかりやすく解説していただけるとありがたいです。
【HTML】
</body> </html></ul> </nav> </div> </header> <div class="container"> <h2>自己紹介</h2> <div class="profile"> <p>〇〇です。<br>頑張ります。</br> <hr> <p>1991/7/2</p> <p>o型</p> <p>蟹座</p> </div> <footer> <p>©2021 Risa</p> </footer>
【CSS】
*{
margin:0;
padding:0;
}
header{
background-image:url(../CSS/img/OIP.jpg) ;
background-size:cover;
}
#icon{
width: 100px;
border: solid:blue;
border: redius 50px;
}
#myname{
color: blue;
font-size:40px;
font-weight: bold;
text-shadow 2px 2px 1px black;
}
nav{
background-color: crimson;
nav ul list-style: {
display:inline;
margin:0 15px;
}
回答4件
0
ベストアンサー
表示させているHTMLと同じ階層にcssというフォルダがあり、その中にstyle.cssがある状態で間違いないでしょうか？
これが違う場合コードを書き換えたりファイルの場所を移動したりが必要です。
大文字小文字の区別も必要な場合がありますのでご注意を。
また、コードにもいろいろとミスがあります。
ある程度直しましたが漏れがあるかも。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>自己紹介ページ</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <header> 14 <div class="top"> 15 <img src="http://placehold.jp/150x150.png" id="icon"> 16 <span id="myname">里紗</span> 17 <!-- 以下3箇所target="_blank"の「"」と「_」不足" --> 18 <nav> 19 <ul> 20 <li><a href="#">Home</a></li> 21 <!-- <li><a href="https://dotinstall.com/home"target=blank">ドットインストール</a></li> --> 22 <li><a href="https://dotinstall.com/home" target="_blank">ドットインストール</a></li> 23 <!-- <li><a href="https://～/"target=blank">〇〇</a></li> --> 24 <li><a href="https://～/" target="_blank">〇〇</a></li> 25 <!-- <li><a href="https://dotinstall.com/home"target=blank">ドットインストール②</a></li> --> 26 <li><a href="https://dotinstall.com/home" target="_blank">ドットインストール②</a></li> 27 </ul> 28 </nav> 29 </div> 30 </header> 31 <div class="container"> 32 <h2>自己紹介</h2> 33 <div class="profile"> 34 <p>〇〇です。<br>頑張ります。</p><!-- </br>ではなく</p> --> 35 <hr> 36 <p>1991/7/2</p> 37 <p>o型</p> 38 <p>蟹座</p> 39 </div> 40 </div><!-- <div class="container">が閉じられていなかったので追加 --> 41 <footer> 42 <p>©2021 Risa</p> 43 </footer> 44 45</body> 46 47</html>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6header { 7 background-image: url(../CSS/img/OIP.jpg); 8 background-size: cover; 9} 10 11#icon { 12 width: 100px; 13 /* border: solid:blue; */ 14 border: solid blue 1px; /* 任意の太さで */ 15 /* border: redius 50px; */ 16 border-radius: 50px; 17} 18 19#myname { 20 color: blue; 21 font-size: 40px; 22 font-weight: bold; 23 /* text-shadow 2px 2px 1px black; */ 24 text-shadow: 2px 2px 1px black; 25} 26 27nav { 28 background-color: crimson; 29 /* nav ul list-style: { */ 30 display: inline; 31 margin: 0 15px; 32} 33 34nav ul { 35 list-style: none; 36}
投稿2021/04/09 00:02
編集2021/04/09 00:11
総合スコア3235
0
idの前に半角スペースが必要
html
1<img src="img/OIP.jpg"id="icon">
borderの書き方が間違ってる。太さの指定が無いし形状と色の間の：は要らない。
border-radiusの書き方が間違ってる上に誤字。
CSS
1#icon{ 2width: 100px; 3border: solid:blue; 4border: redius 50px; 5}
text-shadowの：が抜けてる。
css
1#myname{ 2color: blue; 3font-size:40px; 4font-weight: bold; 5text-shadow 2px 2px 1px black; 6}
navの記述の閉じカッコがない。
list-style:というセレクタが不自然、カッコの中に入れてあげて。
※list-style:none;としたいのかな？
css
1nav{ 2background-color: crimson; 3nav ul list-style: { 4display:inline; 5margin:0 15px; 6 7}
他にもあるかもしれないけど自分で探してみてくださいね。
以下蛇足です。
ドットインストールならコピペで動くコードがあると思う。
差分のチェックもできたはず。
基礎が全くできていないからココで尋ねるよりも、
ちゃんとドットインストールを利用して欲しいかな。
あのサイトは真面目に取り組めば基礎レベルなら余裕でクリアできるから。
投稿2021/04/09 00:06
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
