webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

ほぅ参考になります。

2010.03.30 | URL | 夜の3Dカメラ #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 

起動してF12を押すだけで使えるIEの開発者ツール

ie_developer_tools_e89_000.jpg

起動してF12を押すだけで使えるIEの開発者ツールの紹介です。今回はgoogle.co.jpでこの開発者ツールを使い機能などを紹介したいと思います。
まず、IEを起動させます。バージョンは8です。
今回はgoogle.co.jpで開発者ツールを使ってみようと思います。


■IE8
IE8を通常のように起動し、開発者ツールを利用するWEBページを表示させてください。
ie_developer_tools_e89_001.jpg


■開発者ツール
起動した状態で「F12」を押します。すると以下のようなウインドウが起動します。
ie_developer_tools_e89_002.jpg


■HTML
開発者ツールが起動すると「HTML」のタブが表示されているはずです。
ここでは、HTMLのノードがツリー化されて表示されます。要素がどのノードに属しているかなどを把握するために便利です。
ie_developer_tools_e89_003.jpg


■CSS
HTMLの横にあるCSSのタブを表示させた画面です。こちらも要素とその属性がツリー化されています。これの注目すべき点はチェックボックスです。チェックを外すとリアルタイムでページが更新されます。
ie_developer_tools_e89_004.jpg


■HTMLタブ スタイル表示
HTMLのノード別にスタイルを確認したい場合などにはここを利用します。
「スタイル」「トレーススタイル」「レイアウト」「属性」を確認することができます。
ie_developer_tools_e89_005.jpg


■ノード選択
HTMLタブのスタイル表示には、ノードを選択する必要があります。ここでは、「body」を参照します。
ie_developer_tools_e89_006.jpg


■レイアウト
幅や高さなどに加え「margin」や「padding」などのレイアウトに関係するものを視覚的に表示してくれます。
わかりやすくていいですね
ie_developer_tools_e89_007.jpg


■属性
このエリアにかかっている属性を表示することができます。
ie_developer_tools_e89_008.jpg


■ブラウザモード
上部のツールバーに表示されているブラウザモードでは、IE7、IE8、IE8互換を切り替えることができます。
IE6があればよかったのに!って思いましたが、まぁそこはIEなんでしょうねw
切り替えると同時にWEBページが更新されて選んだモードで表示されます。
ie_developer_tools_e89_009.jpg


■検証
W3Cにファイルをアップロードして、HTML文書として妥当かどうかを調べてくれます。google.co.jpでは通りませんでした。このサイトも通りません。OPERAだと右クリックからソースの検証でできます。
「HTML」「CSS」「フェード」「リンク」などを調べることができます。また、複数の検証ではこれらを一挙に調べることも可能です。
ie_developer_tools_e89_010.jpg

■複数検証
ie_developer_tools_e89_012.jpg


■ツール
「サイズ変更」「ルーラーの表示」「カラーピッカー」が利用できます。
サイズ変更はなかなか使えそうです。
ie_developer_tools_e89_011.jpg


他にも色々な機能があるみたいです
是非使ってみてください!



d

Comment

ほぅ参考になります。

2010.03.30 | URL | 夜の3Dカメラ #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

 
Other Links
 
 
 
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。