Webの勉強をしよう！Web制作の技術やサービス情報を発信します。
投稿日：
もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。
↓こんなのです。
違和感がありますので、解除する方法を調べました。
CSSの設定のみでOKです。
サンプルも作成しています。
|
1 2 3 |
.text-2:focus { outline: none; } |
1行目：疑似要素の「focus」の設定を行います。
2行目：「outline: none;」にすると青枠が出てこないように無効化しています。
このクラスが設定されている要素がフォーカスになった時に青枠を無効にするという意味ですね。
たったこれだけでOKなので簡単ですね！
執筆者：sasaki
関連記事
CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。 元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。 …
今回は画像の上に文字やタイトルを重ねて表示してみましょう！ 少しオシャレで良い感じですよね。 こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …
CSS liタグ の不要な行頭マークを削除する（サンプル付き）
liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。 このマークはCSSで簡単に削除することができます。
Google Fonts + 日本語 早期アクセス というサイトが出来ていますね！ Google Fonts の日本語（試験的）のようです。 まだ試験中なので、本番の Google Fontsサイト …
CSS Animate.css の基本サンプル（通常・クリックされた・マウスオーバー）
テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.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）
