レスポンシブ対応

2024/12/23授業

viewportをお忘れなく

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>

メディアクエリの使い方

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}
@media only screen and (max-width: 960px){
	body {
		background:#666;
	}
}

@media only screen and (max-width: 640px){
	body {
		background:#333;
	}
}

モバイルフレンドリーのポイント！

• 横スクロール出さない
• 文字が小さすぎない
• ボタンが押しやすい

おススメの手順「まずは横スクロールを無しにしましょう。」

1. ブレイクポイントを決める
2. 横のスクロールバーは20px程度で計算しておく
3. widthを「%」に切り替える
4. marginを再調整する「解らなくなったらとりえず margin:0;」
5. box-sizing:border-box;で「padding」と「border」は内側にする

メディアクエリはいろいろなパターンを反復してみましょう。

※メディアクエリの使い方は色々ありますがまずはこの書き方で覚えてしまいましょう。

本日の授業コード

HTML

CSS

@charset “UTF-8”;

body {
background: #999;
}
.test {
width: 80%;
margin: 0 auto;
height: 200px;
background: #ccc
}
.test01{
width: 80%;
margin: 0 auto;
background: #111;
display: flex;
}
.child01{
width: 50%;
height: 200px;
background: #fff;
}
.child02{
width: 50%;
height: 200px;
background: #eee;
}

@media only screen and (max-width: 640px){
.test {
width: 95%;
background: #ff00FF
}
.test01{
width: 95%;
display: block;
}
.child01{
width: 80%;
margin: 0 auto 0 auto;
height: 200px;
background: #fff;
}
.child02{
width: 80%;
margin: 20% auto 0 auto;
height: 200px;
background: #eee;
}