ワードプレスでどのデバイスにもあうようにＣＳＳを変更したい

Question

お世話になります。
wordpressでascendというテンプレートを使ってサイトを作っています。
すごくいいテンプレートなのですが、見るデバイスによって一番上のメニューにかぶってしまったり、他のコンテンツとかぶってしまったりします。

CSSで調整しているのですが、書き方が悪いのか反映しなかったり、思うとおりになりません。

CSSで調整する際に大方の大きさのポイントによって切り分けて、余白などを調整しているのですが、iPadとアンドロイドタブレットでは、大きさがほぼ同じなのに、表示がかなり違います。ＯＳごとやブラウザごとにCSSを変更する方法を教えて頂きたいです。

よそ様のサイトを見るとどのデバイスでも見てもきれいに表示されていて、何が違うんだろう…。と思います。

何を基準に変更したらいいのか、どこをどのように変更したらいいのか、皆さんがどのようにされているのか、どのデバイスでも大丈夫な方法はあるのか、なども教えて頂けると幸いです。

ワードプレスはほとんど初めてで、テンプレートを使っている為、コード等をどのように示したらよいのか分からない状態です。

具体的な回答が難しい事に気付きました。

少し質問を変えて、それぞれのデバイスに合うように皆さんはどのように対処されているのでしょうか？
また、クロームの『検証』を使うと分かりやすいよ、と聞いたのですが、何か修正するのに役立つ方法やツールなどありますでしょうか？

よろしくお願い致します。

Comments

[m.ts10806]

WordPressタグを入れてください。テンプレートに関係するのであればCSSだけで対応できる問題ではないように思います。私はCSSはタグ登録しているため質問が目につきましたがWordPressであれば話は別です。また実際のコードや現在の表示、目指す表示を明示してください。この内容だけでは回答は得られづらいように思います。

[退会済みユーザー]

https://ja.wordpress.org/support/topic/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9F%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

[liveasnotes]

質問者さんへ，他サイトで同様の質問をした際は，そのリンクを貼るようにしましょう．また，解決したらその旨を両方のサイトで伝えましょう（参考：https://teratail.com/help#posted-otherservice）

Answer 1

方法はいくつかあります

1. Javascriptでブラウザを判別し，cssを書き換えたり，追記したりする方法
2. ブラウザの実装状況の違いを利用して，各ブラウザ用のCSSを効かせる方法
3. 最初から，実装の違いがあまりないcssプロパティで，デザインする
4. 実装の違いを埋めてくれるようなスタイルシートや，JSライブラリ（Polyfillと言う）を用いる

具体的な実装方法の解説等はここではしません．めんどくさいのと，質問者さんがどのような方法を選ぶか分からないためです．参考リンクを貼っておくので，どの方法をとるか検討してみてください
具体的な方針が決まり，実際にコードを書いてみてうまくいかなかったら，またteratailに来ましょう

---

①実装状況の違いを埋める（自前）

事前に各ブラウザ用のCSSを書いてクラス名などで分けておき，UserAgentというものを判別して，条件分岐で各要素にクラスを追加する，というのが良くある手順だと思います．

• 使用してるブラウザを判定したい
• userAgentでブラウザ＆デバイス判別 2017年版
• JavaScriptでブラウザ判定をするなら「Platform.js」がラク
• ライブラリを使わない素のJavaScriptでDOM操作／スタイル関連操作

②実装状況の違いを利用する

CSSハック，@support，条件分岐コメントなど色々あります．とっても楽しいですよ（）

• OS、ブラウザごとのCSSハックなどまとめ
• IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ
• CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
• 【HTML】IE用の条件分岐コメント

③実装状況の違いがあまりないものを使う

Bootstrapとか，有名どころのよくできた部品セットを組み合わせて，できるだけ非冒険的なデザインにすることで，私たちは実装状況の違いに振り回されることから解放されるのです

by 私（いま考えた）

• 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
• CSSフレームワークのメリット・デメリット
• Bootstrap 導入 利点、欠点
• 頼りすぎ注意！便利なBootstrapの隠れたデメリット

④実装状況の違いを埋める（やってもらう）

基本は，スタイルシートやJSライブラリをぶち込むだけです．（）

• normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化
• 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説
• リセットCSS は何を使う？ 2018年ランキング5選紹介。
• PolyfillとPonyfill
• 初心者は要チェック！HTML5、CSS3の対応状況を確認できるCan I USEが便利！
• Flexboxを多用することにおける懸念点について
• CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入
• あ，Polyfillは色々ありすぎるので，「●● Polyfill」のような感じで，それぞれ検索してください

おまけ

2012年の記事ですが，基本概念を押さえるのには良いかも

• どうする？ブラウザ機能格差の解消　第1回 3つの実装の考え方

対象ブラウザをある程度絞るのも大事です

Comments

[tissa]

詳しい解説ありがとうございました。
知りたかったことが書いてあるリンクもたくさん…。感激しました。
まだまだ何を聞くべきかなどすらも分かっていないので、すごく助かりました。
ハードルの高い内容もありますが、勉強します。
材料を下さったので本当に嬉しいです。