Heading (見出し)

使い方

  1. 見出しデザインはLPのデザインで数回使われるようであればコンポーネントとして登録してください。
  2. 数字入りや罫線のデザインがあるものについては、色と同じようにLPデザインのスタイルで上書きをして整えてください。

画面表示

Heading01 見出し1

ここに見出し3が入ります

ここに見出し4が入ります

ここに見出し10が入ります

HTML/CSS（Sass）

<h2 class="e-heading e-headingdesign">
 <span class="e-headingdesign_headingSub">Heading01</span>
 <span class="e-headingdesign_headingMain">見出し1</span>
</h2>

<h2 class="e-heading e-headingdesign03">ここに見出し3が入ります</h2>

<h2 class="e-heading e-headingdesign04">ここに見出し4が入ります</h2>

<h2 class="e-heading e-headingdesign10" data-number="10">ここに見出し10が入ります</h2>
.e-heading {
  display: flex;
  font-size: 1.75rem;
}
@media screen and (min-width: 768px) {
  .e-heading {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  .e-heading {
    font-size: 3.2rem;
  }
}

.e-headingdesign {
  flex-direction: column;
  align-items: center;
}
.e-headingdesign_headingSub {
  color: #004da3;
}
@media screen and (min-width: 768px) {
  .e-headingdesign_headingSub {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .e-headingdesign_headingSub {
    font-size: 2.8rem;
  }
}
.e-headingdesign02 {
  display: block;
}
.e-headingdesign02 span {
  display: flex;
  align-items: center;
  color: #004da3;
  font-size: 1.8rem;
  text-transform: uppercase;
}
.e-headingdesign02 span::before {
  content: "";
  display: inline-block;
  margin-right: 2rem;
  width: 4rem;
  height: 0.1rem;
  background-color: #004da3;
}

.e-headingdesign03 {
  justify-content: center;
  align-items: center;
}
.e-headingdesign03::before, .e-headingdesign03::after {
  content: "";
  width: 7rem;
  height: 0.3rem;
  background-color: #004da3;
}

.e-headingdesign04 {
  background-color: #004da3;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.e-headingdesign05 {
  background-color: #004da3;
  border-top: solid 0.5rem #009bac;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.e-headingdesign06 {
  justify-content: center;
  align-items: center;
}
.e-headingdesign06_inner {
  position: relative;
  display: inline-block;
  transform: translateY(-20%);
}
.e-headingdesign06_inner::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 50%;
  width: 8rem;
  height: 0.5rem;
  background-color: #004da3;
  transform: translateX(-50%);
}

.e-headingdesign07 {
  border-bottom: 4px solid #004da3;
}

.e-headingdesign08 {
  border-left: 4px solid #004da3;
}

.e-headingdesign09 {
  color: #004da3;
}

.e-headingdesign10 {
  display: block;
  position: relative;
}
.e-headingdesign10::before {
  content: attr(data-number);
  display: block;
  color: #004da3;
  font-size: 3rem;
}
.e-headingdesign10::after {
  content: "";
  position: absolute;
  top: 2rem;
  left: 0;
  width: 10rem;
  height: 0.3rem;
  background-color: #004da3;
}
.e-heading {
  display: flex;
  font-size: 1.75rem;
  @include mq(pc) {
    font-size: 3.2rem;
  }
  @include mq(sp) {
    font-size: 3.2rem;
  }
}

//見出しデザイン1 ja + en
.e-headingdesign {
  flex-direction: column;
  align-items: center;
  &_headingSub {
    color: #004da3;
    @include mq(pc) {
      font-size: 1.5rem;
    }
    @include mq(sp) {
      font-size: 2.8rem;
    }
  }
  &_headingMain {
  }
}

//見出しデザイン2 線と英字を組み合わせ
.e-headingdesign02 {
  display: block;
  & span {
    display: flex;
    align-items: center;
    color: #004da3;
    font-size: 1.8rem;
    text-transform: uppercase;
  }
  & span::before {
    content: '';
    display: inline-block;
    margin-right: 2rem;
    width: 4rem;
    height: 0.1rem;
    background-color: #004da3;
  }
}

//見出しデザイン3 左右の線
.e-headingdesign03 {
	justify-content: center;
	align-items: center;
  &::before,
  &::after {
    content: '';
    width: 7rem;
    height: 0.3rem;
    background-color: #004da3;
  }
}

//見出しデザイン4（白抜き）
.e-headingdesign04 {
  background-color:#004da3;
  color: #fff;
  justify-content: center;
  align-items: center;
}

//見出しデザイン5
.e-headingdesign05 {
  background-color: #004da3;;
  border-top: solid 0.5rem #009bac;
  color: #fff;
  justify-content: center;
  align-items: center;
}

//見出しデザイン6
.e-headingdesign06 {
  justify-content: center;
  align-items: center;
  &_inner {
    position: relative;
    display: inline-block;
    transform: translateY(-20%);
  }
  &_inner::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    width: 8rem;
    height: 0.5rem;
    background-color: #004da3;
    transform: translateX(-50%);
  }
}

//見出しデザイン7（下線大）
.e-headingdesign07 {
  border-bottom: 4px solid #004da3;
}

//見出しデザイン8（左線）
.e-headingdesign08 {
  border-left: 4px solid #004da3;
}

//見出しデザイン9（色）
.e-headingdesign09 {
  color: #004da3;
}

//見出しデザイン10　数字上
.e-headingdesign10 {
  display: block;
	position: relative;
  &::before {
    content: attr(data-number);
    display: block;
    color: #004da3;
    font-size: 3rem;
  }
  &::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 0;
    width: 10rem;
    height: 0.3rem;
    background-color: #004da3;
  }
}
TOP