Webの勉強をしよう！Web制作の技術やサービス情報を発信します。
投稿日：
もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。
↓こんなのです。
違和感がありますので、解除する方法を調べました。
CSSの設定のみでOKです。
サンプルも作成しています。
|
1 2 3 |
.text-2:focus { outline: none; } |
1行目：疑似要素の「focus」の設定を行います。
2行目：「outline: none;」にすると青枠が出てこないように無効化しています。
このクラスが設定されている要素がフォーカスになった時に青枠を無効にするという意味ですね。
たったこれだけでOKなので簡単ですね！
執筆者：sasaki
関連記事
最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …
CSS 未加工の画像から丸いアイコンを作る（普通の画像だけでOK）
アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。 いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …
良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …
CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも１つずつ同じ属性を設定していくなんて事も多々あり …
CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。 元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。 …
2019/02/11
2019/02/11
Python3 for文で添え字（index）を取得する方法（enumerate関数）
2018/11/10
gulp.js コンパイル時にエラーになっても中断させない（gulp-plumber）
2018/11/04
JavaScript 一定時間後に処理を実行させるサンプル（setTimeout）
2018/11/03
JavaScript クリックイベントをJavaScriptで実現するサンプル
2018/10/21
2018/10/13
Bootstrap4 上部固定メニューヘッダを作るサンプル（fixed-top）
