授業16回目 CSS⑻ 2018.2.3(sat)
2018年 02月 14日
■text-align
インライン要素はtext-align: center;を指定しても中央揃えにならない。
<div></div>などで囲ってから指定する。
インライン要素はwidthを指定できないものが多いが、<input>は指定できる。
■opacity:数値
要素の不透明度を指定する。
値:0.0以上1.0以下の数値
*0.0→完全に透明
*1.0→完全に不透明
ex.
.entry .btn:hover{
opacity: 0.7;
}
■レイアウト
⑴固定レイアウト
画面を小さくしてもレイアウトが変化しない。
スクロールして見ることができる。
⑵可変レイアウト
画面を小さくしていくと、途中までは縮小されて表示される。
グリッドレイアウト・リキッドレイアウト・フレキシブルレイアウトなどがある。
■レスポンシブデザイン
作り方は2通りある。
⑴スマホsize→PC size(小→大の順に記述)スマホ向けのデザインを先に考える。
⑵PC size→スマホsize(大→小の順に記述)PC向けのデザインを先に考える。
例は⑴のスマホsize→PC sizeの順で記述したもの。
*<meta name="viewport" content="width=device-width">を<head>タグ内に記述する。
*@media screen and (min-width:〇〇px){}で指定する。
*ブレイクポイント(CSSを切り替える地点・表示が切り替わる地点)を設定する。
→@media screen and (min-width:〇〇px){}の〇〇pxにブレイクポイントの数値を記述する。
*上書きされるので、順番を守って記述する。
♣︎参考にしたサイト・本♣︎
『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社
by zooori
| 2018-02-14 20:30
| 授業まとめ(CSS編)