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

13571 ワード
HTML CSS レスポンシブ Bootstrap HTML テキストリンク

はじめに

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

知り合いの方から頼まれていた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の列数を変更したい場合は、


それぞれの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好きです。（´∀｀）

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

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


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

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

今回作った作品

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

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

githubはこちら

おわりに

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

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

頑張るぞー(・∀・)