CSSで一部の要素から下が効かない

前提・実現したいこと

模写のサイトを完成させたい

発生している問題・エラーメッセージ

mainタグから下のclassは適用されるものもあるけど、idは一つも適用されない
。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <link rel="favicon" href="img/favicon.ico">
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet"  href="css/style.css">
9  <title>My Work</title>
10</head>
11 <body>
12  <div id="wrapper_all">
13    <header id="header_title" >
14      <div id="header_inner">
15        <h1>
16          <a href="index.html"><img src="img/logo.svg"></a>
17        </h1>
18        <nav>
19          <ul>
20           <li>About</li>
21           <li>Works</li>
22           <li>News</li>
23           <li>Contact</li>
24           <li><a href="https://www.instagram.com"><img src="img/icon-instagram.png"></a></li>
25         </ul>
26        </nav>
27      </div>
28    </header>
29    <main>
30     <div id="mainvisual">
31      <img src="img/mainvisual-pc.jpg" alt="○○の画像">
32     </div>
33     <section id="about" class="wrapper">
34      <h2 class="title">About</h2>
35      <div id="about_inner" class="inner">
36        <p>Xxxxx Ashley</p>
37        <p id="contact_infomation">2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan<br>
38        tel: 000-0000-0000<br>
39        url: www.xxxxxx.jp<br>
40        mail: xxx@xxxxxx.jp<br></p>
41        <p id="profile_text">プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
42      </div> 
43     </section>
44     <section id="work" class="wrapper">
45      <h2 class="title">Work</h2>
46      <div id="image_box" class="inner">
47        <img src="img/works1.jpg">
48        <img src="img/works2.jpg">
49        <img src="img/works3.jpg">
50        <img src="img/works4.jpg">
51        <img src="img/works5.jpg">
52        <img src="img/works6.jpg">
53      </div>
54     </section>
55     <section id="news" class="wrapper">
56      <h2 class="title">News</h2>
57      <div id="infomation" class="inner">
58        <div class="infomation_box">
59         <p>2020.XX.XX</p>
60         <a href="index.html"  target="_blank" rel="noopener">デザイン雑誌「XXXXXX Vol.11」に掲載していただきましたた</a>
61        </div>
62        <div class="infomation_box">  
63          <p>2020.XX.XX</p>
64          <a href="index.html" target="_blank" rel="noopener">XX月XX日から写真集「XXXXXX」の販売を開始します。</a>
65        </div>
66        <div class="infomation_box">
67          <p>2019.XX.XX</p>
68          <a href="index.html" target="_blank" rel="noopener">【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</a>
69        </div>
70        <div class="infomation_box">
71           <p>2019.XX.XX</p>
72           <a href="index.html" target="_blank" rel="noopener">デザイン雑誌「XXXXXX Vol.10」に掲載していただきました。</a>
73        </div>
74        <div class="infomation_box">
75          <p>2019.XX.XX</p>
76          <a href="index.html" target="_blank" rel="noopener">【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</a>
77        </div>
78        
79      </div>
80     </section>
81     <section id="contact" class="wrapper">
82      <h2 class="title">Contact</h2>
83      <form action class="inner" id="contact_form">
84        <div class="form_container">
85         <label for="name" class="label_form" >NAME</label>
86         <input type="text"  name="yourname" id="name">
87        </div>
88       <div class="form_container"> 
89         <label for="mail" class="label_form">E-mail</label>
90         <input type="email" name="e-mail" id="mail">
91        </div>
92       <div class="form_container">
93         <label for="message_text" class="label_form">MESSAGE</label>
94        <textarea col="40" row="16" form="contact_form" name="message" id="message_text"></textarea>
95       </div>
96       <div id="button_container">
97         <button type="submit" form="contact_form">送信</button>
98       </div>
99      </form>
100     </section>
101    </main>
102    <footer>
103      <small>© 2020 PHOTO BOOK</small>
104    </footer>
105  </div>  
106</body>
107</html>

CSS
1　@charset "UTF-8";
2.wrapper {
3  max-width: 960px;
4  padding: 0 4%;
5  margin: 0 auto;
6}
7
8.title {
9  font-size: 24px;
10  margin-top: 130px;
11  margin-bottom: 65px;
12  text-align: center;
13}
14
15.inner {
16  margin: 0 auto;
17  display: flex;
18  flex-wrap: wrap;
19}
20
21#wrapper_all {
22  margin: 0 auto;
23}
24#wrapper_all #header_title {
25  max-width: 1290px;
26  padding: 120px 0px;
27}
28#wrapper_all #header_title #header_inner {
29  text-align: center;
30  max-width: 960px;
31  display: flex;
32  justify-content: space-around;
33  align-items: center;
34  margin: 0 auto;
35}
36#wrapper_all #header_title #header_inner h1 a {
37  width: 120px;
38  height: 27px;
39}
40#wrapper_all #header_title #header_inner nav {
41  margin-left: 193px;
42}
43#wrapper_all #header_title #header_inner nav ul {
44  display: flex;
45}
46#wrapper_all #header_title #header_inner nav ul li {
47  font-family: "メイリオ";
48  font-size: 14.4;
49  font-style: normal;
50  list-style: none;
51  margin-left: 30px;
52}
53#wrapper_all #header_title #header_inner nav ul li img {
54  width: 20px;
55  height: 20px;
56}
57#wrapper_all #main #mainvisual {
58  width: 100%;
59}
60#wrapper_all #main #mainvisual img {
61  height: 420px;
62}
63#wrapper_all #main #about #about_inner p {
64  font-size: 14.4px;
65}
66#wrapper_all #main #about #about_inner #contact_infomation {
67  font-size: 14.4px;
68  margin-top: 30px;
69  margin-bottom: 30px;
70}
71#wrapper_all #main #about #about_inner p#profile_text {
72  font-size: 14.4px;
73  width: 840px;
74  height: 63px;
75}
76#wrapper_all #main #work #image_box {
77  display: flex;
78  flex-wrap: wrap;
79}
80#wrapper_all #main #work #image_box img {
81  width: 29%;
82  margin-right: 29px;
83  margin-bottom: 24px;
84}
85#wrapper_all #main #news #infomation .infomation_box {
86  display: inline-block;
87  border-top: solid #C8C8C8 1px;
88  border-bottom: solid #C8C8C8 1px;
89  display: flex;
90  font-size: 14.4px;
91  padding: 15.1px 0px;
92}
93#wrapper_all #main #news #infomation .infomation_box a {
94  color: #24292E;
95  margin-left: 84px;
96  text-decoration: none;
97}
98#wrapper_all #main #contact {
99  display: flex;
100  flex-direction: column;
101}
102#wrapper_all #main #contact .form_container {
103  display: flex;
104  justify-content: space-between;
105}
106#wrapper_all #main #contact .form_container .label_form {
107  font-size: 14.4px;
108}
109#wrapper_all #main #contact .form_container .label_form #name {
110  margin-left: 80px;
111  margin-bottom: 10px;
112  width: 710px;
113}
114#wrapper_all #main #contact .form_container .label_form #mail {
115  margin-left: 78px;
116  margin-bottom: 10px;
117  width: 710px;
118}
119#wrapper_all #main #contact .form_container #message_text {
120  width: 710px;
121}
122#wrapper_all #main #contact #button_container {
123  margin-top: 30px;
124  text-align: center;
125}
126#wrapper_all #main #contact #button_container button {
127  background-color: #24292E;
128  color: #FFFFFF;
129  height: 53px;
130  width: 200px;
131}
132#wrapper_all #main #contact #button_container button:hover {
133  color: #24292E;
134  background-color: #ffffff;
135}/*# sourceMappingURL=style.css.map */

試したこと

新たにファイルを作ってコピペしてみた

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

itagagaki

2021/05/03 11:31

スタイル効いてますよ。たとえば #wrapper_all #header_title #header_inner のところに border: 1px solid red; を加えてみたら、ちゃんと赤枠で表示されました。 https://codepen.io/itagagaki/pen/abpeYzx

mori_sa

2021/05/03 11:46

はい、wrapper_allの下のheader_title　header_innerは効くのですがその下のmain要素より下が.inner効くのですが、IDは効かないんです。

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

回答1件

ベストアンサー

css
1#wrapper_all #main #mainvisual {
2  width: 100%;
3}

#main となってますが、HTMLにid="main" はないので、ここは mainではないですか。
<main>タグに効かせたいのだと思いますので。

他の部分も同様です。

投稿2021/05/03 13:34

編集2021/05/03 13:39

hatena19

総合スコア34075

mori_sa

2021/05/04 07:29

途中でmainタグをいれたのでその時にmainタグにidの＃を入れてしまいました４時間くらい悩んでたので助かりました

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

CSSで一部の要素から下が効かない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問