CSS 【CSS】iOS風すりガラスエフェクトを背景に実装｜Fire fox、IE11対応｜backdrop-filter
特定エリアだけ背景がぼやけて表示されるCSSについてのご紹介です。「backdrop-filter: blur(12px)」を使えば特定エリアの背景のみをぼかす（blur）させることができます。でも2021年3月現在、ブラウザの対応状況があ...
CSS
CSS 
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...
CSS 【CSS】iPhoneでsubmitボタンのスタイルをリセットする方法
作ったサイトをPCのchromeデベロッパー機能で確認して即、OK！即、提出した後、ウェブ担当者から「送信ボタンがiPhoneで見ると変なんですけど…。」って確認不足で脇汗出ちゃうやつ。iPhoneで見てみると角丸のグラデーションボタンに...
CSS placeholder(プレースホルダー)の文字色を変える方法
Placeholder(プレースホルダー)の色を変える方法のご紹介です。IEと古いEDGEに対応しています。今のままだと文字色がピンクになっちゃうから、サイトに合う色に変えてね！input::placeholder { color: pin...
CSS IEでセレクトボックスの矢印を消す方法
CSSでセレクトボックスのスタイルを作っていると、chromeやfirefox、EDGEは大丈夫なんだけれど「IE」がやっぱりダメなんだよなぁ。サポートは終わったけど、やっぱり対応しておかないとね。全部同じ条件にした方がデザインしやすいため...
CSS ホバーした時にCSSだけで出来る様々な画像切り替え方法
CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。色んなパターンの画像切り替えサンプルを用意しますので、まずは基本のHTMLを。このHTMLを書いて2枚画像を用意して、目的のCSSをコピペすれば同じ動きになります。沢山サンプルがあ...
CSS width 100%なのに、なぜはみ出た！？を解決する方法｜CSS
幅を指定したのにはみ出ちゃう時「width」を98%とかに指定して何とかはみ出さないようにと考えちゃうけど、それは間違っている。ちゃんと「width:100%」でpaddingやborderを含んでいてもはみ出さない方法をご紹介します。
