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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

2回答

241閲覧

レスポンシブデザインが反映されません。

mm-.

総合スコア5

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/11/22 01:32

編集2019/11/22 05:38

メディアクエリが反映されません。
レスポンシブデザインの練習として以下のようなコードを書いたのですが一向にchromeに反映されません。
原因を教えていただけると幸いです。

エラーメッセージ

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>practice</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="main.css"> 8 <link rel="stylesheet" type="text/css" href="responsive.css" media="screen and(max-width:900px)"> 9 10 11 </head> 12 <body> 13 <div class="header"> 14 <div class="inner"> 15 <h1>Example Header</h1> 16 </div> 17 </div> 18 <div class="nav"> 19 <div class="graph"> 20 <ul> 21 <li>home</li> 22 <li>about</li> 23 <li>SampleLink1</li> 24 <li>SampleLink2</li> 25 <li>SampleLink3</li> 26 <li>SampleLink4</li> 27 <li>portlate</li> 28 <li>content</li> 29 </ul> 30 </div> 31 </div> 32 <div class="body-content"> 33 <div class=main> 34 <div class="sections"> 35 <div class="section neko1"> 36 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko1" height="200px" width="100%"> 37 <h2>Section1</h2> 38 <p>kjdfkjdfkjddkjdfkjdfkjdkjjdffkjdf</p> 39 </div> 40 <div class="section neko2"> 41 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko2" height="200px" width="100%"> 42 <h2>Section2</h2> 43 <p>jdkjdfkjdfkjdfkjdfkjdfkjdkjdfkjdfkjdkjdffkjdf</p> 44 </div> 45 <div class="section neko3"> 46 <img src="https://i.ytimg.com/vi/W0rlEVh1Z9w/maxresdefault.jpg" alt="neko3" height="200px" width="100%" > 47 <h2>Section3</h2> 48 <p>kjdfkjjdfkjdkjdfkjdfkjdkjdffkjjdkjdfkfkjdf</p> 49 </div> 50 </div> 51 </div> 52 </div > 53 54 55 </body> 56</html> 57

css

1responsive.css 2.section{ 3 width:47.5%; 4 }

試したこと

responsive.cssに書いても反映されなかったので、main.cssに
@media screen and(max-width:900px){
.section{
width:47.5%;
}
}
と書いたりしたのですが出力先に変化はありませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2019/11/22 01:42

コードはマークダウンのcode機能を利用してご提示ください。 また、各cssファイルの中身がわからないと再現確認できませんのであわせてご提示ください。 読み込みは成功してますよね? >crome 誤字です。
azuapricot

2019/11/22 01:58

キャッシュクリアはしてますよね? F12→更新ボタン右クリック→キャッシュのクリアとハードの再読み込み
guest

回答2

0

screen andのあとにちゃんと半角スペースつけたら反映します。

投稿2019/11/22 02:00

H40831

総合スコア973

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

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

mm-.

2019/11/22 11:58

無事反映されました!ありがとございます????‍♂️
guest

0

ベストアンサー

CSS

1@media screen and(max-width:900px) { 23@media screen and (max-width:900px) {

and の後ろには半角スペースが必須です。
私も勉強中の頃に同じミスでハマったのを覚えています。

投稿2019/11/22 04:58

編集2019/11/22 04:59
iss

総合スコア506

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

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

mm-.

2019/11/22 05:07

無事反映されました!ありがとうございます????‍♂️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問