【2日】きょうの学習ログ

きょうの学習内容

今日は主にCSSを進めた。

FlexBox

FlexBoxは、要素を横並び・縦並びに綺麗にデザインできるCSSのレイアウト手法の一つである。
これを使う際は、親要素をまずdisplayプロパティをflexに設定しないといけない。

<div class="parent">
  <p>子要素</p>
  <p>子要素</p>
  <p>子要素</p>
</div>

.parent {
  display: flex;
  justify-content: space-between;
}

子セレクタ(A>B)

section > p {
  color:orange;
}

<p>sectionの前</p>
<section>
  <p>secionの子1</p>
  <div>
    <p>sectionの孫</p>
    <div>
      <p>sectionのひ孫</p>
    </div>
  </div>
  <p>sectionの子2 </p>
</section>
<p>section直後</p>

※参考：https://kita-note.com/css-ketugoushi

感想

CSSは覚えるべき機能がたくさんあり、一気に覚えることが増えるので、昨日よりペースを落として慎重に進めた。
理解しているかどうか常に自問自答しながら、サンプルコードでも一々自分の手でコーディングすることを意識した。