CSS小技アップデート！LPコーディングの裏側

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。

先日マナリンクの新LPをリリースしました。

今回もデザインとコーディングさせてもらいましたが、コーディングの際にこれまで使っていたCSSの小技をアップデートをしたので書き記しておこうと思います。

背景画像に背景色を重ねる時はlinear-gradientを使う

背景画像にさらに色を透過で重ねたいぜ！って時に以前だったらこんな感じで擬似要素を使っていました。

.about{
  position: relative;
  background: URL('~assets/img/lp/ad4/about_bg_sp.jpg') top center / cover no-repeat;
  width: 100%;
  padding: 50%;

  &::after {
    content: '';
    background-color: rgba($bg-primary, .7);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index:1;
  }
}

上記でもいいのですが、背景画像の上に背景色を重ね、さらにその上にテキストなどの要素がのっかってくる場合、z-indexを使わざるを得なくなります。
z-indexとpositionにstatic以外の値が指定されている場合、意図した重なりにならないことがあるのであまり使いたくありません。。。
※詳しくは「スタックコンテキスト」で調べると出てきます。

.about {
  background:
    linear-gradient(rgba($bg-primary, .7), rgba($bg-primary, .7)),
    url('~assets/img/lp/ad4/about_bg_sp.jpg') top center / cover no-repeat;
}

backgroundのショートハンドでlinear-gradientと画像を指定すれば、疑似要素を使って、positionであれこれ書かずに済みます。

最初の文字を大きくしたい時は::first-letterを使う

最初の文字を大きくしたい！みたいなデザインを再現する時にspanで囲みがちでした。

// このマークアップでspanにあれこれする
<p class="faq__question">
  <span>Q</span>テストや入試前に授業を追加することはできますか？</p>
</p>

が、最初の行の最初の文字にスタイルを適用してくれる疑似要素::first-letterを使用すればspanで囲む必要はありません🦄✨

<p class="faq__question">Qテストや入試前に授業を追加することはできますか？</p>

.faq {
  &__question {
    font-size: 1rem;
    font-weight: bold;
    padding: .5rem 1rem;
    background-color: #edf1f2;

    &::first-letter {
      margin-right: .5rem;
      font-size: 2rem;
    }
  }
}

だがしかしbut（急にRAD）！
このままだと文章が複数行になった時に、行間が気持ち悪い感じになってしまいます。

ここはひとつ、最初の行にスタイルを適用してくれる擬似要素::first-lineを使用して、line-heightとvertical-alignを調整してあげましょう。

.faq {
  &__question {
    font-weight: bold;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 2; // 追加
    background-color: #edf1f2;

    &::first-letter {
      margin-right: .5rem;
      font-size: 2rem;
      vertical-align: sub; // 追加
    }

    &::first-line {
      line-height: 1; // 追加
    }
  }
}

はい、違和感のない行間やったね！！＞💪🦄

三角形はborderではなくclip-pathを使う

これまで三角形を作る時は大体こんな感じでした。

.triangle-bottom {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #000 transparent transparent transparent;
}

が、以前にこちらの記事を拝見しまして、clip-pathにしてみました。

.triangle-bottom {
  display: inline-block;
  width: 20px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0%, 50% 50%);
  background-color: #000;
}

わかりやすい…！これまで作りたい三角形のサイズから実際にスタイルに適用する数字を計算していましたが、clip-pathのpolygonで三角形の形を決めてしまえば、あとは計算不要で作りたい三角形のサイズを指定するだけです。

【おまけ】スクロールアニメーション

スクロールしたら画面下に固定のCVエリアがふわっと表示するようにしました。

LP自体、Vueでコーディングしているので、スクロールする要素をtransitionで囲んで、.v-enter-toなどのトランジションクラスでアニメーションを実装します。

<transition>
  <section v-show="visible" class="cv-area">
    <div class="cv-area__buttons">
      // ボタンの中身
    </div>
</transition>

// スクロールアニメーション
.v-enter {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 2s;
}

.v-enter-to {
  opacity: 1;
}

.v-leave-to {
  opacity: 0;
  transition: opacity 2s;
}

mounted()でaddEventListenerを実行すればOKです。

data() {
  return {
    visible: false,
    scrollY: 0,
  }
},
mounted() {
  window.addEventListener('scroll', this.scroll)
},
methods: {
  scroll() {
    this.scrollY = window.scrollY
    if (!this.visible) {
      this.visible = this.scrollY > 50
    } else if (this.scrollY < 40) {
      this.visible = !this.visible
    }
  },
},

まとめ

リリース後になって、ああCVエリアの固定はposition:fixed;じゃなくてFlexboxとかCSSGirdでやる方法もあったよなとか、反省点はあったのですが、次の機会に挑戦してみたいと思います。

以上！誰かの役に立てば幸いです😊