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

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

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

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

CSS

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

Q&A

解決済

1回答

2130閲覧

メディアクエリがよくわからない

xxflamin5

総合スコア11

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/06 05:02

###前提・実現したいこと
メディアクエリを使用して、760px以下/以上のデバイス毎にCSSを分けたい。

###発生している問題・エラーメッセージ
デベロッパーツールでスマホアイコンを押して検証した時にCSSが適用されない。
実際スマホで見てもPC用のCSSが適用されている。
PCのブラウザーの大きさを調整した時はブレイクポイントで切り替わる。

###該当のソースコード
------HTML------

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> </head> <link rel="stylesheet" href="css/pc_style.css" media="screen and (min-width:761px)"> <link rel="stylesheet" href="css/sp_style.css" media="screen and (max-width:760px)"> <body> <div id="main"> <div class="left"> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> </div> <div class="right"> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> てすと<br> </div> </div> </body> </html>

------CSS/PC------
#main{
max-width:760px;
border:2px solid #2D4BD8;
}

.left{
float:left;
}

#main:after{
clear:both;
display:block;
content:"";
}

------CSS/SP------
#main{
max-width:760px;
border:2px solid #C71619;
}

.left{
float:left;
}

#main:after{
clear:both;
display:block;
content:"";
}

###試したこと
max-widthの部分をmax-device-widthにする。
すると、PCで縮めるとCSSが適用されない。
スマホでコンテンツの右側に謎の余白が出る。

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

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

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

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

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

turbgraphics200

2017/02/06 05:04

htmlコード部分は```html~```で囲ってください。
guest

回答1

0

ベストアンサー

以下のようにviewportを指定してあげるといいです
また<link><head>内に書きましょう

html

1<head> 2<meta charset="utf-8"> 3<meta name="viewport" content="width=device-width, initial-scale=1"> 4<title>無題ドキュメント</title> 5<link rel="stylesheet" href="css/pc_style.css" media="screen and (min-width:761px)"> 6<link rel="stylesheet" href="css/sp_style.css" media="screen and (max-width:760px)"> 7</head>

投稿2017/02/06 06:33

gin

総合スコア2722

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

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

xxflamin5

2017/02/06 06:36

ありがとうございます! できました! linkはコピペミスでした。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問