閉じる

レスポンシブデザインでCSSが効かない場合に確認すること

 レスポンシブWebデザインでCSSが効かない場合に確認することをまとめました。

一からレスポンシブデザインでホームページを作成するのではなく、元からあるPCページをスマートフォン対応、タブレット対応にする場合は、スマホ用にCSSを作成し、Media Queriesで表示を切り替えます。
その際、慣れていないとCSSが効かない場合に直面します。

メディアクエリの設定例

タブレット等、画面サイズが1024px以下のレイアウトを設定する場合、下記のように、@media screen and (max-width:~~)で設定します。

@media screen and (max-width:1024px){
.sample{
display: none;

}

}

この例だと、クラスsampleが、1024px以下で非表示になります。

 

CSS全てがレスポンシブに反映されない

全くCSSが表示されないケースは、Media Queriesの設定が間違っているか、まったくCSSがあたっていない(CSSが読みこまれていない)、Viewportの記載がない、この3パターンが多いと思います。

CSSが読みこまれているか確認する

簡単な方法は、ページのリンク切れチェックやGoogle Chromeなどのブラウザのソース内で、CSSパスをクリックして、設定したCSSが表示されるかどうかで確認できます。もちろん、デベロッパーモード(F12)でも確認できます。

CSSが表示されれば、CSSは読み込まれています。他の原因です。

表示されずに、404ステータスが表示される場合は、パスを確認しましょう。

Viewportの記載があるか確認する

レスポンシブデザインの表示には、Viewportの記載が必要です。

Adobe Dreamweaver CCに、レスポンシブデザインが便利なライブビュー機能がありますが、必ず、ブラウザで確認するようにしましょう。(ライブビュー機能では、Viewportの記載がなくても表示される場合があります。)

レスポンシブデザインにする場合は、下記のようなViewportタグを<head>~</head>内に記載します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSSで記載した1部分が反映されない場合

レスポンシブデザインのCSSで1部分が反映されない場合、Media Queriesの設定が間違っている場合もありますが、PCページのリセットCSSが読み込まれているケースも多くあります。

PCページのリセットCSSと共存する場合は、リセットCSSファイルの読み込みの順番などを設定しましょう。

リセットCSSを読み込まない設定例

PCのリセットCSS(reset.css)をスマホで読み込ませたくない場合、スマホサイズで読み込む設定を、linkタグのmediaに「min-width」を指定します。下記は、横幅640pxに設定した例です。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 641px)" href="reset.css" />

!importantで強制的に表示する

メディアクエリの優先順位の記載間違いなどで、うまくスマホ表示できない場合でも、

!important

を記載すれば解決できます。

@media screen and (max-width:1024px){
.sample{
display: none!important;
}
}

!importantだらけになる可能性もありますが、応急処置的なケースやどうしても上手くいかない場合は利用してもいいかと思います。

 

1から、レスポンシブデザインでページ作成する場合は、メディアクエリできちんと切り替えましょう。

関連記事

  1. TCD

    WordPressでポータルサイトを簡単に作成できるテーマ(テン…

  2. BlockchainをWebにどう活用するかw3cイベントで議論…

  3. SSH接続で使える初心者のためのUnix/Linuxコマンド

  4. css grid

    IE11に対応させる場合はCSS Grid Layoutを利用し…

  5. chrome

    2017年9月の日本でのブラウザシェアとChrome62のフォー…

  6. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

ピックアップ記事

  1. Classic Editor
  2. Hacking Alert! You account was hacked
  3. サーチコンソール
ページ上部へ戻る