#textを消したい

CSS
1@charset "UTF-8";
2*{
3margin: 3;
4}
5header{
6position: relative;
7height:15vh;
8background: url(jpeg/gakkou.jpg) center /cover;
9}
10.mokuji{
11width: 400px;
12height: 500px;
13position: relative;
14margin: 30px auto;
15text-shadow: #ff5533 1px 0 10px;
16}
17.photo1{
18  width: 100vw;
19height: 100%;
20}
21.mokuji2{
22position: absolute;
23left: 10px;
24bottom: 0;
25top:32px;
26width: 100%;
27height: 100%;
28font-family: serif;
29font-weight: bold;
30}
31.p1 {text-align: center;
32}
33.mokuji a{
34text-decoration: none;
35color: black;
36}
37.mokuji ol{
38padding-left: 20px;
39list-style: none;
40margin: 20px;
41}
42ul.child_ol{
43padding: 10px;
44list-style: none;
45margin-left: 25px;
46}
47/*--------------------
48 吹き出しを作る
49--------------------*/
50
51.balloon {
52margin-bottom: 2em;
53position: relative;
54}
55.balloon:before,.balloon:after {
56clear: both;
57content: "";
58display: block;
59}
60.balloon figure {
61width: 85px;
62height: 85px;
63}
64.balloon-image-left {
65float: left;
66margin-right: 20px;
67margin-left: 25px;
68}
69.balloon-image-right {
70float: right;
71margin-left: 20px;
72margin-right: 25px;
73}
74.balloon figure img {
75width: 100%;
76height: 100%;
77border: 1px solid #aaa;
78border-radius: 50%;
79margin: 0;
80}
81.balloon-image-description {
82padding: 5px 0 0;
83font-size: 18px;
84text-align: center;
85}
86.balloon-text-right,.balloon-text-left {
87position: relative;
88padding: 10px;
89border: 1px solid;
90border-radius: 10px;
91max-width: -webkit-calc(100% - 120px);
92max-width: calc(100% - 120px);
93display: inline-block;
94}
95.balloon-text-right {
96border-color: #aaa;
97}
98.balloon-text-left {
99border-color: #aaa;
100}
101.balloon-text-right {
102float: left;
103}
104.balloon-text-left {
105float: right;
106}
107.balloon p {
108margin: 0 0 20px;
109}
110.balloon p:last-child {
111margin-bottom: 0;
112}
113/* 三角部分 */
114.balloon-text-right:before {
115position: absolute;
116content: '';
117border: 10px solid transparent;
118border-right: 10px solid #aaa;
119top: 15px;
120left: -20px;
121}
122.balloon-text-right:after {
123position: absolute;
124content: '';
125border: 10px solid transparent;
126border-right: 10px solid #fff;
127top: 15px;
128left: -19px;
129}
130.balloon-text-left:before {
131position: absolute;
132content: '';
133border: 10px solid transparent;
134border-left: 10px solid #aaa;
135top: 15px;
136right: -20px;
137}
138.balloon-text-left:after {
139position: absolute;
140content: '';
141border: 10px solid transparent;
142border-left: 10px solid #fff;
143top: 15px;
144right: -19px;
145}
146/*--------------------
147 吹き出しおわり
148--------------------*/
149.p1{
150margin: 10px 40px;
151}
152img.photo2{
153  float:left; margin:0 20px 20px 0;
154  width: 100% ;
155  height: 250px;
156}
157ol.oll{margin: 10px 30px  ;
158font-size: 25px;
159list-style: none;
160font-weight: bold;
161}
162font.font1{
163font-size: 20px;
164font-weight:bold;
165}
166mark {
167background: linear-gradient(transparent 60% ,#ff4500 120%);
168}
169h1.h11{
170border-style: inset;
171border-color: red;
172background-color:#ffe6e6;
173margin-bottom: 3px;
174}
175h1.h12{
176margin-top: 0;
177}
178p.p2{
179margin-top: 0;
180}
181img.photo3{
182float: left;
183margin: 25px 10px 10px 0;
184}
185
186

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" href="style.css">
6<title>学校なんていかなくていんじゃない？と思っている人必見！</title>
7<meta name="description" content="学校に行く理由はいくつもあるが、この記事では交友関係、勉強、社会形成の３つの観点から学校に行く理由を解き明かす。">
8</head>
9
10<body>
11<header>
12</header>　
13<div class="all">
14<h1 class="h12">学校なんて行かなくてもいいと思っている人必見！？【学校のすゝめ】</h1>
15<p>実は僕も学校なんていかなくてもいんじゃない？と心から思っていました。ではなぜそんな僕がこんな記事を書くのか．．．それは僕の人生が学校に行くことによって急変したからである。
16その体験から学校に行く理由を探っていこう。</p>
17
18<div class="mokuji">
19  <div class="photo1">
20    <img src="jpeg/border.jpg" alt="背景" height="500px" width="400px" >
21  </div>
22 <div class="mokuji2">
23  <div class="p1">【目次】</div>
24<ol class="ol2">
25  <li><a href="#chapter1">1.まず学校とは何か？</a></li>
26  <li><a href="#chapter2">2.なぜ学校にいくのか?</a>
27      <ul class="child_ol">
28       <li><a href="#schapter1">2-1自分を確立するため</a></li>
29       <li><a href="#schapter2">2-2社会を体験するため</a></li>
30       <li><a href="#schapter3">2-3多くのことを知るため</a></li>
31  </ul></li>
32  <li><a href="#chapter3">3.学校に行った人の特権、３つのポイント</a>
33  　　<ul class="child_ol">
34       <li><a href="#schapter4">3-1交友関係</a></li>
35       <li><a href="#schapter5">3-2勉強</a></li>
36       <li><a href="#schapter6">3-3社会形成</a></li>
37  </ul></li>
38  <li><a href="#schapter4">4.必ずしも学校に行かなければいけないのか？</a>
39  　　<ul class="child_ol">
40       <li><a href="#schapter7">4-1答えはNO！!</a></li>
41       <li><a href="#schapter8">4-2行かなくてもいい条件</a></li>
42  </ul></li>
43  <li><a href="#chapter5">5.まとめ</a></li>
44</ol>
45</div></div>
46
47<div class="mazu">
48<h1 class="h11"　id="chapter1">１.まず学校とは何なのか？</h1>
49
50<img class="photo2" src="jpeg/gakkou.jpeg" alt="学校">
51
52<div class="balloon">
53 <figure class="balloon-image-left">
54   <img src="jpeg/sennsei2.jpeg" alt="先生">
55 <figcaption class="balloon-image-description">
56     先生
57 </figcaption>
58 </figure>
59 <div class="balloon-text-right">
60   <p>
61Aくん、学校って何をする所だと思う?って聞かれてすぐに答えられる？
62   </p>
63 </div>
64</div>
65
66<div class="balloon">
67 <figure class="balloon-image-right">
68   <img src="jpeg/1.jpg" alt="生徒A">
69 <figcaption class="balloon-image-description">
70     生徒A
71 </figcaption>
72 </figure>
73 <div class="balloon-text-left">
74   <p>
75    う～～ん、勉強するところ？
76   </p>
77 </div>
78</div>
79
80<div class="balloon">
81 <figure class="balloon-image-left">
82   <img src="jpeg/sennsei2.jpeg" alt="先生">
83 <figcaption class="balloon-image-description">
84     先生
85 </figcaption>
86 </figure>
87 <div class="balloon-text-right">
88   <p>
89  そうだね！勉強する所でもあるよね。じゃあ勉強するだけの所なのかな？</p>
90<p>  それだとどうして課題を出したり、
91  友達とグループになっていろんなことをしたりしないといけないのかな？</p>
92
93 </div>
94</div>
95<div class="balloon">
96 <figure class="balloon-image-right">
97   <img src="jpeg/1.jpg" alt="生徒A">
98 <figcaption class="balloon-image-description">
99     生徒A
100 </figcaption>
101 </figure>
102 <div class="balloon-text-left">
103   <p>
104    確かに。何が目的でそんなことをするんだろう？
105   </p>
106 </div>
107</div>
108
109<div class="balloon">
110 <figure class="balloon-image-left">
111   <img src="jpeg/sennsei2.jpeg" alt="先生">
112 <figcaption class="balloon-image-description">
113     先生
114 </figcaption>
115 </figure>
116 <div class="balloon-text-right">
117   <p>
118    そうだよね。いきなりそんなこと聞かれてもなかなかわからないよね。</p>
119  <p>ならこれから学校について学んでいこう！
120   </p>
121 </div>
122</div>
123
124<p>学校とは一言で言うと、<font class="font1"><mark>社会に出る上で大切なこと、
125  身につけておかなければいけないことを学ぶ場所であり、人生における初めての社会</mark></font>である。
126この記事では</p>
127
128<ol class="oll">
129<li>1.交友関係</li>
130<li>2.勉強</li>
131<li>3.社会形成</li>
132</ol>
133<div class="p1">
134<p>の３つの観点から学校に行く理由を解き明していく。</p>
135</div>
136</div>
137<div class="why">
138<h1 class="h11" id="chapter2">２．なぜ学校に行くのか</h1>　
139<img src="jpeg/why.jpg" alt="naze" class="photo3">
140<p class="p2">まず初めに学校に行く理由は多くあるが主に３つの理由である。
141それは<mark>自分を確立するため・社会を経験するため・多くのことを知るため</mark>だ。
142そもそも学校に行かなくてもいいと思ってるからこの記事を見ている君は
143「そんなこと知るか！そんなことより学生のうちに遊んだり、自分の好きなことをしたほうがいい！」と思っているのだろう。
144もちろん遊んだり、自分の好きなことをするのも大切だ。しかし、<mark>学生だからこそ身につけられることもたくさんある。</mark>
145そのどちらに比重を置くかはその人次第だが、僕には後者のほうが期間限定のレアもののように思える。
146ではそれを前提に学校に行く３つの理由について考えていこう。</p>
147</div>
148<h2 id="schapter1">２-１自分を確立するため</h2>
149まず前提として学生時代だけで自分を確立するのは不可能である。
150しかし、その後の人生の自分をほぼ確立するのが学校なのだ。
151たとえば、学校にいくことで友達と関わり、人との接し方を学ぶ。
152失恋をして恋の辛さを知る（僕はリア充がリアルに充実していることを知った。傍から見て）。
153いろんなことを知り、体験しすることで<mark>自分はどういう人間なのか、何ができるのかといった自分という人間を初めて確立する</mark>のだ。
154<h2 id="schapter2">２-２社会を体験するため</h2>
155
156
157<h2 id="schapter3">２-３多くのことを知るため</h2>
158<h1 class="h11" id="chapter3">３．学校に行った人の特権、３つのポイント</h1>
159<h2 id="schapter4">３-１交友関係</h2>
160<h2 id="schapter5">３-２勉強</h2>
161<h2 id="schapter6">３-３社会形成</h2>
162<h1 class="h11" id="chapter4">４．必ずしも学校に行かなければいけないのか？</h1>
163<h2 id="schapter7">４-１答えはNO！！</h2>
164<h2 id="schapter8">４-２行かなくてもいい条件</h2>
165<h1 class="h11" id="chapter5">５．まとめ</h1>
166</div>
167
168
169</body>
170</html>

headerの上の#textの部分を消したいのですがどうすればいいですか？検証者ツールで調査するをみると

<body> "-

"
<meta ...>
となっています。
ウェブサイトを作ったときに一番上に - というマークが入って一番上まで画像が埋まりません

m.ts10806

2021/05/03 01:13

意味が分かりません。赤の他人が見てもわかるように質問内容調整してください。質問は編集できます。

maisumakun

2021/05/03 04:48

HTMLのソースコードはどのようになっていますか？

maisumakun

2021/05/03 06:34

nanashi53

2021/05/03 06:53

すみません。まったくの初心者で、言っていることの意味がわかりません。わかりやすく教えていただけませんか？

maisumakun

2021/05/03 06:55

まず確認ですが、表示しているものは「単なるHTMLファイル」ですか？それとも「WordPressなど、何かしらのシステムを動かした出力」ですか？

m.ts10806

2021/05/03 07:06

HTMLはそのまま全てコピペしてください。他者が再現できなければアドバイスはほぼ不可能です。

nanashi53

2021/05/03 07:09

ただのHTMLファイルです

nanashi53

2021/05/03 07:09

コードをすべてですか？

m.ts10806

2021/05/03 07:12

提示されたコードだけでは再現できませんよ。全部が難しいのであれば現象が再現できる最小構成のコードにしてもらっても良いです。あくまで「他者がコピペで再現できること」です。今のだけど「なんか入れてんじゃないの？」くらいの憶測しかできません。

nanashi53

2021/05/03 07:14

わかりました

nanashi53

2021/05/03 07:16

あ。すみません<!doctype html>-になってました。ほんとにすみません。

nanashi53

2021/05/03 07:17

できればもう一つ教えていただきたいのですがいいですか？

nanashi53

2021/05/03 07:21

吹き出しで会話をするところなんですが、ウィンドウ幅が狭いと先生や生徒Aという文字に重なるのですが、それを横に常になるようにするにはどうしたらいいですか？

m.ts10806

2021/05/03 07:22

再現しないですね。 body内の至る所で入ってはいけなさそうなところに全角スペースが入ってたりしますが、起きてることとは無関係でしょうし。

m.ts10806

2021/05/03 07:23

というか提示されたコードと画面キャプチャがコード同じじゃないですよ。

m.ts10806

2021/05/03 07:24

<body> のあとに<meta>が入っているようですが、提示されたコードはそうなってません。

nanashi53

2021/05/03 08:10

body内の至る所とはどこでしょうか。おしえてください。あ、すみません。<meta>ではありませんでした再現しないのはどうしてなんでしょうか？

maisumakun

2021/05/03 08:17

> <body> のあとに<meta>が入っているようですが、提示されたコードはそうなってません。こちらですが、無関係なところにハイフンが入ってしまったために、ブラウザが「そこから<body>」という解釈をした結果かと思います。

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

回答1件

ベストアンサー

それっぽい個所はないように見えますね。
ひとまずHTMLを最小構成から組みなおしてみては？

全角スペースが不適当な箇所に入っているように見えるので、そのあたりはきちんと精査して。
また、HTML(CSS)構文チェックもされたほうがいいです。
構文チェック機能があるエディタを採用するのが良いですが、
Web上のサービスでも良いです。
Another HTML-lint
CSS Validation Service

投稿2021/05/03 08:44

編集2021/05/03 08:45

m.ts10806

総合スコア80848