CSS 編集における Safari の「要素の詳細を表示」機能と Firefox の Firebug の使い分けについて

私自身が現在行っている CSS の編集方法についての覚書です。

私自身は特別な CSS 編集ツールを使っているわけではありません。Web ブラウザやそのアドオンの機能だけで CSS の編集作業を行っています。

以前は、Safari だけで CSS の編集作業を行っていましたが、現在では FirefoxFirebug というアドオンと併用して使っています。

Firebug は F12 キーで立ち上がったり、閉じたりします。

使い分けは以下のとおりです。

hover 時の CSS の確認等は Firefox の Firebug で行う

Safari でもやれないことはないのですが、やりにくい面があるので、私自身は hover 時の CSS の確認は Firefox の Firebug で行っています。

background-image 等の確認は Safari で行う

一方、background-image の反映状況の確認は Firebug ではできないみたいなので、その作業は Safari の方で行っています。

その他の CSS 編集作業はどちらで行っても構わないと考えますが、私自身は最近は Firefox を主体的に使っています

その他の CSS 編集作業はどちらでやっても構わないと思うのですが、普段、Firefox を使うようになったので、その流れでそのまま Firebug を使っています。

こうやってCSS の編集作業をちょこちょこ行い、CSS をエディタ等に貼り付けていき、ある程度まとまったら CSS スタイルシートエディターの方に、「⌘(command)+ F」 で検索して(続けて検索するときには「⌘ + G」)、

日本時間2013年10月11日16時18分現在、検索ができなくなっています(org の JetPack の方では検索できているので私の PC 側が原因である可能性は低いような気がするがよくわからない)。私自身は Coda 等にコピー&ペーストして作業することで対処する予定。

CSS ‹ comemo — WordPress-1

貼り付ける場所を探し出すなりして、

CSS ‹ comemo — WordPress-2

CSS を貼り付けて、また、Firebug で CSS 編集をする、という繰り返しです。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。