タブレット・スマホ画面にあわせる
viewportの設定
HTMLの<head>タグ内に記述する↓
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
メディアクエリを別シート（responsive.css)に記述する場合は↓を追記
<link rel=”stylesheet” href=”responsive.css”>
必ず<meta name=”viewport….>の下に記述すること
CSSの最初に記述↓
*{
box-sizing:border-box;
}
すべてのCSSに適用することが推奨されているので＊で指定する
CSSの先頭辺りに記述する
画像などの要素がレイアウト崩れしないため
要素の幅がwidth+padding+border（線の太さ）となる
marginは含まれない
| メディアクエリ | cssコード | ブレイクポイント | 想定画面幅 | フォントサイズ |
| PC | max-width:1170px; width:100% | 通常のCSS記述（；が必要） <body>全体に適用させる | 1170px | |
| タブレット | @media(max-width:1000px ){ } | 1000px | 1000～670px | h1 32px h2 20px |
| スマホ | @media(max-width:670px){ } | 670px | 670px以下 | h1 24px p 14px |
@media(条件){クラスなど} ｛｝内のcssが適用される
pxの後ろに;（セミコロン）はつけない
floatの解除
子要素がすべてfloat（浮いてる）の時、親要素に高さを持たせる
htmlにて
<div class=”clear”></div>を追加（中身は記述不要）
CSSにて
.clear{
clear:left;
}
htmlは親要素の中、子要素の最後に追加する
CSSはstylesheetの上のほう？
スマホのヘッダーアイコン
まだjQueryで作成できない
htmlにスマホ用メニューアイコンを記述
<span class=”fa fa-bars menu-icon”></span>
メニューアイコンはデフォルト（stylesheet.css)では非表示にして、画面幅670px以下で表示させる
stylesheet.css
スマホ用メニューアイコンのクラスをcolor,font-size,float,paddingなどを設定
それとともに display:none(非表示）も記述
responsive.css（スマホ設定部分）で記述
通常のアイコンクラスをdisplay:none;→非表示
スマホ用メニューアイコンクラスをdisplay:block;→表示
タブレットは何も記述しなくても問題なし
display:flex;の使い方
html
<ul class=”flex-list”> (親要素）
<li class=”li1″>item1</li> (横並びにしたい要素）
<li class=”li2″>item２</li>
<li class=”li3″>item３</li>
<li class=”li4″>item４</li>
</ul>
CSS
.flex-list{
display:flex; （横並びにする）→縦並びにするとき flex-direction:column;
flex-wrap:wrap; (折り返したい要素の親要素ん指定記述）
}
.flex-list li{
flex:auto; (親要素の幅に合わせて伸ばす）→中央寄せにする margin:0 auto;
width:50% (折り返したい要素に指定記述）
}
コメントを残す