Chrome拡張機能のストレージを扱う時に@extend-chrome/storageが便利
どうも。えーたん（@eetann092）です。 @extend-chrome/storageが便利なので紹介します。 @extend-chrome/storageとは？ @extend-chrome/storageは、Chrome拡張機能のAPIchrome.storageのラッパーです。 メリットは以下の3つです。 storageから取得した値の処理をコールバックではなくasync/awaitを使って書くことができる 型情報を追加できる ストレージをBucketとして区切ることができる 実際の例を交えて説明します。 まずはchrome.storageをラッパー無しで使った例です。saveCountでchrome.storage.local.setを、loadCountでchrome.storage.local.getを使っています。 import { useState } from "r
CSSでページを拡大縮小する
🚨 実装をする前に注意点 🚨 コンテンツの拡大、もしくは縮小をできるということは、アクセシビリティの向上につながる可能性があります。一方でコンテンツ（もしくはページ）全体の拡大、縮小の機能を自前で実装することは、アクセシビリティが必ずしも向上するとは限りません。 実装をする必要があるか、再度検討をしてみてください。 視力の低いユーザーのための機能であれば、フォントサイズの単位に相対的な単位を用いる、画像に拡大プレビュー機能を追加するなどを検討してみてはいかがでしょうか。 ページのビューに収まる内容を動的に変更したいのであればレイアウトの構成を変えてみてはどうでしょうか。 ページの拡大縮小が必要であれば、ブラウザの提供する機能[1][2][3]を利用するようにユーザーに提案してみてはどうでしょうか。 ブラウザが拡大縮小の機能を持ち、そのAPIを開発者に対して提供していない以上、その機能を
【CSS】画面全体をブラウザで拡縮した時と同様の結果を得るCSS
追記（2021/11/05）：htmlにscaleをかけるとclientXなどの座標回りが奇妙な挙動（JavaScript上のX,Yと画面で見たX,Yが対応していない？）になるので取り扱い注意 大体のブラウザには web ぺージを拡縮する機能がついています。これは ctrl + マウスホイールで操作できます。この機能によっ て次画像らの様にweb 中の各要素の比率を変えずに画面を大きくしたり、小さくしたりできます。 画面サイズが n% の時のデザインがちょうどいい、といった具合の要望があった際、この記事で紹介する CSS が役に立ちます。 ブラウザの拡縮機能を CSS で再現するのは意外とコツがいります。というのも画面中の各要素の比率と、画面のサイズとブライザのサイズ差に案外引っかかるからです。この拡縮は次のCSSで実現できます。 // scss html { // 70% バージョン $
SERP snippet preview tool
Preview your listing in search resultsSERP snippet preview toolFill in the form below, or enter a URL, and preview how your page could look in search results.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
