CSS レスポンシブ
media属性
<!– ウィンドウサイズが480px以下 –>
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<!– ウィンドウサイズが481px～979px –>
<link rel="stylesheet" href="medium.css" media="screen and (min-width:481px) and (max-width:979px)">
<!– ウィンドウサイズが980px以上 –>
<link rel="stylesheet" href="large.css" media="screen and (min-width:980px)">
@mediaルール
@media screen and (min-width: 480px){
～
}
@media screen and (min-width: 780px) and (max-width: 980px){
～
}
@media screen and (min-width: 981px){
～
}
例
<div class="top-img">
<img src="～" />
</div>
<style>
.top-img {
margin: auto;
padding: auto;
list-style-type: none;
}
@media screen and (max-width: 700px) {
.top-img {
width: 98%px;
}
}
@media screen and (min-width: 701px) {
.top-img {
width: 709px;
}
}
</style>
ビューポート
<meta
name="viewport"
content="
width=device-width,
height=device-height,
initial-scale=1,
maximum-scale=1,
user-scalable=no">
横幅、縦幅
width=device-width,
height=device-height,
※デバイスに合わせる(px指定も可)
初期表示倍率、最大倍率
initial-scale=1,
maximum-scale=1
上記例では初期表示倍率×1、最大倍率×1
つまり拡大できない。
(ゲーム等を除き非推奨)
拡大/縮小許可
user-scalable=no
アクセシビリティ、ユーザビリティは減少するが、
動作速度は速くなる。
１週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能