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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1126閲覧

デベロッパーツール上で反映された変更が、ワードプレスのCSS上では効かないのは何故?

lino

総合スコア16

WordPress

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/05/19 03:51

編集2018/05/19 05:25

前提・実現したいこと

CSSでテーブルに横スクロールバーを導入(スマホ用)

発生している問題

デベロッパーツール上で問題なくクラス追加が反映されるが、いざワードプレスのCSSに記述するとoverflow: auto;しか効いてない

該当のソースコード

CSS側 /*sp_table*/ .scroll{ overflow: auto;     white-space: nowrap !important; } HTML側 <div class="scroll"> <table>...</table> </div>
CSS、HTML

試したこと

キャッシュが残っているのかと思い、スーパーリロードを実行。
scrollのクラスより優先されているものが無いか探した。→打消しマークも無く、.scrollの上にあるCSSはelementだった。

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

wordpress template:
MH magazine lite

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

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

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

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

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

m.ts10806

2018/05/19 03:58

WordPressをタグに追加し、利用しているテーマを追記してください。あと、コードはコードブロック```で囲ってください。(質問テンプレートでは「該当のソースコード」とありますが、その中にコードを記載します)
Lhankor_Mhy

2018/05/19 04:55

情報が足りないためなんとも言い難いですが、overflow: auto; まで効いているということなので、次の行に文法エラーがある、とか? 全角スペースが入ってるとかありがちな話ですね。
lino

2018/05/19 05:26

mts10806さん、ありがとうございます。修正したのですがこれで問題ありませんか?
m.ts10806

2018/05/19 05:30

その下のCSS、HTMLの枠が不要ですね。あとできればHTMLとCSSはブロックをわけていただきたいです。冒頭を```CSS ```html のようにして囲うことで言語にあったコードハイライトがされます。質問編集画面ではプレビューが表示されるのでそちらを見ながら調整してください。
lino

2018/05/19 05:31

Lhankor_Mhyさん、ありがとうございます。初歩的なミスをご指摘いただきありがとうございます。クラスとクラスの間に謎余白がありました。今、もう一度同じクラスを直打ちしてみたら、解決しました!
lino

2018/05/19 05:33

mts10806さん、わかりにくい表記をしてしまい大変失礼しました。以後、気を付けます。ありがとうございました。
m.ts10806

2018/05/19 05:35

「overflow: auto;    」の後ろの空白でしたね。解決したようで良かったです。回答を書かれて自己解決とされては?(それか Lhankor_Mhyさんが回答を書かれた方がいいかも)
guest

回答1

0

自己解決

再度CSSを直打ちして、全角余白を消した。

投稿2018/05/19 05:34

lino

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問