デイトラweb制作コース 中級編 Day13
本日の学び概要
XDカンプからのコーディング
ユーザースニペットの登録
first-childの設定
ポジションによる上下左右の中央揃え
header固定
XDカンプからのコーディング編
本日は中級編13日目の学習まとめです。 所々、GPTメンターにかいつまんでいただきながら進めました。
スニペット登録
最初にスニペット登録をします。 というのも講義中に、メンターさんが「スニペットで〜」と言ってポンポンコードを出してくるのですが、そもそもそれらが登録されていない。 今後もよく使うようなので、下記のサイトを参考にユーザースニペット登録をしました。
Jsonはいまいちよくわからないので、私は自動的に変換してくれるサイトを使って登録しています。 reset cssとかベースコードも登録しておくと楽なのかなと思います。
first childの設定
ヘッダーナビを作成している過程で、メニュー通しの余白を取る際にリストの最初の項目だけはmarginの指定がいらない、ということがありますね。 そんな時の書き方。
&:not(:first-child){
margin-left: 40px;
}
最初(1番目)ではないliに対してのみ、margin-leftを効かせるというコード。
上下左右の中央よせ
テキストなどを親要素に対して、上下左右中央に寄せたい場合のコード。
<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%);
}
親要素に対して、子要素をposition absoluteにしてtopとleftからの位置を設定します。中心に来るのが要素自体の中心となるように、transform: translate(-50%, -50%); で要素を左上に50%ずらすことで、要素全体が親要素の中心に来るように設定しています。
ヘッダーの固定方法
<header class=”header”>
/* ヘッダーのコンテンツ */
</header>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ヘッダーを固定する場合、positionのfixed親要素がなくなるためwidthを改めて設定してあげる必要があります。
この記事が気に入ったらサポートをしてみませんか?