UPDATE：2017.1.3
- CATEGORY
java Scriptの覚書き
こんにちは！アプリコットデザインのざっきーです。今回はslick.jsというカルーセルのjava scriptの使用にあたって気になったことがあったので調べてみました。
カルーセルのスライダーとして非常にオプションの充実したスライダーではあるのですが、
使用していて画像の外枠を囲うように青い線が表示されてしまう現象に遭遇しました。
どうやらこの青い線（アウトライン）はtabindex属性が影響しているとのこと。
tabindex属性とは？
簡潔に言うとtabキーによるフォーカスの移動順序を指定できるようにするためのものです。つまり、この属性値を指定することで本体tabキーで選択できないはずの要素が選択できるようになります。
では意図せずこのアウトラインが表示されてしまった場合の対処法はというと以下のようになります。
対処法
- tabindex属性を外せる場合は外してしまう。
- tabindex属性の付いた要素のCSSに対して以下のように記述。.sample:focus {
outline: none;
} - 全ての要素のfocusに対して線を付けない場合は以下のように記述。*:focus {
outline: none;
}
同じような現象に遭遇したらぜひ試してみてくださいね。
