メディアクエリの使い方について

このようなサイトを作成しています。
https://tamesitamesi2.web.fc2.com/portforo/TEST.html
一見かわいいあらいぐま。～からの内容をメディアクエリによってＰＣ用、スマホ・タブレット用で切換えたいです。

https://sole-color-blog.com/blog/71/のサイトを参考に
@media screen and (min-width:480px) { }を含めると、コードではなくただの文字として認識されます。

https://keywordfinder.jp/blog/seo/media-queries/のサイトを参考に

<div class="media" media="screen and (max-width:480px) and (max-width:1024px)">と追記してみたのですが、ＨＰ上に文字表示はないですが、ＰＣ表示では隠したい文字が表示されてしまいます。

何か使い方が間違っているのでしょうか？
ぜひアドバイスをお願い致します。

<!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 class="position1"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou1" />
<div class="mozi3 balloon1-left">あらいぐまは狂暴！？</div>
</div>
@media screen and (min-width:1024px) {
<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="media" media="screen and (max-width:480px) and (max-width:1024px)">一見かわいいあらいぐま。<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 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>

.media {
  font-size:2vw;
}
.hukidasi {
  height:6vw;
}
.hed {
  position: absolute;
position: fixed;
  z-index:10;   
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:23vw;
  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;
}

maisumakun

2021/01/01 10:21

どのようなコードを書いたのですか？「書き加えたもの」だけ書かれても、それを不適当な位置に書いているということがありうるので、どのファイルに何を書いたか、きっちり書いていただけないでしょうか？

kidaer

2021/01/01 10:21

申し訳ございません。今追加を忘れていたのに気づいて追加しました。ぜひよろしくお願い致します

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

回答1件

</div>
@media screen and (min-width:1024px) {
<div>

メディアクエリはCSSに書くものです。HTML内に直接書いても、ただの文字列としてしか認識されません。

投稿2021/01/01 10:23

maisumakun

総合スコア145975

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

メディアクエリの使い方について

関連した質問