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

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

新規登録して質問してみよう
ただいま回答率
85.38%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

919閲覧

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

kidaer

総合スコア31

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/01 10:17

編集2021/01/01 10:21

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

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)">と追記してみたのですが、HP上に文字表示はないですが、PC表示では隠したい文字が表示されてしまいます。

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

<!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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/01/01 10:21

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

2021/01/01 10:21

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

回答1

0

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

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

投稿2021/01/01 10:23

maisumakun

総合スコア145865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問