CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての
Cacooの新UIを裏で支えるHeadless Chromeによる自動保存機能の実装 | 株式会社ヌーラボ(Nulab inc.)
こんにちは、Cacooチームの平山です。僕は対外的には技術のことをお話しする機会は最近はあまり無いのですが、今回はCacooのUIリニューアルに伴い追加された、内部的には「自動保存」と呼ばれる機能の技術的な仕組みについてお話しします。 皆さん（きっと）ご存知の通り、Cacooは2018年6月28日に全面的なユーザーインターフェースの刷新を行いました。これに伴い、以前は図の閲覧用と編集用に分かれていたページを、編集機能を持つ一つのエディタで担うという変更を実施しました。Google Docsをはじめとする、オンラインのドキュメントツールと同等のユーザー体験に倣うような変更とも言えます。 新しいユーザーインターフェースのエディター さて、以前からCacooを利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編
【裏技】みんな知らないログイン必須ページの爆速スクレイピング【モテるシェル芸】 - ps aux | grep serinuntius
おはようございます。 裏技ってつけると急にワザップ感が出て、懐かしいですよね〜。 こないだ飲み会で同期とそんな話をしておりました。 本題 ログインが必要なWebサイトで画像を引っこ抜いて欲しいという依頼があり、スクリプトを書くかな〜と迷ったんですが、よく考えたらシェル芸だけで出来るな〜と思ったので共有したいと思います。 今回はデザイナーにGitHubのIssueに貼ってある画像200枚以上をzipで欲しいって言われたので、それを題材にします。 環境 Chrome curl grep egrep やり方 1. Chromeでおもむろにデベロッパーツールを開く Macなら Shift + Cmd + c等で開けます。 2. networkを選択する そのページのリクエストを見つける たぶん、一番上のはず。 3. 右クリックして、Copy as cURLを選択 今回の肝はこれで、ブラウザで送った
VectorDrawableをプレビューするChrome Extensionを作った - おでーぶでおでーぶ
弊社では弱いネットワークや容量の小さい端末が普及しているような国にアプリを配布していることもあり、リソースを出来る限りVectorDrawableに置き換えています。 元SVGファイルを自動でVectorDrawableに変換し、取り込んで利用しているのですが、今までxmlを見るだけでは以下の問題点がありました。 稀に表示が崩れるものがあり、QA時点で発覚するとデザイナーへの負荷が大きくなる。 色指定が異なることに気付けない。 Export名のミスによる上書きに気付けない。 つまり全ては VectorDrawableを読める人が少ない という問題点に帰結します。 いちいち手元に落として一個ずつAndroid Studioでプレビューするのも・・・ということもあり、題の通り Github上でVectorDrawableを見るChrome Extensionを作成しました。 chrome.go
WebP画像を作成できるアプリ「WebP画像を作る君」を公開 - ICS MEDIA
みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか？ 聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。無料で配布しています ▲「WebP画像を作る君」の動作ビデオ WebP(ウェッピー)とは WebP画像形式は米Googleが開発している静止画フォーマットで、採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。具体的には従来のPNG/GIF/JPEG画像形式に比べて次
サクッと画像加工したいなら『Polarr』がいいよって話！ - wepli.2
ブロガーとしてデビューして早いもので、約１年半が経ちました。その間、色々なツールを試してきましたが、本日は、その中でもとっても使い勝手が良く、無料でおしゃれな画像加工ができる『Polarr』をご紹介したいと思います。サイト上でサクッと画像加工が簡単にできちゃうので、とってもおすすめですよ。 『Polarr』とは！？ 『Polarr』はこんな感じのツールです！ フィルター① 焦点の... フィルター② 暖かさ フィルター③ フォーム 高度な画像加工 さいごに 『Polarr』のダウンロード等 『Polarr』とは！？ 画像加工ツールの『Polarr』には、現在のところ、ブラウザ版とChrome版とデスクトップ版とスマホ版がリリースされています。ほぼ全ての環境で使うことができますが、僕の場合はブラウザ版で、コトが足りてしまいますので主にブラウザ版を使用しています。無料版でも多数のフィルターなど
Flashの時代終了！Adobe Flashの歴史を描いた1枚のイラストが話題！｜男子ハック
ネットで話題Flashの時代終了！Adobe Flashの歴史を描いた1枚のイラストが話題！2015年7月19日103 @JUNP_Nです。一時代を築いた「Flash」もHTML5への移行や「ゼロデイ攻撃の脆弱性」などもあり「Flashは終わった」と騒がれていますが、Flashの歴史を描いた1枚のイラストが話題になっていました。 FlashもIEと同じ末路に...?!Flashの歴史がわかりやすく説明されたイラスト一つの時代を築き上げた「Flash」が終わろうとしている。最近ではHTML5への移行は当たり前ですし「ゼロデイ攻撃の脆弱性」などもありFirefoxやChromeではデフォルトで停止することが発表されています。 参考：Google Chrome Blog: Better battery life for your laptop / Blocked Add-ons :: Add-o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
