人気ブログランキング | 話題のタグを見る

授業16回目 CSS⑻ 2018.2.3(sat)

text-align

インライン要素はtext-align: center;を指定しても中央揃えにならない。
<div></div>などで囲ってから指定する。



<input>

インライン要素は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の順で記述したもの。
授業16回目 CSS⑻ 2018.2.3(sat)_f0397237_22561898.png































<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編)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori