CSSでボタンをクリックしたときの枠線を消す方法

CSS

デフォルトのHTMLのボタンは次の図のように、クリック時にボタンに枠線が表示されるようになっています。

この記事では、ボタンをクリックしたときに表示される枠線をCSSで消す方法を説明します。

スポンサーリンク

ボタンの周囲に表示される枠線を消す方法

以降ではクリックしたときに枠線が表示されるボタンを作成し、次にボタンに枠線が表示されないようにするCSSを設定します。

枠線が表示されるボタン

ボタンは次のHTMLとCSSで作成します。このボタンはクリックすると周囲に青い枠線を表示します。

ボタンのHTML

<button class="button-outline">button</button>

枠線つきのCSS

.button-outline {
  background-color: #0a5d8a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;  
}

See the Pen
ボタンをクリックしたときの枠線を消す1
by aiiro (@aiiro29)
on CodePen.

outline:noneを使用してボタンクリック時の枠線を消す

ボタンのまわりに表示される枠線を消すには、CSSの”outline”プロパティを使います。

.button-outline {
  background-color: #0a5d8a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;
  
  outline: none // ①
}

“outline: none”をボタンのスタイルに設定すると、枠線が消えます(①)。

See the Pen
ボタンをクリックしたときの枠線を消す2
by aiiro (@aiiro29)
on CodePen.

outlineは非表示にするだけでなく、種類や幅、色を指定することもできます。

outline
outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ (outline-style, outline-width, outline-color) を単一の宣言で設定するための一括指定です。