CSS

メディアクエリー

viewportの幅に応じてスタイルを切り替えるために、メディアクエリーの基本を学びます。

  • メディアクエリー

メディアクエリー

・CSSで使う仕組みで、今回はビューポートの幅に応じてスタイルを切り替える方法について学んでいきます。

・例えばブラウザの幅が600px〜800pxの間のメディアを使っているデバイスだけに特定のスタイルを適応したい場合に使うことのできるやり方です。

・@media(min-width: 600px) and (max-width: 800px){}とすると６００pxと８００pxの間にブラウザ幅が来た場合スタイルが適応されます。

・更に{}の中に適応させたいスタイルを書いてあげればいいでしょう。わかりやすいように背景をピンクに変えたい場合はbody{}に対してbackground: pink;としてあげましょう

・（）の前後には半角空白が必ず必要なので注意しましょう

・あとは{}の中に今までやってきたCSSのスタイルを書きたしていけば思い通りのスタイルをつけていくことができます。

-広告-

 

 






-CSS