【CSS】 レスポンシブ / メディアクエリ ～ @media ～

CSS/SCSS/SASS

  ■ はじめに

https://blogs.yahoo.co.jp/dk521123/37602012.html
でやった吹き出しの向きをデバイスによって変えてみる

  補足：吹き出し

 * 吹き出しの復習については、以下の動画サイトを参照。
動画
https://dotinstall.com/lessons/balloon_css

 

  ■ メディアクエリ / @media

 * デバイスに合わせてCSSを切り替えることができる

  構文

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) and (max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
}

 

  ■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
 /* 表示位置 */
 top: 30px;
 left: 30px;
 /* 吹き出し内容の表示範囲 */
 width: 200px;
 height: 100px;
 background: #ff9800;
 /* 丸角 */
 border-radius: 15px;
 /* 文字色：白 */
 color: #fff;
 /* 文字：中央 */
 display: flex;
 align-items: center;
 justify-content: center;
 /* ★必要★ */
 position: relative;
}

/* 吹き出しの三角形部分(下向きの吹き出し) */
.balloon:before{
 position: absolute;
 /* 表示位置調整 */
 right: 20px;
 bottom: -20px;
 content: "";
 /* 三角形 */
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 10px;
 /* 三角形向き調整 */
 border-color: #ff9800 transparent transparent transparent;
}

/* ▼横幅が480px以上の場合 */
@media screen and (min-width:480px) {
  /* 吹き出しの三角形部分(右向きの吹き出し) */
  .balloon:before{
     position: absolute;
     /* 表示位置調整 */
     left: -20px; /* 変更 */
     top: 20px; /* 変更 */
     content: "";
     /* 三角形 */
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     /* 三角形向き調整 */
     border-color: transparent #ff9800 transparent transparent; /* 変更 */
  }
}

/* ▼横幅が768px～1024pxの場合 */
@media screen and (min-width:768px) and (max-width:1024px) {
  /* 吹き出しの三角形部分(上向きの吹き出し) */
  .balloon:before{
     position: absolute;
     /* 表示位置調整 */
     left: 20px; /* 変更 */
     top: -20px; /* 変更 */
     content: "";
     /* 三角形 */
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     /* 三角形向き調整 */
     border-color: transparent transparent #ff9800 transparent; /* 変更 */
  }
}

/* ▼横幅が1024px～1200pxの場合 */
@media screen and (min-width:1024px) and (max-width:1200px) {
  /* 吹き出しの三角形部分(左向きの吹き出し) */
  .balloon:before{
     position: absolute;
     /* 表示位置調整 */
     left: 200px; /* 変更 */
     top: 20px; /* 変更 */
     content: "";
     /* 三角形 */
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     /* 三角形向き調整 */
     border-color: transparent transparent transparent #ff9800; /* 変更 */
  }
}

</style>
</head>
<body>
<div class="balloon">
  <p>はろーわーるど</p>
</div>
</body>
</html>

 

  関連記事

  【CSS】 CSS で図形を描く

https://blogs.yahoo.co.jp/dk521123/37602012.html