[ご案内] 2012年04月に書かれた記事を一覧表示しています。(トップへ戻る)

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55523889.html

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法

firebugってweb制作者、開発者にとってすごく便利なツールというのは
言わずもがなだと思うのですが、いかんせん“firebug”っていうくらいですから、
基本的にはfirefoxしか使えません。
(最近はChromeでLite版なんかも出ていますが。)

firebugの便利な機能のひとつには、
任意のタグを選択して、それにどういったCSSがかかっているのかを
調べることができることだと思います。
調べるだけではなく、リアルタイムに編集を加えて
プレビューに反映しながら、調整もできます。
このあたりについては、だいぶ前に記事にしていました。

【図解】今更ながらfirebugによるCSS調整のし易さについて。 | kimihiko Tech
http://tech.kimihiko.jp/article/18755744.html

ですが、一般的に利用者の非常に多いIE(Internet Explorer)で
検証できればいいな、という場合は結構多いと思います。

でも、IEではfirebugは使えません。

ただ、最近のIEには、開発者ツール、と呼ばれるfirebugに似た
検証ツールが組み込まれています。
ご存知の方は多いと思うのですが、
あまり使われていない方も多いような気がします。

そこで、CSS編集の点において、
IEの開発者ツールをfirebugみたく使う方法について
少しだけ説明をしたいと思います。

まず、タグを選択して適用されているCSSを調査します。
さらに、CSSのリアルタイム編集&プレビューをします。

そうなんです。実はfirebugと同じようなことができちゃいます!(笑)

ff1
F12を押すと、下にfirebugのようなウインドウが出現します。
これがIEの開発者ツールです。なんとなくfirebugと似てますね。

ff3e
1.矢印を選択し、
2.プレビュー上で、任意の要素を選択し、
3.トレーススタイルを選択します。
すると、選択中のタグに適用されているCSSを知ることが可能です。

ff4
CSSを少し、いじってみます。
クリックすると、編集できますので、変更してみましょう。

ff5
確定すると、プレビューにも反映されました!

ちなみに、これは一時的なプレビューですので、
リロードすれば表示は元に戻りますし、
実際のコードへの影響は何もありません。

トレーススタイルの編集ですが、今回試した、既存プロパティの編集は可能でしたが、
firebugのように、新たにプロパティを追加したりすることは
できないように思いました。

ff7
ただ、htmlタブのほうで、属性の追加、というのができるので、

ff8e
そちらでたとえば、styleプロパティを追加して
CSSを直接書き込めば、その場で色々調整できるように思いました。

私も開発者ツールについては、それほど使い込んでませんが
ぜひ、活用してみてくださいませ。

以上です。

テスト環境:Windows7 Home Premium, IE8


木曜日の組織あしあと帳      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55520902.html

木曜日の組織あしあと帳

ねむねむ。

時刻 所属組織 初回
18:37 国立がんセンター (8) 49ヶ月前
17:59 サイバーエージェント (93) 51ヶ月前
17:49 富士通 (3087) 57ヶ月前
17:41 伊藤忠テクノソリューションズ (681) 56ヶ月前
17:24 エス・アンド・アイ (8) 50ヶ月前
16:49 愛知情報システム (6) 46ヶ月前
16:35 ティー・ワイ・オー (7) 44ヶ月前
16:31 オリンパス (28) 35ヶ月前
15:40 金沢市教育委員会が運用する教育ネットワーク 本日
15:29 トランス・コスモス (564) 35ヶ月前
15:07 楽天 (701) 57ヶ月前
13:51 富士テレコム (9) 50ヶ月前
13:16 ソフトバンクテレコム (352) 52ヶ月前
12:16 インディゴ (16) 53ヶ月前
12:15 アイ・エム・ジェイ (113) 53ヶ月前
11:47 クエスト (21) 50ヶ月前
11:47 エヌ・ティ・ティ ファシリティーズ (29) 51ヶ月前
11:27 シャープ (561) 56ヶ月前
11:07 日本電気 (2853) 56ヶ月前
10:43 大正製薬 (21) 38ヶ月前
09:31 インタークエスト (3) 51ヶ月前
09:29 日立製作所 (1371) 45ヶ月前
09:08 森ビル (48) 54ヶ月前

木曜日のおつかれさまですφ(´д`o)      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55519554.html

木曜日のおつかれさまですφ(´д`o)

本日は4月26日木曜日。只今の時刻は18時25分。
今、帰宅中です。

木曜もだるい(*´д`*)

も、もうちょと。。
今日も早く寝ることを目標に。

本日の帰りのひとこと『考えが煮詰まった問題でも、日を改めると、すんなり解決することがよくありますよ。お試しあれ。』

タイ(バンコク)旅行まであと4日です(((o(*゜▽゜*)o)))
通勤定期券期限まであと9日ですヽ(´o`;
小中学校同窓会まであと66日です(((o(*゜▽゜*)o)))
33歳まであと201日です。

本日もおつかれさまでございますたφ(´д`o)

木曜日のおはようございますφ(´д`o)      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55509489.html

木曜日のおはようございますφ(´д`o)

本日は4月26日木曜日。只今の時刻は7時12分。

トーキョーの現在の実際の天気は、くもり。

梅雨ですか??(笑)

本日の朝のひとこと『【この格言気に入った!!】孤独に徹すること(相場師、是川銀蔵)』

散髪してから、9日が経ちました。
愛犬のトリミングにいってから、61日が経ちました。
iPhoneにしてから、158日が経ちました(´・ω・`)
関西から関東に引っ越してから、1923日くらいが経ちました。
この世に生を受けて11853回目のおはようございますでした。。。φ(´д`o)

。。。というわけで

さぁ今日という日を楽しみまひょ。φ(´д`o)

2012年04月25日のつぶやき一覧      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55507434.html

05:28 むくり 地震できた (5:27) - 5.8時間 http://t.co/3nsyQrRm #OhayoPanda
07:20 水曜日のおはようございますφ(´д`o) | kimihiko Tech http://t.co/tVk82bdi
18:36 水曜日のおつかれさまですφ(´д`o) | kimihiko Tech http://t.co/oLf48dAj
21:55 私なりの、iPhoneで撮影したグルメ写真を美味しそうに見せる画像加工の丸秘テクニック | kimihiko Tech http://t.co/keaMal1o 水曜日のブログ。
22:51 若干作り手側に居たことがあるからマジレスすると、、お子様も多いとは思うが、最近規制も厳しいしどうなんだろう。意外に30-40代が多いです。 RT @komeimokabotya: ソーシャルゲームって、やってる人いるのかな?プレイ年齢層はお子様が多いのかな?
23:50 安いシャンパンをちびりちびり飲むのが平日のささやかな楽しみのひとつなりよ
23:59 おやすみなさい (23:59) http://t.co/EFuhFltf #OhayoPanda
Powered by twtr2src
 
2012年04月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
各記事へのコメント
月別記事
お問い合わせ
Powered by さくらのブログ