文字が反映されません、、

前提・実現したいこと

赤いボーダーで囲まれている部分に文字を入れたいのですがなぜか反映されません。なぜでしょうか？

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

文字が出ない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>SANGO | 心地良さを追求したWordPressテーマ</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8  </head>
9  <body>
10    <header>
11      <div class="container">
12        <div class="header-left">
13          <img class="SANGO" src="https://saruwakakun.design/wp-content/uploads/2017/08/sango-1.svg" alt="SANGO" height="42px" width="138px">
14        </div>
15        <div class="header-right">
16          <a href="#" class="flag"><span class="fas fa-flag"></span>特徴</a>
17          <a href="#" class="book"><span class="fa fa-book" aria-hidden="true"></span>使い方ガイド</a>
18          <a href="#" class="download"><span class="fa fa-arrow-circle-down" aria-hidden="true"></span>ダウンロード</a>
19        </div>
20      </div>
21    </header>
22    <div class="top-wrapper">
23      <div class="container-2">
24        <img src="img/sangoheader-min.png">
25        <div class="img-container">
26          <h2>aaaaaaa</h2>
27
28        </div>
29      </div>
30
31    </div>
32
33  </body>
34</html>

CSS
1body{
2  width: 100%;
3  margin-left: 0px;
4  margin-top: 0px;
5}
6
7header{
8  height: 62px;
9  background-color: #5CAAEC;
10  box-shadow: 0px 5px 5px #C9CBD0;
11  margin-bottom: 5px;
12}
13
14header a{
15  color: white;
16  text-decoration: none;
17}
18
19.header-left{
20  float: left;
21  height:62px;
22}
23
24.header-right{
25  float:right;
26}
27
28.header-left img{
29  display:inline-block;
30  height:62px;
31}
32
33.header-left img:hover{
34  opacity: 0.5;
35}
36
37.header-right a{
38  font-size: 15px;
39  line-height: 62px;
40  font-family:arial;
41}
42
43.fa{
44  margin-right: 8px;
45  opacity: 0.8;
46}
47
48.fas{
49  margin-right: 8px;
50  opacity: 0.8;
51}
52
53.download{
54  margin-right: 140px;
55}
56
57.book{
58  margin-right:20px
59}
60
61.flag{
62  margin-right:20px
63}
64
65.SANGO{
66  margin-left: 140px;
67}
68
69.top-wrapper{
70  height: 500px;
71  font-size:0px; /*フォントサイズ0px*/
72  background-color: #EAEDF2;
73}
74
75.top-wrapper img{
76  height: 426px;
77  width:500px;
78  margin-top: 28px;
79
80}
81
82.img-container{
83  height: 426px;
84  width:500px;
85  background-color: #95D1EE;
86  margin-top: 28px;
87  margin-left: 0px;
88  border: 1px solid red;
89}
90
91
92.container-2{
93  display: flex;
94  justify-content:center;
95
96}

試したこと

<h2>aaaaaaa</h2>と打ってっみたのですが反映されません。

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

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

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

回答2件

ベストアンサー

CSS
1.top-wrapper{
2  height: 500px;
3  font-size:0px; /*フォントサイズ0px*/
4  background-color: #EAEDF2;
5}

ここでfont-size: 0px;を指定しているからでは？

投稿2019/02/15 04:57

dice142

総合スコア5158

dice142

2019/02/15 05:22 編集

azuapricot様の回答と質問者様の他の質問を拝見しましたが、私の回答をそのまま鵜呑みにしてfont-size: 0;を消すと、また隙間が出たりとか弊害が起きます。他の質問との兼ね合いを見るとazuapricot様の回答の方が正しい解決策を提示されているので、私の回答だけを鵜呑みにされないよう注意してください。

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

さきほどの方ですよね、忘れていましたがそれでは中に文字を書くと0pxなのでもちろん表示されません（説明不足でした）

CSS
1.hoge{ /*親要素*/
2    font-size:0;
3}
4.fuga{ /*子要素*/
5    font-size:20px;
6    display:inline-block;
7}

https://qiita.com/nabettu/items/f34624d9094276d05e70

↑のサイトに書いてあるので一応目を通してほしいです。
（この回答もここから引っ張ってきているだけなので）

投稿2019/02/15 05:02

azuapricot

総合スコア2341

madoka9393

2019/02/15 06:20

横から失礼します。老婆心ながら、回答内のURLはリンクにしてあげた方が読んでもらいやすくなるかもです。

azuapricot

2019/02/15 07:30

読んでもらいやすくなるかもしれませんがめんどくさくて（ ) 笑読むのも読まないのも本人次第ですし、興味があればコピーして開くのは簡単なことだと思います（モバイルなら別ですが）

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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