HTMLやCSSのちょっと人には聞きづらい「基礎の話」を一から解説する本連載。今回のトピックは「HTMLの部分編集のポイント」。書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野祐東さんが解説します。みなさんの作業の困った！が解決されますように。
部分的にHTMLを編集するときは
HTMLドキュメントの編集時に気をつけたいのは、「もとの階層構造（ツリー構造）」を壊さないことです。ポイントとなるのは、どの開始タグとどの終了タグがペアなのかを正確に把握することです。今回は、HTMLの構造を把握しながら編集作業を進める方法を解説します。
- HTMLコード自体を編集する場合
- ブラウザの開発ツールとは？
- 開発ツールの基本的な使い方
■HTML/CSSコードを確認する
■開発ツールの表示場所を移動する
■スマートフォン表示にする
■開発ツールを閉じる - 開発ツールを使ってHTMLコードを調べる
■HTMLコードから要素を調べる
■表示結果からHTMLコードの場所を調べる - テキストエディタで編集？開発ツールで作業？
■テキストエディタで編集する
■開発ツールで編集する - さいごに
1. HTMLコード自体を編集する場合
たとえば、下の図のように、枠線で囲まれたお知らせの内容を書き換えたり、同じレイアウトのものを1つ追加したりするケースを考えてみましょう。このお知らせは、全体が枠線で囲まれていて、その中には画像が含まれていますし、テキストも含まれています。
HTMLのコードを見なくても、複数の要素で構成されていることが予想できます。
▲囲まれた部分を編集したり、もう1つ追加するときはどうする？
このように、複数の要素で構成されるHTMLの一部をコピーしたり、削除したりするには、「HTMLドキュメントのどの部分を編集するのか」を正確に把握しなければなりません。
とくに、囲まれた部分が始まる「開始タグ」と、その開始タグとペアになっている「終了タグ」を見つけることが大事です。
このように、HTMLドキュメントの一部分を探すには、ブラウザの「開発ツール」を使うと便利です。
2. ブラウザの開発ツールとは？
現在よく使われているパソコン向けの主要なブラウザ（Apple Safari、Google Chrome、Microsoft Edge、Mozilla Firefox）には、「開発ツール」が搭載されています。
この開発ツールは、表示されているWebページのHTML/CSSのソースコードや構成ファイル、JavaScriptプログラムで発生するエラーなど、Web開発に役立つ情報を収集して表示する機能です。
開発ツールを使えば、編集すべきHTMLの場所を的確に、素早く見つけ出すことができます。まずは基本的な操作方法を見ていきましょう。
なお、この記事ではWindows版Google Chromeの使用例を紹介します。記事中で使用するデータと同じものを使いたい方は、サンプルデータをダウンロードすることもできます
https://www.r-staffing.co.jp/rasisa/wp-content/uploads/2025/02/sample.zip
（クリックするとzipフォルダがダウンロードされます。）
3. 開発ツールの基本的な使い方
開発ツールを開くには、キーボードの［Ctrl］ + ［Shift］ + ［I］キーを同時に押します。
▲開発ツールを開いたところ
Chromeで最初に開発ツールを起動したときは、メニューを日本語化するかどうか聞かれます。日本語化する場合は［Switch DevTools to Japanese］をクリックします。
▲［Switch DevTools to Japanese］をクリックするとメニューが日本語化される
■HTML/CSSコードを確認する
HTMLやCSSのコードを確認するには、開発ツール上部のツールバーから［要素］タブをクリックします。
▲［要素］タブをクリックしてHTML/CSSコードを確認する
■開発ツールの表示場所を移動する
ツールバー右にある［DevToolsのカスタマイズと管理］をクリックして、「固定サイド」にある4つのボタンをクリックすると、開発ツールの表示場所を移動できます。
▲「固定サイド」から選んでクリックすると、開発ツールの表示場所を移動できる
■スマートフォン表示にする
スマートフォンやタブレットなど、各種モバイル端末の画面サイズに合わせた表示にすることもできます。ツールバーの［デバイスのツールバーを切り替え］をクリックして、通常の表示とモバイル端末の表示を切り替えます＊。
また、モバイル端末向け表示のときに、上部のドロップダウンメニューから、iPhoneやPixelなど具体的な端末を指定して表示することもできます。
＊［デバイスのツールバーを切り替え］が表示される場所は、開発ツールの表示場所によって変わります。そのため、アイコンの絵を参考に探してください。
▲各種モバイル端末のサイズに合わせた表示にできる（図では開発ツールを右に表示しています）
■開発ツールを閉じる
開発ツールを閉じるときは、ツールバー右の［×］をクリックします。
▲開発ツールを閉じる
4. 開発ツールを使ってHTMLコードを調べる
開発ツールの基本的な操作方法を見てきました。ここから、開発ツールを使って、編集すべきHTMLの場所を調べる方法を説明します。
■HTMLコードから要素を調べる
表示されているページのどの部分が、どのHTMLに対応するかを調べる方法は2通りあります。
1つは、開発ツールに表示されているHTMLから要素を調べる方法です。
開発ツールを開き、［要素］タブをクリックして出てくるHTMLコード上に、マウスポインタを重ねます。すると、ページ上の該当箇所がハイライトします。
たとえば、配布サンプルデータをブラウザで開き、開発ツールの<header class="header">...</header>が書かれた部分にマウスポインタを重ねると、ページ上の該当箇所がハイライトします。CSSでマージンやパディングが設定されている場合、その部分は違う色でハイライトします。
▲HTMLコードにマウスポインタを重ねると、ページの該当部分がハイライトする
■表示結果からHTMLコードの場所を調べる
もう1つの方法は、表示されているWebページから該当する要素を調べる方法です。 開発ツールの［ページ内の要素を選択して検査］をクリックし【1】、表示されているWebページの、調べたい箇所にマウスポインタを重ねます【2】。該当のHTML要素がハイライトします【3】。
▲表示結果からHTMLコードの場所を調べる
さらに、ハイライトした該当のHTML要素をクリックすると、選択が確定します。マウスを動かしても別の要素に選択が移らなくなります。
▲該当のHTML要素をクリックすると選択が確定する
5. テキストエディタで編集？開発ツールで作業？
ここまで、編集すべきHTMLの場所を特定する作業を紹介してきました。ここから実際にHTMLを編集しますが、編集作業には、テキストエディタに移って作業をする方法と、このまま開発ツールで作業を続ける方法と、2通りあります。
編集するHTMLコードが長かったり、作業量が多かったりする場合には、テキストエディタに移ることをおすすめします。逆に、それほど長いHTMLを編集せず、作業量もそれほど多くない場合は、このまま開発ツールを使うほうがよいでしょう。
■テキストエディタで編集する
テキストエディタを使う場合は、編集するHTMLファイルをテキストエディタで開き、編集すべき場所をご自分で探す必要があります。
編集すべき場所を探すには、開発ツールで編集すべき要素の「開始タグ」と、開始タグに対応する「終了タグ」を確認しておく必要があります。
編集すべき要素を選択したあと、開発ツールのHTMLコードをよく見ると、コードの左側にグレーの縦線が引かれています。この線の始点が「開始タグ」、終点が「終了タグ」です。
▲グレーの縦線をガイドに、開始タグと終了タグを見つける
HTMLの構造を確認し、開始タグと終了タグの場所を把握したら、テキストエディタでHTMLを開き、該当の場所を探します。あとは必要に応じてHTMLを編集します。
▲開発ツールで選択したのと同じ場所をテキストエディタで探して編集する
■開発ツールで編集する
ちょっとした編集であれば、このまま開発ツールを使って続けることもできます。
編集すべき要素を選択後、右クリックし、メニューから［HTMLとして編集］をクリックします。選択した要素が編集可能になります。編集可能な範囲がグレーの枠線で囲まれます。
グレーの枠線で囲まれている範囲であれば、自由にHTMLを編集できます。逆にいえば、選択しなかった部分は編集できないので、間違ってHTMLを壊してしまう心配は少なく、安心です。
編集内容をもとに戻したければ、ページを再読み込みします。ただし、編集内容は保存されずにすべて消えてしまう点には注意が必要です。
▲選択したHTML要素の編集を開始する
編集が終わったら保存します。［Ctrl］ + ［S］キーを押すと、「名前を付けて保存」ができます。ダイアログが出てくるので適当なファイル名をつけ、ファイルの種類は「ウェブページ、完全」を選んで［保存］をクリックします。
▲編集したHTMLファイルに名前を付けて保存する
6. さいごに
開発ツールは、一般的なWebサイトの閲覧では使用しないため、あまり知られていない機能かもしれません。しかし、Webサイトの制作や開発の現場では非常によく使われるツールです。ぜひ一度、試してみてください。
更新作業で開発ツールを使うと、とくに次の点で作業がしやすくなります。
- 編集すべきHTML要素を、簡単に探し出すことができます。開始タグと終了タグのセットも見つけやすく、間違いが少なくなります
- 簡単な作業であれば、開発ツールを使って直接HTMLを編集することも可能です
ただ、編集中の状態は保存されないので、ページを再読み込みすると作業内容がすべて消えてしまう点には注意が必要です。作業内容を消してしまわないよう、編集量が多いときは、テキストエディタを併用しましょう。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
