Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
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はすでに使用できます)で、すべての
「自分の書いている英文が正しいかどうかわからない。」 英文メールやエッセイ(論文)を書いていると、よくぶつかる悩みである。 プライベートのSNS/メール上の英文ならまだしも、仕事や試験、または一般に公開される英文となると、文法的に正しい英語でないとまずい。 ネイティブに添削してもらうのが最良の方法だが、現実的に難しい。しかし、自分の書いた英文を疑い始めるとキリがなく、無駄に時間を浪費してしまがちである。その結果、結局あいまいなままで仕上げてしまう。 僕自身もこういうことを何度も経験してきているという背景もあるので、今回は、英語のライティングについて書いてみたい。前半では英文校正ツール「Grammarly(グラマリー)」の紹介・使い方、後半では効率的な英文メールのライティングのTIPS&勉強法について書いてみる。 ビジネス英語のライティングだけでなく、スピーキング&リスニング力UPに興味があ
課金してスタンプ購入したんだから、画像データくらい抽出して取っておきたいという気持ちになるのは、あまり非難されることではないと思います。今までは Android や iOS のファイルから探していましたが、先ほど Chrome アプリ版が出たということでファイル構成を確認してきました。Chrome アプリは HTML + CSS + JavaScript で作成するものなので、基本的にソースなどは見放題です。ただし、ソースは難読化されているようでした。 LINEソース読めるけどすごい難読化してある pic.twitter.com/ZctICC9Xnj — 超リアル (@9m) July 30, 2015 LINE スタンプの保存フォルダ LINE のスタンプはダウンロードして使うようです。そのおかげで Android や iOS アプリから抽出できていたわけですが、Chrome 版も同じよ
Macの動作が重い/遅い時に試すべき対処法すべて 動きがもたつく時に試したい基本的なメンテナンス方法から各種リセット方法まで紹介 かつてOS Xと呼ばれていた時代ではOSをアップデートしたことによってMacを投げ捨てたくなるほど動作が重くなってしまう問題が起きる場合もあったが、最近のmacOSでは比較的動作が安定している。 「OS X Yosemite」の頃は、Mission Controlが固まる。文字入力も固まる。ウィンドウをスムーズに切り替えることができない。複数のウィンドウやアプリケーションを開き、文字入力をする僕にとっては作業にならなくて非常に困っていた。 試行錯誤を重ねた結果、僕のMacBook Proは絶好調だ。相変わらずメインのブラウザはGoogle Chromeで、4Kディスプレイを複数台接続してモリモリ作業をしている。動作が重くなってしまったMacを安定させる方法、もと
ウェブサイトはレイアウトや文字の選択で雰囲気がガラっと変わるため、人目を引くウェブサイトが使っているフォント名・文字サイズ・文字の色などは気になるところです。文字の上にカーソルを置いたりクリックしたりするだけでフォントの種類や詳細が分かるGoogle Chrome拡張機能が「WhatFont」で、気になるウェブサイトのデザインの秘密が簡単に分かるようになっています。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu http://chengyinliu.com/whatfont.html Chrome ウェブストア - WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpml
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう! 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools(デベロッパーツール)について、「多分、周知されていないけど、使わないともったいない!」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう! みなさんはChrome Canaryを使っているんでしょうか?一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです!リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
【img via iOS 5.1 Update. by MJ/TR (´・ω・)】 iPhoneやiPad向けにウェブ制作をしている人は知らないと損! 最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。 そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基本的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari?」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneやiPadでページを見ながら直接ウェブデバッグができるのだ!! そもそも「Webインスペクタ」って何? そもそもWebインス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く