MacでHTMLを表示する方法
Webページを見ているときに、そのページのHTMLコードを確認したい場合があります。これは、Webデザインを学んでいる場合や、特定の要素がどのように実装されているかを知りたい場合に役立ちます。Macでは、いくつかの簡単な方法でHTMLコードを表示できます。
ブラウザの開発者ツールを使用する
すべての主要なブラウザには、開発者ツールが組み込まれており、その中にHTMLコードを表示する機能があります。
Safariの場合
-
開発者メニューを有効にする:
- Safari を開き、メニューバーから「Safari」>「環境設定」を選択します。
- 「詳細」タブをクリックします。
- 「メニューバーに"開発"メニューを表示」のチェックボックスをオンにします。
-
開発者ツールを開く:
- HTMLを表示したいWebページを開きます。
- キーボードの「Cmd + Option + I」キーを押します。
- または、メニューバーから「開発」>「Webインスペクタを表示」を選択します。
-
HTMLを表示:
- 開発者ツールが開いたら、「要素」タブを選択します。（デフォルトで選択されています）
- 左側のペインには、WebページのHTML構造が表示されます。
- 右側のペインには、選択した要素のスタイル、プロパティ、イベントが表示されます。
Google Chromeの場合
手順はSafariとほぼ同じです。
-
開発者ツールを開くには、キーボードの「Cmd + Option + I」キーを押すか、メニューバーから「表示」>「開発/管理」>「デベロッパツール」を選択します。
-
HTMLを表示するには、「Elements」タブを選択します。
Firefoxの場合
手順はSafariとほぼ同じです。
-
開発者ツールを開くには、キーボードの「Cmd + Option + I」キーを押すか、メニューバーから「ツール」>「Web 開発」>「インスペクター」を選択します。
-
HTMLを表示するには、「インスペクター」タブを選択します。
テキストエディタでHTMLファイルを開く
HTMLファイルがローカルに保存されている場合は、テキストエディタで開いて内容を表示できます。
-
FinderでHTMLファイルを見つけます。
-
ファイルをダブルクリックします。 デフォルトでは、テキストエディットなどのテキストエディタでファイルが開きます。
-
必要に応じて、他のテキストエディタを選択できます。 ファイルを右クリックし、「このアプリケーションで開く」>「アプリケーションを選択」の順に選択します。
以下は、HTMLを表示するために使用できる一般的なテキストエディタです。
| テキストエディタ | 説明 |
|---|---|
| テキストエディット | Macにプリインストールされているシンプルなテキストエディタです。 |
| Visual Studio Code | Microsoftが開発した強力で人気のある無料のコードエディタです。 |
| Sublime Text | 高速で機能豊富な有料のテキストエディタです。 |
| Atom | GitHubが開発したオープンソースの無料のテキストエディタです。 |
HTMLコードを表示する例
例えば、下記のようなHTMLコードがあるとします。
```html
見出し
段落
```
このコードをブラウザで表示すると、「ページタイトル」というタイトルでページが表示され、「見出し」という見出しと「段落」という段落が表示されます。開発者ツールを使用すると、このHTMLコードを直接確認したり、編集したりすることができます。
Q&A
Q1: 開発者ツールでHTMLを編集しても、変更が保存されないのはなぜですか？
A1: 開発者ツールで行った変更は一時的なもので、ページを再読み込みすると元に戻ります。変更を永続的にするには、HTMLファイルを直接編集する必要があります。
Q2: 特定の要素のHTMLコードだけを表示するにはどうすればよいですか？
A2: 開発者ツールで、要素を選択するためのツール（通常はマウスカーソルのようなアイコン）をクリックし、ページ上の目的の要素をクリックします。すると、その要素のHTMLコードがハイライト表示されます。
Q3: MacでHTMLを学ぶにはどうすればよいですか？
A3: オンラインには、Codecademy、freeCodeCamp、Khan Academyなど、HTMLを学ぶための無料のリソースが多数あります。また、「Head First HTML and CSS」などの書籍もおすすめです。