見出し - Laterial

左右に幅いっぱいのボーダーがある見出し

見出しのサンプル

テキストの長さに応じて左右のボーダーの幅も自動的に可変します

見出しがとても長いテキストの場合のサンプル見出しがとても長いテキストの場合のサンプル

<h2 class="border01-title">見出しのサンプル</h2>
<h2 class="border01-title">テキストの長さに応じて左右のボーダーの幅も自動的に可変します</h2>
<h2 class="border01-title">見出しがとても長いテキストの場合のサンプル見出しがとても長いテキストの場合のサンプル</h2>

.border01-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
  @media screen and (max-width: 768px) {
    font-size: 4.5vw;
  }
  &::after,
  &::before {
    content: "";
    flex: 1;
    height: 2px;
    min-width: 80px;
    background-color: #333;
  }
  &::before {
    margin-right: 10px;
  }
  &::after {
    margin-left: 10px;
  }
}

.border01-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
}
.border01-title::after,
.border01-title::before {
  content: "";
  flex: 1;
  height: 2px;
  min-width: 80px;
  background-color: #333;
}
.border01-title::before {
  margin-right: 10px;
}
.border01-title::after {
  margin-left: 10px;
}

@media screen and (max-width: 768px) {
  .border01-title {
    font-size: 4.5vw;
  }
}

左右に幅固定のボーダーがある見出し

見出しのサンプル

テキストの長さに応じて左右のボーダーもちゃんと動きます

背景色が有っても影響しないので使い勝手が良いです。見出しがとても長いテキストの場合のサンプル見出しがとても長いテキストの場合のサンプル

<div class="border02-title-wrap">
  <h2 class="border02-title">見出しのサンプル</h2>
  <h2 class="border02-title">テキストの長さに応じて左右のボーダーもちゃんと動きます</h2>
  <h2 class="border02-title">背景色が有っても影響しないので使い勝手が良いです。見出しがとても長いテキストの場合のサンプル見出しがとても長いテキストの場合のサンプル</h2>
</div>

.border02-title-wrap {
  padding: 10px;
  background-color: #f6f7ff;
}
.border02-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
  @media screen and (max-width: 768px) {
    font-size: 4.5vw;
  }
  &::after,
  &::before {
    content: "";
    height: 2px;
    min-width: 35px;
    background-color: #333;
  }
  &::before {
    margin-right: 10px;
  }
  &::after {
    margin-left: 10px;
  }
}

.border02-title-wrap {
  padding: 10px;
  background-color: #f6f7ff;
}

.border02-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
}
.border02-title::after,
.border02-title::before {
  content: "";
  height: 2px;
  min-width: 35px;
  background-color: #333;
}
.border02-title::before {
  margin-right: 10px;
}
.border02-title::after {
  margin-left: 10px;
}

@media screen and (max-width: 768px) {
  .border02-title {
    font-size: 4.5vw;
  }
}

テキスト右側に上下中央のボーダーが有る見出し

見出しのサンプル

テキストの長さに応じて右側のボーダーもちゃんと動きます

見出しがとても長いテキストの場合のサンプルテキストです見出しがとても長いテキストの場合のサンプルテキストです

<h2 class="border03-title">見出しのサンプル</h2>
<h2 class="border03-title">テキストの長さに応じて右側のボーダーもちゃんと動きます</h2>
<h2 class="border03-title">見出しがとても長いテキストの場合のサンプルテキストです見出しがとても長いテキストの場合のサンプルテキストです</h2>

.border03-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
  font-size: 2.4rem;
  @media screen and (max-width: 768px) {
    font-size: 4.5vw;
  }
  &::after {
    content: "";
    height: 2px;
    flex: 1;
    min-width: 80px;
    background-color: #333;
    margin-left: 15px;
    @media screen and (max-width: 768px) {
      min-width: 45px;
    }
  }
}

.border03-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 30px 15px;
  line-height: 1.4;
  font-size: 2.4rem;
}
.border03-title::after {
  content: "";
  height: 2px;
  flex: 1;
  min-width: 80px;
  background-color: #333;
  margin-left: 15px;
}

@media screen and (max-width: 768px) {
  .border03-title {
    font-size: 4.5vw;
  }
  .border03-title::after {
    min-width: 45px;
  }
}

下に固定幅の短いボーダーがある見出し

見出しのサンプル

テキストの長さが変わってもボーダーの長さは固定です

ボーダーシリーズの見出しが続いているようです。そろそろ飽きてくる頃合いなので別パターンの見出しも作らなきゃ。見出しがとても長いテキストの場合のサンプルテキストです

<h2 class="fixedBottomBorder-title">見出しのサンプル</h2>
<h2 class="fixedBottomBorder-title">テキストの長さが変わってもボーダーの長さは固定です</h2>
<h2 class="fixedBottomBorder-title">ボーダーシリーズの見出しが続いているようです。そろそろ飽きてくる頃合いなので別パターンの見出しも作らなきゃ。見出しがとても長いテキストの場合のサンプルテキストです</h2>

.fixedBottomBorder-title {
  margin: 50px 30px 30px;
  padding: 0;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.4;
  color: #555;
  &::after {
    content: "";
    display: block;
    margin: 10px auto 0;
    height: 3px;
    width: 80px;
    background-color: #555;
  }
  @media screen and (max-width: 768px) {
    font-size: 2.0rem;
    &::after {
      width: 60px;
      height: 2px;
    }
  }
}

.fixedBottomBorder-title {
  margin: 50px 30px 30px;
  padding: 0;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.4;
  color: #555;
}
.fixedBottomBorder-title::after {
  content: "";
  display: block;
  margin: 10px auto 0;
  height: 3px;
  width: 80px;
  background-color: #555;
}

@media screen and (max-width: 768px) {
  .fixedBottomBorder-title {
    font-size: 2rem;
  }
  .fixedBottomBorder-title::after {
    width: 60px;
    height: 2px;
  }
}

日本語と英語のテキストが有る見出し3種類

採用情報 Recruit

会社情報 Company

サービス Services

<h2 class="jaEn01-title">
  <span class="jaEn01-title__ja">採用情報</span>
  <span class="jaEn01-title__en" lang="en">Recruit</span>
</h2>

<h2 class="jaEn02-title">
  <span class="jaEn02-title__ja">会社情報</span>
  <span class="jaEn02-title__en" lang="en">Company</span>
</h2>

<h2 class="jaEn03-title">
  <span class="jaEn03-title__ja">サービス</span>
  <span class="jaEn03-title__en" lang="en">Services</span>
</h2>

.jaEn01-title {
  margin: 30px auto 20px;
  text-align: center;
  line-height: 1.4;
  &__ja {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    font-size: 3.4rem;
    color: #224f22;
    font-family: serif;
  }
  &__en {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    color: darkcyan;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

.jaEn02-title {
  display: flex;
  align-items: center;
  margin: 60px 30px 20px;
  padding-bottom: 5px;
  line-height: 1.4;
  border-bottom: 2px solid #333;
  &__ja {
    margin: 0 15px 0 0;
    padding: 0;
    font-size: 3.0rem;
    color: #333;
  }
  &__en {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    color: #658;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

.jaEn03-title {
  margin: 60px 30px 30px;
  padding-bottom: 5px;
  line-height: 1.4;
  &__ja {
    display: block;
    margin: 0 15px 0 0;
    padding: 5px 15px;
    border-left: 5px solid #4169e1;
    font-size: 3.2rem;
    color: #333;
  }
  &__en {
    display: block;
    margin: 0;
    padding: 5px 15px;
    border-left: 5px solid #999;
    font-size: 1.6rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

.jaEn01-title {
  margin: 30px auto 20px;
  text-align: center;
  line-height: 1.4;
}

.jaEn01-title__ja {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  font-size: 3.4rem;
  color: #224f22;
  font-family: serif;
}

.jaEn01-title__en {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: darkcyan;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}

.jaEn02-title {
  display: flex;
  align-items: center;
  margin: 60px 30px 20px;
  padding-bottom: 5px;
  line-height: 1.4;
  border-bottom: 2px solid #333;
}

.jaEn02-title__ja {
  margin: 0 15px 0 0;
  padding: 0;
  font-size: 3.0rem;
  color: #333;
}

.jaEn02-title__en {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  color: #658;
  font-weight: 500;
  letter-spacing: 1px;
}

.jaEn03-title {
  margin: 60px 30px 30px;
  padding-bottom: 5px;
  line-height: 1.4;
}

.jaEn03-title__ja {
  display: block;
  margin: 0 15px 0 0;
  padding: 5px 15px;
  border-left: 5px solid #4169e1;
  font-size: 3.2rem;
  color: #333;
}

.jaEn03-title__en {
  display: block;
  margin: 0;
  padding: 5px 15px;
  border-left: 5px solid #999;
  font-size: 1.6rem;
  color: #888;
  font-weight: 500;
  letter-spacing: 1px;
}

サブタイトルも有る見出し

歩もう社畜の道

採用情報

歩もう社畜の道

採用情報

とてもアットホームな職場です^^

採用情報

とてもアットホームな職場です^^

<div class="subTitle-header">
  <p class="subTitle-header__sub">歩もう社畜の道</p>
  <h2 class="subTitle-header__title">採用情報</h2>
</div>

<hgroup class="subTitle-header">
  <h2 class="subTitle-header__sub">歩もう社畜の道</h2>
  <h3 class="subTitle-header__title">採用情報</h3>
</hgroup>

<div class="subTitle-header">
  <h2 class="subTitle-header__title">採用情報</h2>
  <p class="subTitle-header__sub">とてもアットホームな職場です^^</p>
</div>

<hgroup class="subTitle-header">
  <h3 class="subTitle-header__title">採用情報</h3>
  <h2 class="subTitle-header__sub">とてもアットホームな職場です^^</h2>
</hgroup>

.subTitle-header {
  margin: 50px auto 50px;
  padding: 20px 20px 15px;
  background: #f1f1f1;
  text-align: center;
  line-height: 1.4;
  &__sub {
    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    color: #cb0c79;
    @media screen and (max-width: 768px) {
      font-size: 3.2vw;
    }
  }
  &__title {
    margin: 0;
    font-size: 3.6rem;
    color: #545454;
    letter-spacing: 0.07em;
    font-weight: normal;
    @media screen and (max-width: 768px) {
      font-size: 6.0vw;
    }
  }
}

.subTitle-header {
  margin: 50px auto 50px;
  padding: 20px 20px 15px;
  background: #f1f1f1;
  text-align: center;
  line-height: 1.4;
}
.subTitle-header__sub {
  margin: 0;
  font-size: 1.6rem;
  font-weight: bold;
  color: #cb0c79;
}
.subTitle-header__title {
  margin: 0;
  font-size: 3.6rem;
  color: #545454;
  letter-spacing: 0.07em;
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  .subTitle-header__sub {
    font-size: 3.2vw;
  }
  .subTitle-header__title {
    font-size: 6.0vw;
  }
}