お問い合わせはコチラから

Chrome 95 検証ツールでCSSをCtrl+Cでコピーするとペースト時に崩れるバグ

サイト運営

Chromeのアップデートであまり困ったことは無いのですが、Chrome 95にアップデートしたら検証ツールからCSSをコピペする時に崩れる現象があって、結構困ったことになっています。

Chrome95でCSSのコピペが崩れる現象

Chrome95の検証ツール(ディベロッパーツール)でstylesで表示されるCSSをマウスで選択してコピー(Ctrl+C)すると、特定の条件の時だけペースト時に崩れる現象があります。

Chrome は最新の状態です
バージョン: 95.0.4638.69(Official Build) (64 ビット)

例えば、以下の様なCSSをstylesからコピーして、

.col, .gallery-item, .columns {
    position: relative;
    margin: 0;
    padding: 0 15px 30px;
    width: 100%;
}

ペーストすると↓のようにガチャガチャになります。

.col, .gallery-item, .columns {
    position: relative;
    margin: 0;
    padding: 0 15
px
 30
px
;
    width: 100%;
}

この現象が起きるのは、コピーしたCSSにpxやemが存在するとダメっぽいです。pxやemが含まれない場合には正常にペーストされます。

参考https://stackoverflow.com/questions/69735342/google-chrome-update-issue-with-copying-code-from-inspector-css

Chrome 95でペースト時に崩れないコピー方法

万能な方法ではないのですが、右クリック⇒copy all declarationsとすると、右クリックした宣言だけは正常にコピーペーストできます。

複数の宣言をまとめてコピーしたい時には使えませんが、崩れまくっているCSSを手で直すよりはいいかもしれません。

Chrome 96で修正済み

この不具合は、開発中のChrome 96では修正済みらしいので、安定版のChrome96がリリースされると解消されるようです。

急いでる人は開発版を入れるか、古いバージョンに戻す方法があります。

古いバージョンに戻すやり方は、ちょっと面倒な感じの手順で、リスクしか感じません。いらない仕事が増えそうなので、躊躇します。

Downgrade your Chrome version (Windows) - Chrome Enterprise and Education Help
For Google Workspaceand Chrome Browser Enterprise Support customers only If your users are having problems with Chrome o...

Google chromeをダウングレードする手順

Chromeをダウングレードする前にプロファイルを保存する

Chromeを直接ダウングレードすると、保存したパスワード、ブックマーク、ブラウザ設定、履歴がすべて失われます。Chromeの現在のバージョンを削除する前に、ChromeデータをGoogleアカウントと同期して、そのまま維持する必要があります。

これにより、すべてのChrome設定とデータがGoogleアカウントに保存されるため、後日復元できます。同期はいつでもオフに切り替えることができます。

既存のGoogleChromeをアンインストールする

以前のバージョンにダウングレードするには、Chromeの現在のバージョンをアンインストールする必要があります。その方法は次のとおりです。

Windowsデバイスでは、Windowsサーチバーで検索してコントロールパネルを開きます。プログラムと機能に移動します。または、Macの場合 は、Finderのアプリケーションフォルダに移動します 。

インストールされているプログラムの一覧で、探しGoogle Chromeのアプリアイコンを右クリックして、[アンインストール]または [ビンに移動]を選択します 。

これにより、インストールされているChromeバージョンが削除されます。次のステップは、ブラウザをアンインストールした後、システムに残っているChromeデータを削除することです。

Windowsデバイスでは、ファイルエクスプローラーで以下の場所に移動します。フォルダ内に入ったら、ここですべてのファイルとフォルダを削除します。

%LOCALAPPDATA%\Google\Chrome\User Data

Macでも、Finderの以下のフォルダに移動し、その中のすべてのフォルダとファイルを削除することで、同じことを行うことができ ます。

~/Library/Application Support/Google/Chrome

これを行うと、すべてのユーザー情報、ダウンロード履歴、パスワード、ブックマーク、およびその他のデータが完全に削除されます。

GoogleChromeをダウングレードする

  1. Filehippoに行きます
  2. Google Chrome history pageを開きます
  3. 必要なバージョンのファイルをダウンロードします。
  4. インストールします

参考:https://www.makeuseof.com/downgrade-chrome-older-version/

まとめ

1日中検証ツールを表示しているような人には、今回のバグは頭禿げそうになります。

とりあえず、Chrome96の安定版のリリースを待つしかないようです。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました