どうもジャングルオーシャンのミケです。
頭が逆さFirefoxとよく言われます。
ウェブサイトの構造が気になることってない？
世の中にはいろんなウェブサイトがある
ためになるサイトだったり面白いサイトだったり
そんなウェブサイトのソースがどうなってるんだろうって
気になることあるよね
そんな時に便利なのが
デベロッパーツール
ブラウザに標準搭載されているウェブサイト丸裸ツール！！
だれでもすぐに無料使えるんだ！！
すごいよね！！
というわけで
デベロッパーツールの出し方をご紹介
出し方は3通り
・ショートカットキー
・メニューバーから選択
・右クリックで出したメニューから選択
ショートカットは表にまとめたから見てみてね
それぞれのツールの出し方の詳細は表の下にMacとWindowsでわけてまとめてあるよ
ウェブサイトを分析するときにすごく便利なツールだから
ぜひおぼえよう！
| Chrome | Firefox | Safari | IE | |
|---|---|---|---|---|
| mac | command＋option＋I | command＋option＋I | command＋option＋I | - |
| win | Ctrl＋Shift＋I | Ctrl＋Shift＋I | Ctrl＋Alt＋I | F12 |
Macの各ブラウザでの出し方【Chrome・Firefox・Safari】
●Chrome
ショートカット
command＋option＋I
メニューバー
「表示」＞「開発/管理」＞「デベロッパーツール」
右クリック
「検証」
●Firefox
ショートカット
command＋option＋I
メニューバー
「ツール」＞「Web開発」＞「開発ツールを表示」
右クリック
「要素を調査」
●Safari
デフォルトではないので開発メニューをメニューバーに追加します。
「環境設定」＞歯車アイコンの「詳細タブ」＞タブの中の一番下にある「メニューバーに"開発"メニューを表示」にチェックを入れる
ショートカット
command＋option＋I
メニューバーに「開発」を追加しないとできないので注意！
メニューバー
「開発」＞「Webインスペクタを表示」
右クリック
「要素の詳細を表示」
メニューバーに「開発」を追加しないとできないので注意！
Windowsの各ブラウザでの出し方【Chrome・Firefox・Safari・IE】
●Chrome
ショートカット
Ctrl＋Shift＋I
メニューバー
ブラウザ右上の「三点リーダーが縦になったようなアイコン」＞「その他のツール」＞「デベロッパーツール」
右クリック
「検証」
●Firefox
ショートカット
Ctrl＋Shift＋I
メニューバー
ブラウザ右上の「ハンバーガーメニュー」＞レンチのアイコンの「開発ツール」＞「開発ツールを表示」
右クリック
「要素を調査」
●Safari
Macと同じく、デフォルトではないので開発メニューをメニューバーに追加します。
ブラウザ右上の「歯車アイコン」＞「設定」＞歯車アイコンの「詳細タブ」＞タブの中の一番下にある「メニューバーに"開発"メニューを表示」にチェックを入れる
ショートカット
Ctrl＋Alt＋I
メニューバーに「開発」を追加しないとできないので注意！
メニューバー
「開発」＞「Webインスペクタを表示」
右クリック
「要素の詳細を表示」
メニューバーに「開発」を追加しないとできないので注意！
●IE
ショートカット
F12
メニューバー
右上の「歯車アイコン」＞「F12 開発者ツール」
右クリック
「要素の検査」
各ブラウザのデベロッパーツールの出し方は以上になるよ
うまく出せたかな？
いろんな環境でウェブサイトを作ってると
いつもはクロームしか使わないけど他のブラウザを使わないといけなくなっちゃった！
なんていうシチュエーションに遭遇する事もあると思うから
覚えておいて損はないはずだよ！
ちゃんと出せたのならもうどんな環境でも大丈夫！
今日から君もDeveloperだ！！
それじゃまた今度ね！
【プログラミングの他の記事を読む】
