レスポンシブ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ステータスが表示される場合は、パスを確認しましょう。
スマートフォン用CSSの読み込み優先順位を確認しよう
CSSの優先順位も注意が必要です。
スマートフォン用のCSSがPCより下に記載されているか確認しましょう。
また、PC用のCSSファイルとスマートフォン用のCSSファイルを分けていて外部ファイルで読み込んでいる場合は、
PCファイルよりあとに読み込まれているか（PCファイルより下に記載されているか）どうかしましょう。
Viewportの記載があるか確認する
レスポンシブデザインの表示には、Viewportの記載が必要です。
Adobe Dreamweaver CCに、レスポンシブデザインが便利なライブビュー機能がありますが、必ず、ブラウザで確認するようにしましょう。（ライブビュー機能では、Viewportの記載がなくても表示される場合があります。）
レスポンシブデザインにする場合は、下記のようなViewportタグを<head>～</head>内に記載します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSSで記載した１部分が反映されない場合
レスポンシブデザインの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だらけになる可能性もありますが、応急処置的なケースやどうしても上手くいかない場合は利用してもいいかと思います。
１から、レスポンシブデザインでページ作成する場合は、メディアクエリできちんと切り替えましょう。
