テクノ・ウェブ ホームページ制作

ホームページの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編集の基本を理解することは「ホームページの裏側を覗けるようになる」ことだと言えます。何がどう表示されているかの仕組みがわかれば、ホームページを見る目も変わってきますし、修正の依頼を外部に出すときも的確に指示できるようになります。自分で全部やるのは大変でも、骨格を知っているかどうかで、運営のしやすさは大きく変わってくるのです。
---
・ランディングページの作成
・ WordPressを使用したサイト制作(オリジナルテーマ、テーマカスタマイズ)
・マルチデバイスに対応したサイト制作(レスポンシブ対応)
・Sass設計(BEMやFLOCSS)を用いた保守・予測・拡張しやすい設計
・ JavaScript / jQueryを用いたアニメーション実装
・ デザインカンプからのコーディング
・Adobe(Photoshop / Illustrator / XD)やFigmaのデザインデータに対応