HTMLはどこで開きますか？

HTMLはどこで開く？

ウェブサイトを閲覧する際、画面に表示されている文字や画像、レイアウトなどが、どのようにして表現されているのか、疑問に思ったことはありませんか？実はその裏側では、「HTML」と呼ばれるマークアップ言語が活躍しています。今回は、ウェブサイトの骨組みとなるHTMLを実際に確認する方法について解説していきます。

デベロッパーツールで確認

HTMLを確認する最も簡単な方法は、ブラウザに搭載されている「デベロッパーツール」を使用することです。ここでは、Google Chromeを例に説明します。

手順

HTMLを確認したいウェブサイトを開きます。
ページ上の任意の場所で右クリックし、「検証」を選択します。または、キーボードの「F12」キーを押します。
画面右側にデベロッパーツールが表示されます。上部のタブの中から「Elements」を選択します。

これで、ウェブサイトのHTMLコードが表示されます。Elementsタブでは、HTMLの構造を確認したり、コードを直接編集して表示の変化を確認したりすることも可能です。

デベロッパーツールのその他の機能

デベロッパーツールはHTMLの確認以外にも、ウェブサイト制作に役立つ様々な機能を持っています。主な機能は以下の通りです。

機能	説明
Console	JavaScriptのコードを実行したり、エラーメッセージを確認したりできます。
Network	ウェブサイトの読み込み状況を確認できます。
Sources	ウェブサイトのHTML、CSS、JavaScriptファイルを確認・編集できます。
Application	Cookieやローカルストレージなどの情報を閲覧・編集できます。

HTMLファイルを開く

ウェブサイトのHTMLファイルがパソコンに保存されている場合は、以下の方法で開くことができます。

テキストエディタで開く

Windowsの「メモ帳」やMacの「テキストエディット」などのテキストエディタでHTMLファイルを開くことができます。ただし、これらのテキストエディタはHTMLの編集に特化していないため、コードが見づらかったり、編集ミスが起こりやすかったりします。

コードエディタで開く

「Visual Studio Code」や「Sublime Text」などのコードエディタは、HTMLの編集に特化した機能が豊富に備わっており、効率的に作業を進めることができます。本格的にウェブサイト制作を行う場合は、コードエディタの利用がおすすめです。

ブラウザで開く

HTMLファイルをダブルクリックするだけで、ブラウザで開くことができます。ただし、ウェブサイトによっては正しく表示されない場合があります。

HTMLの例

以下は、簡単なHTMLの例です。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの例</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>これはHTMLの例です。</p>
</body>
</html>

よくある質問

Q1: デベロッパーツールが開けません。

A1: キーボードのF12キー以外に、Ctrl + Shift + I (Windows) または Command + Option + I (Mac) を試してみてください。それでも開かない場合は、ブラウザのバージョンが古い可能性があります。ブラウザを最新バージョンにアップデートしてください。

Q2: HTMLを編集しても、ウェブサイトに反映されません。

A2: デベロッパーツールで編集した内容は、ブラウザを閉じると元に戻ります。ウェブサイトに恒久的な変更を加えるには、サーバー側でHTMLファイルを編集する必要があります。

Q3: HTMLを学ぶにはどうすればよいですか？

A3: インターネット上には、HTMLの基礎を学べる無料のサイトや動画が数多く公開されています。また、書籍やオンラインスクールなどを利用して、体系的に学習することもおすすめです。