【HTML・CSS】ボタンをクリックしたときに表示される枠線を消す

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プロパティを使用して枠線を消す

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

outline
CSS の outline プロパティは、輪郭線 (outline) に関する様々なプロパティ (outline-style, outline-width, outline-color) を単一の宣言で設定する一括指定プロパティです。
.button-outline {
  background-color: #0a5d8a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;

  outline: none // ①
}

“outline: none”をボタンのスタイルに設定すると、枠線が非表示になります(①)。
outlineは非表示にするだけでなく、種類や幅、色を指定することもできます。

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

スポンサーリンク
CSS HTML
フォローする
スポンサーリンク
Public Constructor