CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
Chrome85でWebサイトの流入元がとれない問題と対応方法 - paiza times
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
最新のユーザーエージェント対応はどうするべきか？ - ICS MEDIA
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか？ 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
Google Chrome、表示が速いページのリンクに「高速版ページ」のラベルを付ける
[レベル: 上級] リンク先ページが高速に表示されることがわかっているとき、「高速版ページ」のラベルを Chrome が付けるようになります。 アンカーテキスト長押しで速いページかどうかをチェック リンクのアンカーテキストをモバイル版 Chrome で長押します。 そのリンク先ページの表示が十分に速い場合に、コンテキストメニューに「高速版ページ」というラベルが出ます。 アクセスする前に速く表示されるかどうかをユーザーは確かめられます。 Core Web Vitals で評価 高速かどうかは Core Web Vitals の指標を用いて判断します。 そのページを過去に訪問したユーザーのデータに基づいて評価されます。 また公開直後だったり訪問者が少なかったりして 評価に十分なデータが集まっていないときは、サイト内の類似したページをもとに評価するとのことです。 Chrome ベータ 85 で試
ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能
ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。 画像はダークモード対応サイト: Tom Brow ダークモードの実装については、当ブログの以前の記事をご覧ください。 CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。 What's New In DevTools (Chrom
最近出会えた！新たなバグ！！ | やくにたたないメモ帳
ど〜も〜、久々にランニングしたら両足筋肉通なたかの人です！ 日々の運動ってほんと重要ですよね、、、 特にこの業界は下っ腹が出てきます。 これは、本格的にダイエット開始かな！ なんて言いつつ、アイスを食べてます(´◉◞⊖◟◉`)b さて、今回は、日々の業務で見つけたバグ＆注意点を一気に紹介したいと思います！ それでは、レッツスタート！！！ case1：vw,vhのバグ ずっと敬遠していましたが、使ってみると使い勝手がよかった！ 調子に乗って多様していたら思わぬ落とし穴が。。。 iPhoneXでのvhと%の違い モーダルを実装したときに発覚したのですが、どうやら100vhと100%で若干高さが異なるようです。 100vhだとメニューを含む高さ 、100%だとメニューを含まない高さの指定になってしまうようです。 IE11でのvwの挙動 ご存知の通りvwとはview widthの略です。 名前の通
ゴシップサイトブロッカーがヤバイ！本名は？彼氏は？彼女は？身長や年収は？年齢や学歴まとめ！現在の状況についても調査！ - カトゆー家断絶
こんにちは！(*＾＾*) 当ブログにご訪問いただきありがとうございます！ 最近知名度を増してきているゴシップサイトブロッカー という拡張をご存知でしょうか？ ゴシップなサイトをブロックする……、 本当だとしたら凄いですよね！笑 そこで今回は気になるこのゴシップサイトブロッカーが、 どんな経緯で誕生したのか？ や、 使い方について調べてみました！ ゴシップサイトブロッカーの経歴は？ ゴシップサイトブロッカーの基本情報！ ゴシップサイトブロッカーの導入方法は？ ゴシップサイトブロッカーの使い方！ まとめ ゴシップサイトブロッカーの経歴は？ 気になるゴシップサイトブロッカーが 誕生した背景についてまとめます。 昨今SNSを中心に、Google検索が使い物にならないと 度々話題になっています。 「やたら上位に出てくるまとめサイトや商品への誘導記事…」最近のネット検索、欲しい情報手に入らなくなってる
Web制作が捗る！おすすめのChrome拡張機能18選【2021年版】 | Web Design Trends
Web制作や情報収集など、Google Chromeをメインブラウザで使用している方はとても多いと思います。 Chromeの便利な機能の1つが拡張機能ですが、きちんと活用してますか？拡張機能を活用することで、Web制作業務が効率化されたり、日々の情報収集が行いやすくなったりします。 今回は、Web制作者やデザイナー向けのGoogle Chromeのおすすめ拡張機能をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends
Windows・Chrome で游ゴシックフォントを少しだけ太く見せる JavaScript と CSS - Corredor
以前、「ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解」という記事を書いた。 neos21.hatenablog.com おかげさまで、はてブで77ブクマ (本稿執筆時点) いただき、皆様もこの件について苦労なさっていることが伺い知れた。 今回はこの続報。Windows・Chrome 環境で、游ゴシックフォントが適用されている場合のみ、フォントを少しだけ太く表示させる JavaScript と CSS を作ったので紹介する。開発者が自分のサイトに組み込んで調整いただけるだろう。 前回のおさらい 問題の概要 ウェブサイト開発者ができる対処法 クライアントサイドでできる対処法 text-shadow ではなく -webkit-text-stroke-width を使う window.getComputedStyle() では使われているフォントが分からない canvas 要素を
ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog
Chrome でマイクからの音声を録音して、その音声認識で書き起こしも同時に行うツールを作った。 recording-studio.netlify.com で遊べる。 Chrome に搭載されてる Web Standard Proposal? の SpeechRecognition API を使っている。 developer.mozilla.org Chrome のみだが、 PC Chrome だけではなく Android Chrome でも動作確認済み。 ブラウザをオフラインにすると動作しないので、このAPI の 中身はたぶん Google Speech to Text API だと思われる。 出力 録音したものは webm ファイルとしてダウンロードできる。認識されたテキストも、タイムスタンプ付きのプレーンテキストなので、適当にもっていって、ぐらいの気持ち。 クラウドで音声認識してるこ
Google Chrome上でマイクから録音した声をリアルタイムで文字に書き起こしてくれる「The Recording Studio」
「Recording Studio」は、Chromeに対応している音声認識API「SpeechRecognition API」を利用してマイクから録音した声を音声認識によってその場で文字に起こしてくれるウェブツールです。オンラインのブラウザ上で動作するのでダウンロードやインストールは不要で、開発したみずちさんが無料で公開しています。 Recording Studio https://recording-studio.netlify.com/ ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog https://mizchi.hatenablog.com/entry/2019/01/20/203241 Googleは音声ファイルをAIが認識して文字にしてくれる「Cloud Speech-to-Text」という有料サービスを提供しています。Google Clo
テレビがPCに早変わり！ HDMI端子に挿すだけのスティック型Chrome PC「ASUS Chromebit」に新色登場 - MdN Design Interactive
同製品は、テレビのHDMI端子に挿して使用するスティックタイプのChrome PCだ。高いセキュリティを誇るGoogleのChrome OSを搭載しており、直感的な操作でWebサイトを見たりストリーミング動画を見たりと、さまざまな対応アプリケーションを使用することができる。 フルHD（1,920×1,080ドット）の画像出力に対応しており、動画や写真などを高精細に表示。好みのBluetoothキーボードやBluetoothマウスを接続すれば、ケーブルに制限されることなく、テレビから離れた場所から自由に操作を行なうことも可能である。 デスクトップPCとして、プレゼンなどのビジネス用として、デジタルサイネージ広告や店舗のキオスク端末として、様々な場面で活躍する便利な商品となっている。
重要ではない CSS を link タグだけで非同期で読み込む方法 - FirstLayout
何もせずにスタイルシートを <link> で読み込む場合は、レンダリングをブロックしてしまいます。 また、rel="preload" を使えばレンダリングブロックは防げますが、他のリソースの読み込みからブラウザのリソースを奪うという代償が伴います。 そのため、可能な限り CSS のサイズを小さくし、<style> を使いインラインで CSS を読み込むのが一般的です。 ただ、どうしても CSS のサイズが大きくなる場合は、重要ではない CSS を非同期で読み込むといいかもしれません。<link> に 2 つの属性を付けるだけでスタイルシートを非同期で読み込めます。 <link rel="stylesheet" href="スタイルシートのパス" media="print" onload="this.media='all'" /> <link> に media="print" と onloa
「Chrome 64」安定版のアップデート公開、迷惑広告ブロックもスタート
ポップアップ広告や音声付きの動画を自動再生する広告など、ユーザーに不快感を与える広告はChromeで表示されなくなる。 米Googleは2月13日、デスクトップ向けWebブラウザ「Chrome 64」安定版のアップデートを公開した。今後数日から数週間かけて、MacとLinux、Windows向けに配信する。 Googleによると、今回のアップデートではJavaScriptエンジンのV8に存在していた1件の脆弱性に対処した。危険度は同社の4段階評価で上から2番目に高い「高」に分類している。 この問題を修正したChromeの最新版は、MacとLinux向けがバージョン64.0.3282.167、Windows向けが同64.0.3282.167/168となる。 これとは別にGoogleは、2017年6月の予告に従って、2018年2月15日から、Chromeで迷惑な広告のブロックを開始すると表明し
世界30%のSSL証明書が3月と10月に強制無効化！？ あなたのサイトが大丈夫か確認する3ステップ | 初代編集長ブログ―安田英久
2018年3月と10月に多くのSSLサーバー証明書がChromeとFirefoxで無効化ベリサイン／シマンテック系のSSL/TLSサーバー証明書が、次のスケジュールで無効化されることが、すでに決まっています。 対象のサーバー証明書の発行元： SymantecGeoTrustRapidSSLThawte無効化スケジュール： 2018年3月15日ごろ： Chrome 66のベータ版で、上記発行元が2016年6月1日より前に発行した証明書を信頼しないようになる2018年4月17日ごろ： Chrome 66の通常版で、上記発行元が2016年6月1日より前に発行した証明書を信頼しないようになる2018年9月13日ごろ： Chrome 70のベータ版で、上記発行元が発行した証明書すべてを信頼しないようになる2018年10月23日ごろ： Chrome 70通常版で、上記発行元が発行した証明書すべてを信頼
Macに別れを告げて、クラウド中心の開発生活を始めるまで - Qiita
昨年あたりから、Macやめたい病を患っていたのですが、2度の故障を経て、重たい腰を上げました。別にWindows使いたいわけもなく「ローカルが煩わしい」だけなので、Windowsアプリは一切インストールしていません。で、どうやって暮らしてるの? というお話です。 TL;DR このあたり↓を組み合わせていけば、クラウド生活可能: GCP (or AWS) Codeanywhere (or Koding or Cloud9) VPCネットワーク + VPN (IPsec+L2TP) + DNS Figmaほか、Webサービス各種 追記・この記事を書いていたら、AWS Cloud9が発表されました。選択肢が増えて何よりです。 はじめに 本稿は、筆者が「Mac断ち」あるいは「ローカルマシンから解脱(げだつ)」する過程で見えてきた、ベスト(かも)プラクティス集に近いものです。 よく使うテキストエディ
[CSS] chromeでfloatした要素のwidthが何故か0.016px増える | おれめも v2
【2015/07/22追記】 現時点の最新版(ver 44.0.2403.89)で確認したところ、表題の問題は解消されておりました。 まだこの問題が確認される場合はChromeが最新版になっていない可能性がありますので、一度ご確認ください。 現時点でのchromeの最新版(ver 43.0.2357.81)から起きているようです。 グローバルナビ等で画像をfloatで横並びにした時、 以下の条件が組み合わさると要素のwidthが0.016px増えてしまうようです。 floatした要素にwidthが設定されていないfloatした要素の最後に空白や改行が入っているfloatした要素のfont-sizeが4の倍数pxになっているデモページを用意しましたでの見てもらうのが一番早いかと思います。 ページのソースを確認してもらうと、どういうことかわかるかと…！ 修正方法としましては、floatした要素
![[CSS] chromeでfloatした要素のwidthが何故か0.016px増える | おれめも v2](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f838750a2a071688e2813d0ffad8429b1e5afa0/height=288;version=1;width=512/https%3A%2F%2F64.media.tumblr.com%2Favatar_fe33f09627a6_128.pnj){kind=avatar}
Mavericks 導入で Chrome や Safari でスクロールが効かなくなる原因は「ページ間のスワイプ」かもしれない【追記あり】 | ハヤクユケ
ブラウザのスクロールが効かなくなる 導入当初から、多分昨日あたりまでは問題なかったはずなのですが、Chrome でブラウズしている途中で突然スクロールが効かなくなりました。 キーボードのカーソルキーで上下に動かすとスクロールするので Chrome がフリーズしているわけでもなさそうです。 Chrome だけじゃなく Safari も同様 Safariではどうかと起動してみたところ、同じページを開いてスクロールしてみると動きます…、がこちらもあるアクションをキッカケにスクロールが効かなくなりました。 Magic Mouse だけではなく Trackpad もダメ この症状に陥ると、Trackpad の2本指スワイプも効かなくなりました。Magic Trackpad は持っていないのですが、MacBook Air に内蔵されているもので確認しています。 設定を変更してブラウザを再起動する 先ほ
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Google Chrome 73」が正式公開 ～Mac版でPWAとダーク モードがサポートされる／脆弱性の修正は60件
