Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

ページの先頭へ
トップに戻る
2018/10/13 2018/10/13 Web制作

【CSS】ステッチ(縫い目)風の見出しを作る方法を2パターン紹介

久々のCSSテクニック記事です。

タイトル通り、今回はブログでよく使われている「ステッチ風の見出しデザイン」を作る方法を紹介します。

方法その1

See the Pen ステッチ1 by Kuzlog (@Kuzlog) on CodePen.

1つ目は疑似要素を用いて縫い目部分を再現する方法で、次に紹介するborderを使った方法と比べて以下のような特徴があります。

  • 縫い目の長さ・間隔を自由に変えられる
  • 記述が少し複雑
  • 頑張れば左右にも縫い目を付けることは出来るが、丸みは再現できない

記述は多いですが、見出しに使うならこっちのほうが綺麗に仕上がるかな?

方法その2

See the Pen ステッチ2 by Kuzlog (@Kuzlog) on CodePen.

こっちのほうが簡単に作れますが、さっきと違って縫い目(border)の太さに比例して長さ・間隔も大きくなっていくので、微調整は出来ません。

その変わり、borderを使っているのでborder-radiusを使った丸みに沿った縫い目を付けることが出来ます。


というわけで、仕上がりの綺麗さを重視するなら疑似要素を使った方法、丸っぽくて柔らかな雰囲気を出したいならborderを使った方法というように使い分けていくのがオススメです!