CSS 【CSS】:notで複数の要素を指定する方法
CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。そんな時に使うのが疑似要素の「:not」です。例えばリストの最初の要素以外を指定する時は「li:not(:first-child) {...
CSS
CSS 
CSS 【CSS】ボヤけた画像をパキッとさせる方法
書き出したサイズより小さく表示してるのに、なぜか画像がボヤける。そんなボヤけた画像をCSSで即解決する方法をお教えします！CSSのテンプレートに追加しとくと今後検索しなくて済む。img { -ms-interpolation-mode: n...
CSS 【CSS】「fixedで固定されない⁉」を速攻解決する方法！
固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。親要素に「transform: translate3d(0,0,0)」を指定してる！親要素に「tran...
CSS cssアニメーションがカクカクするのを防ぐ方法
CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介！「will-change」でGPUを使って高速処理「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる。ペ...
CSS ホバーした時にCSSだけで出来る様々な画像切り替え方法｜その２
CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。前回ご紹介した画像切り替え方法が検索ロボットに気に入ってもらえたのでもっともっと沢山のホバー演出をコピペで出来るように作りたいと思います。今回も基本のHTMLは同じものを利用します...
CSS 【CSS】iOS風すりガラスエフェクトを背景に実装｜Fire fox、IE11対応｜backdrop-filter
特定エリアだけ背景がぼやけて表示されるCSSについてのご紹介です。「backdrop-filter: blur(12px)」を使えば特定エリアの背景のみをぼかす（blur）させることができます。でも2021年3月現在、ブラウザの対応状況があ...
CSS 【CSS】特定ブラウザだけに効くCSSの書き方｜IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera
特定ブラウザだけに適応するCSSの書き方のご紹介です。「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはなんかあるかな。。。そんな特定ブラウザだけに...
CSS 【CSS】変数を利用して共通の要素をひとまとめにする方法
CSSで変数を指定することが出来ないから「SCSS」を利用していましたが「CSSだけでも変数を扱える！」と聞いてびっくりしました。CSS変数の扱い方:root{ --color: red;}.demo { background: var(-...
CSS 【CSS】selectの枠線・矢印を消す方法
CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。そんな枠線、矢印を消す方法のご紹介です。selectの枠線を消すCSSselect { outline: none;}あまり聞いたことないスタイルプロパティの「outline」...
CSS CSS内で外部CSSを読み込む方法
リセットCSSなどの絶対必要だけど忘れがちなCSSファイルは、CSSでサクッとインポートしちゃいましょう！書き方は以下の通りです。CSS@import url("reset.css");外部CSSのインポートは複数書いても問題ありません。で...
CSS CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう！
海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。CSSだけでで...
CSS 修正したCSSが反映されない！？強制的にキャッシュを再読み込みさせる方法
ページデザインが完成してレスポンシブもばっちりと思って、提出すると「変わってないですが。。。」と言われてしまう。キャッシュをクリアして再読み込みすればいいから「shift」を押して更新すれば良いじゃん！と思っちゃうけど、お客さんにひと手間加...
CSS 【CSS】テキストを選択した時の背景や文字色を変更する方法
カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう！ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。// サイ...
CSS CSSで太字～細字の調整方法
なんとな～くだけど、タイトルは見やすく「太字」。テキストは読みやすく「細字」。みたいにある日本語のウェブサイトの文字ルール。そんなルールも扱えなくちゃ従えないじゃない。基本を押さえるために、学習は大事。文字の太さの変更は「font-weig...
CSS CSSで角丸四角の作り方
ボダンや画像など、やんわりと表現したいときや、流行りのデザインっぽさを取り入れたいときに使うのがCSSのborder-radius。border-radiusには2つの書き方があり「border-radius: 10px;（全部の角を10p...
