背景画像の反映と背景色が変更された要因が知りたいです

初め、こちらのコーディングをした際に
background-colorが反映されなかったですが、下記に変更したら（main-contentの中にdivを加えました）変わりました。

機械の読み込みでどこがどう変わり、反映されたのでしょうか？

また、background-imageが反応されません。
こちらも合わせてよろしくお願いいたします！

HTML
1コード
2<!DOCTYPE html>
3<html lang="en">
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/reset-html5.css">
10    <link rel="stylesheet" href="css/first-coding.css">
11</head>
12<body>
13    <header class="page-header">
14    <h1>はじめてのコーディング</h1>
15    </header>
16    <main class="main-content">
17        <div class="main-visual"
18        <P>コーディング学習をして、オリジナルサイトを作成しよう</P>
19        </div>
20    <section class="section__title1">
21    <h2>はじめに</h2>
22    <p>このサイトは、コーディング練習用のサイトです。
23        <br>HTMLやCSS、JavaScriptなどの言語を使って、<br>
24        Webサイトを「使える」状態にすることです。</p>
25    </section>
26    <section class="section__title2">
27    <h3>学習の心構え</h3>
28    <p>暗記しようとしない</p>
29　　<p>反復練習する</p>
30    <P>習得するまでコピペ禁止</P>
31    <P>1回で理解できなくても気にしない</P>
32    </section>
33    <section class="section__title3">
34    <h4>学習内容</h4>
35    </section>  
36    </main>
37</body>
38</html>
39
40```CSS
41コード
42/*共通項*/
43body{
44    width: 1440px;
45line-height: 24px;
46font-size: 16px;
47font-family: Yugothic;
48color: #333;
49
50}
51img{
52    width: 100%;
53    vertical-align: bottom;
54}
55
56.section__title{
57    text-align: center;
58    padding: 80px 0 
59    margin-bottom: 50px;
60    font-weight: bold;
61
62}
63.section__title h2, h3, h4{
64    color: #E47B12;
65    line-height: 4.5;
66    font-size: 30px;
67    text-align: center;
68}
69/*ヘッダーとヘッダーメイン*/
70.page-header h1{
71        background-color: #E47B12;
72        color: #fff;
73        text-align: center;
74        padding: 20px;
75        line-height: 1.0;
76}
77.main-visual{
78    background-image: url(images/kv-img.png);
79
80}
81
82.section__title1{
83    background-color: #E5E5E5;
84}
85.section__title2{
86    background-color: #F0F0F0;
87    
88}

m.ts10806

2021/03/20 10:46

前後比較が分かる情報提示されないと、なんとも。あとコードは全てマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

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

回答1件

ベストアンサー

初め、こちらのコーディングをした際に

background-colorが反映されなかったですが、下記に変更したら（main-contentの中にdivを加えました）変わりました。機械の読み込みでどこがどう変わり、反映されたのでしょうか？

ちょっとなにを言ってるのかわからないのだけども、
htmlファイルを変更して確認する際にリロードしたことにより、
適用されていなかったCSSが読み込まれただけだと思う。
※直接的な関係は考えづらい。というかほぼ関係ないはず。
※背景色とmain-contentはコード見る限り影響が無いように見えるから。

背景画像はパスが違ってるんじゃないかなぁ？
一般的にCSSフォルダとimagesフォルダの関係だと大体下のようにするかなぁと。
CSSフォルダとimagesフォルダは同じ階層にしてますか？

CSS
1background-image: url(../images/kv-img.png);

投稿2021/03/20 13:28

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

背景画像の反映と背景色が変更された要因が知りたいです

関連した質問