こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
過去最多となる56人が立候補した東京都知事選（7月7日投開票）について、朝日新聞社は22、23の両日、インターネット調査を実施し、取材で得た情報と合わせて選挙戦序盤の情勢を探った。3選をめざす現職の…
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
トヨタ自動車で車の大量生産に必要な「型式指定」を巡る認証不正があった問題で、国土交通省は31日、トヨタに対する調査結果を公表した。これまでにトヨタから報告のあった7車種に加え、新たに7車種でも不正を…
■100年をたどる旅～未来のための近現代史～④予告された敗戦 「国防は軍人の専有物にあらず」「国防は国力に相応ずる武力を備うると同時に、国力を涵養（かんよう）し、一方外交手段により戦争を避くることが、…
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
アウシュビッツ収容所の隣で暮らす所長のルドルフ・ヘス一家の生活を描いた映画「関心領域」が公開されている。「検証 ナチスは『良いこと』もしたのか？」の共著者で、ナチズムを研究する田野大輔・甲南大学教授…
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
宇宙航空研究開発機構（JAXA、本社・東京都調布市）が昨年から今年にかけて複数回のサイバー攻撃を受け、機密指定を含む大量の情報が外部に流出した恐れがあることが複数の関係者への取材でわかった。流出の可…
naoya @naoya_ito blog.cloudflare.com/introducing-pa… なるほど クローラーと Cloudflare の間で価格交渉をして、取引が成立したらクローラーはクロールが可能になる、成立しなかったらブロックされる。料金の回収代行は Cloudflare がやる 2025-07-02 12:40:31 リンク The Cloudflare Blog Introducing Pay per crawl- enabling content owners to charge AI crawlers for access Pay per crawl is a new feature to allow content creators to charge AI crawlers for access to their content. 29 users 420
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 — CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからであ
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
静岡県知事選の応援演説で女性に対する配慮を欠いたとも受け止められかねない発言をした上川陽子外相は19日午前、静岡市内で報道陣の取材に応じ、「女性パワーで未来を変えるという私の真意と違う形で受け止めら…
4月の衆院東京15区補選で他陣営の街頭演説を妨害したとして政治団体「つばさの党」の幹部3人が公職選挙法違反（選挙の自由妨害）容疑で逮捕された事件で、3人が補選期間中、自らのユーチューブチャンネルで約…
イスラエル軍は1日、中東の衛星放送局アルジャジーラのイスマイル・ゴウル記者を殺害したと発表した。軍は「イスラム組織ハマスの対外発信で中心的役割を担っていた」などと主張しているが、同局はゴウル氏のハマ…
自民党総裁選で「ポスト岸田」候補として意欲を示す衆院議員は、選択的夫婦別姓への賛否が割れていることが、朝日新聞社と東京大学・谷口将紀研究室によるこれまでの共同調査からわかった。選択的夫婦別姓は、日本…
岸田文雄首相は今国会中の衆院解散を見送る方向で最終調整に入った。首相は23日に会期末を迎える今国会中に解散に踏み切って総選挙で勝利し、9月の自民党総裁選で再選するシナリオを描いてきたが、党派閥による…
三重県松阪市の三重高校ダンス部が、地元の建設業者らと制作していたダンス動画が完成した。「きつい」といった建設業のイメージを一新し、新たな担い手確保をめざす業界に部員らが快く応じたもので、YouTub…
東京都知事選（20日告示、7月7日投開票）は、立候補する小池百合子知事による都政を評価する機会になる。8年前、初当選した小池氏の公約は、「七つのゼロ」だった。その後、どうなった?
この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。 自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。 例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:
offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat
吉川@広島です。 Are you a React dev? Do you use Visual Studio Code? I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g — François Wouts (@fwouts) June 25, 2021 「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」 こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。 本記事ではReactアプリケーションの初期構築手順は割愛します。 環境 react 17.0.2 typescript 4.3.2 styled-components 5.3.0 VS
■日本維新の会・馬場伸幸代表（発言録） （公認候補の敗北について）我が党の実力のままの結果だと思う。まだまだ関西以外で小選挙区で勝つことは、非常に厳しい状況だ。衆院選に向けて、また全国的に全員が原点に…
受刑者への書籍の差し入れ数を大きく削減した刑務所の対応を「違法」とした逆転判決が出た。受刑者にとっての読書を、裁判所はどう位置づけたのか。
大阪府箕面市の上島一彦市長が19日の市議会定例会一般質問で、2025年の大阪・関西万博に関する発言をした共産党市議に「万博行くなよ」「出入り禁止や」と発言したことがわかった。 上島市長は大阪維新の会…
東京高検検事長だった黒川弘務氏の定年を延長した2020年の閣議決定をめぐり、神戸学院大の上脇博之（ひろし）教授が関連文書を不開示とした国の決定を取り消すよう求めた訴訟の判決で、大阪地裁は27日、不開…
※効果には個人差があります。 useMemoのオーバーヘッドについて ReactのuseMemoは、パフォーマンス最適化に使われるAPIです。コンポーネント内で計算やオブジェクトの生成を行う際に、以前の計算結果をキャッシュして使い回すことで再レンダリング時の計算を削減したり、新しいオブジェクトの生成を防ぐことができます。 useMemoに関しては、あくまで最適化のためのものであるから「無駄に使うべきではない」という言説がよく見られます。その理由は、useMemoのコストもゼロではなく、余計な使用はそれだけパフォーマンスの低下に繋がってしまうからです。 しかし、筆者はuseMemoのコストは微々たるものであり、本当に一目見て明らかに無駄でない限りは積極的に使うべきだと思っています。 そこで、筆者はuseMemoのオーバーヘッドがどれくらいかを調べるためのベンチマークを作成しました。この記事で
2004年に国立大学が法人化され、4月で20年。法人化とその後の大学政策の影響について、朝日新聞が全86国立大の学長に尋ねたところ、回答者の7割弱が、教育・研究機関として「悪い方向に進んだ」と考えて…
今年5月の夜、JR小田原駅（神奈川県）に着いた電車内の座席で、男性が亡くなっているのがみつかった。 朝、JR渋谷駅（東京都）から男性を乗せたとみられる電車は終日折り返し運転を続け、駅員が男性を発見し…
CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS
日本維新の会の馬場伸幸代表は16日、足立康史衆院議員に対し、党紀委員会を招集すると明らかにした。足立氏は、4月の衆院東京15区補選で行われた党の機関紙配布が、公職選挙法に抵触するおそれがあるとSNS…
自民党派閥の裏金事件を受けた政治資金規正法改正をめぐり、党政治刷新本部座長を務める鈴木馨祐氏は12日のNHK討論番組で、「自民党の力をそぎたいという政局的な話がごっちゃになっている」と発言した。政治…
東京都千代田区立小中学校へ区外から通う越境入学をめぐり、基準を満たさないのに虚偽の書類などで審査を通す不正が行われていたことが複数の関係者への取材でわかった。保護者が元区議会議長に相談し、元議長は区…
個室のような空間、アロマオイルのマッサージ……。台湾東部沖を震源とする地震で東部・花蓮市に設置された避難所には、被災住民が少しでも快適に過ごせるような配慮が尽くされている。発災直後からなぜ行き届いた…
Context を export するなみなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説していきます。 Context は、コンポーネントをまたいだ値の共有を実現するためのオブジェクトです。 createContext で生成することができます。 import { createContext } from "react"; const context = createContext<string>("initial value");
Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. For a tour of some of the coolest new features, check out the "What's new in Tailwind CSS v3.0" video on our YouTube channel. Tailwind CSS v3.0 has got to be our most exciting release ever, including improvements like: Just-in-Time, all the time — lightn
1：導入 例の「CSS完全に理解した」Tシャツ。 色々な方が話している通り、あれを意図的にやろうとすると実はなかなか難しい。 むしろ、「CSS完全に理解した」を再現するコードを書くたびに我々はCSSの完全理解に近づけるんじゃ無いだろうか？ CSS完全に理解したでCSS完全に理解すればもっとCSS完全に理解したできるんじゃ無いか とにかく何かよくわからない追求心にとらわれた我々（約1名）は「CSS完全に理解した」を理解するために色々な方法でこれを再現することにしました。 以下に「CSS完全に理解した」するための数々の方法について書いていこうと思います。 2：前提 前提条件が限定されていないと無限の「CSS完全に理解した」状態を作り出せることになってしまうので、 今回は以下の画像のように、まず、「CSS完全に理解したわけではない」状態を再現し、ここに手を加えることで「CSS完全に理解した」状態
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 全体の CSS を取得して Shadow DOM に適用する