🤩

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

5 min read

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

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

今回もデザインとコーディングさせてもらいましたが、コーディングの際にこれまで使っていた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-indexpositionstatic以外の値が指定されている場合、意図した重なりにならないことがあるのであまり使いたくありません。。。
※詳しくは「スタックコンテキスト」で調べると出てきます。

.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)!
このままだと文章が複数行になった時に、行間が気持ち悪い感じになってしまいます。
スクリーンショット 2021-06-15 19 13 02

ここはひとつ、最初の行にスタイルを適用してくれる擬似要素::first-lineを使用して、line-heightvertical-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; // 追加
    }
  }
}

スクリーンショット-2021-06-15-19 13 02

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

三角形は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-pathpolygonで三角形の形を決めてしまえば、あとは計算不要で作りたい三角形のサイズを指定するだけです。

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

スクロールしたら画面下に固定の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でやる方法もあったよなとか、反省点はあったのですが、次の機会に挑戦してみたいと思います。

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

🔔 採用情報

記事をご覧いただきありがとうございました。

オンライン家庭教師マナリンクでは、一緒にオンラインで本当に良い先生と出会える場を創るエンジニアを募集しております!

マナリンクは、オンライン家庭教師と生徒と保護者を繋ぐプラットフォームを運営している事業です。大きく分けて3つの性質の違うプロダクトを開発しています。

  • オンライン家庭教師を集客するメディア
  • 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト
  • 宿題やチャットなどの機能でオンライン指導ができるWebアプリおよびネイティブアプリ

ビジネスモデルと技術選定、およびその意図に関して以下の図にまとめておりますので、ぜひ拡大してご覧ください。

マナリンクのビジネスモデルと技術選定

現在の採用情報は以下のNotionをご覧ください。

https://noschool.notion.site/TypeScript-PHP-8b37ebb8d2344b58b0fd88acff0e21af

開発したい新機能も多いし、改善したいところも多いので手を貸してください🙏🏼
手が回っていなくて心底困っています。

ご応募はもちろん、一度話を聞いてみたいと思っていただければカジュアル面談の申し込みも大歓迎です。
ご連絡をお待ちしております!

Discussion

ログインするとコメントできます