「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で切り替えるなど）。
やり方は以下の記事が参考になりました。
PHPを使ったやり方の場合は、あらかじめXAMPPなどでPHPが使える環境を構築してから試してみてくださいね。
XAMPPを使ったローカル環境の作り方は以下の記事で解説しています。
まとめ
PCとスマホで大きくデザインを変えたい場合はメディアクエリを多用するとコードの見通しが悪くなりがちなので、いっそCSSを分けるというのも一つの手だと思います。
HTMLでブラウザ幅によって切り替える方法が一番簡単だと思うので、ぜひ試してみてください。
