HTMLはホームページを作成するマークアップ言語
HTMLはホームページを作成するためのマークアップ言語です。ホームページを表示する際には、HTMLファイルをWebブラウザが解釈して、テキスト、画像、リンクなどのさまざまな要素が組み合わされたページを表示します。
HTMLはホームページの構造を定義し、内容を表示するのに使います。一方、ホームページのレイアウトやデザインを調整するにはCSSが利用されます。
この記事では、HTMLを書いてホームページを作成したい方のために、HTML文書の基本構造や、実際のホームページの作成方法、CSSの概要などについて解説していきます。
HTMLとは何か
HTMLは「HyperText Markup Language」の略で、Webページの基礎となるマークアップ言語であり、インターネット上のほとんどのホームページで使用されています。
HTMLは、テキストや画像などを含む文書の構成要素に意味を付け、文書を構造化するために用いられます。
例えば、<h>タグを使うと、その部分が見出しであること、<p>タグを使うことで、その部分が段落であることを示します。これにより、ホームページの構造やレイアウトを設計することが可能です。
HTMLを学ぶメリットとは
近年ホームページ作成ソフトウェアや、ワードプレスなどのCMSツールなどの普及により、HTMLを直接書かなくてもホームページを作成することが可能になりました。しかし、これらのツールを使うことで作成者が意識していなくても、HTMLが使用されています。
そのため、ホームページを作成する際、HTMLの知識を持っていると、自身のアイデアをより自由に表現でき、Webページ作成の幅が広がります。
ホームページ作成ツールに頼るだけでなく、HTMLの知識を併せ持つことで、より柔軟にホームページを作成したり、問題が発生した場合の対処をしやすくなったりするでしょう。
HTMLの基礎知識
HTMLでホームページを作成するにあたって、まずはHTMLの基礎知識を学びましょう。HTMLの基本的な構造や、さまざまなタグについて解説します。
HTMLの基本的な構造
HTMLは、一定の構造に基づいて記述されます。以下に、基本的な構造を持つHTMLコードを示します。まずは、HTML文書の土台となる要素を解説します。
HTML文書内では、「<>」で囲われた「タグ」を使って、文章をマークアップ（意味付け）していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
<a href="リンク先のURL">リンク文字列</a>
</body>
</html>■<!DOCTYPE html> 使用するHTMLのバージョンを宣言するためのものです。<!DOCTYPE html>と記載することで、現在主流となっているHTML5を使用することを宣言できます。
■<html>~</html> <html>タグはHTML文書の始まりです。上記のコードでは<html lang="ja">となっており、lang="ja"の部分でこのHTML文書で使われる言語が日本語であることも同時に示しています。
</html>は<html>と対応する閉じタグで、ここでHTMLの記述が終わることを意味しています。
■<head>~</head> <head>タグ内はHTMLの設定を行う場所であり、文字コードの設定やタイトルの設定などが行われます。
■<body>~</body> <body>タグ内は、実際に表示されるコンテンツが記述されます。ホームページを作成する上でメインとなる部分と言えます。例えば、見出しや段落、画像などの要素が<body>タグの中に記述され、Webブラウザ上で表示されます。
これらの要素は、HTML文書の基本となるものです。上記のコードをテンプレートにして、<head>タグ内の情報や<body>タグ内のコンテンツを記載していくのもよいでしょう。
さまざまなHTMLタグ
HTMLでは、他にも多くのタグを使ってWebページの構造とコンテンツをマークアップします。よく使う代表的なタグをいくつか説明します。
■<h>タグ <h>タグは見出しを定義します。実際には「h」の後ろに数字を付けて<h1>から<h6>という記述で使われ、数値が小さいほど見出しの重要度が高くなります。
■<p>タグ <p>タグは段落を定義し、<p>～</p>で囲われた部分は1つの区切りを持つ文章のまとまりを意味します。
■<br>タグ <br>タグは改行を意味します。記述することで文章を途中で区切って、次の行の頭から続きの文章が続きます。<br>タグには閉じタグはなく、<br>単体で改行を意味します。
■<img>タグ <img>タグは、ホームページ内に画像を表示するためのタグです。src属性に画像のURLを指定します。<img>タグには、閉じタグはありません。
■<a>タグ <a>はリンクを定義し、href属性にリンク先のURLを指定します。これを使うことで、ブラウザ上で文字列をクリックすると別のページへ移動する「ハイパーリンク」を実装できます。
■<table>タグ <table>タグは、表形式のレイアウトであるテーブルを定義します。<table>～</table>内に、行を意味する
HTMLでホームページを作成する手順
それでは、HTMLで実際にホームページを作成する方法を解説します。順を追って1つずつ行っていけば、思っていたより簡単にホームページが作成できることが分かるでしょう。
必要なツールを準備する
HTMLでホームページを作成するためには、HTMLを書くためのテキストエディタが必要です。
Windows標準アプリの「メモ帳」でも作成可能ですが、コードが見やすい色変更機能やエラー表示を持つテキストエディタを使用すると、より効率的にHTMLを作成できます。
例えば、HTML編集でよく使われるテキストエディタには、サクラエディタやTeraPad、Notepad++、Visual Studio Codeなどがあります。
また、HTMLの表示確認にはWebブラウザが必要です。作成したHTMLファイルの表示とコーディングの結果確認に使用します。
代表的なものにMicrosoft Edge、Google Chrome、Mozilla Firefox、Safariなどがあります。ブラウザにより表示が違う場合もあるため、できるだけ多くのブラウザで確認できることが望ましいでしょう。
HTMLファイルを作成する
実際にHTMLファイルを作成してみましょう。
まずはテキストエディタを開いて、「HTMLの基本的な構造」で示したHTMLコードをコピーして貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
<a href="リンク先のURL">リンク文字列</a>
</body>
</html>次に、自分が作りたいホームページの内容を編集していきます。例えば、大見出しの文章の後に、中見出しと文章が続くページを作成する場合は、<body>～</body>内に以下のように書きます。
<body>
<h1>大見出し</h1>
<p>段落</p>
<h2>中見出し</h2>
<p>段落</p>
</body>HTMLの記述が終わったら、ファイルを保存します。ファイル名は、例えば「sample.html」のように「（半角英数字の名前）.html」として保存します。これでHTMLファイルが作成されます。
ブラウザで表示を確認する
HTMLファイルを作成したら、ブラウザで表示を確認しましょう。 作成したHTMLファイルをダブルクリックすると、既定のブラウザが起動し、HTMLファイルが表示されます。
表示されたページには、記述した大見出しと中身見出しの文章が表示されているでしょう。まだ文字だけでシンプルな表示ですが、ここからさらにHTMLを追記して、自分のホームページのコンテンツを充実させていくことができます。
このように、HTMLを記述してブラウザで表示を確認することで、作業の結果を確認しながらホームページを作成していきます。
HTMLファイルをアップロードする
HTMLファイルを作成したら、次はインターネット上に公開します。そのためには、作成したHTMLファイルを、サーバにアップロードする必要があります。
一般的に、サーバはレンタルサーバを借りて利用します。レンタルサーバは、インターネット上にファイルを置いておくための場所です。
レンタルサーバは、作成するホームページの規模にもよりますが、個人向けの小規模なサイトであれば、まずは低価格のプランでも十分でしょう。レンタルサーバ会社によっては申し込み前の試用期間もあるので確認してみてください。
サーバをレンタルしたら、FTPソフトを使ってHTMLファイルをアップロードします。
FTPソフトは、ファイルをサーバに転送するためのソフトウェアです。FTPソフトにはさまざまな種類がありますが、広く使用されているものとして、Windows用のFFFTP、Win・Macどちらでも使えるFileZillaなどがあります。
サーバにファイルをアップロードしたら、ホームページを表示してみましょう。ホームページのURLは、レンタルしたサーバの管理画面で確認できます。
ブラウザにアップロードしたHTMLファイルの内容が正しく表示され、問題がなければ作業は完了です。
HTMLでホームページを作成する際のポイント
ここでは、HTMLでホームページを作成するときのコツを説明します。これらを意識することで、よりスムーズにホームページ作成を進められるでしょう。
作りたいホームページを明確にする
HTMLでホームページを作成する際には、作成するホームページの目的を明確にすることが大切です。 個人向けの情報発信サイトなのか、ビジネス向けで顧客とのやり取りを行うのかなどによって、必要とされる機能やデザインが大きく異なるためです。
個人向けサイトではブログやポートフォリオの掲載が主な機能となり、ビジネス向けサイトであれば、商品・サービスの説明や問い合わせフォームなどの機能が必要でしょう。
このように、あらかじめホームページのコンセプトを明確に設定しておくことで、必須の機能やデザインを見落とすことなく、効果的にホームページを構築することができます。
HTMLタグを正しく記述する
HTMLでホームページを作成する際には、HTMLタグを正しく記述することが重要です。 単純な誤記だけでなく、タグの入れ子構造の順序や、開始タグと閉じタグの対応などが誤っていると、思った通りに表示されません。
しかし、すべてのタグの使い方を暗記しておく必要はありません。タグの記述方法については、インターネット上で多く情報を得られますし、記述サンプルも見つかるでしょう。
また、タグの色分け表示や入力時の自動補完、記述ミスを知らせる機能などがあるテキストエディタを利用することで、効率的に正しいタグを記述することができます。
CSSでHTMLのレイアウトを整える
CSSは、HTMLで書かれたコンテンツのスタイルやデザインを制御するための言語で、「HTML/CSS」とHTMLとセットで説明されることも多いです。
CSSを使うことで、HTMLで作成したページの各要素を自由に配置したり、装飾したりすることができます。
CSSでHTMLのデザインを統一できる
CSSを活用することで、Webサイトのデザインを定義することができます。例えば、文字の大きさや色を変更したり、画像の位置を調整したりすることができます。
文書内の構成要素の意味付けを目的とするHTMLと、表示レイアウトを担当するCSSが分離していることで、デザインの一貫性を保ちながらホームページのコンテンツ編集を行うことができます。
CSSの記述方法の基本
CSSの基本的な構文は、セレクタとプロパティ、値の組み合わせで構成されます。
セレクタは、「p」「h1」「h2」などの、適用したいHTML要素を指定します。「id=”属性名” class=”属性名”」など、指定したidや属性の属性名でも指定できます。
プロパティは、適用するCSSのスタイルの種類を指定します。文字色を指定する「color」や、フォントサイズを指定する「font-size」などがあります。
値は、プロパティで指定される具体的な値です。定義されたキーワードや数値で指定します。
例えば、<head>～</head>内に次のCSSコードを記入することで、文書内のh1要素の文字色を赤にします。
<head>
<style>
h1 {
color: red;
}
</style>
</head>このように、CSSの記述方法を理解しておけば、HTMLの要素に対して自由にデザインを適用することができます。
HTMLでのホームページ作成方法を学んで自由にサイトを作成しよう
ここまでの解説で、HTMLはホームページを構築するための基本的な言語であることが分かりました。紹介したHTMLの作成方法で、1度実際にホームページを作成してみてください。
HTMLを学ぶことで自分のアイデアを自由に表現できるようになり、ホームページ作成の幅が一層広がるでしょう。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
