@mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替えます。この実装によって、スマートフォンとパソコンでの段組みやサイドバーの表示非表示の切り替えを実現できます。

解像度に応じた切り替え

解像度に応じて変化します。パソコンをお使いでしたらブラウザの幅を動かして、色が変わることを確認してください。解像度:

注意点:@規則は、その規則内にセレクタを配置する。@media () .box{} ではなく、@media() { .box{} }という書き方をする。

dpi解像度による切替え: @media(min-resolution: 300dpi) とすれば300dpi以上で切替えとなる。

スタイルシートで記述
<div class="att-div">
  <div class="media-box">解像度に応じて変化します。パソコンをお使いでしたらブラウザの幅を動かして、色が変わることを確認してください。<span class="width-span">解像度:</span></div>
</div>
.media-box{
  height:200px;
  padding:10px;
}
.media-box .inbox{
    background-color: #eeeeee;
}
@media (min-width:0px){
  .media-box{
    background-color:#f6bfbc;
  }
  .media-box .width-span::after{
    content:"0~200px";
  }
}
@media (min-width:200px){
  .media-box{
    background-color:#7b6c3e;
  }
  .media-box .width-span::after{
    content:"200~400px";
  }
}
@media (min-width:400px){
  .media-box{
    background-color:#393f4c;
  }
  .media-box .width-span::after{
    content:"400~600px";
  }
}
@media (min-width:600px){
  .media-box{
    background-color:#203744;
  }
  .media-box .width-span::after{
    content:"600~800px";
  }
}
@media (min-width:800px){
  .media-box{
    background-color:#cd5e3c;
  }
  .media-box .width-span::after{
    content:"800~1000px";
  }
}
@media (min-width:1000px){
  .media-box{
    background-color:#e95295;
  }
  .media-box .width-span::after{
    content:"1000~1200px";
  }
}
@media (min-width:1200px){
  .media-box{
    background-color:#b8d200;
  }
  .media-box .width-span::after{
    content:"1200~1400px";
  }
}
@media (min-width:1400px){
  .media-box{
    background-color:#007bbb;
  }
  .media-box .width-span::after{
    content:"1400~1600px";
  }
}
@media (min-width:1600px){
  .media-box{
    background-color:#e60033;
  }
  .media-box .width-span::after{
    content:"1600~1800px";
  }
}
@media (min-width:1800px){
  .media-box{
    background-color:#ffea00;
  }
  .media-box .width-span::after{
    content:"1800~2000px";
  }
}
@media (min-width:2000px){
  .media-box{
    background-color:#884898;
  }
  .media-box .width-span::after{
    content:"2000px~";
  }
}

使用したCSSについて

::before と ::after 疑似要素 要素の前後に挿入 コピペで使えるHTML+CSS
要素の前に表示する::beforeセレクター、要素のあとに表示する::afterセレクター。どのような仕組みか。どのように使用するかを具体例とともに解説。
LINEで送る
Pocket

タイトルとURLをコピーしました