【CSS】内側に枠線がついたボタンやボックスを作る方法

↑こういうボタンを作りたかったんですが、簡単そうに見えて意外とやったことないスタイルでちょっとハマってしまったので、メモしておきます。

outlineプロパティとoutline-offsetプロパティを使う
- borderとoutlineの違いとは
  - borderの仕様・特徴
  - outlineの仕様・特徴
コードはこちら

outlineプロパティとoutline-offsetプロパティを使う

今回ご紹介する方法では、borderプロパティではなく、outlineとoutline-offsetを使います。

borderとoutlineの違いとは

ちなみにborderとoutlineはどう違うかというと、簡単に説明すると以下のような違いがあります。

borderの仕様・特徴

上下左右で異なるスタイル（幅・色・形）をつけることができる
要素の大きさの計算に含まれる

outlineの仕様・特徴

上下左右すべて同じスタイル（幅・色・形）になる
要素の大きさの計算に含まれない
border-radiusが効かない

borderは要素の大きさ（widthやheight）を計算するときにpaddingとともに含まれますが、outlineはレイアウトにまったく影響を与えないので、手軽に枠線をつけるのに向いています。

outlineは上下左右すべて同じスタイルになってしまうというデメリットがありますが、それでいい場合は今回ご紹介する方法でボックスやボタンの内側（のみ）に枠線をつけることができます。

コードはこちら

HTML

<!-- 要素の内側にのみ枠線をつけるボックスの例 -->
<div class="inside-line">
  ここにコンテンツ
</div>

<!-- 要素の内側にのみ枠線をつけるボタンの例 -->
<a class="inside-line" href="#">
  ここにコンテンツ
</a>

CSS

.inside-line {
  width : 300px ;
  display : block ; /* aタグの場合は必要 */
  text-decoration : none ; /* aタグでリンクテキストの下線を消したい場合は必要 */
  outline : 1px solid #FFFFFF; /* 線の太さ・線状・色 */
  outline-offset : -5px /* どれだけ内側に線を表示したいかを負の値で指定 */
  background : #666666; /* ボックスやボタンの背景色 */
}

outlineに線の太さ・線状・色を指定してやり、加えてoutline-offsetにマイナスの値を設定することで、要素の内側に簡単に線を引くことができます。

あとはお好みのスタイルを記述しますが、aなど、デフォルトでインライン要素のものにはdisplay : block ; を指定しないといけません。