やったこと

日にち	学習時間	累計
31日目	2時間	43時間

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

前回は動画教材を一切見ずにコーディングをしましたので、今回は答え合わせの意味も込めて動画教材を見ながら、新たにコーディングをしてみました。

学習のまとめ

背景の一括設定

今まで背景（background）は一行ずつ設定していましたが、一括で設定できるとは知りませんでした。

background - 背景の設定をまとめて指定する

上下左右中央に配置

<div class="parent-class">
    <div class="child-class">上下中央になる</div>
</div>

.parent-class {
  position: relative;
}
.child-class {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 上下中央
.child-class {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 左右中央
.child-class {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

positionとtransformで要素を上下左右中央寄せしよう

今までmarginのみで中央揃えや上下余白の調整をしていたので、このやり方にはびっくり。
こんなコーディング方法もあるのですね。

AdobeXd 標準の影

rgba(#000, 0.16)

AdobeXdではよく使われる表現とのこと。

ヒーローイメージ

.hero-header-container { 
	background: url(/images/awesomephotodude.jpg) no-repeat center; 
	background-size: cover; 
	height: 100vh; 
	position: relative; /* 中の要素を "absolute"で配置するときに便利 */ }

ユーザーを惹きつけろ！魅力的なヒーローヘッダー作成の黄金ルール10個まとめ
ヒーローヘッダーの特徴とデザインの参考にしたいサイト

感想

当たり前ですが全然コーディングの仕方が違いました。
しかし動画を見ずに自分でコーディングをすることによって得られた気付きがたくさんあったので、まずは自分で書いてみることは大切ですね。コーディングの引き出しが増えました。