あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 CSS}}
[[start]]＞[[programming_start]]
====== CSS メディアクエリ@mediaの設定方法 ======

スクリーンサイズによってCSSを切り替えるメディアクエリの使い方。

===== 書き方 =====
共通のCSSを書いた後に、各端末用に変更の必要がある部分のみ@mediaに記述する。@mediaの指定の状態になった時のみCSSを「上書き」するので共通のCSSに書いてある内容をもう一度書く必要は無いが、共通のCSSの一部設定を無効にする事は出来ないため無効化したい場合は打ち消すような設定で上書きしなければならない。



==== パターン1 ====
高解像度(PCなど)のCSSを基本にスマホやタブレットなど低解像度に対応する。
<code css>
<style>
/* ここにPC用のスタイルを書く(共通) */
img{width:900px;}

/* 次のカッコ内に タブレットなど 900px 以下の端末のスタイルを書く */
@media (max-width:900px) {
  img{width:640px;}
}
/* 次のカッコ内に スマホなど 640px 以下の端末のスタイルを書く */
@media (max-width:640px) {
  img{width:100%;}
}
</style>
</code>

「max-width」により表示領域がこのサイズより狭い場合にカッコ内のCSSが上書きされます。

==== パターン2 ====
低解像度(スマホ)のCSSを基準にタブレットやPCなど高解像度に対応する。
<code css>
<style>
/* ここにスマホ用のスタイルを書く(共通) */
img{width:100%;}
/* 次のカッコ内にタブレットなど 640px 以上の端末のスタイルを書く */
@media (min-width:640px) {
  img{width:640px;}
}
/* 次のカッコ内にPCなど 900px 以上の端末のスタイルを書く */
@media (min-width:900px) {
  img{width:900px;}
}
</style>
</code>

「min-width」により表示領域がこのサイズより大きい場合にカッコ内のCSSが上書きされます。

===== PR =====
<html>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- respon_0 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9251612436023685"
     data-ad-slot="1409739163"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>

===== パターン1とパターン2どっちが良いか =====
PCスタイルを基本にスマートフォンを@mediaで対応するか、逆にスマートフォンを基本にPCスタイルを@mediaで対応するべきかの調べてみました。

ネットで調べると、
  * モバイルファーストがSEOによい？
  * IE8など@mediaに未対応のブラウザがあるのでPCスタイルをベースにした方が良い？
  * 作りやすい方から作れば良い・・
など色々あるようです。

レスポンシブデザインやモバイルフレンドリーに関する内容でググルと、既存のPCスタイルのWebサイトをモバイルでも見れるようにする情報が圧倒的に多いのでトラブル解決しやすいと思われます。
----
[[start]]＞[[programming_start]]
あちあち情報局

ユーザ用ツール

サイト用ツール

ページ用ツール
