HTML/CSS

【簡単】CSS メディアクエリを使ってレスポンシブのやり方

更新日:

このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

基となる作品

はじめに

レスポンシブデザインとは簡単に説明すると様々なデバイス、画面サイズに応じて見やすく表示させることを言います。

そして、レスポンシブデザインを作る時は固定値(px)はあまり使わず%やvwを設定し、メディアクエリというものを使います。

それでは解説していきます

HTML

<body>
    <div class="wrapper">
      <div>NoImage</div>
      <div>NoImage</div>
      <div>NoImage</div>
    </div>
  </body>

CSS

body{
  margin: 0;
  background-color: pink;
}
.wrapper{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
@media screen and (max-width:757px) {
  .wrapper{
    display: block;
  }
}
.wrapper div{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 20vw;
  border: 1px solid black;
}
@media screen and (max-width:757px){
  .wrapper div{
    width: 75%;
    height: 35vw;
    margin: 0 auto;
    margin-top: 5vw;
  }
}
時は

@media screen andとあるのがメディアクエリです。

どういうことが書いてあるかというと、(max-width:757px;)画面幅757px以下になったら{ }内に書いた指示内容にする。

つまり、画面幅758px以上の時はwrapperクラスをdisplay:flex;、子要素は横並び

画面幅757px以下の時はdisplay:block;、子要素は縦並びになり、divがwidth: 75%;height: 35vw;margin: 0 auto;margin-top: 5vw;、画面幅758px以上の時より大きくなり中央揃えで上に5vwの間隔ができます。

これでスマホ表示の時、横並びで小さく見づらいデザインから縦並びの大きく見やすいデザインになりました。

このように画面幅に合わせてCSSを切り替えることをブレイクポイントといいます。

オススメしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.