今日の教材：デザインの考え方の教科書⑦

コーディングの注意点

7ページの順番を守る！①→④

Adobe fonts　

自分で買ったAdobe Fontsを自分のポートフォリオに使うのはOK
ただし、依頼された会社の作るときに自分で買ったの使うのは規約違反！（会社間で使うのはダメ！）
もし使いたいなら、会社に買ってもらう。

配色

・イメージカラーを最初に決める！ロゴに合わせることも多い
・基本カラー3色まで！（白黒グレー除く）
3色の比率70%、25%、5%が目安◎

CSSの疑問点について

display :の使い方。

①大浜先生おもちゃは元々はdisplay : block;のdivを横積みにしたいからdisplay : inline-block;にしてる。imgは何もいじってない。

↓

並べたとき、変な隙間ができる

改行が半角スペースとしてみなされることがある。でも改行がないとコード見にくい。。。

<div> <div><–!>
–><div> <div>ってやると、見やすくできる

or親にfont-size：0;→全て文字消えるので子のfont-size復活させる。

ちなみに…
4つの□□□□を

↓

□□
□□したいなら、2つで100％とすれば、文字を送りになる！1つ50％と設定する！

②aタグでボタン作る時に使う。

aタグはインラインだけどボタンはWとH指定したい→ display : block;にする！

widthとmax-widthの使い分け

width：ボックスの幅を指定（固定値）。画面大小しても大きさ変えたくないとき使う。
max-width：最大値を指定（最大は親の〇％）。画面に合わせて大きくなって良いけどこれ以上大きくならないで、の数値を入れる。画面サイズに合わせたいとき。

どちらかでも、同時に指定でもできる。

同時に使うとき：画面表示サイズに従って大きくなってもよいけど、これ（960px）以上のときも、どんなときも画面幅を100％としてね。

とりあえず、画面表示サイズに従って大小したいときは、max-width:〇px;＋width:100%を両方つけるのが無難！！！

例：サイト全体（親）が660px。
　　width:400px;　＝400px（固定）
　　max-width 50％　＝（最大は親の〇％）＝330px。

両方満たしている方（小さい方）が優先になるので、この場合は330pxで表示される。

min-widthはその逆！画面表示サイズに従って小さくなってもよいけど、これより小さくなった時も、どんなときも画面幅を100％としてね。