質問: CSSとHTMLで色についての基礎的なファイルを練習していますが、色を表示するころが出来ず行き詰まってしまいました。 【HTMLファイル】 色の指定方法について Color Values 【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; 【表示して欲しいのは、このような状態】 ![エリアを定めて色の表示を見たい](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b3f5863605a97e89e425f16afa432a95.png) 【表示されている状態】 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/cd8b42c4eee637d996c45136ce955a0b.png) 学習を始めたてなので、単に見本を模写しているのですが、何か足りない所があるのでしょうか?お手数をおかけしますが、教えて頂けたら助かります。よろしくお願いいたします。
回答: まずHTMLを見てほしいのですが、内は以下のようになってますね。 ``` Color Values ``` 内には`h1`タグと`div`タグの2種類だけが存在しています。 次にCSSを確認するのですが、その前に説明です。 CSSは以下のように構成されています。 ``` スタイルをつけたい要素 { スタイルの内容 } ``` 「スタイルをつけたい要素」が何かを書いたあとに`{}`というカッコの中にスタイルの内容を書く。 これがCSSの書き方です。 それを踏まえて掲示いただいた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; } ``` この中で注目してほしいのが「スタイルをつけたい要素」が何になっているか、です。 「body」とか「ul」、「li」という要素が指定されていますが、これはHTMLのタグの種類を意味しています。 最初に確認したように、内には`h1`タグと`div`タグの2種類しか存在しません。 なので`ul`や`li`に指定したスタイルはすべて意味のないものになっている状態です。 HTMLのコードに抜けがないか(`ul`タグや`li`タグが抜けていないか)、あるいはCSSに間違いがないか確認してください。 例として、HTMLを変更せずにトマト色を表示したい場合のCSSを提示しておきます。 ``` div { height: 200px; background-color: tomato; } ```