レスポンシブ対応の方法2選【CSS】

お疲れさまです。hanawaです。

今日は昼ごはんにオフィスの近くにある、テイクアウト限定の海鮮丼屋さんに海鮮丼を買いに行きました。

なかなかお昼ご飯に生魚を食べることってできないので、種類もかなり多くあって飽きないと思うし、新鮮でおいしかったです。

ぜひ皆さんも買ってみてください。

そして今日嬉しかったことは、今やっているコーディングの案件で、tagawaさんが「ふわっとしたあしらいを入れてほしい」というのを言い忘れていたらしいのですが、私の直感でページ全体にふわっとしたあしらいを入れていたので、意思疎通できたみたいで嬉しかったです。

さて、本日のテーマはレスポンシブ対応の方法2選【CSS】です。

先週末からコーディング作業に入っているのですが、現在の案件がページ数が2枚なのでSCSSを使わずにコーディングしています。

ですが、それでも一つのページあたりのCSSファイルだけでも500〜700行はいってしまうので、今回はメディアクエリを使わずに、スマホ用とPC用でCSSファイルを分けることにしました。

臨機応変に使い分けれるといいなと思いますので、ぜひ参考にしてみてください。

レスポンシブ対応に入る前に…

レスポンシブ対応させるには、headタグ内にviewportという言われるmetaタグを記述する必要があります。（コピペOK）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

①CSSファイルを分ける

例えばスマホ、タブレット、PCでの3通りのレスポンシブをファイルで分けることができます。

• style.css（PC）
• tablet.css（タブレット）
• mobile.css（スマホ）

上記のCSSファイルを作成したとします。

下記の内容をheadタグに記述することで、レスポンシブ対応ができます。

<link rel="stylesheet" type="text/css" href="style.css"><!-- 769px以上 -->
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="tablet.css"><!-- 768px以下 -->
<link rel="stylesheet" media="screen and (max-width: 450px)" type="text/css" href="mobile.css"><!-- 450px以下 -->

スマホとPCで大きくデザインが変わるなら、ファイルごとに分けると作業がしやすいですね。

②メディアクエリを使う

一つのファイルで完結でき、要素ごとにピンポイントで指定できるのがメリットです。

#sample{
  width: 40%;
}
@media (max-width: 768px){
  #sample{
    width: 20%;
  }
}

上記のブレークポイントは768pxで、769px以上はwidthが40%、768px以下はwidthが20%という指定になります。

ブレークポイントに関しては、さまざまなサイズがありますので、用途に応じて使い分けてみてください。

参考サイト：【簡単】レスポンシブ対応させるCSSの書き方を解説【２通りあります】

年末からずっとデザイン業務だったので、こんなにみっちりコーディングやってるのが楽しくて仕方ないです。

デザインもこんな感じでポンポン進めたいのですが…

力量不足ですので、これからも頑張ります。

今日もお疲れさまでした。明日もよろしくお願いします！