こんにちは、すなふ(@sunafu35)です。
Webデザインをしている人もそうですが、ブログのデザインを変更したいと思ったり、色々カスタマイズするのが好きな人に役立ちそうなChrome拡張機能があったのでご紹介です!
Penduleは、Chromeの標準デペロッパー機能にプラスして使うと、かなり便利に使い分けが出来そうな機能が満載でした。
インストール
Chromeウェブストアからインストールを行うと、ツールバーにメニュー
アイコンをクリックすると様々な機能が使用可能。![]() |
クリックメニュー |
順番にどんな機能が使えるか見てみますね。
STYLE SHEETS
まず、一番上のメニュー「STYLE SHEETS」からは、CSSの確認メニューが充実。![]() |
View CSS |
折りたたみながらCSS毎に確認したりも出来ますし使いやすいです。
これがあれば、気兼ねなく【CSS Compressor】や【SASSIENCE ~ 世界が嫉妬するCSSへ】などを使って、CSSを軽量化出来ますね。
![]() |
Disable All Styles |
![]() |
Show used color |
これは、デザインを考えたり色の組み合わせを考えたりで重宝します。
FORMS
FORMSタブでは、「***」のように非表示で現されるパスワードを表示したり。hidden設定のオブジェクトを表示したり。
IMAGES
IMAGESタブでは、画像関係の確認メニューがまとまっています。
![]() |
View images infomation |
URLに、大きさ、ファイルサイズ、種類などがぜ~んぶ一覧。背景設定だから右クリックで調べられない画像とか関係ありません。
![]() |
Show paths |
他には、画像を非表示にする、背景だけ非表示などの機能があります。
MISCELLANEOUS
MISCELLANEOUSタブでは、JavaScriptを参照したり、ルーラーを表示させたり、カラーピッカーを表示したり。個別の拡張機能はありますが、1つにまとまっているのがいいですね。
ページのcookiesを削除する機能なんかもあります。
RESIZE BROWSER
RESIZE BROWSERは名前の通り、ブラウザサイズをワンクリックで変えられるもの。
使ってるブラウザって、マルチタブブラウザが殆どだと思いますが、ブラウザウィンドウのサイズが変わるので少し使いづらいかも?
でも、指定のサイズに一発で変わるのは、確認にはいいですね。
ACCESSIBILITY
ACCESSIBILITYでは、HTMLや、CSSの表記確認を行えます。表記の間違いがないかのチェックですね。bloggerでは、テンプレート標準時点でエラーは出るので、絞り込みが難しいですが・・・。
![]() |
オプション画面 |
オプションで、表記確認用のサイトを設定することも出来ます。
![]() |
オプション画面「キーボードショートカット」 |
その他、オプションでは、キーボードショートカットの設定も。
ルーラーやカラーピッカーは、はじめからショートカットに設定されているので、覚えておくと随分違います。
Webデザインを仕事とする人にはもちろんの事。
趣味でブログを書いている人などにも必須だと思いました。特に、デザインを変えたい人には。
お気に入りのサイトのCSSや使っているカラーを確認したり、サイトパーツの大きさを見てみたりしながら整理していくと、自分の好きなデザインは、こういう設定なんだと理解がしやすいですね。
そういったときにも力を発揮する拡張機能です。
まだインストールしてなかった人は要チェックです。
機能が集約出来るのっていいものですよ。
ではまた!
0 件のコメント:
コメントを投稿