デザイナーでもない私が「WordPress」でサイトを作っていますが、「style.css」ファイルを調べていた時に以下の設定を見つけました。
「@media screen and (min-width: 30em) {」
現在このサイトはレスポンシブ対応をしていますが、今回はあたらめて「レスポンシブ」について、特に「@media screen and (min-width)」とか「@media screen and (max-width)」などを解説します。
@media screen and (min-width: 30em) {とはどういう意味か？
１つずつ解説していきます。
そもそも「em」とは何か？
私の経験上、「px」でスタイルシートを記述している人が多いかと思います。
あとは「%」とか。
だから私がそうなんですが、いきなり「em」が出てくると「あれ、なんだっけ？」って一瞬思考が止まります（笑）
「em」は「エム」と読みます。
「em」とは、文字の高さを1emとした単位のことを言います。
「em」も「%」も、相対的な大きさを表します。
逆に「px」は絶対的な大きさを表しています。
たとえば「10px」はどの環境でも「10px」です。
では、「30em」はどれくらいの大きさになるでしょうか。
現在、1文字16pxに設定しているので、30emは「16×30＝480px」になります。
@mediaとは何か？
次に「@media」ですが、これは「メディアタイプ」を指定して個別のスタイルを適用する場合に利用します。
メディアタイプとは、「パソコンのディスプレイ」とか「テレビ」とか「テレタイプ」とかのメディアのことを指します。
今は各サイトやホームページはブラウザを利用してパソコンやタブレット、スマートフォンのスクリーン上で表示されることがほとんどですが、CSSの仕様上、スクリーンだけでなくテレビ・プロジェクタ・携帯機器・印刷・音声など様々なメディアにウェブページが表示されることが想定されています。
たとえば、ホームページをプリントアウトするなんてことはよくあります。「ぐるなびのクーポン券」とか。
メディアタイプの一覧を表にまとめると以下の表のようになります。
| メディアタイプ | 解説 |
|---|---|
| screen | パソコンのスクリーン |
| tty | 文字幅が固定の機器 テレタイプや端末など |
| tv | テレビ |
| projection | プロジェクタ |
| handheld | 携帯機器 |
| プリンタ | |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| aural | 音声出力 |
| all | すべてのメディア |
こうして一覧にしてみるとたくさんありますが、ほとんど使うことはないだろうというものも多いですよね。
@mediaは「style.css」などスタイルシートに記述もできますし、もちろんhtmlファイルにも<div id=”xx” style=”xxx:xx;”>のように直接記述することもできます。
@mediaを記述しない場合はすべてのメディアにスタイルが適用されます。
■max-width：
ビューエリアの最大幅を指します。このサイズより小さい場合に適用されます。
■min-width：
ビューエリアの最小幅を指します。このサイズより大きい場合に適用されます。
@media screen and (min-width: 30em) {でどうなる？
いよいよ本題です。
min-width: 30emだから、480px以上のサイズになると、この「＠media screen and （min-width: 30em）｛ ~ ｝”」で囲まれたスタイルシートが適用されるという意味です。
ややこしいのですが、「min-width」と書いておきながら「~以上」という意味になるので注意です。
逆に「max-width」の場合は「~以下」の場合に適用されます。
コメント