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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

Q&A

解決済

2回答

7691閲覧

wordpress style.cssのメディアクエリがエラーになる

uzr1709

総合スコア34

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

0グッド

0クリップ

投稿2018/03/13 06:24

編集2018/03/13 06:26

カスタマイズテーマでwordpressのページを制作しています。
レスポンシブ対応でメディアクエリを使用したいのですが、
style.cssにメディアクエリを記述するとエラーになります。

エラーメッセージ
「Expected RBRACE at line 37, col 2.」

以下CSSコード一部抜粋になります。

css

1header nav{ 2width:960px; 3 margin:0 auto; 4 text-align:center; 5 @media screen and (max-width:750px){ 6 } 7}

丁度「@media screen and (max-width:750px){」の部分が37行目にあたります。

header.phpにviewportは記載しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

過去に別のwordpressページを作成していた時(デフォルトテーマ)はstyle.cssにメディアクエリを書き込んでも問題ありませんでした。
何が問題なのでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

入れ子構造が間違ってるんですね。
(sassならできるかも)
正しくは下記になります。

css

1header nav{ 2 width:960px; 3 margin:0 auto; 4 text-align:center; 5} 6 7@media screen and (max-width:750px){ 8 header nav{ 9 /* デバイス幅750pxのものに適用するCSS */ 10 } 11}

投稿2018/03/13 06:29

miyabi_takatsuk

総合スコア9528

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

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

uzr1709

2018/03/13 06:31

ありがとうございます! テキストベースのサイトがsassなのでつい癖で書き込んでいました。 外に出したら問題なく動きました。
miyabi_takatsuk

2018/03/13 06:33

uzr1709さん> 気持ちわかります 笑 私もたまにやってしまいます。
guest

0

header nav{が閉じられていないからでは?

css

1header nav{ 2width:960px; 3margin:0 auto; 4text-align:center; 5} 6@media screen and (max-width:750px){ 7 /* 横幅750px以下の場合の記述 */ 8}

こういうことではないのでしょうか

投稿2018/03/13 06:28

dit.

総合スコア3235

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

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

uzr1709

2018/03/13 06:33

別サイトでsassを使用しているのでついくせで書き込んでしまいました。 ありがとうございます。 入れ子にせず外に出したら問題解決致しました。
dit.

2018/03/13 06:34

そういうことでしたか。解決されたようで何よりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問