【web】レスポンシブに対応する

こんにちは、つちだにんじんです。
今回はweb制作における、レスポンシブに対応させる方法について自分なりのメモを残しておこうと思います。

レスポンシブに対応させるのって、結構面倒くさいですよね・・・

@media

レスポンシブに対応させる書き方として多く使われているのがこの「@media」だと思います。
@maediaは、「どのようなメディアの際にこの内容を反映させますか？」みたいな感じです。
例えば下記のような・・・↓

@media screen and (max-width: 600px){
  div{
    font-size: 15px;
  }
}

このような記述なら、「メディアが横幅600px以下の場合、divのフォントサイズを15pxにする」というものです。

このような感じで、メディアの種類を指定してCSSを当てていくものがこの@mediaです。

画面の幅で指定

先ほど書いたように、画面幅で指定することが多いです。
上記ではmax-widthで指定しましたが、「横幅が600px以上のものにのみ反映されたい！」という場合はmin-widthを使用します。

「この幅の時のみこのCSSにするんじゃ！！！」という時は

@media screen and (width: 600px)

でOKです。
横幅600pxの場合のみに適応されます。

画面の方向で指定

次はメディアの画面が「縦型」「横型」かで指定する方法です。
PCは基本的に横型ですが、スマホは縦型がほとんどです。
ただしこれだと判断基準が縦か横でしか判断されないので、画面幅での考慮がされずレイアウトは崩れやすかったりします。
書き方は

@media (orientation: portrait)/*縦型*/
@madia (orientation: landscape)/*横型*/

です。
時と場合で使い分けてください。

and、or、not

@mediaでの使用は、andやor、notなどで複雑な指定をすることも可能です。
例えば、「横幅が600px以下でhoverに対応したメディアの場合」を指定する場合、

@media screen and(max-width: 600px) and (any-hover: hover){
  /*内容*/
}

このように、複数の条件を指定することができます。
orでは「〇〇または××どちらかに当てはまる場合」を指定でき、notで指定したメディアを否定することができます。
複雑になってくると頭がこんがらがりますね・・・（遠い目）

hoverを指定する

PCなどカーソルを使用するデバイスの場合、hoverでの動きや変化をつけることが多いかと思います。
しかしタッチ画面などのスマホなどのデバイスだと、このhoverが効いたままなのはあまり良くありません。
そのため、@mediaを利用してhoverに対応したメディアの時のみ、hoverでの変化を実行することができます。

@media (any-hover: hover){
  /*ここにホバーの設定をかく*/
}

これです。
これはhoverに対応したデバイスであれば、中に記述した内容を実行するというものです。
逆に、hoverに対応していないデバイスを指定したい場合は、

@media (any-hover: none){
  /*ここに内容*/
}

これでOKです。
私はこれを知るまで、hoverでの装飾や動きをいちいち打ち消すということをしていました。
これを知ってからはその作業にもおさらばです！！！(爽やかな笑み)

相対単位

こちらは大きさなどを指定する単位についてです。
単位には絶対単位と相対単位があり、レスポンシブを考えるなら相対単位をうまく利用するのがお勧めです！

絶対単位
・px（絶対に何があっても変わらない単位）

相対単位
・%（指定した要素を基準にした%の割合）
・vw（画面の横幅によって可変する単位）
・vh（画面の縦幅によって可変する単位）
・em（指定した要素の１文字分を基準にした単位）
・rem（ルート（HTML）での1文字分を基準にした単位）

レスポンシブを考えるなら、上記のような相対単位を利用すると楽になります。
特に私は個人的に%とvwの乱用マンです。
特にvw推しなのですが、横幅によって大きくなりすぎたり小さくなりすぎたりするのがたまにキズですね・・・
そんな時はmax-widthを併用したり、そもそもHTMLにmax-widthを指定して大きくなりすぎないように抑えたりしています。

今回はレスポンシブについての内容でした。
きっと他にも様々な方法があるんだと思いますが、私の頭はまだあまり追いついていません。
むしろこれから歳と共に劣化が進むばかりです。悲し・・・

---

NINGEN×NINJIN | top

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！