生のCSSでレスポンシブ(メディアクエリ)を書く

## はじめに

こんにちは。記事を閲覧いただきありがとうございます。

知り合いの方から頼まれていたWeb制作がひと段落したので、その中で個人的に重宝した
レスポンシブの書き方についてまとめたいと思います。

本当ならSASS、SCSSで以下のようにスッキリ書けるらしいのですが、

```styles.css
.card-columns {
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}
```

コンパイルというのが難しく。。。。笑
約2日におよぶ激闘の末、、、、CSSでそのまま書く事にしました。。。。(・Д・)ﾕﾙｾ....

[teratail](https://teratail.com/questions/310270)でも質問させて頂きました。
ご回答いただいた方、ありがとうございました。。。！！！

## CSSによるメディアクエリ(レスポンシブ)の書き方

以下のように ```768px```から```991px```まで、という感じで画面幅の範囲を指定し、
範囲ごとにCSSを記載していきます。

```styles.css

/* sm */
@media screen and ( max-width:767px) { 
   h1 {
      font-size: 32px;
   }
}
/* md */
@media screen and (min-width:768px) and ( max-width:991px) { 
   h1 {
      font-size: 48px;
   }
}
/* lg */
@media screen and (min-width:992px) and (max-width:1199px)  { 
   h1 {
      font-size: 56px;
   }
}
/* xl */
@media screen and (min-width:1200px)  { 
   h1 {
      font-size: 56px;
   }
}

```


### Bootstrapのcard表示列数

以下のように画面の幅に合わせてcardの列数を変更したい場合は、
<img width="600" alt="column count 3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530421/7e18204a-dad1-bdcc-27e0-b7d5c890e5d4.png">
<img width="600" alt="column count 2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530421/5ac39f8d-9765-b034-2bc0-ea23de41d67f.png">
<img width="600" alt="column count 1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530421/b93d2fb5-1e06-e929-2014-efd7ad06c636.png">


それぞれのcardの親要素```.card-columns```に対して```column-count```を指定
あと、文字がcardからはみ出ちゃったりしたので、cardも```height``` を適宜指定

```styles.css

@media screen and ( max-width:767px) { /* sm */
   .card-columns {
      column-count: 1;
   }
}
@media screen and (min-width:768px) and ( max-width:991px) { /* md */
   .card {
      height: 280px;
   }
   .card-columns {
      column-count: 2;
   }
}
@media screen and (min-width:992px) and (max-width:1199px)  { /* lg */
   .card {
      height: 260px;
   }
}
@media screen and (min-width:1200px)  { /* xl */
   .card {
      height: 300px;
   }
}
```
Bootstrapの```card```コンポーネントについては[こちら](https://getbootstrap.jp/docs/4.2/components/card/)
公式ドキュメントからコードをそのままコピペできるので[Bootstrap](https://getbootstrap.jp/)好きです。（´∀｀）


### 文字の改行ポイントを指定
画像の幅が狭くなるにつれて、文字の改行を増やしたい場合
<img width="700" alt="lg" src="https://github.com/nakamura0736/pictures-20210103/blob/master/lg.png?raw=true">
<img width="700" alt="md" src="https://github.com/nakamura0736/pictures-20210103/blob/master/md.png?raw=true">
<img width="700" alt="sm" src="https://github.com/nakamura0736/pictures-20210103/blob/master/sm.png?raw=true">

まず、テキストの改行タグにクラスを付ける

```index.html
<div class='top-msg' id='msg-1st'>
    <h1 class='text-light'>あなたの
        <br class='br-1st'>「実家」は
        <br class='br-2nd'>「空き家」になって
        <br class='br-3rd'>いませんか？
    </h1>
</div>
```

画面幅ごとに改行タグへ```display: none;```を付与する。

```styles.css
@media screen and ( max-width:767px) { /* sm */
   .top-msg h1 {
      font-size: 32px;
   }
}
@media screen and (min-width:768px) and ( max-width:991px) { /* md */
   .br-1st{
      display: none;
   }
   .top-msg h1 {
      font-size: 56px;
   }
}
@media screen and (min-width:992px) and (max-width:1199px)  { /* lg */
   .br-1st, .br-3rd{
      display: none;
   }
   .top-msg h1 {
      font-size: 56px;
   }
}
@media screen and (min-width:1200px)  { /* xl */
   .br-1st, .br-3rd{
      display: none;
   }
}
```



余談ですが、Bootstrapの[ナビゲーションバー](https://getbootstrap.jp/docs/4.2/components/navbar/)は画面が小さくなると
自動でハンバーガーメニュー化してくれるのもいいよね！
<img width="500" alt="sm" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530421/45d321ba-aea8-6ac8-9ace-937e7a0cc840.png">


## 今回作った作品

ご紹介できるのはデモページのみですが、このようなページをvue.jsで作成し、firebaseにてwebホスティングしました。

[田端の空き家相談所(デモページ)](https://empty-house.web.app)
※あくまでデモページなので、```田端の空き家相談所```は実在しません！！笑

[github](https://github.com/nakamura0736/empty-house)はこちら

## おわりに

今回、初めて個人でWeb制作を頼まれて作成した事を通じて、
「webページ作ってよ！」と頼まれたら
「あいよ〜😎」と言えるくらいにはなったのではないかと思っています。

今後はSEO対策や、もっとオシャレな見た目を求められる気がするので、
そこらへんも出来るように腕を磨いていこうと思います！

頑張るぞー(・∀・)