Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

CSS 勉強メモ0620

画面をスマホサイズに合わせたい時はでコンテント属性に以下を記載。

<meta name="viewport" content="width=device-width,initial-scale=1">

画面のサイズによってスタイルを変え場合
以下は画面幅が600-800pxの時に

に背景色をつける。
@mediaの次に条件を記載
@media(min-width: 600px) and (max-width: 800px){
  body{
    background: skyblue;
  }
}

以下は画面の大きさが0~599px,600~799,800~
で条件を分けて表示しているサンプルコード

/* common */
/* small screen */

body{
  margin: 0;
}

.image{
  background: pink;
  height: 100px;
}

.text{
  background: gray;
  height: 100px;
}

aside{
  display: none;
  /* 初めは見えないように noneにする */
}



/* @media(min-width: 0px) and (max-width: 599px){
  body{
    background: skyblue;
  }
} 
これは0-599は初期条件と同じのため特にいらない、600pxになると勝手に切り替わるので2つ目のmaxは特にいらない*/

/* 小さい画面から基本的に作り上げていく */

/* medium screen */
@media(min-width: 600px){
  section{
    display: flex;
  }

  .image{
    width: 200px;
  }

  .text{
    flex: 1;
  }


/* large screen */
@media(min-width: 800px){
  section{
    width: 800px;
    margin: 0 auto;
  }
  aside{
    display: block;
    /* ここでblockとすることで800px以上で表示となる */
    width: 160px;
    background: plum;
  }
}

/* 全てに共通する内容を全ての条件に書くのは面倒なので、最後に書いたものが優先されることを利用して最後にだけ記載する */
u928212h
初めまして。 某ゼネコンで現場監督をしているものです。 現在、日々の業務改善をアプリを用いてできないか、さらにビジネス化を目指してプログラミングの勉強を2020年3月から始めました。 最終目標は日本の現場業務を効率化し、サービス残業をゼロにすることです!! どうぞよろしくお願い致します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away