ホームページのHTMLの編集方法の基本について。ホームページ制作やホームページの修正の基本となるHTML編集の概要について。ホームページのHTMLを編集する方法としては、テキストエディタによる編集でタグを編集し、FTPソフトによるダウンロード・アップロードを行うのが一般的です（ホームページ編集ソフトを利用することもあります）。また、WordPress等のCMSでは管理画面内のエディタでHTML編集を行います。
ホームページのHTML編集方法
ホームページ（ウェブサイト）の基本構成はHTML
ホームページ（ウェブサイト）の基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ修正の基本はこのHTMLとCSSの編集で行います。
サイト・ホームページのHTML編集の基本的な手順は、FTP等で編集対象HTMLファイルをダウンロードし、ローカル環境でテキストエディタを用いてHTMLファイルを修正編集します。そして編集が完了した後は、対象HTMLファイルをサーバーにアップロードします。
--
ホームページのHTML編集の基本を語る
ホームページというのは、表から見れば画像や文字やボタンが並んでいるものですが、その裏側には必ず「設計図」のようなものが存在します。それがHTMLです。ホームページを編集するというのは、言い換えればこのHTMLという設計図に手を加えることだと考えてもらうと分かりやすいと思います。まず、ホームページを構成する要素をイメージしてみましょう。文章があり、見出しがあり、画像があり、リンクをクリックすれば別のページに飛ぶ仕組みがある。それらを「ここは見出しですよ」「ここは段落ですよ」「ここに画像を表示してください」というように指示を出しているのがHTMLの役割です。つまり、文章にただ文字を並べるだけではなく、それがどういう役割を持つのかをブラウザに教えるための言語だと言えるわけです。
HTMLの編集というと、多くの人が「プログラミングのような難しいことをするのではないか」と身構えてしまいます。しかし実際には、HTMLは計算や処理を行うプログラミング言語ではなく、あくまでも「ここはこう表示してね」と伝えるための「マークアップ言語」と呼ばれるものです。だからこそ、基本的な考え方を理解してしまえば、難しさよりもむしろシンプルさを感じられるはずです。
具体的にどう編集するかという話に入る前に、まずはHTMLの構造をざっくり理解しておきましょう。ホームページのHTMLは大きく分けて、頭の部分と体の部分があります。頭の部分は「このページのタイトルはこれです」とか「どんな文字コードで表示するか」といった裏方の情報をまとめる場所。体の部分は実際にブラウザに表示される文字や画像を並べる場所です。つまり、体の部分を編集することで、画面に出てくるコンテンツが変わっていく、という仕組みになっているのです。
では、実際に編集という作業はどういう流れで進むのか。大きく分ければ、まず編集したいHTMLファイルを用意して、それをテキストエディタというソフトで開きます。そこで文字を追加したり削除したり、あるいは指示を書き換えることで、ブラウザで表示される内容が変わるわけです。たとえば会社案内ページに新しい住所を加えるなら、該当する部分のテキストを書き換えればいい。画像を差し替えたいなら、画像のファイル名や場所を指示している部分を修正すればいい。こうやって「テキストを編集する感覚」で操作できるのがHTML編集の基本になります。
ただし、実際に作業する際には注意点もあります。一つは「どの部分がどの表示に対応しているか」を正しく把握することです。HTMLは目に見える文字だけでなく、たくさんの「タグ」と呼ばれる指示が含まれています。このタグによって「ここは見出しですよ」「ここは段落ですよ」と区別されているわけです。だから、むやみにタグを消したり場所を動かしたりすると、表示が崩れてしまうことがあります。編集する際には、あくまでテキスト部分を変えることを意識して、骨組みそのものは慎重に扱う必要があります。
また、HTMLを編集する時にありがちなのが「保存してもブラウザに変化が反映されない」という戸惑いです。これは単純にブラウザのキャッシュが残っている場合や、保存先のファイルと実際に公開されているファイルが違う場合などが考えられます。ですから「保存した後に必ずブラウザで確認する」「それでも変わらなければキャッシュを消す」「本当に公開用のファイルを触っているか確認する」という手順を踏むことが大事です。
さらにもう一つ大切なのは「バックアップを取ること」です。HTMLの編集は簡単にできる反面、間違えて大切な部分を消してしまうとページ全体が崩れることもあります。ですので、必ず編集前に元のファイルをコピーして保存しておく。これを怠ると「前の状態に戻せない」という事態になってしまうので、初めて作業する人ほど意識しておきたいポイントです。
コーディング〜WordPress化 13P
制作期間約4週間
制作ポイント：TOPページのスライダーフェード
カスタムフィールドで各種メニューの変更が可能
繰り返しフィールドの実装
カスタムフィールドを使った管理のしやすさ
スクロールアニメーションの実装
店舗情報やスタッフ情報の出しわけなど
WordPressなどのCMSではブラウザ上でHTMLを編集することができます。また、ブラウザを用いてサーバーのファイルマネージャ上で直接編集できる場合もあります。
HTMLの基本構成としては、ドキュメントタイプ宣言の後、から全体が構成され、様々なタグを用いることによって、該当部分が見出しや段落であることを示していきます。
HTML編集は、テキストの追加・削除の他、こうしたタグの付加などによって行います。なお、内の編集はメタタグの編集と表現されることがあります。
ダウンロードしたHTMLファイルを開き、編集対象部分のHTMLを編集していきます。編集が終わった後は、テキストエディタ上でファイルを上書き保存します。修正編集が完了したHTMLファイルをFTP等でアップロードし、サーバー上のHTMLファイルを上書きします。
HTMLソースコードを編集しサイトのテキストを書き換え
ここまでの話をまとめると、HTML編集の基本は「テキストを編集する感覚で作業できる」「タグという骨組みに注意する」「保存と確認をセットで行う」「必ずバックアップをとる」この4つに尽きると言えるでしょう。
さて、もう少し深い話をすると、HTMLは単独で存在しているわけではありません。実際のホームページは、HTMLに加えてCSSやJavaScriptといった他の言語と組み合わせて作られています。CSSはデザインや見た目を調整するためのもので、文字の色や大きさ、配置などを決めています。JavaScriptは動きをつけたり、ユーザーが操作したときの反応を制御する役割を持っています。つまり、HTMLは「骨格」、CSSは「服装や装飾」、JavaScriptは「動きや仕草」といったイメージで考えると理解しやすいでしょう。
ただし、ここで強調しておきたいのは、最初から全部を理解する必要はないということです。ホームページをちょっと編集したいだけなら、まずはHTMLの基本部分、つまり「文字をどこに入れるか」「画像をどこに配置するか」を理解するだけで十分です。細かいデザインや動きの調整はCSSやJavaScriptの領域なので、そこまで欲張らずに「まずはテキストと画像をいじれるようになる」ことを目標にすると挫折しません。
さらに、最近ではCMSと呼ばれる仕組み、たとえばWordPressのようなものが普及しており、直接HTMLを書き換える機会は減っています。それでも、いざというときにHTMLを少しだけ触れると「文字が意図せず大きくなっている」「余計なリンクが入っている」といった細かな不具合を直せるようになります。つまり、専門家に丸投げせず、自分で最低限の調整ができるようになるというのは大きな強みになるのです。
HTML編集の基本を理解することは「ホームページの裏側を覗けるようになる」ことだと言えます。何がどう表示されているかの仕組みがわかれば、ホームページを見る目も変わってきますし、修正の依頼を外部に出すときも的確に指示できるようになります。自分で全部やるのは大変でも、骨格を知っているかどうかで、運営のしやすさは大きく変わってくるのです。
HTML編集に使われる有名なテキストエディタ
HTMLソースコードを直接編集するのであれば、テキストエディタを使うことになります。テキストエディタとは、文字情報を入力・編集するためのソフトウェアです。Windowsに標準搭載されているメモ帳もテキストエディタの一つです。
HTMLファイルは基本的にテキストファイルなので、極端に言えばメモ帳でも編集できます。HTMLのタグを入力し、文字を書き換えて保存すれば、それだけでHTMLソースコードの編集は可能です。
しかし、実際にホームページのHTMLを編集していくと、単純なメモ帳では不便に感じる場面が増えてきます。
例えば、HTMLのタグを見やすく色分けしたい場合があります。`
`や`
Visual Studio Code
`タグ、見出しを表す`
`タグ、リンクを設定する``タグなどが分かりやすく表示されます。
HTMLを本格的に編集していくのであれば、こうした「シンタックスハイライト」と呼ばれる機能は非常に便利です。
また、コードを入力している途中で候補を表示してくれる入力補完機能もあります。HTMLのタグや属性をすべて手で入力する必要がなくなるため、入力ミスの削減にもつながります。
さらに、拡張機能を追加できることもVisual Studio Codeの大きな特徴です。
HTMLの編集を補助する拡張機能や、ブラウザで表示した結果を確認しやすくする拡張機能など、用途に応じて環境を拡張できます。
ただし、機能が非常に多いため、単純にホームページの文章を少し書き換えたいだけの人にとっては、最初は少し複雑に感じるかもしれません。
その場合でも、最初からすべての機能を覚える必要はありません。HTMLファイルを開いて、文字を編集し、保存するという基本操作だけでも十分に利用できます。
Sublime Text
HTML編集用のテキストエディタとして長く知られているものにSublime Textがあります。
Sublime Textの特徴は、軽快な動作とシンプルな操作性です。
Web制作では、HTMLだけでなくCSSやJavaScript、PHPなど、さまざまなファイルを扱います。ファイル数が増えてくると、エディタそのものの動作が重いかどうかも作業効率に影響します。
Sublime Textは比較的軽量なエディタとして知られており、コードを素早く編集したい場合に使いやすい選択肢です。
また、複数のファイルを扱いやすい点も特徴です。
例えば、ホームページのHTMLファイルを編集しながら、CSSファイルも確認するという作業があります。HTMLだけを見ていても、実際のデザインがどのように設定されているのか分からない場合があります。
そのようなとき、HTML、CSS、JavaScriptなどのファイルを横断して確認できる環境があると便利です。
Notepad++
Windows環境でHTMLを編集するテキストエディタとしては、Notepad++も有名です。
名前の通り、Windowsのメモ帳を発展させたような位置付けのエディタで、通常のテキスト編集だけでなく、HTMLやCSSなどのソースコード編集にも対応しています。
特に、メモ帳よりもコードを見やすく編集したいが、非常に多機能な開発環境までは必要ないという場合に適しています。
HTMLのタグや属性などを色分けして表示できるため、ソースコードの構造を把握しやすくなります。
また、複数のファイルを開いて作業できるため、ホームページの修正作業にも向いています。
例えば、トップページのHTMLを編集した後、別のページにも同じ文章を追加するような作業では、複数ファイルを切り替えながら編集できます。
Windowsのメモ帳でもHTMLは編集できる
ここまで高機能なテキストエディタを紹介しましたが、HTMLを編集するために必ず専用のエディタが必要というわけではありません。
Windowsのメモ帳でもHTMLファイルは編集できます。
例えば、次のようなHTMLがあるとします。
ホームページ制作について詳しく解説します。
この「ホームページ制作について詳しく解説します。」という部分を書き換えて保存すれば、HTMLの文章を変更できます。
つまり、HTML編集の基本的な仕組みを理解するだけであれば、メモ帳でも十分なのです。
ただし、HTMLファイルが長くなると話は変わってきます。
数百行、数千行のHTMLをすべて同じような文字で表示していると、どこからどこまでがタグなのか、どこが本文なのかを判断するのが難しくなります。
そのため、実際のWeb制作では、コードの構造を視覚的に確認できるテキストエディタを利用することが多くなります。
テキストエディタとホームページ作成ソフトの違い
ここで、テキストエディタとホームページ作成ソフトの違いも理解しておきましょう。
テキストエディタは、基本的にソースコードそのものを編集するための道具です。
一方、ホームページ作成ソフトには、HTMLを直接入力しなくてもページを作成できる機能が用意されている場合があります。
いわゆるWYSIWYGエディタでは、実際のホームページに近い見た目を確認しながら文章や画像を配置できます。
しかし、WYSIWYGエディタを使っていても、最終的にはHTMLが生成されています。
そのため、HTMLを理解しておくと、作成ソフトを利用しているときにもトラブルの原因を理解しやすくなります。
例えば、見出しとして設定したつもりなのに、実際には単なる太字の文章になっている場合があります。
見た目だけなら似ていますが、HTMLとしては意味が異なります。
HTML編集では「見た目」と「構造」を分けて考える
HTMLを直接編集するときに重要なのが、見た目と構造を分けて考えることです。
HTMLは文章の構造を表します。
見出しは見出しとして`
`、段落は`
HTMLファイルを直接編集するときの注意点
テキストエディタは便利ですが、ソースコードを直接編集する以上、注意も必要です。
特に重要なのが、タグを壊さないことです。
例えば、
ホームページ制作について解説します。
HTML編集について詳しく解説します。
のように、タグを残したまま本文だけを書き換えるのが安全です。
誤って`
`を削除してしまったり、`<`や`>`を変更したりすると、HTMLの構造が壊れる可能性があります。
また、リンクの場合はさらに注意が必要です。
詳しくはこちら
というコードでは、「詳しくはこちら」が表示される文章であり、`href`の値がリンク先を指定しています。
文章を書き換えるだけなら問題ありませんが、リンク先まで変更するときには属性値を誤って編集しないようにする必要があります。
文字コードにも注意する
日本語のHTMLファイルを編集するときには、文字コードにも注意が必要です。
古いホームページでは、UTF-8以外の文字コードが使われていることがあります。
HTMLファイルをテキストエディタで開いて正常に日本語が表示されていても、保存方法を誤ると文字化けする場合があります。
特に既存サイトを修正するときは、「新規作成するHTML」と「既存のHTMLを編集する」のでは注意点が異なります。
既存ファイルを編集する場合は、元の文字コードを確認し、その環境に合わせて保存することが重要です。
現在のWeb制作ではUTF-8が一般的ですが、古いサイトを扱う場合には慎重な確認が必要です。
テキストエディタは「ホームページ修正」の重要な道具
HTMLの編集は、特別な技術者だけが行うものではありません。
もちろん、HTML、CSS、JavaScriptを本格的に学べば高度なWeb制作が可能になります。しかし、「既存ページの文章を変更する」「リンク先を修正する」「画像のファイル名を変更する」といった作業であれば、HTMLの基本を理解するだけでも対応できる場合があります。
そのときに必要になるのがテキストエディタです。
メモ帳から始めてもよいですし、より本格的に編集するのであればVisual Studio Codeなどを利用してもよいでしょう。
重要なのは、どのエディタを使うか以上に、HTMLの構造を壊さずに編集することです。
自分に合ったテキストエディタを選ぶ
HTML編集を始めたばかりなら、最初から高機能なエディタを使いこなそうとする必要はありません。
文章を少し修正するだけならメモ帳でも構いません。
HTMLを継続的に編集するのであれば、タグの色分けや入力補完などが利用できるVisual Studio CodeやNotepad++などが便利です。
軽快な操作感を重視するのであればSublime Textのような選択肢もあります。
大切なのは、エディタの機能を覚えることではありません。
HTMLのどこが文章で、どこがタグで、どこが属性なのかを理解し、安全に編集できる環境を作ることです。
そして、編集前にはバックアップを取り、編集後には必ずブラウザで表示を確認する。
この基本を守るだけでも、HTMLソースコードを直接編集する作業の安全性は大きく高まります。
ホームページの修正では、必ずしも高度なプログラミング知識が必要になるわけではありません。
まずはテキストエディタでHTMLファイルを開き、「ここが見出し」「ここが本文」「ここがリンク」「ここが画像」という関係を理解する。
そこからCSSやJavaScriptへと知識を広げていけばよいのです。
HTML編集の入口として、テキストエディタは非常に身近で実用的な道具です。そして、ホームページを自分で修正する力を身につけるうえでも、テキストエディタを使ってソースコードを見る経験は大きな意味を持ちます。
---
・ランディングページの作成
・ WordPressを使用したサイト制作(オリジナルテーマ、テーマカスタマイズ)
・マルチデバイスに対応したサイト制作(レスポンシブ対応)
・Sass設計(BEMやFLOCSS)を用いた保守・予測・拡張しやすい設計
・ JavaScript / jQueryを用いたアニメーション実装
・ デザインカンプからのコーディング
・Adobe(Photoshop / Illustrator / XD)やFigmaのデザインデータに対応
ウェブサイト制作・ホームページ制作 ホームページ制作・ホームページ作成・SEO・SEO対策。 コーポレートサイト（企業ホームページ）、メディアサイト、ECサイト（ネットショップ）、会員制サイト、モバイルサイトの制作・カスタマイズ Web制作・Web集客・SEO（SEO対策）、サーチエンジンマーケティング（SEM）、コンテンツマーケティング、Webコンサルティング
PR
コメント