HTMLのstyle属性にmediaクエリは書けないという話

htmlのstyle属性にmediaクエリは書けませんよという話しを書いていきたいと思います。

htmlのstyle属性にmediaクエリは記述できない
メディアクエリの指定の仕方
メディアクエリの種類
所感

htmlのstyle属性にmediaクエリは記述できない

何を血迷ったのか私は次のような書き方をしようとしました。

できるのかと思ったら、このようにメディアクエリをstyle属性に直接は書いてはいけないということですね。

メディアクエリの指定の仕方

メディアクエリの指定の仕方はいろいろあるようですがおおまかにわけると2つの方法があるようです。

linkタグでスタイルシートを読みこむときに media属性を使う
cssのファイルにmediaクエリを記述する

どちらがいいというのもないと思いますので好きなやり方でやればいいと思います。

linkタグmedia属性を指定するなら以下のようなコードになるようです。

<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)">
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">

cssに直接メディアクエリを書く場合は以下のようなcssコードになるのではないでしょうか。

@media screen and (min-width:480px) { 
  .hoge{}
}
@media screen and (min-width:768px) and (max-width:1024px) {
  .hoge[}
}
@media screen and (min-width:1024px) {
  .hoge{}
}

メディアクエリの種類

max-widthとかmin-widthの意味がどっちがどっちかよく忘れるため、その都度しらべているのでもはやここにメモしておきます。

Max Width：ビューエリアの最大幅。このサイズより小さい場合に適用
Min Width：ビューエリアの最小幅。このサイズより大きい場合に適用
Max Device Width：デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width：デバイスサイズの最小幅。このサイズより大きい場合に適用
Device Pixel Ratio：デバイスの解像度（webkit）
Orientation：デバイスの向き

結局のところ、htmlのstyle属性にはメディアクエリは指定できませんから、レスボンシブ対応させたかった場合は要素にセレクターをつけるくらいしか良い解決策がなさそうでした。しかしたまにしか使わない、クラスやidをcssに記述するのはなんだか気がひける気もします。ということでいらない個人談義に話がすりかわりつつありますのでこのあたりで失礼します。それでは。