レスポンシブWEBデザインについて
目的
- レスポンシブWebデザインとは何か理解すること
- Webサイトをレスポンシブ対応にする方法を理解すること
下記3行目の部分
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DEMO</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
画面サイズによってCSSを切り替える方法
@media (max-width: 500px) {
p {
font-size: 10px
}
}
メディアクエリ
表示された画面幅に応じて適用するスタイルを切り替える機能を指す。またメディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼ぶ
ブレークポイント
ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指す。@media (max-width: 500px){ }の場合は500pxがブレークポイントとなる。ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わる。PCとスマホのみの対応であれば、ブレークポイントは1箇所で済みますが、タブレットにも対応となると、2箇所ブレークポイントが必要になる
画面サイズごとにCSSを適用する方法
例
/* PC表示時 */
p {
font-size: 30px
}
/* タブレット表示時 */
@media (max-width: 1000px) {
p {
font-size: 25px
}
}
/* スマホ表示時 */
@media (max-width: 500px) {
p {
font-size: 20px
}
}