HTMLを使うことで、ホームページの構造やコンテンツの作成ができます。
テキストベースの言語となっていて、タグを使用することで要件定義するという仕組みです。
見出しや段落、リンク、画像などの要素も盛り込めます。
今回は、そんなHTMLを使ったホームページの作成方法について解説していきます。
HTMLタグについても解説していくので、ホームページを作りたいと考えているのであれば、ぜひ参考にしてみてください。
HTMLを使えばホームページの作成が可能
HTMLを使うと、冒頭でも述べたようにホームページの構造やコンテンツを作成できます。
見出しや画像などの要素を盛り込んだページが作れるので、ホームページ作成における基礎的な知識と言えるでしょう。
CSSと組み合わせれば、ホームページのデザインやレイアウトのカスタマイズも可能です。
CSSは、HTMLで作成した要素にスタイルの適用を行うためのスタイルシート言語と呼ばれているものです。
フォントや色、レイアウト、背景の画像などを指定し、表示されるページの見た目を変えるために使われます。
より魅力的で使いやすいホームページにするために必要なツールです。
HTMLでホームページを作成する手順
HTMLでホームページを作成する際も、適切な手順を踏む必要があります。
続いては、HTMLでホームページを作成する手順についてご紹介します。
テキストエディタを準備する
HTMLでホームページを作成する場合、HTMLを記述する場所を用意しなければいけません。
それが、テキストエディタと呼ばれるツールです。
「ツールを用意しなければいけない」と聞くと難しそうなイメージを持たれがちですが、Windowsに標準搭載されているメモ帳もテキストエディタの1つなので身構える必要はありません。
メモ帳を使って以下の手順を進めても問題ないということになります。
しかし、メモ帳よりもHTMLの記述に適したテキストエディタもあるので、それらを使うのがおすすめです。
多くの人に使われていて利便性の高さに定評があるのは、Sublime TextやAtom、Visual Studio Codeです。
特にSublime Textは、画面構成がシンプルなので初心者にもおすすめのテキストエディタとなっています。
HTMLの基本タグを記述する
テキストエディタを開いたら、HTMLの基本タグを記述していきます。
Sublime Textを使う場合、自動で入力する機能が備わっているのでとても便利です。
やり方はエディタ上で「<ht>」と入力すると出てくる「html」を選択するだけです。
「html」を選択すると、以下のようなタグが一括挿入されます。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
</body>
</html>
タグの意味に関しては、後ほど説明します。
作成したいページの内容に合わせたHTMLタグを記述する
次に、作成したページの内容に合わせたHTMLタグを記述していきましょう。
例えば、大見出しの後に文章と箇条書きが続く場合は、以下のように書いてください。
<body>
<h1>h1はページの大見出しを表します</h1>
<p>pは文章の段落（paragraph）を表します。</p>
<ol>
<li>olは番号付きのリスト（ordered list）を表します</li>
<li>番号無しのリストにしたい場合は、ul（unordered list）を使います</li>
<li>li（listitem）はolやulの中でリスト内の項目を表します</li>
</ol>
</body>
必要な場合はCSSを活用する
ページをよりデザイン性の高いものにしたいのであれば、CSSを活用してください。
例えば、「大見出しの文字サイズを大きくして文字や背景の色を変え、適度な余白をつけたい」「箇条書きに枠線と適度な余白をつけたい」といった場合は以下のように記述してください。
<head>
<style type=”text/css”>
h1 {
font-size: 30px;
background-color: #00af3a;
color: #ffffff;
padding: 8px 14px;
}
ol {
border: 2px solid #F3F3F3;
padding: 14px 14px 14px 32px;
}
</style>
</head>
HTMLファイルで保存する
HTMLの記述が完了したら、ファイルを保存しましょう。
Sublime Textの場合は、画面上部にあるメニューから「File」→「Save」の順に進むと保存できます。
ファイル名は、「任意の半角英数字.html」とします。
.htmlで保存すると、HTMLファイルとして保存されるためです。
保存場所に関してはどこでも問題ありませんが、見失わないようにわかりやすい場所にするのがポイントです。
ファイルをブラウザで表示し、チェックする
ファイルを保存したら、ブラウザではどのように表示されるのかチェックしてみましょう。
チェック方法は、index.htmlを普段使っているブラウザで開くだけです。
基本的なタグだけだととてもシンプルな画面ですが、他のタグを追加することでカスタマイズできます。
そのため、基本構造が問題ないかチェックしてから仕上げ作業に入るというやり方もおすすめです。
サーバーへアップロードする
ページが完成したら、サーバーにアップロードしてください。
インターネット上に公開するのであれば、必要不可欠な工程です。
サーバーの準備には手間がかかってしまうので、無料公開可能なサーバーをまずは選ぶのがおすすめです。
無料で公開できるサーバーには、エックスフリーやスターサーバーフリーなどがあります。
エックスフリーは、広告の表示はありますが無料でWordPressを使えるプランがあるので、使い勝手の良さを感じられるでしょう。
スターサーバーフリーも無料でありながらWordPressが使えるプランがあります。
さらに、広告表示もスマホでアクセスした場合に限るので、パソコンからのアクセスで広告表示がないのは無料サーバーの中でも魅力度が高いと言えます。
HTMLを使ったホームページ制作で使われるタグ一覧
HTMLを使ったホームページ制作で使われるタグには、様々な種類があります。
最後に、どのようなタグが使われているのかご紹介します。
HTMLを使ってホームページを制作する際の参考にしてみてください。
ページの基本構造を作るタグ
・<!DOCTYPE>
ホームページだと宣言するためのタグです。
ホームページソースの一番上に記述します。
最初に記述してしまえば、あとは使うことがありません。
・<html></html>
<!DOCTYPE>の下に記述するタグになります。
・<head></head>
ヘッダー情報を書くための必要なタグです。
タイトルや説明文などを囲むようにして使います。
・<meta>
ホームページの文字コードや説明文、キーワードなどを指定する際に使われます。
ホームページ上に表示されることがないヘッダー情報で、<head>タグの中に記述します。
・<title></title>
タイトルを表示させるために必要なタグです。
ホームページ上に表示されることがないヘッダー情報で、<head>タグの中に記述します。
・<link>
他のファイルを読み込むために使うタグです。
スタイルシートのファイルを読み込む場合などに使われます。
・<base>
リンクの基準となるURLを指定する際に使われるタグです。
フレーム内にページをきれいに表示するために使われる場合もあります。
・<body></body>
本文を表示させるためのタグです。
段落を作るタグ
・<p> </p>
段落を作るために使われます。
このタグで囲むと、1つの段落として扱われます。
・<br></br>
開業する際に使われます。
HTMLの場合、このタグを使わないと開業されないため、見やすいホームページを作るためには必要不可欠です。
・<pre></pre>
入力した文章をそのまま表示させるためのタグです。
便利なタグではありますが、本当にそのまま表示されてしまうので、ホームページを横幅が広がってしまう可能性があるという点に注意しなければいけません。
そのようなデメリットがあるため、使用しないケースもあります。
線を表示させるタグ
・<hr>
水平線を表示させたい場合に使用します。
横線を引けるので、活用するシーンも多いでしょう。
テキストの装飾をするタグ
・<h1></h1>、<h2></h2>、<h3></h3>
見出しを表示する時に使うタグです。
大見出しや小見出しを作ることでページを見やすくできます。
・<font></font>
文字の大きさや色、フォントを変更する際に使われます。
カラーコードを使うとより細かく色を指定できます。
・<strong></strong>
太文字にしたい場合に使用されるタグです。
・<i> </i>
文字を斜めに表示したい場合に使用されるタグです。
一部のブラウザやフォントだとこのタグが有効にならない場合もあるため、使われる機会は多くありません。
・<u></u>
文字にアンダーラインを付けたい場合に使用されるタグです。
目に留まりやすくなりますが、リンクと間違える可能性があるので使わないというケースも多いです。
・<s></s>
文字に打ち消し線を引きたい場合に使用されるタグです。
商品やサービスなどの値段を変更し、最新情報を記載する際に使われるケースが多いです。
画像を表示するタグ
・<img>
画像を表示させる際に使用されるタグです。
<img src=”aaa.jpg” width=”300″ alt=”建物の画像”>のようにwidthを合わせて記載すると、画像の大きさを変更できるようになります。
リンクを表示するタグ
・<a></a>
リンクを表示するためのタグです。
<a href=”https://●●●●.jp/” target=”_blank”>ホームページに掲載する文章</a>と記述すると、別ウィンドウで立ち上げることができます。
ボタンを表示させるタグ
・<button></button>
ボタンを表示させる際は、このタグを使用します。
「お気に入りに追加する」ボタンもこのタグで追加できますが、Internet Explorerでしか動作しないので注意が必要です。
フレームを表示させるタグ
・<iframe></iframe>
ホームページ内にフレームを作り、その中に別のページを表示させる場合に使われます。
サイドバーを作る際にも役立つタグとなっています。
スクロールさせるタグ
・<marquee></marquee>
文字をスクロールさせることができるタグです。
このタグを使うと装飾はできますが、安っぽいイメージになってしまう可能性もあります。
そのため、あえて使う必要はないと考える制作者も少なくありません。
枠を表示するタグ
・<table></table>、<tr></tr>、<td></td>
この3つのタグを一緒に使うと、枠を表示できます。
ホームページのデザイン性を高められるタグなので、覚えておいて損はないでしょう。
範囲指定をするタグ
・<div></div>
divタグは非常に万能で、様々な場面で使われています。
例えば、<div align=”right”></div>は文章を画面の右寄りに表示させることができ、<div style=”padding:20px”></div>は上下左右に空白を入れられます。
・<span></span>
このタグで囲うと様々な効果を与えられます。
<span style=”color:red; font-weight:bold; background-color:yellow;”>ホームページに掲載する文章</span>のようにすると、黄色のハイライトを入れることが可能です。
まとめ
HTMLを使ってホームページを制作する際、タグを覚える必要があります。
まずは基本的なものを覚えておけば問題ないでしょう。
そこから応用するためのポイントを身に付けていけば、効果的なホームページを製作できるようになっていきます。
HTMLを使ったホームページ制作を考えているのであれば、今回ご紹介した方法やタグを参考にしながら取り組んでみてください。
