ボタンを押した時に青い枠線が出てしまうけどこれはどうやって消したら良いんだろう
本日は
"【HTML/CSS】ボタンをクリックした時に現れる枠線を消す方法"
というテーマで記事を書いていきます。
ボタンを作成していざ押してみたらボタンに不要な枠線がついてしまうことがありますよね。
今回はそちらの対処方法をご紹介します。
それでは早速行ってみましょう٩( 'ω' )و
ボタンを用意します
See the Pen GRNVYOB by shino (@rytym0720) on CodePen.
上記のボタンをクリックしてみください。
するとborderで出来ている黒い枠線の上に青い枠線が現れます。
※スマホだと青い枠線が出ない場合があります。
このままだと少し不細工ですよね。
CSSでoutlineプロパティを使用します
こういった場合はoutlineプロパティを使用し、値を「none」にしてあげましょう。
outlineプロパティとは
outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ (outline-style, outline-width, outline-color) を単一の宣言で設定するための一括指定です。
borderとoutlineはとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。
・outlineは領域を占有せず、要素のコンテンツの外側に描かれます。
・仕様によれば、outlineは矩形である必要はありませんが、ふつうは矩形です。
出典元：MDN
ちょっと分かりにくいので補足するとoutlineの特徴は以下となります。
①borderと違って上下左右の指定が出来ません。全て同じ値となります。
②outlineにはボーダーの分の値が無いので、レイアウトが崩れることがありません。
②に関してもう少し詳しく解説すると、borderで線の太さを設定できますよね。例えば5pxであればその分レイアウトにも5px分のズレが生じます。
ただ、outlineの場合は、太さは指定できますが、レイアウトには支障がありません。イメージ的にはpositionプロパティのように浮いているようなイメージです。
See the Pen bGBXmMJ by shino (@rytym0720) on CodePen.
いかがでしょうか。
こちらでクリックした際の青い枠線が無くなりましたね。
ちなみにですが、inputやtextareaなどをクリックした時も縁の部分が青くなることがありますが、こちらもoutlineによるものです。
縁が青くなるのはoutlineのデフォルトの挙動なのですね。
多くの参考書ではborderに関して触れることはあってもoutlineを紹介しているものは少ないと思います。
もしWEBサイトを作成する時にボタンをクリックしたときの枠線を消したい場合は今回のoutlineプロパティを是非使ってみてくださいね♪
それでは本日はここまで。
また明日の記事でお会いしましょう。
✨おしまい✨