本日の学び概要

• XDカンプからのコーディング

• ユーザースニペットの登録

• first-childの設定

• ポジションによる上下左右の中央揃え

• header固定

XDカンプからのコーディング編

本日は中級編13日目の学習まとめです。 所々、GPTメンターにかいつまんでいただきながら進めました。

スニペット登録

最初にスニペット登録をします。 というのも講義中に、メンターさんが「スニペットで〜」と言ってポンポンコードを出してくるのですが、そもそもそれらが登録されていない。 今後もよく使うようなので、下記のサイトを参考にユーザースニペット登録をしました。

• https://blanche-toile.com/web/vscode-snippets

• https://migi.me/vsc_snippet/

Jsonはいまいちよくわからないので、私は自動的に変換してくれるサイトを使って登録しています。 reset cssとかベースコードも登録しておくと楽なのかなと思います。

first childの設定

ヘッダーナビを作成している過程で、メニュー通しの余白を取る際にリストの最初の項目だけはmarginの指定がいらない、ということがありますね。 そんな時の書き方。

&:not(:first-child){
        margin-left: 40px;
        }

最初（１番目）ではない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を改めて設定してあげる必要があります。