Google Chrome でユーザースタイルシートを適用する
特定のサイトや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の条件は、右端の「
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
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のさまざまな機能をサポートしていないブ
【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える
ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
Chromeでmedia printを確認・デバッグする方法
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO