2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-03

はじめに

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

知り合いの方から頼まれていた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でも質問させて頂きました。
ご回答いただいた方、ありがとうございました。。。!!!

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の列数を変更したい場合は、
column count 3
column count 2
column count 1

それぞれの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コンポーネントについてはこちら
公式ドキュメントからコードをそのままコピペできるのでBootstrap好きです。(´∀`)

文字の改行ポイントを指定

画像の幅が狭くなるにつれて、文字の改行を増やしたい場合
lg
md
sm

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

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のナビゲーションバーは画面が小さくなると
自動でハンバーガーメニュー化してくれるのもいいよね!
sm

今回作った作品

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

田端の空き家相談所(デモページ)
※あくまでデモページなので、田端の空き家相談所は実在しません!!笑

githubはこちら

おわりに

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

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

頑張るぞー(・∀・)

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?