CSSで枠線を内側に引きたい場合、方法は１つじゃありません。
いくつかやり方を考えてみると次の３つが使えます。
- box-sizingプロパティを使った方法
- outline-offsetプロパティを使った方法
- after疑似要素を使った方法
どれを使っても内側に枠線を引くことができますが、微妙に動作とかが違います。
そこで記憶の整理も兼ねてこれらのやり方とコード例についてまとめてみました。
１. box-sizingプロパティを使った方法
box-sizing とはボックス（要素）サイズの算出方法を指定するためのプロパティ
この値に border-box を指定することでボーダーを要素サイズに含めることが可能です。
なのでそれを応用すれば内側に枠線を引けます。
そのやり方は次のコード例の通り
|
1 2 3 |
<div class="example"> This is Example Box </div> |
|
1 2 3 4 |
.example{ border: 10px solid gray; box-sizing: border-box; } |
上コードの box-sizing: border-box; がポイントです。
そして実際にこのCSSが適用された要素がこちら
上画像を見ても分かるように
- 要素サイズは変わらず、枠線分だけ要素が縮む
- 枠線と要素内のテキストや画像は被らない
というのが box-sizing を使った場合の特徴
要素が枠線に合わせて縮むので
「内側に枠線を引きたいけど中身までは隠したくない」
という場合に便利な方法だと思います。
２. outline-offsetプロパティを使った方法
マイナス値を outline-offset に渡すことでも内側に枠線を引くことができます。
こちらは要素の内側に直接枠線を置くようなイメージをすると分かりやすいです。
その詳しいやり方は次のコード例の通り
|
1 2 3 |
<div class="example"> This is Example Box </div> |
|
1 2 3 4 |
.example{ outline: 10px solid gray; outline-offset: -10px; } |
上CSSに出てきた ouline は要素を縁取りするためのプロパティです。
これがborderプロパティと違うのは要素の形に関係なく縁取りすること
例えば要素が丸いなら outline もそれに合わせて縁取りされます。
そして outline-offset はそのアウトラインの開始位置を指定するプロパティ
その値にアウトライン分だけマイナス値を指定することで内側に枠線表示できます。
実際にこのCSSを適用したのが次の要素（ただし見やすいように枠線は半透明に設定）
上画像を見ると分かるように
- 要素サイズは変わらず、枠線分だけ要素が縮む
- ただし枠線と被るテキストや画像は隠れる
というのが outline-offset を使った場合の特徴
box-sizing と比べると要素内のコンテンツが隠れるのが大きな違いです。
意図的にテキストや画像の周りを枠線で隠したいときに便利かも
３. after疑似要素を使った方法
要素にafter疑似要素を指定することでも内側に枠線を引くことは可能です。
そのやり方は次のコード例の通り
|
1 2 3 |
<div class="example"> This is Example Box </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.example{ /** これを忘れずに！ */ position: relative; width: 200px; height: 50px; } .example::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border: 10px solid black; } |
少し長いですが大事なのは元要素に position: relative; を必ず指定すること
そうしないとafter疑似要素の position: absolute; が効かなくなるので注意です。あと top: 0; letf: 0; で枠線が要素内に表示されるように位置調整するのも忘れずに
ちなみに position を使って子要素の位置を指定するというテクニック、これはブロック要素の中央寄せとかにも応用できて便利です。
▼参考記事
その方法は上記事で解説した通り。結構役立つテクなので気になる方はご覧ください。
そして実際に上のCSSを適用したのがこちらの要素（ただし枠線は半透明に設定）
上画像を見ても分かるように
- 要素サイズは変わらず、枠線分だけ要素が縮む
- 枠線と被るテキストや画像は隠れる
- 元の要素自体に変更を加えることがない
というのがafter疑似要素を使った場合の特徴
見た目的には outline-offset を使った時と全く同じに見えます。
ただし元の要素に変更を加えてないことが相違点です。
あとbefore疑似要素も使えば２つまで枠線を引くことも可能
ここまでのまとめ
ということで内側に枠線を引く方法まとめ
- box-sizingプロパティを使う
値に border-box を指定することでボーダーが要素サイズに含まれる
それを利用することで要素サイズを変えずに内側に枠線を引くことが可能 - outline-offsetプロパティを使う
値に outline で指定した値のマイナス分だけ指定することで枠線を内側に表示可能
ただし要素内で枠線と被るテキストや画像は隠される - after疑似要素を使う
元要素に position: relative; を指定し、after疑似要素に position: absolute; を指定
あとは普通に要素にborderプロパティを指定するだけで内側に表示可能
ただし outline-offset 同様に枠線と被るテキストや画像は隠される
要素に被らない枠線を引きたいときは
box-sizing を使う、
要素と被る枠線を引くときは
outline-offset または after疑似要素を使う
という風に使い分けるのがベストだと思います。
以上CSSで要素内側に枠線を引く方法についてでした。
