{{tag>プログラミング関連 CSS}} [[start]]＞[[programming_start]] ====== CSS メディアクエリ@mediaの設定方法 ====== スクリーンサイズによってCSSを切り替えるメディアクエリの使い方。 ===== 書き方 ===== 共通のCSSを書いた後に、各端末用に変更の必要がある部分のみ@mediaに記述する。@mediaの指定の状態になった時のみCSSを「上書き」するので共通のCSSに書いてある内容をもう一度書く必要は無いが、共通のCSSの一部設定を無効にする事は出来ないため無効化したい場合は打ち消すような設定で上書きしなければならない。 ==== パターン1 ==== 高解像度(PCなど)のCSSを基本にスマホやタブレットなど低解像度に対応する。

「max-width」により表示領域がこのサイズより狭い場合にカッコ内のCSSが上書きされます。 ==== パターン2 ==== 低解像度(スマホ)のCSSを基準にタブレットやPCなど高解像度に対応する。

「min-width」により表示領域がこのサイズより大きい場合にカッコ内のCSSが上書きされます。 ===== PR ===== ===== パターン1とパターン2どっちが良いか ===== PCスタイルを基本にスマートフォンを@mediaで対応するか、逆にスマートフォンを基本にPCスタイルを@mediaで対応するべきかの調べてみました。ネットで調べると、 * モバイルファーストがSEOによい？ * IE8など@mediaに未対応のブラウザがあるのでPCスタイルをベースにした方が良い？ * 作りやすい方から作れば良い・・など色々あるようです。レスポンシブデザインやモバイルフレンドリーに関する内容でググルと、既存のPCスタイルのWebサイトをモバイルでも見れるようにする情報が圧倒的に多いのでトラブル解決しやすいと思われます。 ---- [[start]]＞[[programming_start]]