超簡単！CSSので作る縫い目のようなデザイン【outline-offset】

こないだ「CSSで縫い目のようなデザインってどうやるの？」という質問を受けたので、今更ですがCSSで縫い目のようなデザインを作る方法について解説したいと思います。

CSSで縫い目のようなスタイルを効果をいくつか方法がありますが、今回はoutline-offsetを使った方法を紹介します。

CSSで作った縫い目のようなデザイン
縫い目のようなスタイルを作る方法
- HTML
- CSS
outline-offset を使うメリットとは
まとめ

CSSで作った縫い目のようなデザイン

今回紹介するのは、要素の内側に点線がついている縫い目っぽいデザインの作り方です。

See the Pen outline-offsetで縫い目のような効果 by Beginners-High (@dragonpa) on CodePen.

ボックスの内側に点線があるだけのシンプルなデザインなのですが、それだけで縫い目っぽく見えますよね。

縫い目のようなスタイルを作る方法

縫い目のようなスタイルはbox-shadowを使う方法が有名ですが、今回はoutline-offsetを使って縫い目のようなスタイルを作ります。

HTML

<div class="box">
  <p>outline-offsetで縫い目のような効果</p>
</div>

<p>outline-offsetで縫い目のような効果</p>

</div>

CSS

.box{
  border-radius: 10px;
  padding: 15px 25px;
  background: #ffe5ad;
  outline: dashed 2px #c29162;
  outline-offset:-10px;
}
.box p{
  font-weight: bold;
  color: #9c4d00;
}

.box{

border-radius: 10px;

padding: 15px 25px;

background: #ffe5ad;

outline: dashed 2px #c29162;

outline-offset:-10px;

}

.box p{

font-weight: bold;

color: #9c4d00;

}

outlineプロパティで要素の周囲に点線をつけて、outline-offsetプロパティにマイナスの値を指定して点線をボックスの内側におさめるだけという簡単なCSSです。
コピペ重視の初心者でも簡単に理解ができると思います。

ちなみに、borderプロパティは上下左右で罫線の太さや有無が調整できますが、outlineプロパティは強制的に要素の周囲に罫線が描画されてしまうのですが、borderと違って要素のレイアウトに影響を与えないので、罫線の太さによって周囲のレイアウトが崩れる心配がないというメリットがあります。

outline-offsetを使う場合の注意点
元となる要素の角をborder-radiusで角丸にしても、オフセットした点線は角丸になりません。
今のところ、そういう仕様になっているようなので、どうしても点線も角丸にしたいという場合はbox-shadowを使った方法を使う必要があります。