🐈 【デイトラ】Web制作コース 中級編 DAY13
Web制作 デイトラ 今日の積み上げ
作成日： 2023/02/09
0

やったこと

日にち 学習時間 累計
37日目 4時間 51時間

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

横並びカードのコーディングと余裕のある人向け課題に取り組みました。
とにかくチャレンジ！

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

学習のまとめ

white-space

要素内のホワイトスペースをどのように扱うかを設定します。

  • ホワイトスペースを折り畳むかどうか、およびその方法
  • 行を自動折り返しの場面で折り返すことができるかどうか
white-space: nowrap;

nowrap
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。

white-space

calc

width: calc(33.3% - 24px * 2 / 3);

カードアイテムを余白（24px*2/3）をあけつつ、widthを3等分（33.3%）にして横並びにする。

:not() と :nth-child()

&:not(:nth-child(3n + 1)) {
    margin-left: 24px;
  }

3n + 1目 に margin-left: 24px; を（:nth-child(3n + 1)）適用させない（:not）ようにする。

3つずつ、複数列にわたり並ぶカードアイテムの４個目（3n + 1目）にmargin-leftを適用させたくないので使いました。

FlexBoxで左右入れ替え

  &:nth-child(2n) {
    flex-flow: row-reverse;
  }

１段目は左に画像、右にテキスト。2段目（偶数段）は左にテキスト、右に画像…のコード。

ひとこと

レスポンシブがまだまだ苦手です！克服するためにコーディングしまくります！
neko