Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
