HTML&cssでメディアクリーの記述について

前提・実現したいこと

HTML&cssでメディアクリを扱う時の質問です。
今レスポンシブ対応のWEBサイトを初心者ながら作成しようとしているのですが、タブレットサイズでのメディアクリがうまく反応しないためコードが間違っていないか確認をお願いしたいです！

該当のソースコード

html
1<html lang=ja dir="ltr">
2  <head>
3    <meta charset="utf-8">
4    <meta name="description" content="">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6
7     <!-- CSS -->
8     
9         <link href="css/style.css" rel="stylesheet">
10         <link href="css/pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" />
11         <link href="css/tb.css" rel="stylesheet" type="text/css" media="screen and (min-width768px) and (max-width:1023px)" />
12         <link href="css/sp.css" rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" />

該当のソースコード

css
1sp.css
2/*スマホ版 ーーーーーーーーーーーーーーーーーーーーー*/
3@media(max-width:767px) {}
4
5tb.css
6/* タブレット版ーーーーーーーーーーーーーーーーーーーーー*/
7@media only screen and (min-width: 768px) and (max-width: 1023px){}
8
9/* PC版 */
10@media screen and (min-width: 1024px) {}
11
12
13
14

補足

構成としてはhtmlファイル①　元として作成したcss②　スマホcss③　タブレットcss④　pccss⑤で
②③④⑤が同じフォルダ内にあるのは確認済みです。
スマホcss③、pccss⑤は書き換えが反映されますが、タブレットcss④だけ反映されません、、

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

回答2件

メディアクエリ内に何を書いてるか省略されてるのでわかりませんが、下記は明らかに違いますね。

 (min-width768px)

ほか２つとそこだけ比べると明白です。

media="screen and (min-width: 1024px)" />
media="screen and (min-width768px) and (max-width:1023px)" />
media="screen and (max-width: 767px)" />

ただ、linkにmedia属性入れるならcss内には@media不要のような。

投稿2021/09/07 07:15

m.ts10806

総合スコア80850

ベストアンサー

メディアクエリはCSSファイルかHTMLのどちらか一方に記述すれば問題ないはずです。
以下はコードの記述例です。

index.html

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link href="css/style.css" rel="stylesheet">
8    <link href="css/pc.css" rel="stylesheet" type="text/css"/>
9    <link href="css/tb.css" rel="stylesheet" type="text/css"/>
10    <link href="css/sp.css" rel="stylesheet" type="text/css"/>
11    <title>Document</title>
12</head>
13<body>
14    <h1>Hogehoge</h1>
15</body>
16</html>

pc.css

css
1@media screen and (min-width: 1024px) {
2    h1{
3        color: #00f;
4    }
5}

tb.css

css
1@media screen and (min-width: 768px) and (max-width: 1023px){
2    h1{
3        color: #0f0;
4    }
5}

sp.css

css
1@media screen and (max-width: 767px) {
2    h1{
3        color: #f00;
4    }
5}

このコードでは画面幅で文字色が変わるようになっています

投稿2021/09/07 07:26

編集2021/09/07 08:50

退会済みユーザー

総合スコア0

bucker

2021/09/07 08:35

理解力乏しくて申し訳ないです。幅を指定する部分でタブレットとスマホがかぶっているのでそこを修正すればいいというご指摘ですが数値？のどの部分が被っているのかが分かりませんでした。教えていただければ幸いです。

退会済みユーザー

2021/09/07 08:49 編集

すいません、数値のかぶりに関しては私の勘違いでした、いらぬ混乱を招いてしまい申し訳ありません… 修正する部分は - <link>のタグかCSSファイルのメディアクエリのどちらかを削除 - もしもCSSファイル内のメディアクエリを削除する場合(つまり<link>タグに記述しているメディアクエリを残す場合はm.ts10806さんが回答している通りtb.cssのmin-width768pxをmin-width: 768pxにするです

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

あなたの回答