media queryを利用してスマホ対応するシンプルな方法

ホームページを作りたいなと思い始めて、HTMLを手書きでガシガシ書いていたわけですが、ふと。。。。。。。

普通、アクセスの大半はスマホからじゃね？

ということに気づき、、、

PC版も完成していないのに、急遽スマホ対応することになりました。

いろいろ調べてみた結果、ページを分ける方法もあったみたいですが、今回はCSSのmedia query(メディアクエリ)で対応してみたいと思います。

例えば、リクエストを送ってきたブラウザ側の画面の幅をもとに、適用するスタイルを変更する方法。

@media screen and (min-width: 200px){
  li{background-color: blue;}
}

今回の場合だと、 @media のあとに、スクリーンメディアのタイプを指定しています。これは、PCやスマホなどのスクリーンのことです。他にもプリント(印刷)する場合などを指定することができます。

そして and 条件でつないで、 min-width: ○○px と指定することで、○○px以上のときに、という条件を指定することができます。　

他にも、いろいろな条件を指定することができるので、興味がある方はぜひ調べてみてくださいね。