[初回公開] 2021年04月15日
Firefox などブラウザはウェブサイトを構成する HTML タグを人の目で見やすいようにレイアウトや体裁を整えて描画してくれるソフトウェアだが、HTML の内容を確認する場合、Firefox の初期設定では独自のエディタで表示されるのを使い慣れたテキストエディタに変更する方法を紹介する。
このページの目次
1.ウェブサイトの HTML タグとは
ウェブサイトの HTML(Hypertext Markup Language)タグとは、ウェブページを作成するために必要な基本的なプログラム言語である。
HTML はテキストファイルで構成されており、ウェブブラウザがコンテンツを表示するための指示となっている。
記述方法は尖括弧(< と >)で囲むことで要素の開始と終了を示す。
例えば、<p> タグで段落を開始し、</p> タグは段落を終了を意味している。
<p>文章</p>
HTML タグには段落の他にテキストの装飾や、画像の埋め込み、リンクなどコンテンツの配置に利用される要素が用意されている他、適切に用いることで Google など検索エンジンが文脈を理解するのにも利用される。
2.ウェブサイトの HTML タグを見るメリット
ウェブサイトの HTML タグを理解し、適切に使用することには次の 4 つのメリットがある。
2-1.ウェブページの構造を理解する
HTML タグを見ることで、ウェブページのどの部分が見出しであり、どの部分が本文であるかを把握するなど構造を理解することができる。
そのため、ウェブ制作者にとってコンテンツの配置やデザインに関する理解を深めるのに役立つ。
2-2.ページのアクセシビリティを向上させる
HTML タグを見ることでスクリーンリーダーやテキストブラウザを利用するユーザが適切にコンテンツの内容が伝わり、ナビゲーションできるか確認することができる。
より多くのユーザがウェブページの利用が可能になり、アクセシビリティを向上させるのに役立つ。
2-3.検索エンジン最適化(SEO)に対応する
HTML タグを適切に利用することは、検索エンジン最適化(SEO)に重要な要素となり、検索結果の表示順位に大きく影響する。
検索エンジンは HTML タグを解析するためキーワードを強調したり、ウェブページの内容を明確に伝えることができる。
2-4.ウェブ開発のスキルを向上させる
HTML タグを理解することは、ウェブサイトやウェブアプリケーションの開発者のスキルを向上させる。
HTML はウェブ開発の出発点であり、他のウェブテクノロジー(CSS、JavaScript など)と統合してウェブアプリケーションを構築するための基本的な要素である。
また、デザイナーもウェブサイトを実装するための技術的な仕組みを理解することでコーディング担当者との意思疎通がしやすくなる。
3.ブラウザで HTML を見る方法
ブラウザで HTML を見る方法としては、ウェブサイトを表示した状態で画像やリンク以外の何もない箇所を右クリックして表示されるメニューまたは、ブラウザに搭載されている開発者モードを利用する。
ブラウザ上でマウスを右クリックすると Firefox であれば下図のように「ページのソースを表示」を選択する。
IE や Edge でも同様に「ソースを表示」を選択することで HTML を確認することが可能である。
Firefox で「ページのソースを表示」を選択して HTML が表示された様子が下図となる。
このソースの表示は Firefox 独自の機能となり、HTML を表示するだけのため、そのままテキストファイルとして保存したり高度な検索や置換処理には対応していない。
4.Firefox で利用するテキストエディタを変更する方法
Firefox で利用するテキストエディタを変更する方法としては、Firefox の通常の設定画面では行うことができず、URL 欄に「about:config」を入力して表示される設定画面より設定を行う。
まず最初に Firefox の URL 欄に「about:config」を入力してエンターキーを押下する。
「about:config」から行う Firefox の設定変更は操作を誤ると正常に動作しなくなる恐れがあるため、上図のように「注意して進んでください」と警告画面が表示される。
ここでボタン「危険性を承知の上で使用する」をクリックすると詳細な設定を行う画面に遷移する。
次に詳細な設定画面が表示されると多くの設定項目が表示されるため、この中から設定したい項目を検索欄を使って絞り込む。
検索欄に「view_source.editor.external」と入力すると HTML を表示するエディタの利用有無の切り替えの状態が表示される
初期状態は false(未使用)となっているので、false の箇所をダブルクリックして true に変更させる。
または項目の右端にある左右の矢印マークをクリックしても同じく false と true が変わるようになっている。
最後に、HTML の表示に利用するエディタを指定するために同じく検索欄に「view_source.editor.path」と入力すると、先ほどの true/false ではなく文字を入力するテキストボックスが表示される。
ここに利用したいテキストエディタの実行ファイルのパスを入力する。
例えば Windows に初期インストールされているメモ帳を指定する場合は下記のように実行ファイル(.exe)があるパスを入力する。
C:\Windows\system32\notepad.exe
テキストエディタの指定が終われば設定反映のため一度 Firefox を閉じて再起動し、HTML を表示させるために右クリックして「ページのソースを表示」を選択すると設定したテキストエディタが起動して HTML を閲覧・操作することができる。
関連記事
Jword などアンインストールしてもブラウザで右クリックして表示される項目を削除する方法
Windows は右クリックするとソフトウェアごとにショートカットや操作項目のメニューが表示されるが、Internet Explorer(IE)などウェブブラウザで右クリックすると E START(Jword)などいつの間にか使わない不要な項…
【Windows10 22H2】Windows の大型アップデートできない場合の対応方法
インターネット上で公開されている動画は「ダウンロード型」と「ストリーミング型」の 2 種類があり、「ダウンロード型」は手元のパソコンに保存されるのに対して「ストリーミング型」は保存されずにインターネット…
ウィルス対策ソフト Norton(ノートン)でソフトウェアを一括アップデートする方法
パソコンやスマホは OS 標準に搭載されている機能以外に、別途ソフトウェアをインストールして利用するのが一般的で、各ソフトウェアは不具合や機能改善で常にアップデートされているが、セキュリティに問題がある脆…