CSS

CSS

CSSでテキストを選択禁止にする方法

文字の上をマウスでダブルクリックしたりドラッグして移動すると選択されてしまうテキスト。 デザインの邪魔だったりする時がある。 選択したテキストを装飾する方法もあるけど装飾が必要ない時は、今回紹介する方...
CSS

【CSS】めっちゃ便利なグラデーションジェネレーター

カードUIや背景、画像の上にも、ホントいろんな所で滅茶苦茶使うグラデーションも 自由に使えないと単色でいいかな。と思っちゃう。 でもグラデーションを使った方がひと手間かかってる気がするし、結構な場面で...
CSS

CSSで改行コード<br>を無効化(消す)する方法

レスポンシブサイトを作る時とかに、PC表示の時は改行を入れたいけどスマホ表示の時は改行を無くしたい。 そんな時はCSSで<br>を消して対応しよう!! 例えば、こんなHTMLの時... H...
スポンサーリンク
CSS

【CSS】:notで複数の要素を指定する方法

CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。 そんな時に使うのが疑似要素の「:not」です。 例えばリストの最初の要素以外を指定する時は「...
CSS

【CSS】ボヤけた画像をパキッとさせる方法

書き出したサイズより小さく表示してるのに、なぜか画像がボヤける。 そんなボヤけた画像をCSSで即解決する方法をお教えします! CSSのテンプレートに追加しとくと今後検索しなくて済む。 img { ...
CSS

【CSS】「fixedで固定されない⁉」を速攻解決する方法!

固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。 親要素に「transform: translate3d(0,...
CSS

cssアニメーションがカクカクするのを防ぐ方法

CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介! 「will-change」でGPUを使って高速処理 「will-change」を使うとアニメーションする前にブラウザ...
CSS

ホバーした時にCSSだけで出来る様々な画像切り替え方法|その2

CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。 前回ご紹介した画像切り替え方法が検索ロボットに気に入ってもらえたので もっともっと沢山のホバー演出をコピペで出来るように作りたいと思います...
CSS

【CSS】iOS風すりガラスエフェクトを背景に実装|Fire fox、IE11対応|backdrop-filter

特定エリアだけ背景がぼやけて表示されるCSSについてのご紹介です。 「backdrop-filter: blur(12px)」を使えば特定エリアの背景のみをぼかす(blur)させることができます。 で...
CSS

【CSS】特定ブラウザだけに効くCSSの書き方|IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera

特定ブラウザだけに適応するCSSの書き方のご紹介です。 「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはな...
CSS

【jQuery】CSS変数をjQueryで利用する方法

CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。 jQueryで変数作っちゃっても良いけど、そうできない時もある。 例えば、、、、ん~あるかなぁ。 jQueryで変数作れない時は、...
CSS

【CSS】変数を利用して共通の要素をひとまとめにする方法

CSSで変数を指定することが出来ないから「SCSS」を利用していましたが 「CSSだけでも変数を扱える!」と聞いてびっくりしました。 CSS変数の扱い方 :root{ --color: red; ...
CSS

【CSS】selectの枠線・矢印を消す方法

CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。 そんな枠線、矢印を消す方法のご紹介です。 selectの枠線を消すCSS select { outline: none; } あ...
CSS

CSS内で外部CSSを読み込む方法

リセットCSSなどの絶対必要だけど忘れがちなCSSファイルは、CSSでサクッとインポートしちゃいましょう!書き方は以下の通りです。 CSS @import url("reset.css"); 外部CS...
CSS

Yes/No診断テストをjQueryで作りました!ダウンロードですぐに利用可能

いつも当ブログを見てくださりありがとうございます! 「Yes/No診断テスト」を自由に使っていただけるよう、jQueryで作成しました。 Yes/No診断テスト 再配布以外は著作権フリーで利用可能です...
タイトルとURLをコピーしました