Media Queries（レスポンシブデザイン）
2020/08/25
TohtoSurugadai_東都駿臺
<head>
<meta name="viewport"
content="width=device-width,inicial-scale=1.0">
<link=rel"stylesheet" href="responsive.css"> CSSをメディアクエリ用に別で用意。Viewportの後に記述。
</head>
<body>
<div class=" ">
<div class="clear"></div> Clearクラスだけをもつ空divを追加
</div>
</body>
【CSS】
*{ html全体に適用したいとき
box-sizing:border-box; 要素の幅の合計にPaddingとborderを含める（Marginは含まれない）
}
.class名{
max-width:1170px; 画面幅の上限を設定
width:100%; 上限を超えたらそれ以上は広がらず、中央寄せになる
}
@media(max-width:1000px){
.class名{
width:50%; タブレット時に2段組みになる
}
.clear{ 空タグとClearクラスで、フロートを解除させる
clear:let;
}
}
@media(max-width:670px){
.class名{
width:100%; スマホ時に1段組みになる
}
footer{
text-align:center; スマホ時はフッターを中央寄せに設定
}
}