CSSとは
- HTMLの見た目を定義する
- 実は思ったより高機能
- いろんなTipsがある
セレクタの優先順位
- !important > id指定 > class指定 > タグ指定 > 順番
- それぞれの足し算
-
優先順位に頼らない！
ただ、想定通りにいかない原因を探るために優先順位のことを知っておくのが大事
CSSボックスモデルを知っておこう
- margin
- border
- padding
- 内容
サイズがずれる！ってなりませんか？
- デフォルトではサイズ指定は内容に対しての指定
borderとpaddingの分、広くなる - 奥義「box-sizing: border-box」
calc、ご存知ですか？
- 「メニューは幅300pxで、コンテンツエリアは残りの幅」
width: calc(100% - 300px)
CSSフレームワーク
- 適用しただけで良い感じの見た目になるすごいやつ
- 目的別に定義されたクラスを利用して見た目をよくしていける
- BootstrapやTailwind、Bulma など
CSSは書きにくい・・・
- そんなときにCSSメタ言語
- CSSの冗長な記述法を低減
- 関数／変数：「この色よりちょっと暗い色」なんて指定ができる
- SaSS／Less
transitionによるアニメーション
- 要素の 2 つの状態間の変化を定義することでアニメーションとなる
マウスカーソルが重なったときにじわっと色が変わる、など - 本格的なアニメーションを作るための仕様もある
CSSのおもしろさ
- 進化が早い：あんなに苦労してたのにプロパティ１つで出来るようになってる・・・
- 奥が深い：苦労はするが、思った通りのレイアウトがシンプルなHTMLタグで実現できたときの嬉しさは格別
最後に
- Webアプリで見やすい画面・魅力的な画面を作るにはCSSの知識は必須！
- CSSメタ言語は絶対導入してください！