参照： Progate 環境： macOS(Catalina)
- responsive.cssなど、別ファイルを作成して管理すると整理しやすい
/* タブレットサイズ時のCSSを設定 */
@media (max-width: 1000px) {
/* 適用したいCSSを記述 */
}
/* スマートフォンサイズ時のCSSを設定 */
@media (max-width: 670px) {
/* 適用したいCSSを記述 */
}- 要素の幅(width)の合計に
paddingとborderを含める設定 marginはborder-boxの合計値には含まれない- 基本的に全ての要素(*)に対して適用するのが望ましい
/* HTML全体に適用させる */
* {
box-sizing: border-box;
}- レスポンシブデザインを適用するためにはタグ内に設定する必要がある
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>floatの設定などがあるとレイアウトが崩れてしまうことがある- 空タグを作って、floatを解除することで、レイアウトを整えることができる
<!-- 空タグを追加 -->
<div class="clear"></div>/* floatを解除 */
.clear {
clear: left;
}- メディアクエリと合わせて使うことで画面幅に合わせた設定ができる
/* 親要素のCSS */
.parent {
display: flex;
}
/* 子要素のCSS */
.child {
/* 親要素に合わせて伸縮させる */
flex: auto;
}- 横並びと合わせて、要素の折返しを設定する
.parent {
display: flex;
/* 折り返したい要素の親要素に指定する */
flex-wrap: wrap;
}
.child {
flex: auto;
/* 子要素のサイズを親要素に対してどの割合にするか */
width: 50%;
}.parent {
/* 縦並びにしたい要素の親要素に指定する */
flex-direction: column;
}
.child {
/* 中央寄せにする */
margin: 0 auto;
}