今日の教材PDF：マルチデバイス対応の教科書①②

昔はWebとレスポンシブでHTMLも分けられていた

↓

今は共有する＝レスポンシブWEBデザイン

CSSは100%を超えないことを意識してつくる！（超えるとスクロールバーでる）

親から子がはみ出したときの対処法

box-sizing→親に入れるので、子は全て適用になる
calc→それだけできる！

calcの注意点
＋ -の周りは半角空白。x ÷優先！算数と同じ。
単位（％やpx）が違くても計算してくれる

メディアクエリ

レスポンシブ版のCSS記述。Web版の各項目の下に書いていく。

画面幅が何px以下になったらこうしてね。@mediaで記述する！
例だと1279px以下はこうしてね、になる！1279＝ブレイクポイント

PCと1つのスマホだけなら、元と@media1つだけでOK

メディアクエリの例

@media screen and(max-width:76px;){
header{
margin:0 auto;}

など、Web版と変えたいところだけ記載する。

レスポンシブはポインター（カーソルを合わせると手が出るとか）ないので、装飾するとか、そこに何かがあることをわかるように工夫する。

ページ16 画像の1項目目の話（良い解像度のPCへの対応をするには）

アプリ上で書き出しサイズを合わせることが大事！

例：Photoshopで□を何個か書く。
カンバス上の□ごとに書き出すには
→□を選択してレイヤーパネル右上三→書き出し形式
→サイズ　2x（2倍）で書き出し！
→スマホ用にこの2倍の画像を使って、50％のサイズ指定をする！！
解像度の高い画像になる

ul/ux

ジャンル・ターゲットによって設計を考える、見やすく！ユーザ目線で考える！
例：ボタンは見やすさを考え、44px以上にする

classとidの基本

class→スタイルの指定ができる。
id→スタイルつけられない。がidじゃなきゃいけない時がある。ページ内ジャンプ先（最後の購入ボタン）、javascript

※idにスタイルつけたいなら、classもつけてclassにスタイル書く。
#abc→abcのidに飛んでね

例　<a href = “#abc” /a>とかで飛ぶ
　　　　　↓
id#abcにスタイルつけたいなら、classもつける！
HTML: section id=”abc” class=”def”
CSS: section.def{ }

line-heightの基本

最低フォントの1.3倍にしないと見にくい。1.5倍が良い◎文字が1として上下0.25ずつ空く。

CSSのチェッカー：css validator

flexの色々。flexでしか使わない、cssがまとめてある。

☆ 「flexboxチートシート」ダウンロードすると良い◎
（mana 本まとめたもの。）
justiy-contentの事とか。

書き方

display:flex;
flex-wrap:wrap;
justiy-content:space-around(他によく使うのはspace-between。どちらもflexで並べたときの余白のこと)

reset.cssとstyle.cssは一緒に1枚で書いたほうが容量軽い。

reset先に書いてコメントアウトで区切る。