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