デザインコード紹介

Chapter2 見出しやテキストの装飾

2色の線を重ねた見出し – linear-gradient

更新日:

2色の線を重ねた見出し - linear-gradientのWebデザイン画像

HTML

<h2 class="heading">採用情報について</h2>

CSS

.heading {
  padding-bottom: 29px;
  width: 100%;
  font-size: 26px;
  text-align: center;
  background-image: linear-gradient(90deg, #c7c7c7 0%, #c7c7c7 45%, #e5c046 45%, #e5c046 55%, #c7c7c7 55%, #c7c7c7 100%);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。