デザインコード紹介

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

シンプルなあしらいを施した見出し – ステッチ風の線を施した見出し

更新日:

シンプルなあしらいを施した見出し - ステッチ風の線を施した見出しのWebデザイン画像

HTML

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

CSS

.heading {
  padding: 0 2em 20px;
  font-size: 26px;
  background-image:
  repeating-linear-gradient(90deg, #e5c046 0px, #e5c046 12px, rgba(0 0 0 / 0) 12px, rgba(0 0 0 / 0) 20px);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  background-position: center bottom;
}

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