HTMLコーディングに興味があるが、どのような手順で行えば良いのかわからないという方も多いのではないでしょうか。本記事ではHTMLコーディングの基本的な手順や、コーディングルールなどについて解説します。
HTMLとは？
HTMLはHyper Text Markup Languageの略でWebサイトを制作するための言語のことです。
HTMLにはタグというものがあります。タグを組み合わせることによってWebサイトのレイアウトを表現することが可能です。たとえば titleというタグを使えばそのページのタイトルを指定することができます。
HTMLは長年Webサイト制作で使われている言語です。今まで何回かアップデートがされており、最新版はHTML5となっています。
| 《例：HTMLのコード》
<h2 id=”01″><strong>テストです</strong></h2> <p>これはテストで書いています。HTMLではこのような文章や言葉の先頭と末尾にタグを挿入していきます。</p> <p>それぞれのタグには意味があり、例えば<p>はパラグラフを意味していて、おもにブレーンな文章や段落を指します。</p> <p>また、<li>はリストを意味し、箇条書きのときに活用します。タグの詳細については後述します。</p> |
HTMLとCSSの違い
CSSはCascading Style Sheetsの略でWebサイトの各パーツの色や配置などを調整するための言語です。HTMLとセットで使います。
HTMLだけでもWebサイトの制作は可能です。ただ、レイアウト調整はCSSに任せた方が、HTML全体がすっきりして後で修正がしやすくなるメリットがあります。
また、CSSは特定のセレクタを一括でレイアウト調整することが可能です。たとえば、見出しとして表示した文章をすべて赤文字に変更する、といったことができます。そのため、CSSを使った方が制作効率も上がるでしょう。
HTMLコーディングを行う手順
HTMLコーディングは次の4つの手順で行うことが基本です。
-
- フォルダとファイルを準備する
- レイアウトを作成する
- HTMLの型を記述
- HTML・CSSを書く
これら4つを繰り返し、最終的にWebサイトを完成させます。1つ1つの手順について詳しく解説していきましょう。
1.フォルダとファイルを準備する
Webサーバーを準備したら、サーバー内にフォルダを用意する必要があります。画像用のフォルダやCSSファイル用のフォルダを作っており、どこに何が保管されているのかわかりやすくしましょう。
続いて、トップページのHTMLファイルを作ります。トップページは「index.html」というファイル名にするのが一般的です。この「index.html」にHTMLコードを書いていきます。
2.レイアウトを作成する
続いて、トップページのレイアウトを作成します。HTMLを実際に書く前に、紙でもPowerPointでも良いので、おおよそのイメージ図を書いておくと良いです。
たとえば、サイドメニューの種類や配置する画像などを決めておくと、コーディングしやすくなります。イメージ図はそこまで精密に作る必要はなく、だいたいのイメージがわかれば問題ありません。
3.HTMLの型を記述
続いて、先ほど作成した「index.html」にHTMLコードを書いていきます。HTMLコードを書くコツは、最初にHTMLの雛形を作成しておくことです。
HTMLの雛形は次のように書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>テスト</title>
</head>
<body>
Hello World！！
</body>
</html>
雛形は大きくheadとbodyタグに分かれます。headタグにはWebページの内部情報などを書き、bodyタグにはWebページに表示する情報を書くのが基本です。
meta charsetタグには文字コードを書きます。基本的にはUTF-8で問題ありません。また、titleタグの中にはWebページのタイトルを書きます。
雛形を作成したら「index.html」をWebサーバーにアップロードしましょう。すると「テスト」というタイトルで「Hello World！！」と書かれたページが表示されるはずです。
4.HTML・CSSを書く
ここまでできれば後は先ほど作成したレイアウト通りにHTMLを書いていくだけです。
HTMLタグの使い方は参考書や学習サイトなどを参考にします。慣れてきたら表（tabelタグ）の作成や箇条書き（liタグ）の作成なども行ってみましょう。
HTMLタグの勉強方法に関しては詳しく以下の記事にまとめていますので、参考にしていただけると幸いです。
※関連記事
Webコーディングとは？必要なスキルや外注方法について解説
HTMLコーディングルールとは？
HTMLは人によってさまざまな書き方が可能な言語です。趣味でWeb制作を行う場合なら、自分が書きやすいように記述して問題ありません。
しかし組織でHTMLを管理する場合は、複数人が協力してWeb制作を行うため、他の人から見ても読みやすいように記述する必要があります。そのためには、HTMLコーディングルールに従うことが大切です。
HTMLコーディングルールはGoogleが定めたものであり、多くの企業がこのルールを採用しています。ルールに則って書くことで読みやすくなるだけでなく、SEO対策にもなる可能性があるため、覚えておきたいです。
ここでは代表的なHTMLコーディングルールを5つ紹介しましょう。
-
- HTML5を使用する
- 画像には代替テキストをつける
- 段落内に見出しを入れない
- インデントを統一する
- タグは小文字で
参考:Google HTML/CSS Style Guide
1.HTML5を使用する
HTML5はHTMLの最新バージョンのことです。基本的にHTMLやプログラミング言語は、最新バージョンが提供されているならそちらを利用します。
なぜなら、バージョンによって書き方が異なるためです。書き方が異なると後でソースを読み返したときに読みにくくなるため、HTML5に統一するルールになっています。
2.画像には代替テキストをつける
HTMLでは、imgタグを使うことで画像を表示することができます。imgタグにはalt属性をつけて代替テキストを指定するのがルールです。
代替テキストは画像が表示できない場合に代わりに表示する情報を指します。画像が削除されてしまった場合などでも、ユーザーに情報を伝えることが可能です。
3.段落内に見出しを入れない
HTMLではpタグを使うことで、Webページ内で段落を表現することができます。
pタグの中には、h1やh2などの見出しを入れないのが基本です。段落の中に見出しを入れるのは、明らかに変な使い方となります。ついやってしまう書き方なので気をつけましょう。
4.インデントを統一する
HTMLコードのインデントは半角2つのスペースで統一します。インデントを統一することでコードが見やすくなるため、このルールを守った方が良いです。複数人でコードを管理する場合は、先述した通り可読性が上がり理解するための時間短縮につながります。
古いHTMLコードの場合、タブによってスペースをあけていることもありますが、基本的には半角2つにした方が読みやすいでしょう。
5.タグは小文字で
HTMLタグは小文字で統一しましょう。
大文字で書いても表示上は特に問題ありません。ただ、大文字を混ぜると、やはりHTMLコードが読みにくくなってしまいます。
HTMLコーディングにおすすめのエディタ
エディタとはデータや文章の作成を行うためのソフトウェアのことです。エディタではHTMLコードやCSS、JavaScriptなどを記述したファイルを作成することができます。
たとえば、Windowsに最初から入っているメモ帳もエディタの1種です。メモ帳でもHTMLコードの記述は可能ですが、もっと高性能で使いやすいエディタが他にあります。
ここからはHTMLコーディングにおすすめのエディタを3つ紹介しましょう。
-
- サクラエディタ
- Notepad++
- Online HTML EDITOR
1つ1つのエディタについて詳しく解説していきましょう。
1.サクラエディタ
サクラエディタは無料で利用できるエディタで、HTML作成やプログラミングに活用することができます。サクラエディタのメリットは動作が軽量で、ストレスなく使える点です。
また、日本人が作ったエディタのため、操作方法に関する日本語の記事も多く、初心者でも安心して使えます。HTMLコードの色分け機能や入力補完機能などもあり、総合的に機能が豊富です。
2.Notepad++
Notepad++はWindows専用のエディタであり、拡張機能が多い点がメリットです。
拡張機能をインストールすることで、Notepad++に機能を追加することができ、より便利に活用することができます。上級者になっても使い続けられるエディタと言えるでしょう。
3.Online HTML EDITOR
Online HTML EDITORはブラウザ上でHTMLを記述し、実行結果を確認できるエディタです。サクラエディタなどとは種類が異なりますが、HTMLの練習用として優秀なので取り上げました。
Online HTML EDITORはブラウザで実行できるため、インストール不要ですぐにHTMLを勉強できる点がメリットです。
また、リモートワークなどでHTMLコードを共有する際にも使えます。
高度なHTMLコーディング方法について
HTMLでWebサイトを表現するだけなら、そこまで難しくありません。しかしユーザーの目を惹き付ける魅力的なWebサイトに仕上げるには、もっと高度なコーディング技術が必要です。
ここでは、Webサイト制作のプロが用いるHTMLコーディング技術を2つ紹介します。
-
- JavaScriptで動きをつける
- レスポンシブ対応を行う
Webサイト制作を外注する場合、これら2つにも対応してくれることがほとんどです。
1.JavaScriptで動きをつける
1つ目はJavaScriptで動きをつけることです。
JavaScriptを使うことで、Webページにアニメーションやスライドショーをつけることができます。また、ユーザーがフォームに入力したデータの確認も可能です。
JavaScriptは便利なのですが、プログラミング言語の一種なのでHTML・CSSよりも多くの学習時間が必要です。そのためJavaScriptを使えない場合、Webサイト制作は外注した方が良いでしょう。
2.レスポンシブ対応を行う
2つ目はレスポンシブ対応を行うことです。
レスポンシブ対応とは、パソコンでもスマホでもページを見やすいように調整することを指します。
従来はパソコン用とスマホ用で別々にHTMLファイルを作成し、端末によって出し分けを行っていました。しかし、ファイルを別々にするとWebページを更新する際に手間がかかってしまいます。
そこで、1つのファイルでパソコンとスマホの両方に対応できる技術が生まれました。レスポンシブ対応にもやはり高度なスキルを有しますので、対応が難しいなら外注した方が良いです。
HTMLコーディングは代行してもらうことも可能
HTMLコーディングが自社で難しい場合、代行会社に依頼する方法があります。
HTML・CSS自体は簡単ですが、ユーザーを惹きつけるWebサイトを作成し成果につなげたいのであれば、プロに依頼した方が良いです。
コーディング代行方法や費用に関しては以下の記事で詳しく解説しているので、併せてお読みください。
※関連記事
コーディング代行にかかる費用は？代行会社を選ぶコツも解説
最後に
この記事で説明してきた内容をまとめると以下のとおりです。
-
- HTMLコーディングを行う手順：フォルダとファイルを準備する／レイアウトを作成する／HTMLの型を記述／HTML・CSSを書く／Webサーバーにアップロードする
- HTMLコーディングルール例：HTML5を使用する／画像には代替テキストをつける／段落内に見出しを入れない／インデントを統一する／タグは小文字で
- HTMLコーディングにおすすめのエディタ：サクラエディタ／Notepad++／Online HTML EDITOR
高度なHTMLコーディング方法について：JavaScriptで動きをつける／レスポンシブ対応を行う
HTML自体の学習難易度は低いものの、実際にコーディングを行う際にはさまざまな技術が必要です。来訪者数アップに繋げられるWebサイトを作成するのは、そう簡単なことではありません。
株式会社エイチビーラボでは、ベトナムに特化したオフショア開発サービスを提供しております。来訪者数アップに繋げられるWebサイト制作の実績も豊富です。Webサイト制作でお困りの方は、ぜひお気軽にお問い合わせください。ご相談から、開発、運用まで親身にサポートいたします。
