Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
ChromeブラウザだけでWebサイトのCSSを変更＆シェア可能な拡張機能「StyleURL」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのCSSを自分好みに変更してビフォー・アフターを簡単にシェアできるChrome拡張機能をご紹介します！ 開発者ツール上で普通にCSSを変更するだけで永続的に適用できるので、ブラウザさえあれば誰でも実行できるのが大きな特徴です。 なお、CSSの基本的な知識はpaizaラーニングの「HTML/CSS入門編」（一部無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 StyleURL 】 ■「StyleURL」の使い方 それでは、まず最初に「StyleURL」を使うための準備をしましょう！ サイトにアクセスして、画面中央にあるボタンをクリックします。 「Chromeウェブストア」が表示されるので、画面右上にある「Chromeに追加」ボタンをクリック！ すると、自動的にインストールされて準備が整います。 「St
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
