背景の長さと画像の反映について

ドットインストールのホームページ作成の練習について質問です。

<section class="voices">のところの背景と<section class="call-to-action orange-bg">のところの背景が横幅が短くなってしまいました。また、<section class="voices">のところの画像が反映されません。自分でなぜだか発見できず、お教え頂けませんでしょうか。よろしくお願いいたします。 ```HTML コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dotinstall Paneを使ってみよう </title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header class="orange-bg"> <div class="container"> <h1>Dotinstall Pane</h1> <p> ドットインストールを見ながら<br> コーディングができるAtomパッケージ </p> <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a> <img src="img/top.png" width="480" height="270" alt="Dotistall Paneの画像"> </div> </header> <section class="features"> <div class="container"> <h1 data-subtitle="- Features -" class="section-title">Dotinstall Paneの特徴</h1> <section class="feature"> <img src="img/feature1.png" width="420" height="270" alt="特徴1"> <div class="desc"> <h1>すごい特徴があるよ！</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="feature"> <img src="img/feature2.png" width="420" height="270" alt="特徴2 "> <div class="desc"> <h1>すごい特徴があるよ！</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="feature"> <img src="img/feature3.png" width="420" height="270" alt="特徴3"> <div class="desc"> <h1>すごい特徴があるよ！</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="voices"> <div class="container"> <h1 data-subtitle="- Voices -" class="section-title">利用者の声</h1> <div class="flex"> <section class="voice"> <img src="img/use1.png" width="90" height="90" alt="利用者A"> <h1>利用者A</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</P> </section> <section class="voice"> <img scr="img/use2.png" width="90" height="90" alt="利用者B"> <h1>利用者B</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</P> </section> <section class="voice"> <img scr="img/use3.png" width="90" height="90" alt="利用者C"> <h1>利用者C</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。 </P> </section> </div> </div> </section> <section class="call-to-action orange-bg"> <div class="container"> <h1 class="section-title">Dotinstall Paneを使ってみよう！</h1> <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a> </div> </section> <footer> <p>© dotinstall.com</p> </footer> </body> </html> ``` ```CSS コード body { font-size: 16px; font-family: Verdana, sans-serif; color: #333; margin: 0; }

.container {
width: 820px;
margin: 0 auto;
padding: 60px 0;
}

.orange-bg {
color: #fff;
background: url(../img/bg.png);
background-size: cover;
}

.section-title {
text-align: center;
font-weight: normal;
font-size: 24px;
margin-bottom: 60px;
margin-top: 0;
}

.section-title::after {
content: attr(data-subtitle);
display: block;
font-size: 16px;
color: #aaa;
padding-top: 10px;
}

.btn {
display: inline-block;
width: 290px;
background: #fff;
color: #f39800;
text-align: center;
text-decoration: none;
padding: 8px 0;
border-radius: 5px;
opacity: 0.9;
}

.btn:hover {
opacity: 1.0;
}

/* header */

header h1 {
margin-top: 0;
font-weight: normal;
font-size: 36px;
margin-bottom: 8px;
}

header p {
margin-top: 0;
margin-bottom: 50px;
}

header .container {
position: relative;
}

header img {
position: absolute;
bottom: 0;
right: 0;
}

/* features */

.feature h1 {
font-weight: normal;
font-size: 18px;
}

.feature .desc {
width: 360px;
}

.feature:nth-of-type(odd) .desc {
float: right;
padding-left: 40px;
}

.feature:nth-of-type(even) .desc {
float: left;
padding-right: 40px;
}
.feature:not(:last-child) {
margin-bottom: 60px
}

.feature {
overflow: hidden;
}

/* voices */

.voices {
background: #f8f8f8;
}

.voices .flex {
display: flex;
justify-content: space-between;
}

.voice {
width: 250px;
background: #fff;
position: relative;
box-sizing: border-box;
padding: 60px 40px 25px;
}

.voice img {
border-radius: 50%;
border: 10px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -55px;
}

.voice h1 {
text-align: center;
font-size: 18px;
font-weight: normal;
}

.voices .section-title {
margin-bottom: 95px;
}

/* call-to-action */

.call-to-action {
text-align: center;
}

.call-to-action .section-title {
margin-bottom: 15px;
}

/* footer */

footer {
padding: 40px 0;
text-align: center;
color: #aaa;
}

![イメージ説明](6140f9011ce239194e61828e3525c988.png)
ここの利用者の声とDotinstall Paneを使ってみよう！のところ背景の長さを下記headerと同じ長さにしたいです。
![イメージ説明](2bdc1ffbecc38cc66a33b9914c8ea49c.png)

liveasnotes

2018/08/27 09:56

コメント付きのスクショとかあると状況把握しやすいです（画像のデータはHTML,CSSには反映されない：表示されないので）

liveasnotes

2018/08/27 10:00

仕様的には問題ないのですが，</P>は</p>にしといた方が良いです．環境によっては正常に閲覧できない可能性があります

liveasnotes

2018/08/27 10:03 編集

あと，現状を説明するだけでなく，どのようになれば良いのかを教えてください．「横幅が短くなってしまった」だけでは，逆にどこまで広がれば良いのか？という点は伝わりません

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

回答3件

ベストアンサー

<section class="features">とその直下の<div class="container">の分の</div>、</section>が抜けています。
インデントを意識すると閉じタグの抜けに気がつけます。

利用者の画像が出ないのは<img src=を<img scr=とスペルミスしてるからです。

下記のコードで確認してみてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Dotinstall Paneを使ってみよう </title>
6    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
7    <link rel="stylesheet" href="css/styles.css">
8  </head>
9  <body>
10    <header class="orange-bg">
11      <div class="container">
12        <h1>Dotinstall Pane</h1>
13        <p>
14          ドットインストールを見ながら<br>
15          コーディングができるAtomパッケージ
16        </p>
17        <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a>
18        <img src="img/top.png" width="480" height="270" alt="Dotistall Paneの画像">
19      </div>
20    </header>
21
22    <section class="features">
23      <div class="container">
24        <h1 data-subtitle="- Features -" class="section-title">Dotinstall   Paneの特徴</h1>
25        <section class="feature">
26          <img src="img/feature1.png" width="420" height="270" alt="特徴1">
27          <div class="desc">
28            <h1>すごい特徴があるよ！</h1>
29            <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
30          </div>
31        </section>
32        <section class="feature">
33          <img src="img/feature2.png" width="420" height="270" alt="特徴2">
34          <div class="desc">
35            <h1>すごい特徴があるよ！</h1>
36            <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
37          </div>
38        </section>
39        <section class="feature">
40          <img src="img/feature3.png" width="420" height="270" alt="特徴3">
41          <div class="desc">
42            <h1>すごい特徴があるよ！</h1>
43            <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
44          </div>
45        </section>
46      </div><!-- /.container　これが抜けてる -->
47    </section><!-- /.features　これが抜けてる -->
48
49    <section class="voices">
50      <div class="container">
51        <h1 data-subtitle="- Voices -" class="section-title">利用者の声</h1>
52        <div class="flex">
53          <section class="voice">
54            <img src="img/use1.png" width="90" height="90" alt="利用者A">
55            <h1>利用者A</h1>
56            <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</p>
57          </section>
58          <section class="voice">
59            <img src="img/use2.png" width="90" height="90" alt="利用者B">
60            <h1>利用者B</h1>
61            <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</p>
62          </section>
63          <section class="voice">
64            <img src="img/use3.png" width="90" height="90" alt="利用者C">
65            <h1>利用者C</h1>
66            <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</p>
67          </section>
68        </div>
69      </div><!-- /.container -->
70    </section><!-- /.voices -->
71
72    <section class="call-to-action orange-bg">
73      <div class="container">
74        <h1 class="section-title">Dotinstall Paneを使ってみよう！</h1>
75        <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a>
76      </div>
77    </section>
78
79    <footer>
80      <p>&copy; dotinstall.com</p>
81    </footer>
82  </body>
83</html>

（aとかimgの改行が気になったのでそこも手直ししてあります。）

前回、前々回の質問でも閉じタグについて指摘されていたのですね。
HTMLは基本的にタグを入子状にしていきます。
一部閉じタグを省略することもできますが、わかりづらくなるので基本的には一対で書くようにしてください。（imgやhr等は別として）

投稿2018/08/28 05:19

編集2018/08/28 05:41

dit.

総合スコア3235

kikoko09

2018/08/29 13:06

そうなんです。いつも閉じタグをどこかで忘れてしまっております・・・。一対で書くように意識したいと思います。また、分かりやすくコード等修正頂きありがとうございます。ご指摘通りしましたところ、解決しました。

dit.

2018/08/30 00:17

「なぜだろう」とのコメントが他の方の回答についてたので…。 .containerにwidth: 820px;が指定されていますよね。修正前はそれを閉じていた</div>が無かったためその子要素（になってしまっていた）.voices以降も横幅が820になっています。そこから抜け出して（閉じて）やれば820の縛りが無くなります。 CSSが効いていなかったとか、指定が悪かったというよりは、「書いたまま」実行されてました。閉じタグ抜けがよくあるようでしたらHTML LINTや自動成型ツールをうまく活用してください。「この部分にどのCSSが効いているのか」を調べるにはブラウザの検証やデベロッパーツールで。 imgタグやaタグ内で改行するのもトラブルの元ですのでやめておいた方が良いと思います。

kikoko09

2018/08/30 15:33

丁寧に解説頂きありがとうございます！いろいろ調べるツールがあるんですね。使ってみようと思います＾＾ imgタグやaタグ内で改行することがトラブルの元になるなんて知りませんでした。勉強になります。ありがとうござます。

dit.

2018/08/31 00:02

タグ内改行についてはどこかに資料があるわけでもないですし、質問に提示してあったくらいの改行をIE、Chrome、Firefoxで確認しても普通に動作しているので現状は問題ないですが可能性として。（半角スペースで区切るところであれば改行しても大丈夫そうという記載は見たことありますが）変な解釈をするブラウザが無いとも言い切れないのと、この程度の長さなら1行にしても可視性が悪くなるとは思いませんでしたので念のための指摘です。

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

問題となっているであろう部分のスクショ（2018/08/27 19:10）
※.orange-bgにbackground: orange;，.voicesにbackground: red;を追記している

画像が表示されないのは，パスが間違っているだけなのでは？
（use1.pngは，実はuser1.pngでしたみたいな）

「短くなってしまった」は，ビフォーアフターの差分が不明なので回答不能

投稿2018/08/27 10:10

編集2018/08/27 10:11

liveasnotes

総合スコア1284

kikoko09

2018/08/28 04:44

コメント付きのスクショとかあると状況把握しやすいです仕様的には問題ないのですが，</P>は</p>にしといた方が良いです >>助言頂きありがとうございます。知らないうちに大文字にしてしまっておりました・・・。気をつけます。現状を説明するだけでなく，どのようになれば良いのかを教えてください．「横幅が短くなってしまった」だけでは，逆にどこまで広がれば良いのか？という点は伝わりません >>こちらに関しては、説明不足で申し訳ございません。 headerの背景の長さと同じにしたかったのに短くなってしまいました。

kikoko09

2018/08/28 04:46

画像が表示されないのは，パスが間違っているだけなのでは？（use1.pngは，実はuser1.pngでしたみたいな） >>こちら全くその通りでした。単なる凡ミスですね。でもなぜか利用者Aの画像しか反映されなかったのが疑問ですが。ご指摘頂きありがとうございました！

liveasnotes

2018/08/28 06:23 編集

>ぜか利用者Aの画像しか反映されなかった元のテキストに，user2.pngとかuser3.pngとかありませんでしたか？（use1.pngの件は単なる例示です） →dit.さんの指摘：「src」が「scr」になっている，とのこと

liveasnotes

2018/08/28 05:06

あと，閉じタグ抜け（</div>と</section>？）がまだあるようなので，インデントを整えて，コードを修正しておいてください幅に関しては，私が載せたスクショを見ればわかると思いますが，背景の幅ではなく，要素の幅を調節する必要があります．コードを整理してもらえれば，どの部分を修正すればよいか分かると思います

kikoko09

2018/08/29 13:02

閉じタグと、「src」が「scr」を修正したところ解決しました。ありがとうございました。

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

パッと見ですが

<section class="voices">のところの背景と<section class="call-to-action orange-bg">のところの背景が横幅が短くなってしまいました。

親要素として「<div class="container">」がありますが、width: 820px;とありますので、この設定どおりでは？
また、同じクラスが子要素でも使われています。不具合ならば、どちらかを名称と設定の変更してみては？

<section class="voices">のところの画像が反映されません。

ここの画像の表示については「liveAsNotes」さんの回答と同じ意見です。

投稿2018/08/28 02:50

yoshinavi

総合スコア3523

kikoko09

2018/08/28 04:47

同じクラスが子要素でも使われています。不具合ならば、どちらかを名称と設定の変更してみては？ >>こちらは具体的にどのように変更したらよいのでしょうか？？

yoshinavi

2018/08/28 05:43

「header部は画面いっぱいの長さ」と見た場合、header内の<div class="container">で「width: 820px;」が設定されています。ここは良いとして、header部以外でも同じクラス名<div class="container">が各section内で使用されています。各sectionにwidthが設定されていないのでautoとなり、子要素の大きさ<div class="container">の「width: 820px;」が再適用されます。クラス名を変えて再定義するか、各sectionにwidth設定をすれば良いかと思います。

kikoko09

2018/08/29 13:04

丁寧にご回答頂きありがとうございます。クラス名を変えて再定義か、各sectionにwidth設定をしようとしましたが、「src」が「scr」を修正したところ、背景もheaderの長さと一緒になりました！なぜだろう・・・。

yoshinavi

2018/08/29 14:00

「dit.」さんの回答どおり閉じタグが補完されている今は、「class="container"」の悪影響が無くなり「class="orange-bg"」が生きていますのでheaderと同様の表示幅になります。「class="voices"」の背景を拡げたいと間違って解釈していました。スミマセン。 (^_^;)

kikoko09

2018/08/30 15:30

閉じタグ忘れで背景の幅が影響されてしまうんですね＞＜いえ、「class="voices"」の背景も拡げたかったので一緒に反映されてよかったです！ありがとうございました。

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

あなたの回答