エリアの枠やボタンなどで登場しがちな、少しだけ内側に線が引いてあるデザインを再現する方法について考えます。
見出しなどにも応用できるので覚えておくと重宝します。
HTMLを入れ子にする方法
要素を入れ子にして、
いちばん外側の要素→背景色とpadding
直下の要素→ボーダー
というつくりは、シンプルでわかりやすいです。
See the Pen 要素の内側に線を引く方法（paddingを使う） by nico (@etsuko-kobanawa) on CodePen.
が、HTMLを入れ子にするのがスマートじゃないと感じて、入れ子にしなくても良い方法を探りました。
HTMLを入れ子にしない方法
入れ子にせずにスタイルを当てる場合は、outlineを使います。
outlineにあまり馴染みがない人もいるかもしれませんが、
デフォルトで入力欄にフォーカスすると現れる青い囲み線がoutlineです。
このoutlineは、offset値を設定できます。
offset値に負の値を設定することで、要素の内側に線を引くことが可能です。
See the Pen 要素の内側に線を引く方法（paddingを使わない） by nico (@etsuko-kobanawa) on CodePen.
まとめ
ということで、HTMLを入れ子にせずに要素の内側に線を引く方法と、その注意点についてご紹介しました。
作成にあたり、下記参考にさせていただきました。ありがとうございます！
CSSで内側に線を描くボーダーインラインのデザイン集 | ONE NOTES
コメント