ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は105.0.5195.52)がリリースされました。新たなCSS疑似クラスの実装など、ウェブUIの開発を容易にするであろうさまざまな機能が追加されています。 ◆CSS疑似クラスの追加 今回、新たに二つのCSS疑似クラスが追加されています。:has()は引数で渡された相対セレクター要素を1つ以上持っている場合に有効となります。 /* <div> 要素のうち直接 <img> を含んでいるもの */ div:has(> img) { background-color: black; } :modalは、それが存在している間は外部の要素とのすべての相互作用を排除する状態にある要素(つまりダイアログ的な要素)に対して有効となります。 :modal { bor
特定のサイトやURLだけにスタイルを適用したい場合は、スタイルを記述する欄の下にある「+」を押し、以下のように設定します。 「https://example.com/aaa.html」というURLのみを指定する場合 「URL」 「https://example.com/aaa.html」 「https://example.com/」が頭に付くURLを指定する場合 「次で始まる URL」 「https://example.com/」 「example.com」ドメインの全サイトを指定する場合（「aaa.example.com」等） 「ドメイン上の URL」 「example.com」 どこかに「aaa」を含むURLを指定する場合 「正規表現に一致する URL」 「.*aaa.*」 「aaa」で終わるURLを指定する場合 「正規表現に一致する URL」 「.*aaa」 URLの条件は、右端の「
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかなくて紆余曲折して最終的に__めっちゃ簡単__だったのでメモ。 やりたいこと PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる 環境 PC: Windows 7 64bit PC 版 Chrome: ver. 41 Android 端末: SO-03F / Android 4.4.2
Chrome拡張機能『Autofill』の導入方法 今回紹介する『Autofill』は、Chromeの拡張機能として利用する事ができる、プラグイン的な位置づけの作業系ツールです。 『Autofill』をChromeに追加する方法 Chrome拡張機能の追加方法は簡単で、以下のリンクから『Autofill』のページへ移動し、『Chromeに追加』ボタンを押せば完了します。（※逆に削除をしたい場合は、追加後に表示される『Chromeから削除します』ボタンを押せばOKです） ▼公式サイト Chromeウェブストア - Autofill Chrome拡張機能『Autofill』の使い方 基本的にはWEBフォームの内容を『保存する』事と『読み込む』事がこのツールの主な使用方法になります。それぞれ順番に解説してゆきますね。 1.フォームの内容を保存する Autofillを使ってフォームの内容を保存する
ウェブページを保存して、後でオフライン環境になったときでも読むことができます。ページを後からオフラインで読むには、事前にページを Chrome にダウンロードします。 リーディング リストにページを保存する Android デバイスで Chrome を開きます。 後で読むページに移動します。 アドレスバーの右のその他アイコン スター をタップします。 ヒント: リーディング リストにページを保存するときに、新しいページはすべて、最後に保存したフォルダに保存されます。保存する場所を編集するには、ページの下部にある [編集] をタップします。 ページを保存する場所を編集する リーディング リストに保存するときに、ページを保存する場所を変更できます。 保存したページに移動します。 アドレスバーの右のその他アイコン スター をタップします。 別の場所を選択するには、[フォルダ] [リーディング リ
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に GoogleはWebブラウザのChrome 78ベータ版で「Native File System API」を試験的機能（Origin Trial）として搭載したことを明らかにしました。 Native File System APIはWeb Platform Incubator Community Groupが策定中のAPIで、Webアプリケーションからローカルファイルを開き、読み書きを行える機能です。 「The Native File System API: Simplifying access to local files」から引用します。 The Native File System API enables developers to build powe
拡張機能を使わずに縦長ページのスクショが取れる！ Webページのスクリーンショット（画面キャプチャー、スクショ）を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー（クロームブラウザー）に搭載されている開発者向けの「デベロッパーツール」を使えば、ページ全体のスクリーンショットを撮影することが可能です。この方法なら、新たにChromeブラウザーに拡張機能をインストールする必要もありません。Chromeブラウザーだけで、縦に長いWebページ全体のスクリーンショットを撮影できます。 ここでは例として、Amazonの商品ページ（縦に長い！）全体のスクリーンショットを撮ってみます。Chromeブラウザーの便利なTipsなので覚えておいて損はありません。ぜひ一
「Chromeでこの接続ではプライバシーが保護されません。HSTSが使用されているため、現在アクセスできません」と表示されてアクセス出来ないときの対処方法を紹介します。 何が起きているのか暗号化通信(HTTPS)を「絶対に行う」ように指定されたサイトなのにも関わらず、暗号化通信が出来なかったときに発生します。 この接続ではプライバシーが保護されません bicstone.me では、悪意のあるユーザーによって、パスワード、メッセージ、クレジットカードなどの情報が盗まれる可能性があります。 bicstone.me では通常、暗号化して情報を保護しています。 今回、Chrome から bicstone.me への接続試行時に、このウェブサイトからいつもとは異なる誤った認証情報が返されました。悪意のあるユーザーが bicstone.me になりすまそうとしているか、Wi-Fi ログイン画面で接続が
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ
Nintendo Switch 2: Everything we know about the coming release
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72) パフォーマンス指標のビジュアル化 テキストノードをハイライト表示 Shadow DOMに役立つ「Copy JS path」 JavaScriptライブラリの検出 動画バージョン パフォーマンス指標のビジュアル化 ページのロードを記録した後、DOMContentLoadedやFirst Meaningful PaintのようなパフォーマンスメトリックをTimingsセクションにマークするようになりました。 TimingsセクションのFMP Performanceパネルに移動。 Recordボタンをクリックして、ロードを記録。 Timingsセクションを展開。 テキストノードをハ
The easy way to remotely connect with your home or work computer, or share your screen with others. Securely access your computer whenever you're away, using your phone, tablet, or another computer. Share your screen to collaborate in real-time, or connect with another computer to give or receive remote support.
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く