IT30

borderを要素の内側に指定する方法

borderを要素の内側に指定する方法

2019.06.15 更新

私はborderを要素の内側に引きたいときがよくあります。

例えばスマホサイズのサイトを作っているとき、widthを%で作っているとどうしてもborder分だけ幅が広がっちゃって100%にならない。

もしborderを要素の内側に指定することが出来たら、思い通りのスタイルになるのに…。

というわけでそのとき用にメモを残しておきます。

 

方法はいくつかありますがよく使う2つはこちら

 

borderを要素の内側に引いた時に中に入る要素の上に被るパターンと被らないパターンがあります。

これは用途に合わせて使い分けるのが良いと思います。

 

中の要素に被らないborderを内側に引く方法

私はよくこちらの方法を使います。

.example{
  border: 5px solid gray;
  box-sizing: border-box;
}

borderを引きたい要素に【box-sizing: border-box;】を指定してあげます。

どうなるかというとイメージ的にはこんな感じです。

example

テキストや中のコンテンツがborderに被ることなく内側にborderを引くことができます。

要素サイズが変わらず内側にborderを引くことができるのも嬉しいですね。

CSSの記述も少なくて済みますのでオススメの記述方法で私はよくこちらを使います。

 

中の要素に被るborderを内側に引く方法

.example{
  outline: 5px solid gray;
  outline-offset: -5px;
}

要素に被るborderを引きたい場合はoutlineを使います。

outlineは要素を縁取りするプロパティですが、outline-offsetを使ってborderの幅分(上記では5px)をマイナスに指定して内側に入るようにします。

どうなるかというとこんな感じです。

example

テキストがborderに被っているのが確認できると思います。

イメージとしては要素の内側にborderが上から乗っかってる感じですかね。

borderの色を透過したりして文字を見せたりbackground-imageを指定する場合などに使えると思います。

 

個人的によく使うスタイルなのでメモしておきます。

マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録ブログです。

基本は過去わからなくて悩んだコーディングや諸々の設定方法などをメモ代わりに書き留めています。

ウェブコーディングやワードプレスの勉強中の方や同じ問題で悩んでいる方のお力になれたら嬉しいです。

ウェブサイトの制作依頼をマレーシアのローカル企業にご依頼されて大変な思いをしたことはございませんか?

安価が魅力のマレーシア企業ですが、お国柄どうしても…
「期日を守らない」「連絡がおろそか」「上手くコミュニケーションが取れない」
などのお悩みをかかえることがあると思います。

かと言って日系の企業はマレーシアの企業よりも値が張るため予算的に合わない。

私もマレーシアで働くからこそ、その大変さを理解した上でご提案があります。