CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】 - Qiita
JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】HTMLJavaScriptChrome初心者popup
CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
この実装は、完全に想定外の発想でした！ スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。 Pop-up API Off Canvas Menu w/ :has() ⚡️ 実際の動作は、下記ページでご覧ください。 ※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります（後述）。 Pop-up API Off Canvas Menu w/ :has() ⚡️ まずは、HTMLを見てましょう。 ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。pop
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
今日から効率UP！Web運営の現場で使われているChrome拡張機能30選 | ［マナミナ］まなべるみんなのデータマーケティング・マガジン
ネット関係のマーケター、あるいはWebサイト運営者はブラウザに触れている時間が長い職種の一つと言えるでしょう。Webページやあるデザイン要素の構成要素をチェックすることは、技術的に詳しい方ならディベロッパーツールなどで色々可能です。 一方、一回一回は大した手間でなくても、大量のURLをチェックするなど作業量がある領域では、Chrome拡張機能の助けを得ることが効率化の近道です。ブラウザの拡張機能とは、組み込むことでChromeの機能をアップできる仕組みです。Googleから公式の「Chrome ウェブストア」が提供されていて、選んでインストールするだけで新しい機能が使えるようになります。 今回は作業量を減らせるChrome拡張機能を厳選してご紹介します。もしまだ使っていないのであれば、ぜひ試してみてはいかがでしょうか。
2022年版 Web制作が捗るChrome拡張機能14選 | Pulp Note
Chrome拡張機能には便利なものが多く、特にWeb制作時には積極的に利用しています。昨年も紹介しているのですが、2022年に入ってChrome拡張機能の見直しをして現在よく利用しているものだけで再構成してみたところ、無駄が減り使いやすくなりました。2022年版のおすすめChrome拡張機能を14個紹介します。 Toby for Chrome Chromeを利用しているとかならず出てくるタブ開きすぎ問題。パソコンが重くなる原因の一つで、タブは開きすぎない方が良いです。その問題を解消するのがChrome拡張機能 Toby for Chrome。ついつい増えがちなタブを一括で管理することができます。 私は、案件ごとにSPACESを用意し、関連ページや参考ページをタブで開いてまとめてブクマしています。ドラッグ&ドロップで並べかえができたり、SPACES内に複数のフォルダを用意できるので、タブ管理
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
セキュリティ調査に役立つブラウザ拡張機能のまとめ - 午前７時のしなもんぶろぐ
おはようございます。しなもんです。 今回はセキュリティ調査に使える便利なブラウザの拡張機能 (アドオン・エクステンション) をご紹介します。 こうした拡張機能の多くはこの世で唯一無二の機能を持っているわけではありませんが、普段から一番よく使う調査ツールである「Web ブラウザ」に直結するため、手間の節減や各種オンラインサービスへのアクセシビリティ向上に大きな効果を発揮する場合があります。 前提 Mitaka IP Address and Domain information Link Redirect Trace User-Agent Switcher Flagfox IP Domain Country Flag Wappalyser anonymoX Wayback Machine Exif Viewer/EXIF Viewer Pro Simple Translate Mouse Di
ChromeのアップデートでGoogleフォントがページ読み込みのボトルネックになるという指摘
Googleフォントはウェブサイト向けに無料でフォントを提供するサービスで、多くのフォントを簡単に利用できるため4600万以上のサイトで利用されています。そのGoogleフォントについて、適切に利用しなければページ読み込みのボトルネックになってしまうとエンジニアのシモン・ウィキ氏が警告しています。 Time to Say Goodbye to Google Fonts https://wicki.io/posts/2020-11-goodbye-google-fonts/ Googleフォントを利用する方法として、ユーザーにGoogleのサーバーからフォントデータを取ってきてもらうCDN方式と、フォントデータを自分のサーバーにアップロードして提供するセルフホスト方式の2つが存在しています。前者のCDNを利用する方法は、ページにコードを埋め込むだけでセットアップでき、非常に簡単なため多くのサ
テキストフラグメント付きURLをサクッと作れるブラウザ拡張/アドオン
[レベル: 中級] この記事では、テキスト フラグメントが付いた URL を簡単に作成するブラウザの拡張機能を紹介します。 テキスト フラグメント (Text Fragment) は、#:~:text= 形式のフラグメントを URL に追加することで、ページ内の特定の場所へ移動するリンクを作る仕組みです。 さらに指定した範囲のテキストをハイライト表示します。 Chrome 81 が初めて実装しました。 テキストフラグメント付き URL を作成する Chrome 拡張を以前に紹介しましたが、そのほかのブラウザでも同様の拡張やアドオンが公開されています。 テキスト フラグメント URL 作成ブラウザ拡張 テキスト フラグメント URL 作成する各ブラウザの拡張/アドオンはこちらからインストールできます。 Chrome 拡張 Edge アドオン Firefox アドオン Safari アプリ ど
Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される
img 要素や iframe 要素などのリソースを、HTML 側の指定のみで遅延読み込みに対応させる loading 属性を、Chrome 75 が先行実装しましたので簡単に紹介。 本記事執筆時点において、loading 属性は Chrome の先行実装でしたが、その後、HTML Living Standard 仕様において定義されました。それに伴い指定可能な属性値などが変わっていますのでご注意ください。詳しくは「Firefox 75、HTML の指定のみで動作する画像遅延読み込み （loading="lazy"） に正式対応」をご覧ください。 画像など、Web ページで使用するリソースの遅延読み込みは、Web ページの体感的な表示速度を向上させるために利用されますが、現時点では JavaScript を使用した実装が一般的です。 これをブラウザ側でネイティブに実装し、HTML 側の指定の
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
JPEG／PNGファイルをドラッグ＆ドロップでWebPに変換してくれるツール「WebPonize」 | ライフハッカー・ジャパン
「WebPonize」はJPEG/PNGファイルをドラッグ＆ドロップでWebPに変換してくれるツールです。WebP（ウェッピー）はGoogleが開発した新しい画像フォーマットです。JPEGやPNGに比べ、圧縮率が高いことが特徴。Google Chromeなどのツールで利用することができます。そんな話題のWebPフォーマットに簡単に変換してくれるツールですよ。 以下に使ってみた様子を載せておきます。まずWebPonizeへアクセスしましょう。WebPonizeをダウンロードします。起動し、画像ファイルをドラッグ＆ドロップしてみましょう。 まとめて変換することも可能です。変換後はこのように圧縮率が表示されます。ファイルサイズが10%以下になっているものもありますね。変換されたWebPフォーマットの画像はGoogle ChromeなどWebPに対応しているツールで開くことができます。 ファイルサ
ChromeでiPhone5やNexus5等にEmulateできる機能が便利:phpspot開発日誌
ChromeでiPhone5やNexus5等にEmulateできる機能が便利です。 個人的にFireMobileSimulatorを使っていましたが、Webkitなため再現度も高く、いつも使ってるChromeでエミュレートできるのは超便利！ Chrome32から使える機能のようで、デベロッパーツールはよく使っていたものの、分かりにくい位置にあることもあって、使っていない方も多いのでは？ということでご紹介。 デベロッパーツールの以下のカーソル位置をクリックします。 クリックすると次のように、更に下に分割されたフレームが開きますので「Emulation」のタブをクリック。 iPhone5, Nexus5、KindleFireなど、主要な端末へのエミュレートが可能。 端末を選択したら「Emulate」ボタンをクリックで画面のエミュレートが開始されます。 Yahooのサイト。は以下のようにエミュレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig
