HTMLやCSSをブラウザ上で確認する方法【F12キー】

WEB開発をやっていると試行錯誤の連続ということはよくありますよね。

そんな時に次のような事に覚えはありませんか？

これらはブラウザに搭載されているツールで簡単に確認したり試したりできます。

「F12」「デベロッパーツール」「開発者ツール」と呼ばれるツールです。（全部同じものです）

ちなみにこのブログでCSSを修正する際にも、このツールの力を借りています。ブログ仲間の方々も必見です！

なお、今回はMicrosoft Edgeを例に使っています。ChromeやFireFoxは同じ動作や名称です。

Internet Explorerや他のブラウザは名称や動作が異なる場合があります。

開発者ツールの起動方法

キーボードのF12を押します。（Macはoption+ command+ i）

ファンクションキーの設定によってはFnキーを一緒に押す必要があります。

キーボードの図に、同じキーを色付けている場合がありますが、1つだけ押せば大丈夫です。押しやすい場所を押してください。

表示場所を変更したい場合

表示する場所を変更したい場合は、開発者ツール右上にある「…」を押して、好きなドッキングの位置を選択します。

試しに当ブログトップページにある「新着記事」という要素を編集します。

HTML・JavaScriptを確認・編集手順

STEP1
要素選択ボタンを押す
1．要素選択ボタンを押す
STEP2
編集したい要素をクリック
2．編集したい要素をクリック
STEP3
開発者ツールが該当のHTMLに移動される
3．開発者ツールが該当のHTMLに移動される
STEP4
該当のHTMLを右クリックしてEdit as HTMLを選択
4．該当のHTMLを右クリックしてEdit as HTMLを選択
STEP5
HTMLを編集
今回は次のHTMLを追記します。クリックしたら「CLICK」とメッセージが表示されるボタンです。
```
<button onclick="alert('CLICK')">ボタン</button>
```
<button>はボタンを設置します。<button>と</button>の間に文字を入れることでボタンに表示される文字を指定できます。
onclickは対象がクリックされた時の動作を指定します。
alertはブラウザのメッセージ表示機能に指定した文字を表示します。
5．HTMLを編集
STEP6
Ctrl+Enterで編集を確定
6．Ctrl+Enterで編集を確定、7．画面に反映される
STEP7
画面に反映される
作ったボタンを押すとちゃんと動作していることが確認できます。
ボタンを押すとalertが表示される
満足ができた場合は実際のファイルを編集して反映させます。

試しにフッターの文字色を変えてみます。

HTML・JavaScriptを確認・編集手順