Webの勉強をしよう！Web制作の技術やサービス情報を発信します。
投稿日：
もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。
↓こんなのです。
違和感がありますので、解除する方法を調べました。
CSSの設定のみでOKです。
サンプルも作成しています。
|
1 2 3 |
.text-2:focus { outline: none; } |
1行目：疑似要素の「focus」の設定を行います。
2行目：「outline: none;」にすると青枠が出てこないように無効化しています。
このクラスが設定されている要素がフォーカスになった時に青枠を無効にするという意味ですね。
たったこれだけでOKなので簡単ですね！
執筆者：sasaki
関連記事
CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも１つずつ同じ属性を設定していくなんて事も多々あり …
今回は画像の上に文字やタイトルを重ねて表示してみましょう！ 少しオシャレで良い感じですよね。 こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …
最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …
Google Fonts + 日本語 早期アクセス というサイトが出来ていますね！ Google Fonts の日本語（試験的）のようです。 まだ試験中なので、本番の Google Fontsサイト …
CSS liタグ の不要な行頭マークを削除する（サンプル付き）
liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。 このマークは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）
