HTMLファイル、CSSファイルの基礎的な練習での行き詰まりです

CSSとHTMLで色についての基礎的なファイルを練習していますが、色を表示するころが出来ず行き詰まってしまいました。

【HTMLファイル】

<!docstyle html> <html> <head> <meta charset="UTF-8" /> <title> 色の指定方法について</title> <link rel="stylesheet" href=".style14.css" type="text/css" /> </head> <body> <h1>Color Values</h1> <div></div> </body> </html>

【CSSファイル】style14.css

body {
padding: 1% 25%;
font-family: sans-serif;
}
ul {
margin: 25px auto 0;
padding: 12px;

list-style-position: inside;
font-size:  1.5em;

}
li {
margin: 0;
padding: 15px;
border-bottom: none;
}

ul {
background-color: tomato;

【表示して欲しいのは、このような状態】

【表示されている状態】

学習を始めたてなので、単に見本を模写しているのですが、何か足りない所があるのでしょうか？お手数をおかけしますが、教えて頂けたら助かります。よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

まずHTMLを見てほしいのですが、<body>内は以下のようになってますね。

HTML
1<body>
2  <h1>Color Values</h1>
3  <div></div>
4</body>

<body>内には`h1`タグと`div`タグの2種類だけが存在しています。

次にCSSを確認するのですが、その前に説明です。
CSSは以下のように構成されています。

CSS
1スタイルをつけたい要素 {
2  スタイルの内容
3}

「スタイルをつけたい要素」が何かを書いたあとに{}というカッコの中にスタイルの内容を書く。
これがCSSの書き方です。
それを踏まえて掲示いただいたCSSコードを見直してみてください。

CSS
1body {
2  padding: 1% 25%;
3  font-family: sans-serif;
4}
5ul {
6  margin: 25px auto 0;
7  padding: 12px;
8
9  list-style-position: inside;
10  font-size:  1.5em;
11}
12li {
13  margin: 0;
14  padding: 15px;
15  border-bottom: none;
16} 
17
18ul {
19  background-color: tomato;
20}

この中で注目してほしいのが「スタイルをつけたい要素」が何になっているか、です。
「body」とか「ul」、「li」という要素が指定されていますが、これはHTMLのタグの種類を意味しています。

最初に確認したように、<body>内にはh1タグとdivタグの2種類しか存在しません。
なのでulやliに指定したスタイルはすべて意味のないものになっている状態です。

HTMLのコードに抜けがないか（ulタグやliタグが抜けていないか）、あるいはCSSに間違いがないか確認してください。
例として、HTMLを変更せずにトマト色を表示したい場合のCSSを提示しておきます。

CSS
1div {
2  height: 200px;
3  background-color: tomato;
4}

投稿2020/02/28 06:51

KimTom

総合スコア134

退会済みユーザー

2020/02/28 07:05

ご回答有難うございました。お陰様で希望する画面になりました。プラスアルファーのアドバイスでもできました！丁寧に教えて下さり、よくわかりました。本当に有難うございます。今のところ、ファイルを模写して作動を確認してHTMLやCSSに慣れようと思っている状態で、ここへきて行き詰まっていましたが、本当に助かりました。感謝いたします。

行動規範の内容に同意します