ダークモードに対応していないWebサイトを無理やりダークモードにする拡張
2022年5月24日 Webデザイン, 便利ツール こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。 ↑私が10年以上利用している会計ソフト！ 前々から夜間見えづらいって事は認識していましたが、どうやら光の見え方も多くの方とは違うと最近判明…！みんなこんなシャキーンって感じの光の線は見えないんですかね…？夜景なんて光るウニの集合体ですよw ちなみにスターバースト現象というらしい ←おそらく多くの人が見えるビュー Manaビュー→ pic.twitter.com/bfxZAK7FYE — Mana (@chibimana) September 8, 2020 以前『Webサイトを
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./destyle.css" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="Firstview">FirstView</div> <section class="Section"> <div class
Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、コーダーのばやしです。 皆様はInternet Explorer（以下IE）のことをどう思いますか？「昔ながらの使いやすいブラウザ」でしょうか？おそらく、コーディングをかじったことのある方で好きな人はあまりいないでしょう。 （IE BIG LOVEな方がいらっしゃいましたら申し訳ありません） なぜかと言えば、IE特有の仕様やバグといったものが多数存在するためです。 コーディング時に常に意識しなければならないのが、特定のブラウザ限定の特殊な仕様やバグです。 IEならではの仕様やバグに惑わされたことは枚挙に暇がないですが、IE以外の主要ブラウザで直面する仕様やバグも中々厄介なものです。 今回はそのような、Chrome/Safari/Firefoxなどの主要ブラウザで見られるようなバグや仕様を紹介していきます。よろしければブラウザを切り替えながら見比べてみてください。 ※以下の内容は
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
ファイルが更新されないときのキャッシュの消し方いろいろ（ひとり DevTools Advent Calendar 2020 – 17日目） | Ginpen.com
17 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ちょっとここおかしいな簡単だからさらりと修正しちゃおうよしほら終わったコミットだデプロイだ、ええとでも反映されないなおかしいな？ そんな経験あると思うんですが、キャッシュって厄介ですよね。DevTools を使ってどうにか強制的に最新版へ更新したりできます。 先にまとめ Network パネルの Disable cache を使おう それはそれとしてキャッシュ戦略うまくやろう キャッシュを利用しているかの確認 Network パネルでリクエストを監視して、一覧の Size の項目に出てきます。 “(disk cache)” がブラウザーが保存していたキャッシュファイルを利用した場合です。ネットワークを利用しませんでした。また再読み込みのときに “(memory cache)” にな
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） - ICS MEDIA
Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） この記事は『Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA
どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。 そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。 Dark Readerの使い方 MOONGIFTを表示した例です。 輝度やコントラストを変更できます。 設定メニューです。 Googleの検索結果。 Wikipedia。 Dark Readerを使えばどんなWebサイトでもダークモードとして目に優しい表示にできます。開発時にはエディタやターミナルを暗くしているのに、Webブラウザだけ明るいと目が辛いです。Dark Readerを使えば目に優しく、可読性も上がるでしょう。 Dark ReaderはGoogle Chrome/Firefox/Safari/Edge用、T
ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能
コードを書いて、ブラウザでチェックして… 画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか？ そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。 以下、各ブラウザの開発ツールで設定を変える方法です。 Firefoxの開発ツールのキャッシュ無効化 Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。 開発ツールの設定からオプションを変更する 開発ツールの設定画
Grammarly （グラマリー）でスペルミスを一掃！無料の英文校正ツールを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。英会話スクール「MeRISE英会話上野校 by LIG」の運営をしているみおです！ スクール運営業務の中で、５人の外国人の先生たちと英語でコミュニケーションをとることもしばしば。 先生にチャットで要件を伝える際に、英文がきちんとした英語になっているのかを必ずチェックしています。 そこで、最近「Grammarly」という文章校正ツールを使い始め、英文のチェックがとっても楽になったので今回は実際に使ってみた感想を書こうと思います。 以前、LIG社員のモトキウエダさんが「Grammarly」の紹介記事を書いていますので、Grammarlyについて知らない方はこちらをご一読ください。 Grammarlyってどうやって使うの？ Grammarlyの使用方法は主に3つです。 Grammarlyのサイトへ直接アクセスして使用する Chromeなどの拡張機能を利用する GrammarlyをPC
Chrome・Safari・IE・Firefox・EdgeのキャッシュとCookie削除方法まとめ
By jirkaejc ウェブブラウザに、ユーザーが閲覧したページの情報を一時的に保存するキャッシュや入力した情報を保存しておくCookieには、次回以降の閲覧時にウェブサイトを早く読み込んだり、IDやパスワード入力の手間を省いたりする役割があります。しかし、個人情報流出や予期せぬエラーの原因となってしまう可能性もあるため、場合によっては削除が必要になることもあります。各OSやブラウザごとに削除の手順が異なるので、キャッシュとCookieを削除する方法についてまとめてみました。 目次： ◆Windows＋Chrome ◆Windows＋IE ◆Windows＋Firefox ◆Windows＋Edge ◆macOS＋Chrome ◆macOS＋Safari ◆macOS＋Firefox ◆iOS＋Chrome ◆iOS＋Safari ◆iOS＋Firefox ◆Android＋Chrome
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。 /* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003, 2004, 20
jdetects - 開発者ツールが開いたのを検知 MOONGIFT
昔、HTMLソースの中に秘密のメッセージを埋め込むのが流行りました。例えば求人を入れていたり、問題を書いておくといった具合です。当たり前のことですが、開発者ツールを開くのは開発者くらいです。だからこそ良い宣伝になったのです。 そんな特徴を使って遊べるのがjdetectsです。開発者ツールを開いたタイミングでイベントを実行できます。 jdetectsの使い方 jdetectsのイベント設定です。 jdetects.create(function(status) { document.querySelector("#devtool-status").innerHTML = status; }); 開いていない状態です。 開いたタイミングでCSSのプロパティを変更しています。 jdetectsはGoogle Chromeだけでなく、Safariなどでもイベントが発火します。コンソールにメッセージ
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
bitwarden - Webブラウザ/スマートフォンに対応したパスワード管理 MOONGIFT
今のコンピュータにおいてパスワード管理は必須です。多くのWebサイトがパスワード管理されていますし、セキュリティを考えるにパスワードの使い回しは避けるべきです。現状、管理ソフトウェアの選択肢はとても多いです。 もしこれから探していこうというのであればbitwardenを使ってみてはいかがでしょうか。 bitwardenの使い方 bitwardenは多数のブラウザ、スマートフォンに対応しています。こちらはGoogle機能拡張です。 サイトを追加します。 追加する画面です。 ユーザID、パスワードにワンクリックでアクセスできるのは便利です。 こちらはiPhoneアプリです。Android版もあります。 使い勝手はWebブラウザ版と変わりません。 Safariの拡張にも対応しています。 bitwardenはサーバからWebブラウザ、スマートフォンまですべてオープンソース、とされているのですがライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Translate Web for Safari - Safariで翻訳を素早くする機能拡張 MOONGIFT
Matt Smith on Twitter: "🔥 TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)! #WebDev #ProTip https://t.co/lefD0Klqzd"
Open-in-Chrome - Safariで見ているページをGoogle Chromeで表示する