【使用言語】
CSS
【きっかけ】
サンプルサイトを作成して行く過程で、PCとSP（スマホの略）を別々の表示にしたいと思った。
のでググってみると、メディアクエリなんちゃらというのがヒット。
試しにやってみることにした。
【解決策】
CSSにてメディアクエリを設定する
/* pc表示時のスタイル指定*/
@media screen and (min-width: 415px) {
※ここにPC用のスタイル指定を記述
}
/* sp表示時のスタイル*/
@media screen and (max-width: 414px) {
※ここにSP用のスタイル指定を記述
}
上記記述で
画面サイズが415px以上と判定された場合→PC
画面サイズが414px以下と判定された場合→SP
という意味でPC/SPの判別を行っている。
header部分で判別をさせる方法もあるが、こちらだと1つのCSSファイル上で
画面の表示を管理できるのでこちらを採用した。