学習に使用した教材・サイト
この記事は下記の教材やサイトを参考に作成いたしました。
【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>