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

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






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

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

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

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

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

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

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

縫い目を作る方法

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

HTML

CSS

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

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

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

outline-offset を使うメリットとは

outline-offset を使うメリットとは

outline-offsetを使って縫い目っぽいデザインを作る場合、要素を角丸にしてもオフセットした点線の角は角丸にならないというデメリットがありますが、それでも自分はoutline-offsetを使った方法が気に入ってます。

何故かって?

それは要素に背景画像を指定しながら縫い目のようなデザインが作れるからです。

See the Pen outline-offsett 背景画像も使用可能 by Beginners-High (@dragonpa) on CodePen.

box-shadowを使った方法は、要素の周囲にぼかしの無い影をつけて色をつけているので、要素に背景画像を指定した場合は、要素の外側にあるbox-shadowの部分に背景画像が表示されません。

See the Pen box-shadowを使った場合 by Beginners-High (@dragonpa) on CodePen.

その点、今回紹介したoutline-offsetを使った方法だと、オフセットで要素の内側に点線をおさめているので、背景画像を指定しても要素の周囲に色がつくことはありません。

outline-offsetの値を変更するだけで、点線とボックスの間隔も調整できるので、縫い目のようなデザインを作る時にはoutline-offsetがオススメですよ!

まとめ

CSSでスタイリングする際は「カスタマイズ・メンテナンスのしやすさ」を意識することが多いのですが、「カスタマイズのしやすさ」という点ではoutline-offsetを使う方がbox-shadowを使った方法よりもイイ線いっていると思います。

最近はシンプルなデザインが好まれる事が多いので、縫い目のような処理をする機会も少ないですが、ボックスモデルを理解するという意味でも覚えていて損はないと思いますよ。

「超簡単!CSSので作る縫い目のようなデザイン【outline-offset】」でした。

created by Rinker
¥3,386 (2020/10/30 11:17:24時点 Amazon調べ-詳細)






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