【CSS】枠線を要素内側に引くための3つの方法

CSSで枠線を内側に引きたい場合、方法は1つじゃありません。

いくつかやり方を考えてみると次の3つが使えます。

  • box-sizingプロパティを使った方法
  • outline-offsetプロパティを使った方法
  • after疑似要素を使った方法

どれを使っても内側に枠線を引くことができますが、微妙に動作とかが違います。

そこで記憶の整理も兼ねてこれらのやり方とコード例についてまとめてみました。

1.  box-sizingプロパティを使った方法

box-sizing  とはボックス(要素)サイズの算出方法を指定するためのプロパティ

この値に border-box  を指定することでボーダーを要素サイズに含めることが可能です。

なのでそれを応用すれば内側に枠線を引けます。

そのやり方は次のコード例の通り

 

上コードの box-sizing: border-box;  がポイントです。

 

そして実際にこのCSSが適用された要素がこちら

上画像を見ても分かるように

  • 要素サイズは変わらず、枠線分だけ要素が縮む
  • 枠線と要素内のテキストや画像は被らない

というのが box-sizing  を使った場合の特徴

要素が枠線に合わせて縮むので

「内側に枠線を引きたいけど中身までは隠したくない」

という場合に便利な方法だと思います。

2. outline-offsetプロパティを使った方法

マイナス値を outline-offset  に渡すことでも内側に枠線を引くことができます。

こちらは要素の内側に直接枠線を置くようなイメージをすると分かりやすいです。

その詳しいやり方は次のコード例の通り

 

上CSSに出てきた ouline  は要素を縁取りするためのプロパティです。

これがborderプロパティと違うのは要素の形に関係なく縁取りすること

例えば要素が丸いなら outline  もそれに合わせて縁取りされます。

そして outline-offset  はそのアウトラインの開始位置を指定するプロパティ

その値にアウトライン分だけマイナス値を指定することで内側に枠線表示できます。

 

実際にこのCSSを適用したのが次の要素(ただし見やすいように枠線は半透明に設定)

上画像を見ると分かるように

  • 要素サイズは変わらず、枠線分だけ要素が縮む
  • ただし枠線と被るテキストや画像は隠れる

というのが outline-offset  を使った場合の特徴

box-sizing と比べると要素内のコンテンツが隠れるのが大きな違いです。

意図的にテキストや画像の周りを枠線で隠したいときに便利かも

3. after疑似要素を使った方法

要素にafter疑似要素を指定することでも内側に枠線を引くことは可能です。

そのやり方は次のコード例の通り

 

少し長いですが大事なのは元要素に position: relative;  を必ず指定すること

そうしないとafter疑似要素の position: absolute;  が効かなくなるので注意です。あと top: 0; letf: 0;  で枠線が要素内に表示されるように位置調整するのも忘れずに

ちなみに position  を使って子要素の位置を指定するというテクニック、これはブロック要素の中央寄せとかにも応用できて便利です。

▼参考記事

その方法は上記事で解説した通り。結構役立つテクなので気になる方はご覧ください。

 

そして実際に上のCSSを適用したのがこちらの要素(ただし枠線は半透明に設定)

上画像を見ても分かるように

  • 要素サイズは変わらず、枠線分だけ要素が縮む
  • 枠線と被るテキストや画像は隠れる
  • 元の要素自体に変更を加えることがない

というのがafter疑似要素を使った場合の特徴

見た目的には outline-offset  を使った時と全く同じに見えます。

ただし元の要素に変更を加えてないことが相違点です。

あとbefore疑似要素も使えば2つまで枠線を引くことも可能

ここまでのまとめ

ということで内側に枠線を引く方法まとめ

  • box-sizingプロパティを使う
    値に border-box  を指定することでボーダーが要素サイズに含まれる
    それを利用することで要素サイズを変えずに内側に枠線を引くことが可能
  • outline-offsetプロパティを使う
    値に outline  で指定した値のマイナス分だけ指定することで枠線を内側に表示可能
    ただし要素内で枠線と被るテキストや画像は隠される
  • after疑似要素を使う
    元要素に position: relative;  を指定し、after疑似要素に position: absolute;  を指定
    あとは普通に要素にborderプロパティを指定するだけで内側に表示可能
    ただし outline-offset  同様に枠線と被るテキストや画像は隠される

要素に被らない枠線を引きたいときは box-sizing  を使う、
要素と被る枠線を引くときは outline-offset  または after疑似要素を使う

という風に使い分けるのがベストだと思います。

以上CSSで要素内側に枠線を引く方法についてでした。

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください