transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ

皆様こんにちは！ロジカルスタジオのフロントエンドエンジニア、T.Kです。 突然ですが、皆様はマウスオーバー画像切替えをどのように実装されていますでしょうか？ 私はよく CSSの擬似クラス:hoverで表示する<img>要素を切り替える という方法を使います。 以下に実装の例を示します。 パソコンでご覧の方は、以下のcodepen中の弊社マスコットキャラクターロージーの顔にマウスを載せてみてください しかし、案件によっては画像が要素のbackground-imageで指定されていて、新しく<img>タグを書けない場合もあったりします。 この場合、 変化前の画像を要素のbackground-imageに設定 変化後の画像を要素の擬似クラス:hoverのbackground-imageに設定 というふうに設定することになるかと思います。 ただしこの方法だと、初回マウスオーバー時に画像が一瞬ちらつ

-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-

What’s next for CSS? cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. What are the stages? a { all: initial; } Supported on chrome since version 37 Supported on edge since version 79 Supported on firefox since version 27 Supported on opera since version 24 Supported on safari since version 9.1 Supported on Chrome for Android si

これは IE11 を除く Chrome, Firefox など通常のブラウザで動く． この表には難しい部分がある． table に border-collapse: collapse; を指定して，セルの枠線を重なり合わせて表示させるとスクロール時に枠線がそのままスクロールしてしまって，代わりに下にある動いているテーブルが見えてしまう． border-collapse: separate; (デフォルト)の場合はこの問題は起きないのだが，collapase を使う場合は困ってしまう． その場合，うまくやっている方がいた． ありがたく，「CSSでテーブル表の一部を固定してスクロールする方法」をそのまま利用させてもらうことにした． 要は擬似要素を使って，もう一つ枠を上に作るイメージだ． -1px というのはつまり，collapse を使っている場合，枠は th や td に存在していなくて，t

Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they

2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト！ アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should: You conditionally load it when you detect the browser doesn’t support Container Queries.You write CSS as you normally would, including current-spec-compliant Container Queries syntax code.It just works. It’s pretty great to have a container query polyfill that is this easy to use and from Chrome itself, t

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた内容をまとめておきます。 説明中に出てくるスクショの動作サンプルは下の記事にあります。 memowomome.hatenablog.com この記事は上の動作サンプル記事が長くなっため分離した補足記事みたいな感じです。 flexbox の基本 flexbox の基本的な動作は以下のページが個人的には分かりやすかったのでオススメです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 flexbox の仕様全般に関する説明が分かりやすい Flexboxを使うなら知ってお

autoprefixer@9.8.6 を使ってつまづいた部分をメモっておきます。 1. grid-template-rows を明示的に指定する // NG .container { display: grid; grid-template-columns: 1fr 1fr; } // OK .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }2. grid-template-rows と grid-template-columns は同じブロック内で宣言する// NG .container { ... @media screen and (max-width: 840px) { grid-template-columns: 1fr; } } // OK .contai

はじめに 2020 年 7 月現在、私のシェア率は国内でだいたい10% 弱です。 どうか、私への対応を諦める前にそのことを覚えておいて欲しいのです。 - Internet Explorer 11 WebブラウザシェアランキングTOP10(日本国内・世界) CSS Grid を IE11 で使用する上での注意点を確認していきます。 ※ Gulp および Autoprefixer を使用した IE11 対応を前提とします。また環境構築の手法については本記事では触れないものとします。 CSS Grid が私に何を求めているのか、私がそれを理解できるように記述してほしいのです 私はモダンなプロパティをベンダープレフィックス無しで理解することができません。 CSS Grid も例外ではないため、私の友人である Autoprefixer を介してそれを理解できるように変換して欲しいのです ひとつひとつ

ホームNoteHTML5:そろそろスッキリさせたい！CSS3 linear-gradient のベンダープレフィックス CSS でグラデーションを描画する際に使用する linear-gradinet ですが、だいたいこのようなことになっているかと思います。（※IE6,7,8には対応していません） [code] .gradient-sample { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#000000)); background: -webkit-linear-g