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