「CSS」@mediaで画面の幅を小さい順に使用する

2022年2月21日

書式
@media 種類 and (min-widthで幅を指定){処理コード}
@mediaで画面の幅を小さい順に記述します。
スマホやタブレットやPCに応じてCSSを分けて適用させることができます。
種類は、主にallまたはscreenまたはprintが使用されています。
allは全て、screenは画面、printはプリンタを表します。
使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      /*共通*/
      #cft {
        background: yellow;
      }
      /*幅が250px以上のときに上書きで反映されます*/
      @media screen and (min-width: 250px) {
        #cft {
          background: red;
        }
      }
      /*幅が600px以上のときに上書きで反映されます*/
      @media screen and (min-width: 600px) {
        #cft {
          background: green;
        }
      }
    </style>
  </head>
  <body>
    <p id="cft">Study Skill</p>
  </body>
</html>

結果
1.@media screen and (min-width: 250px) {処理コード}
画面の幅が250px以上のときに上記CSSを使用します
2.@media screen and (min-width: 600px) {処理コード}
画面の幅が600px以上の時に上記CSSを使用します。

CSS

Posted by arkgame

関連記事: