PCとスマホで別のCSSを読み込む(CSSを切り替える)最も簡単な方法

サムネイルCSS

「PCでは『pc_style.css』を読み込みたいけど、スマホでは『sp_style.css』を読み込みたい…」みたいな感じで、PCとスマホで別のCSSを読み込む方法を紹介します。

 

スポンサーリンク

PCとスマホで別のCSSを読み込む最も簡単な方法

→HTML側で読み込むCSSをブラウザ幅によって切り替えます。

コードは以下の通りです。

<!-- pcとspでスタイルシートを分岐 -->
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/sp_style.css">
<link rel="stylesheet" media="screen and (min-width:769px)" href="css/pc_style.css">

 

メディアクエリを使ってmax-width: 768px(768px以下の時)は「sp_style.css」を読み込み、min-width: 769px(769px以上の時)は「pc_style.css」を読み込むようにしています。

ちゃんとCSSを切り替えられているか確認する場合は、sp_style.cssにbody{background-color: red;}、pc_style.cssにbody{background-color: blue;}みたいな感じで書いてブラウザ幅を変更すると確認できると思います。ブラウザ幅によってスタイルが切り替えられていれば成功です。

 

注意点

同じスタイルを適用する場合は両方のCSSに書くことを忘れないようにしましょう(ここ大事)

僕自身スマホ用のCSSにスタイルを書いてパソコン画面で確認して「あれースタイルが効いてないなー(すっとぼけ)」みたいなことをやっていました笑

サッと微調整をした時などは特に忘れがちです。注意してくださいね。

 

PCとスマホで別のCSSを読み込むその他の方法

上記の方法が一番簡単だと思いますが、JavaScriptやPHPを使って切り替えることもできます。

この方法だとブラウザ幅だけではなく、デバイスによって読み込むCSSを切り替えることもできます(PCとiPhoneやAndroidで切り替えるなど)。

 

やり方は以下の記事が参考になりました。

PCとスマホで別々のスタイルシートを読み込む方法 | TechMemo
PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。 PCとスマホで別々のスタイルシートを読み込む方法 スタイルシートを読み込むlink要素のmedia属性にmax-device

 

PHPを使ったやり方の場合は、あらかじめXAMPPなどでPHPが使える環境を構築してから試してみてくださいね。

XAMPPを使ったローカル環境の作り方は以下の記事で解説しています。

【初心者向け】MacにXAMPPをインストールする方法から使い方まで解説!
今回は初心者に向けてMacにローカルの開発環境を構築するXAMPPをインストールする流れを解説します。 XAMPPをインストールするこ...

 

まとめ

PCとスマホで大きくデザインを変えたい場合はメディアクエリを多用するとコードの見通しが悪くなりがちなので、いっそCSSを分けるというのも一つの手だと思います。

HTMLでブラウザ幅によって切り替える方法が一番簡単だと思うので、ぜひ試してみてください。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
CSS
スポンサーリンク
でざなり