学習に使用した教材・サイト

この記事は下記の教材やサイトを参考に作成いたしました。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)

やり方1：HTMLが読み込むCSSを分岐させる

html内 linkタグでcssを読み込む時点で、対応するcssを読み込ませる

HTML

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 400px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 401px)">

やり方2：CSS内で対応するCSSを読み込ませる

htmlからは、style.cssを固定で読み込むようにしたうえで、css内で対応するcssを読み込むようにする

CSS

@import url("mobile.css") screen and (max-width: 400px);
@import url("desktop.css") screen and (min-width: 401px);

やり方3：mediaクエリで設定する

htmlからは、style.cssを固定で読み込むようにしたうえで、css内でmediaクエリを使って画面サイズに応じたcssプロパティの設定値を定義する

CSS

@media screen and (max-width: 400px) {
    h1{
        background-color: black;
    }
}

@media screen and (min-width: 401px) {
    h1 {
        background-color: white;
    }
}

モバイルか、デスクトップか、どちらかを基準にして書いたほうがいい

共通の内容は、基準となる方に書く
基本は、デザインがシンプルになりやすいモバイルを基準としたほうがいい
- デスクトップの方は、デザインを追加修正するイメージ

CSS

h1 {
    color: red;
    background-color: black;
}

@media screen and (min-width: 601px) {
  h1 {
        background-color: white;
  }
}

HTMLヘッダにviewportを設定するのを忘れずに

content="width=device-width" に！

HTML

<head>
    <!-- ~~~略~~~ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ~~~略~~~ -->
</head>