やったこと

日にち	学習時間	累計
34日目	3時間	47時間

デイトラ Web制作コース
中級編 DAY12

課題ヘッダーを作り終えたので「余裕がある人向けの課題」として色々なヘッダーのデザインにチャレンジしてみました。

コーディング上達のコツは、デザインを見た瞬間にコーディングの流れが思い浮かぶ状態になるまで手を動かしまくること

とのことですので、まずはチャレンジしてみました！

学習のまとめ

transition

transition: ①all ②3s ③ease ④0s;

①transition対象のCSSプロパティ（allの場合はすべて）
②変化が始まってから終わるまでの時間s（秒）またはms（ミリ秒）で指定
③変化の仕方
ease（初期値）: 開始時と終了時は緩やかに変化
④アニメーションを指定の時間送らせてスタートさせる。s（秒）またはms（ミリ秒）で指定。
※ ①から④は順不同

【CSS transition】transitionの使い方・簡単アニメーション

BEM

CSS設計手法のBEMをわかりやすく図解してみた

z-indexをSassで管理する

// マップを用意
$layer: (
	modal: 100,   // モダール
	drawer: 40,   // ドロワー
	floating: 30, // フローティングアイテム
	header: 20,   // ヘッダー
	footer: 10,   // フッター
	default: 1,
);

// map-get関数を使って出力
.header {
	z-index: map-get($layer, 'header');
}

// map-get関数
map-get($map,$key)

Sassのmap操作をおさらいする+便利な関数をいくつか

ひとこと

まだまだ「デザインを見た瞬間にコーディングの流れが思い浮かぶ状態」ではないので、次回もとにかくコーディングしまくります！