疑問点

実現したいこと

buttonタグをクリックするときにoutlineが表示されますが、それを消したいです。

しかし、単にoutline:noneとするとキーボードで操作しているユーザがbuttonにアクセスできなくなると知りました。そこで、マウス操作ではoutlineを表示させずに、キーボードではアクセスできるようにする方法を教えていただきたいです。よろしくお願いいたします。

###該当するソースコード

HTML
1<!-- 	nav -->
2		<div class="nav-list">
3			<nav>
4				<ul class="nav-ul">
5<!-- 					list -->
6					<li class="nav-li">
7						<div>
8						<button type="button" class="btn-cls" aria-haspopup="true", aria-expanded="false" aria-busy="false">
9							<div class="li-box">
10								<div class="li-outer">
11									ホストをはじめる
12								</div>
13							</div>
14						</button>
15						<div>
16					</li>
17<!-- 					list -->
18					<li class="nav-li">
19						<button type="button" class="btn-cls" aria-haspopup="true", aria-expanded="false" aria-busy="false">
20							<div class="li-box">
21								<div class="li-outer">
22									ヘルプ
23								</div>
24							</div>
25						</button>
26					</li>
27					<li class="nav-li">
28						<button type="button" class="btn-cls" aria-haspopup="true", aria-expanded="false" aria-busy="false">
29							<div class="li-box">
30								<div class="li-outer">
31									登録する
32								</div>
33							</div>
34						</button>
35					</li>
36					<li class="nav-li">
37						<button type="button" class="btn-cls" aria-haspopup="true", aria-expanded="false" aria-busy="false">
38							<div class="li-box">
39								<div class="li-outer">
40									ログイン
41								</div>
42							</div>
43						</button>
44					</li>
45				</ul>
46			</nav>
47		</div>

CSS
1/* nav */
2.nav-list {
3	display: table-cell;
4	vertical-align: middle;
5}
6.nav-ul {
7	display: table;
8	padding: 0;
9	margin: 0;
10	height: 64px;
11}
12.nav-li {
13	display: table-cell;
14}
15.btn-cls {
16	display: inline-block;
17	margin: 0;
18	padding: 0 8px;
19	positive: relative;
20	background: transparent;
21	border-width: initial;
22	border-style: none;
23	border-color: initial;
24	border-image: initial;
25	height: 80px;
26	line-height: 80px;
27	white-space: nowrap;
28}
29.li-box {
30	height: 100%;
31	vertical-align: middle;
32	border-bottom: 2px solid transparent;
33}
34.li-box:hover {
35	border-bottom: 2px solid #9F9EAA;
36}
37.li-outer {
38	display: inline-block;
39	vertical-align: middle;
40	line-height: 1;
41	padding: 8px;
42	border-bottom: 2px solid transparent;
43}
44

###問題が発生した環境

Bootstrap
HTML5
CSS

m.ts10806

2019/03/26 07:20

回答依頼をいただいておいて申し訳ないのですが、この内容だとどのような要素に対してどうなっていてどう対応しようとしているか分かりません。実際に試されたコードなど、質問本文に追記いただけますか？

ironman

2019/03/27 02:49

返信が遅れて申し訳ございません。ご指摘ありがとうございます。とりあえずソースコードを追加させていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

すでに解決済みとのことですが，

①　outline:noneされていても，キーボード操作自体は可能
②　:focus擬似クラスで効果を上書きしてはどうか

という2点について補足させてください．

outline:none されていても，キーボード操作自体は可能

outline:noneとするとキーボードで操作しているユーザがbuttonにアクセスできなくなる

という表現は正確ではありません

kei344さんの提示されていたリンク
【outline: noneをやめよう、focus-ringを使おう - yuhei blog】
における

フォーカス位置の手がかりを奪ってしまう

という部分が正確な表現です．

逆に言えば，手がかりを示す代替手段さえあれば，outline:noneをすることに問題はありません．

例えば，マウスや指をボタンの上に乗せたときに表示するアニメーション（いわゆる「ホバーアニメーション」）を，ボタン押下時にも適用する，という方法が挙げられます．

:focus擬似クラスで効果を上書きするのはどうか

:focusはBasic Selectorであり，一般的に利用可能です

Can I use ":focus"
を見ると，
:focus-visibleは，FirefoxとChromeにおいて，かろうじて利用可であり，
:focus-withinは，IEを除いた一般的なブラウザで利用可能となっていますが，
:focusは，最下段の「CSS 2.1 selectors」に含まれており，全てのブラウザで利用可能なので，安心してください．

Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)

擬似クラスを利用した，CSS記述法の例です

css
1.btn{
2    background: lightgray;
3    transition: background .5s;
4}
5
6.btn:hover,
7.btn:active,
8.btn:focus{
9    outline: none;
10    background: palegreen;
11}
12.btn::-moz-focus-inner{ /*Firefox用*/
13    border: none;
14}