ホームページのHTML編集方法について触れていきます。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページのHTMLを編集する方法としては、テキストエディタによる編集、FTPソフトによるダウンロード・アップロードが一般的ですが、ホームページ編集ソフトを利用することもあります。また、WordPress等のCMSでは管理画面内のエディタでHTML編集を行います。
HTML編集の手順
HTML編集の基本的な手順は、FTP等で編集対象HTMLファイルをダウンロードし、ローカル環境でテキストエディタを用いてHTMLファイルを修正編集します。
そして編集が完了した後は、対象HTMLファイルをサーバーにアップロードします。
- 編集対象HTMLファイルをダウンロード
- HTML編集を実施
- 修正編集したHTMLファイルをアップロード
基本的にはこうした手順になりますが、WordPressなどのCMSではブラウザ上でHTMLを編集することができます。また、ブラウザを用いてサーバーのファイルマネージャ上で直接編集できる場合もあります。
HTML編集の基本はテキストエディタ
HTML編集の基本はテキストエディタを使用した編集です。テキストエディタを利用しない場合でも、それと同様の編集画面となります。
メモ帳でも編集可能ですが、一般的にはコードごとに色分けされるタイプのテキストエディタを使用します。
HTMLを保存する文字コードによって、文字化けする場合もあるため（特に日本語は文字化けします）、ある程度の機能を備えたテキストエディタを用いるに越したことはありません。
デベロッパーツール等を利用した確認・テスト
なお、ソースコードの確認のみであればブラウザでソースを確認することができる他、少しのテストであればdeveloper tools（デベロッパーツール、Google Chromeの場合）、DevTools（開発者ツール、Microsoft Edgeの場合）、などで、該当要素の確認やHTML編集のテストを行うことができます（編集した場合はどうなるかという表示確認ができます。実際にHTMLが書き換わるわけではありません）。
こうしたデベロッパーツール等は、ブラウザにもよりますが概ねF12を押すことで起動します（デベロッパーツールについては今回は割愛させていただきます）。
編集対象HTMLファイルをダウンロードする
まず編集対象であるHTMLファイルをダウンロードすることから始めます（テンポラリファイルやブラウザのソースコード表示等を操作しても、実際のHTMLファイルを編集することはできません）。
基本的にはFTP（FTPS）でFTPで対象HTMLファイルをダウンロードします。
場合によっては、サーバコントロールパネル経由でファイルマネージャに移動し、ファイルマネージャ上で対象HTMLファイルをダウンロードします。
- FTPで対象HTMLファイルをダウンロード
- ファイルマネージャ上で対象HTMLファイルをダウンロード
その他、ブラウザ上でHTMLをダウンロードしたり、ブラウザ上で表示されたソースコードをエディタに貼り付けるといったことでも編集対象HTMLをローカル環境に準備することもできます。
FTPで対象HTMLファイルをダウンロード
FTP接続は、ブラウザ上でも可能ですが、一般的にはFTPソフトを使用します。
FTPソフトにてホストの設定を行い、対象サーバーに接続します。
ホストの設定項目は概ね、ホスト名（アドレス）、ユーザー名、パスワードです。
ダウンロード時の文字コード（漢字コード）を指定することができる場合があります。
基本的には未指定（文字コード・漢字コードの変換なし）で良いのですが、何かの文字コード設定されている状態でダウンロードすると、文字コードが変換されるため、文字化けの原因になります。
文字コード
日本語サイトの文字コードは概ね次のとおりです。
- UTF-8
- Shift_JIS
- EUC
- JIS
サイト上の文字コード指定と合わせる必要があります。FTPソフト上で「変換なし」を選択していれば基本的には問題ありません。
ファイルマネージャ上で対象HTMLファイルをダウンロード
また、FTP接続を行わなくても、一般的なレンタルサーバにおいては、ファイルマネージャ上で対象HTMLファイルをダウンロードすることも可能です。
「チェックボックスによる一括ダウンロードはできてもアップロードは個別に」という場合が多いので、編集対象ファイル数が少ない時は、ファイルマネージャを利用する形でも良いですが、ファイル数が多い場合は、操作がしにくい場合があります。
編集前にバックアップを保存しておく
ホームページのHTMLを編集する方法は様々ですが、どの編集方法によるかに問わず、必ず編集前のHTMLファイルをバックアップ保存しておきます。
ローカル環境にバックアップフォルダを設置して、そちらもダウンロードファイルを置いておくといったものですが、この手間を省くと万一のデータ消失の時に復旧が困難になってしまうことがあります。
保存先フォルダに注意する
なおこの時、保存先フォルダやフォルダの構造には注意が必要です。ホームページ上はディレクトリ分けされていても、それぞれのファイルがindex.htmlやindex.phpといったようにファイル名自体は重複している場合がよくあります。
例としては、サーバー上に
/index.html
/web/index.html
/seo/index.html
といったディレクトリ・ファイルが存在するとします。それぞれのindex.htmlは、異なるファイルですが、ディレクトリが異なるもののファイル名が同じです。
この時、ローカル側の保存先フォルダを誤ると、意図せずファイルが上書きされ、ファイルが消失する場合があります。
ローカル側においても、「web」、「seo」といったフォルダを設置してそれぞれにそれぞれのindex.htmlを保存する必要があります。
ディレクトリごとダウンロードした場合には、ローカルにもフォルダが生成されるため、基本的には問題ありませんが、個別にダウンロードしたりした場合は、こうしたフォルダ分けがパスされることがあり、うっかり特定のindex.htmlを他のindex.htmlで上書きしてしまうというようなミスが起こることがあります。
HTML編集を実施
編集対象HTMLファイルのダウンロードが完了した後は、いよいよHTMLの編集に入ります。
テキストエディタ等でHTMLファイルを開き、編集して上書き保存します。
HTML編集が失敗した時のために、バックアップをしておいたほうが無難です。
HTMLの基本構成とタグ
HTMLの基本構成としては、ドキュメントタイプ宣言の後、<html><head><body>から全体が構成され、様々なタグを用いることによって、該当部分が見出しや段落であることを示していきます。
（こうした基本構成とタグについては後述します）
HTML編集は、テキストの追加・削除の他、こうしたタグの付加などによって行います。なお、<head>内の編集はメタタグの編集と表現されることがあります。
対象部分のHTML編集
ダウンロードしたHTMLファイルを開き、編集対象部分のHTMLを編集していきます。
編集が終わった後は、テキストエディタ上でファイルを上書き保存します。
基本的には大丈夫ですが、エディタ上でのHTMLの上書き保存時に文字コードが変換されることがあります。特に日本語は文字化けしやすいので、意図せぬ文字コード変換には注意が必要です。また、改行には「CRLF」「CR」「LF」といった3種類の改行コードがあり（OSによって異なります）、プログラムによってはこの改行コードの違いによってエラーが出ることがあります。
修正編集したHTMLファイルをアップロード
修正編集が完了したHTMLファイルをFTP等でアップロードし、サーバー上のHTMLファイルを上書きします。
アップロード時に文字コードの変換があると、文字化けの原因になるため注意が必要です。
きちんと上書きされていれば、サーバー側のHTMLの日付がファイルをアップロードした日時に更新されています。
ブラウザ上での修正編集の反映確認
HTMLファイルのアップロードが完了した後は、実際に編集内容が反映されているかをブラウザ上で確認します。
ブラウザ上で正常に編集内容が反映されていれば問題がありませんが、HTMLタグの閉じ忘れ等ふとしたミスなどがある場合もあります。実際に見て確認するまでは安心はできません。
ブラウザを強制更新（スーパーリロード）
通信負荷軽減のため、ブラウザは一般的にデータを一時保存します。つまり一度接続済みのページは、編集前のデータがブラウザ内に残存している場合があります。。
こうしたブラウザの一時保存機能により修正前データを読み込むことがありますので、確認の際には、ページを強制更新（スーパーリロード）して確認します。
Windowsの場合は、ブラウザ上で Ctrl+F5、Macintoshの場合は command+r （Safari以外は、command+shift+r）でページを強制更新することができます（ブラウザによって異なる場合があります）。
（また、ブラウザによっては何度かしつこく更新しないと反映されない場合もあります）
HTML編集が反映されていない場合
もしブラウザ上の確認においてページを強制更新（スーパーリロード）したにもかかわらずHTML編集が反映されていない場合、以下の要因が考えられます。
- HTMLを上書き保存できていなかった
- アップロードが失敗
- タグのマークアップ等HTML編集にミスがあった
また、CMSやサーバーのキャッシュ設定において、ファイルキャッシュやブラウザキャッシュが上手くクリアされていないという場合もあります。
HTMLを上書き保存できていなかった
HTML編集が反映されていない場合において、「HTMLを上書き保存できていなかった」という場合があります。これはローカル環境での編集時の保存において、上書き保存を忘れたまま、サーバーにアップロードしてしまったという場合や、バックアップファイルの方をアップロードしてしまったというような場合が該当します。
アップロードが失敗
FTPやファイルマネージャ上でのHTMLファイルアップロードにおいて、アップロード自体が失敗したという場合もあります（通信状況、サーバー状況によって、ファイルが上書きされない場合があります）。
たいていは、FTPソフトでアップロードができなかった旨の通知がなされます。
（画面上で「後で上書き」などのボタンを押せば、アップロード失敗時にも後で上書きが実行されますが、このボタンを押さずに席から離れると、「もうアップロードも終わった頃だろう」と思いつつも「できているはずができていなかった」というような現象が起こります）
タグのマークアップ等HTML編集にミスがあった
また、正常に上書き保存し、アップロードが成功していても、HTML編集自体にミスがあったという場合もあります。タグの閉じ忘れをはじめ、タグの記述のミスや消失など、様々なパターンがあります。
（タグの閉じ忘れを教えてくれたり、自動で補正してくれるエディタもありますが、「自動補正のおかげで余計なタグが混入した」ということもたまにあります。また、タグは記述できていても手動入力している途中に閉じタグの自動入力もなされ、余計な記号が混入していることもあります）
HTML編集ソフト
さて、HTML編集にはテキストエディタやFTPを使用する他にHTML編集ソフト（オーサリングソフト）を利用する方法もあります。
ソフトさえ使いこなせれば、通常の編集は楽に行うことができます。
しかしながら、そのソフト独自の記述の仕方があったり、意図せぬところがそのソフトに上書きされたりと言う場合もあります。
また、近年ではかなり改善されていると考えますが、記述の仕方がスマートではないという場合も多々あります。
表示位置の配置設定において、表示としては同じようなものであってもソースコードを見ると「無駄が多いなぁ」という感想を抱かざるを得ない方式を採用している場合もあります。
軽微なものですが、SEOの面でHTMLの軽量化、ソースコードの軽量化という部分をある程度考慮するのであれば、あまりおすすめはできません（特に古いタイプのものはその当時の技術に合わせているため、現代における「最適化」の面で考えると不利になります）。
さて、専用のホームページ作成ソフトでなくても、HTMLなどを一括編集するようなソフトウェアもあります。こうしたソフトウェアを利用すると、ホームページ上の共通部分の編集において、一括編集することができるので便利です。
一括編集
静的HTMLで作成されたホームページの場合、それぞれのHTMLが独立しています。逆にWordPressなどのCMSやphpで作成されたホームページの場合は共通部分の設定において、共通ファイルを利用することがほとんどです。これは、WordPress等の強みであり静的HTMLの弱みの一つになります。
共通メニューやヘッダー、フッターなどの部分の修正編集において、HTMLだけで構成されたホームページは、各々のページが独立しているため、全てのファイルを開いて編集していく必要があります。
そうなるとページ数に応じて数多くのファイルをダウンロードし、開いて編集し、再度アップロードするという手間が必要になります。
そこで、一括編集が可能なHTML編集ソフトを利用すると、こうした手間を省略することができます。文字列の検索を利用して、共通で記述されている部分を抽出し、一括で書き換えることができます。
WordPressを代表とするCMS上でのHTML編集
さて、次にWordPressを代表とするCMS上でのHTML編集について少しだけ触れておきます。基本的な編集のあり方は他のHTML編集と変わりありませんが、WordPressにおいてはHTMLファイルのダウンロードやアップロードを要さず、ブラウザ上で編集することができます。
ここではWordPressを例としてHTML編集について触れていきます。
投稿や固定ページなどの本文部分の編集は、「テキストモード」を使用します。
テキストモードでのHTML編集
WordPressにおいてHTML編集を行う場合は、テキストモードで編集します（このテキストモードという表現がクラシックエディタ的ですが、弊社では現役でクラシックエディタしか使用していません）。
現在、WordPressはGutenberg（グーテンベルク。WordPressブロックエディタ）が基本エディタとなっています（最新のものが最高とは限りません）。
それぞれについて見ていきましょう。
クラシックエディタ
現在ではクラシックエディタと呼ばれている旧来からのWordPressのエディタ上においてHTMLを編集する場合、テキストモードで編集を行います。
ビジュアルモードで編集を行うと、タグなどが文字実体参照で表現されてしまいます。
例）
<a>
<a>
Gutenberg（グーテンベルク）
GutenbergでHTMLを直接記述する場合、ブロック選択からフォーマット→カスタムHTMLを選択します。
既存のHTMLを編集する場合は、該当ブロックを「HTMLとして編集（Edit as HTML）」で編集します。
毎回「HTMLとして編集」をクリックして開いていくといった手間は結構面倒であるため、HTMLをよく編集する場合は、クラシックエディタを使用するに越したことはありません。
（ちょっと操作しようと思うと操作用のボックスがあっちこっちに行ったりするため好きではありません）
テーマファイルphp
また、テーマファイルのphpにおいても、html言語で記述されている部分についてはHTML編集が可能です。
外観→テーマファイルエディタから編集することができますが、記述ミスによりphpにエラーが生じた時には厄介なことになります（バックアップもないまま、管理画面が真っ白になる可能性もあります）。このため、php編集をする場合には、FTPソフトでテーマファイルphpをダウンロードして編集する方が無難です。
なお、ご利用サーバーによってはphpのエラーが発生しそうな場合はファイルの更新が実行されないように予防してくれる場合がある他、セキュリティレベルを下げないと管理画面からのテーマファイルphp操作はできないようになっている場合があります。
この場合は、phpファイルをFTPでダウンロードして編集し、編集完了後にアップロードするといった方法を取る必要があります（一時的にセキュリティレベルを下げる方法もありますが、長時間大規模な編集を行う場合等特別な事情がない限り、FTPを利用した編集を推奨いたします）。
HTMLの基本構造とマークアップ
HTMLは、ホームページ制作の基本タグで、ホームページ（ウェブサイト）を作成するための基本的なマークアップ言語です。
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）を略してHTMLと呼んでいます。
html文書は、ドキュメントタイプ宣言の後、<html><head><body>から構成されます。→html 文書宣言
<html> <head> </head> <body> </body> </html> <!DOCTYPE html> ドキュメントタイプ宣言 <html> html文書宣言 <head> 文書付加情報 この間にメタ情報 </head> 文書付加情報終了 <body> 文書本体 この間にコンテンツ </body> 文書本体 </html> html文書終了
そして、様々なタグを用いて、タグで囲った場所がどういった属性を持つのかを指定していきます。
ここでは主要タグについて少しだけ触れておきます。
html
HTMLであることを示します。<html>タグで囲まれた部分がHTMLであることを示し、<html>の内側に文書付加情報である<head>タグ、HTML文書の本体部分である<body>タグを設置します。
head
主に外から見えるページの本文以外の部分を設定する部分です（一部メタタイトルなどはブラウザタブ等に表示されます）。CSSやjsなどのファイルの呼び出しやブラウザ・検索エンジンに示すための内容の設定などを記述します。
<head>タグ内に記述されたソースコードやテキストなどは、タイトルなどの一部メタ情報を除き、ブラウザ上には表示されません。
body
ページの本体部分であることを示します。ここに記述した内容は、ページを開いた時に表示されます。<body>タグは、HTML文書の本体部分を指定します。ホームページ制作での<body>タグの使われ方として、ホームページの表示領域を指定するHTMLタグであるため、必須記述項目です。
div・span
divはブロック要素、spanはインライン要素です。要素の属性として、スペースをどのように取るかという属性の違いとなります。
divは、スペースをしっかりと取り、主にページ内でセクションを作る時に使用します。
h1・h2…
h1やh2、h3といったタグは、ページ中の見出しを設定します。<h>タグは<h1>～<h6>の6階層で、数字は順位になります。数字が大きくなるにつれて下位の見出しになります。
p
ページ中の該当部分が段落であることを示します。文章の記述の際に用います。<p>タグで囲まれた部分がひとつの段落であることを表します。
img
<img>（イメージ）タグを使用することで、「埋込みイメージ」としてホームページ（ウェブサイト）内のページに画像を設置することができます。サーバーに画像をアップロード後、その画像のURLパスを元にこの<img>タグでページに画像を呼び出す形になっています。
<img>タグ使用の際には、画像ファイルがある場所へのパスと、画像が表示できない場合の代替テキストの指定（alt属性）は必須になっています。
a
<a>（アンカー）タグはホームページ内のページとページをつなぐリンクを設置する時に使用します。
table
<table>（テーブル）タグは、ホームページ（ウェブサイト）のページ内に「テーブル」を作成して設置する場合に使用します。
ホームページ制作において、ページ内に価格表・料金表、サービスの分類などの「テーブル形式でのセクション」を作る際に、ページの中で表であることを指定する基本的なHTMLタグです。
HTMLタグ
HTMLは、ホームページ制作の基本タグで、ホームページ（ウェブサイト）、 ウェブページを作成するための基本的なマークアップ言語です。Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）を略してHTMLと呼んでいます。
ホームページ（ウェブサイト）制作・作成に役立つHTML5のタグ一覧は
html5 tag reference index ホームページ制作の基本タグ
に掲載しています。
ホームページ制作や修正の際に注意すべき記述ミス【初心者編】
ホームページ制作や修正の際に注意すべき記述ミス【初心者編】として、ホームページ修正時のタグなどの閉じ忘れ（HTMLタグの閉じ忘れ、CSSプロパティの閉じ忘れ）、タグの記述が不完全、エディタによるタグの自動整形・補正といったものをはじめ、ホームページのレイアウトを修正している時にブロック要素の左右比率の合計が100%を超えた場合、marginとpaddingの設定、ブロック要素分割時のfloatのクリア忘れなど、様々なパターンについてご紹介しています。
また、カラー設定が反映されないというケース（id,classが複雑で、どの部分が優先されているのかわからないという場合）の他、ホームページの修正が全然うまくいかない場合（WordPress編）として、WordPressテーマがHTMLにstyleとして吐き出す場合、要素に直で設定を吐き出すタイプのテーマ等の場合、そして、WordPress管理画面のカスタマイズ機能を無効にするといった点について掲載しています。
ホームページのCSS・スタイルシート編集方法
ホームページのCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。
ホームページ修正・HTML編集
京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレが提供させていただいております、ホームページ（ウェブサイト）の更新・修正にかかる料金の価格表です。HTML編集にも対応しています。
弊社で制作させていただいたホームページの更新や修正も承っておりますが、ご自身で制作・運営されているホームページや、他社管理のホームページの更新作業、構成ファイルの修正も対応可能です。
直接的な修正が難しい場合は代替案を提示させていただいております。
（初回投稿日 2023年7月18日）
