デイトラ Web制作コース 中級編 DAY 13 LP制作 3（共通パーツの作成）

ご覧いただき、ありがとうございます！

DAY5から21までLP制作を行なっています。
今回は、何度も出てくるパーツを、共通パーツとして使い回しできるように実装しました。

共通化するタイミング

パーツを共通化するタイミングは、それぞれですが、デザインカンプを見た時に明らかに同じスタイルなら最初から共通化しておくと、より効率的にコーディングできるようになります。

私はコーディングしていく流れで、セクションごとに全体をざっと確認しています。
共通化できるところが見つかれば、そのタイミングで共通化します。

基準としては、3回同じパーツが出てくる場合は、使い回すことが確定しているので、共通化するといいそうです。

---

共通パーツの作成

共通パーツを作成する際、スタイルが少し異なる場合でも、可能な限り共通化を行います。

基本はCSSのheaderの上辺りに共通クラスをまとめて記載します。

ボタンの共通化

通常のボタン

今回のLPでは、ボタンが2パターンでてきました。
まず、1つ目のボタンは以下のコードでスタイルを実装しています。

/*-------- CSS --------*/

.button {
  font-weight: 700;
  letter-spacing: 0.48px;
  padding: calc(10px - 2px) calc(30px - 2px); /* borderの2px分引く */
  display: inline-block;
  border-radius: 60px;
  border: 2px solid currentColor; /* "currentColor"を使用 */
  background: #fff;
  color: #111;
  min-width: 150px;
  text-align: center;
}

borderプロパティ内で使用している"currentColor"という値があります。
これはcolorプロパティ内の色が同じ時に使用できます。

「文字の色を使ってね」という意味です。
続いて、色違いのボタンレイアウトを実装します。

色違いのボタン

白と黒の色が反転して、スタイルは同じです。
色違いのボタンクラスで指定するのは「背景色」と「文字の色」、「ボーダーの色」になります。

/*-------- CSS --------*/

.button.button--type2 {
  background: #111;
  color: #fff;
}

この時、1つ目のボタンで"currentColor"を使用したので、"color: #fff;"の色がボーダーにも引き継がれます。

"currentColor"を使うことで、上書きする回数が減り、より効率的にコーディングすることができます。

HTMLでは2つ目のボタンのクラス名を「class= "button" "button--type2"」と2つ付けます。

見出しの共通化

上記のタイトルとサブタイトルは何回も出てくるので、共通化しました。
クラス名を"heading"という名前にして、作成しています。

<!-------- HTML -------->

<div class="heading">
    <div class="heading__en">MERIT</div>
    <div class="heading__ja">OHA!を使うメリット</div>
</div>

/*-------- CSS --------*/

.heading {
  text-align: center;
  font-family: Montserrat; /* 英語も日本語も同じフォントなので、headingクラスに記載 */
}

.heading .heading__en {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3.8px;
}

.heading .heading__ja {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.12px;
  margin-top: 14px;
}

これで、次の見出しがでてきた時にCSSを書き直す必要がなくなります。

今回は「英語タイトル」と「日本語タイトル」がありますが、ここでも共通している部分は、親クラスにスタイルを当てるとさらに効果的です。

コンテンツ幅の共通化

コンテンツ幅がセクションごとに同じ場合も共通化します。

パソコン版では「max-widthの指定」、スマホ版では「paddingで横幅を指定」することが多い印象です。

<!-------- HTML -------->

<section id="merit" class="merit">
  <div class="merit__inner inner"> <!-- ←ここ -->
    <div class="merit__title">
      <div class="heading">
        <div class="heading__en">MERIT</div>
        <div class="heading__ja">OHA!を使うメリット</div>
    </div>
  </div>
  ：

/*-------- CSS --------*/

/* スマホ版 */
.inner {
  padding-left: 15px;
  padding-right: 15px;
}

/* パソコン版 */
.inner {
  padding-left: 30px;
  padding-right: 30px;
  max-width: calc(1140px + 30px * 2); /* コンテンツの最大幅を指定 */
  margin-left: auto; /* 中央寄せ */
  margin-right: auto; /* 中央寄せ */
}

スマホ版では、画面が狭いので、コンテンツが画面いっぱいに広がることが大切。
パソコン版では、画面幅が大きくなっても読みやすさを保つために、幅を制御する必要があります。

そのため、パソコン版では「max-widthの指定」、スマホ版では「paddingで横幅を指定」することが多いんだと思います。

---

感想

今回のセクションでは共通化について詳しく勉強しました。

初級編でも共通クラスの話は出てきましたが、パターン違いの共通化は初めて行いました。

共通化ではありませんが、「width: 100%」を当てる時ってどんなときだっけ？ふと思いました。

ブログを書くため振り返って自分のコードを見ていると、メインビジュアルのところで、以下のように実装していました。

/*-------- CSS --------*/

.mv__img {
  position: absolute;
  right: 0;
  bottom: -108px;
  width: 100%;
  text-align: center;
}

.mv__img img {
  width: 345px;
}

"width"をいimgタグを囲ったmv__imgクラスと、imgタグの両方に当てています。
初歩のことなのかもしれませんが、私は「なんでmv_imgクラスにも当ててるの？」ってなったので調べました。

.mv__imgの"width: 100%;"：
画面幅が小さくなった時のレスポンシブ対応で役にたつ。

これだと思います。

375px幅で作成して、メイン画像が345px。
画面幅が345px以下になっても、width100%なので幅に合わせて変動して表示してくれます。

という疑問が解決できました。
共通パーツに関する感想ではありませんでしたが、今日はこの辺りにしたいと思います。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8