ブラウザのサイズで吹きだしのサイズを縮小させたい(他複数質問あり)

サイトを作っています
https://tamesitamesi2.web.fc2.com/portforo/TEST.html

ブラウザの縮小に反映して、文字サイズなどが小さくなったり大きくなったりしますが、吹きだしも反映させたいです。

また、吹き出しの上と下部分に幅がありすぎるので、もう少し感覚を狭めたいのですが、どうしていいのかわかりませんでした。

あと、スクロールした際に、吹き出しがヘッダーの上に表示されてしまいます。
どうしたらいいのでしょうか？

ぜひアドバイスお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/portforo/araiguma.css">
</head>
<body>
<div class="hed">
<div class="nakamozi">あらいぐまはかわいい</div>
</div>
<div class="center">
<div class="mozi1">哺乳綱食肉目アライグマ科アライグマ属に分類され る哺乳類です。<br />英語でProcyon lotorと書きます。</div>
<div><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma.jpg" class="gazou1_1" /></div>
<div class="mozi2">食べ物をあらう器用な動物として有名なあらいぐま 。<br />その実態とは！？</div>
<div>
<div class="position1"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou1" />
<div class="mozi3 balloon1-left">あらいぐまは狂暴！？</div>
</div>
<div>
<div class="position2">
<div class="mozi4">一見かわいいあらいぐま。<br />しかし、その本性は野生 そのものです。<br /><br /><br />その内容は「ぜったいに飼ってはい けない<br />アライグマ（さとう　まきこ著）」<br />でも描か れています。</div>
<div class="amazon1"><iframe width="300" height="150" style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&amp;t=amazon03c2-22&amp;m=amazon&amp;o=9&amp;p=8&amp;l=as1&amp;IS1=1&amp;detail=1&amp;asins=4652071817&amp;linkId=ad343fa98e31f40d240316f233f0b6a8&amp;bc1=ffffff&amp;lt1=_top&amp;fc1=333333&amp;lc1=0066c0&amp;bg1=ffffff&amp;f=ifr">
    </iframe></div>
</div>
<div class="mozi5">手が器用なので戸棚や引き出しを簡単に開けてしま います。<br />鋭い爪や牙で流血沙汰が日常茶飯事。<br /><br />人に 慣れる動物ではないため、ペットには向かないよう です。<br /><br />また、現在は特定外来生物に指定されている ため、飼育すると法律違反になります。 <br />野生のあらいぐまは多くの病気を媒介しているので 、<br />見かけたら触ろうとはせず逃げましょう。</div>
<div class="position3"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou2" />
<div class="mozi6 balloon1-left">でもあらいぐまはかわいい！</div>
</div>
<div class="youtube1"><iframe width="560" height="315" src="https://www.youtube.com/embed/P7VVIbmvA3U" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen="allowfullscreen"></iframe></div>
<div class="mozi7">わたあめを洗ってしまったあらいぐま</div>
<div class="mozi8">アライグマの四つの魅力</div>
<div class="position4">
<div class="sikaku">かわいい</div>
<div class="sikaku Fontsize">よく 食べ、よく遊び、よく眠る</div>
</div>
<div class="position4">
<div class="sikaku Fontsize2">なんでも食べる（雑食）</div>
<div class="sikaku Fontsize2">ラスカルで有名</div>
</div>
<img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma2.jpg" class="gazou3" />
<div class="mozi9">「九十九島動植物園 森きらら」では、<br />餌をもらうた めに手をあげてアピールするあらいぐまが有名。 <br /><br />ぜひとも一度見に行きたい。</div>
</div>
</div>
</div>
</body>
</html>

.hed {
position: fixed;
background: black;
width:100vw;
height:7vw;
top: 0;
  left:0;
      color:white;
}
.nakamozi {
    text-align: center;
left:50vw;
  font-size:3vw;
}
.center {
  margin-top:100px;
  text-align: center;
}
.mozi1 {
  margin-bottom:15px;
  font-size:2vw;
}

.gazou1_1 {
 width:auto;
height:auto;
}
.mozi2 {
  margin-top:50px;
  margin-bottom:20px;
  font-size:2vw;}

.position1 {
  display: flex;
}
.gazou1{
  width: 150px;    /* 横幅を割合で指定 */
    height: 150px;  /* 高さは自動指定 */
  padding-left:15vw;
  padding-top:15px;
}
.mozi3 {
  font-size: 5vw;
    font-weight：bold;
  padding-top:10px;
}
.balloon1-left {
  position: relative;
  display: inline-block;
  padding: 4vw 2vw;
  min-width:1vw;
  max-width: 100%;
  background: #adff2f;
  
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #adff2f;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
  border-radius: 10px;
}
.position2 {
   display: flex;
padding-left:15vw;
  text-align: left;
  margin-top:30px;
}
.mozi4 {
    font-size:2vw;
   padding-bottom:50px;
  padding-top:30px;
}

.mozi5 {padding-top:30px;
  font-size:2vw;}
.position3 {
   display: flex;
padding-left:12vw;
  text-align: left;
  margin-top:30px;
}
.gazou2{
  width: 150px;    /* 横幅を割合で指定 */
    height: 150px;  /* 高さは自動指定 */
  padding-top:15px;
}
.mozi6 {

  font-size: 50px;
    font-weight：bold;
}

.youtube1 {padding-top:30px;}
.mozi7 {
  font-size:2vw;
}
.mozi8 {
  margin-left:17vw;
  width:60vw;
  height:7vw;
  background:gold;
  border-radius:30px;
  padding: 0vw 2vw;
  font-size:5vw;
  margin-top:30px;
}
.sikaku {
  width:30vw;
  height:7vw;
  background:skyblue;
  border-radius:30px;
  padding: 0vw 2vw;
  font-size:5vw;
  margin-top:30px;
}
.position4 {
     display: flex;
  margin-left: 15vw;
}
.Fontsize {
  font-size:2.5vw;

}
.Fontsize2 {
  font-size:2.5vw;
padding-top:2.5vw;
}

.gazou3 {
  margin-top:30px;
  margin-bottom:30px;
}
.mozi9 {
  font-size:2vw;
}

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

回答1件

以前の回答でお見せしたHTMLコードで、
div要素の追加と吹き出しの高さしてをやってみて下さい。
もう少し言葉を足せば、今回のご質問をされなくて済んだかも？と反省しました。
なお、注意点は小画面サイズになれば要素がずれてしまうので、
吹き出し内の文字サイズの調整をするか、またはメディアクエリを使う必要があります

吹き込みが最前面にくる現象は、
.hedにはz-indexを指定（position指定必須）して、
ページ内のどの要素よりも大きい値をつけてあげれば改善すると思います。

あと気になったところが、「：」が全角なのでboldが効いていないかもです。

.hed {
  position: fixed;
  z-index:10;        ＜＜　追記
  background: black;
  width:100vw;
  height:7vw;
  top: 0;
  left:0;
  color:white;
}
:
.mozi3 {
  font-size: 5vw;　　　＜＜　4vw以下に調整が必要かも
  font-weight:bold;
  padding-top:10px;
}
:
.balloon1-left {
  position: relative;
  bottom:70px;        ＜＜　追記
  display: inline-block;
  padding: 4vw 2vw;        ＜＜　調整必要かも
  min-width:1vw;
  max-width: 100%;
  background: #adff2f;

}

投稿2020/12/31 14:19

編集2020/12/31 14:34

Kosketu

総合スコア46

kidaer

2021/01/01 09:48

あけましておめでとうございます！反省なんでぜんぜん必要ないですよ。こうしてご返答いただけるだけで非常にありがたいです！【z-index:10; 】無事に表示の優先度をつけることができました。ありがとうございます！【画面サイズにおける表示差分について】メディアクエリを見てみたいと思います。これに関しまた質問があるかもしれませんが、ご縁がありましたらよろしくお願い致します！【全角：】ＦＣ２の編集画面でboldだけが赤字の理由がようやく判明しました。ありがとうございます！【吹きだしの件について】申し訳ありません。よければもう少しお付き合いいただければ嬉しく思います。＞div要素の追加と吹き出しの高さしてをやってみて下さい。の意味が少しわかりませんでした。こういう意味かな？と思い、吹きだしを囲んでいるdiv要素にheight:6vw;を与えてみたのですが（親要素が縮まれば中身の吹きだしも縮まるかと思い）、ブラウザを縮小したときに横幅は縮まるのですが、縦幅がびくともしません。また.balloon1-leftにbottom:70px; を与えると吹き出しが中身の文字ごと、大きくずれてしまい縦幅に変化はない状態です。私の解釈がおかしかったら大変申し訳ないのですが、続けてアドバイスいただけると嬉しいです。よろしくお願い致します。

kidaer

2021/01/01 09:50

ちなみに、吹き出しの縦幅がどこで指定されているのかもしよければ教えていただけると嬉しいです。自分でもあれこれいじったつもりなのですが、縦幅に一切の影響がなく困っております。何度も申し訳ありません。ぜひお願い致します

Kosketu

2021/01/01 14:33

--------------------- <div class="position1"> <div> <img src="〜〜" /> <div class="">あ〜</div> </div> </div> --------------------- このようにposition1の子要素たちをdivタグで囲ってあげてみてください！！の意味でした^^; 吹き出しの縦幅はアライグマに依存してましたので解消できるはず！！そして脱字でしたすいません、吹き出しの高さ　指定　をやってもらいたいので、balloon1-leftに対し回答内容を追加を行ってみてください！

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