初心者のためのHTML入門ガイド：HTMLの基礎をホームページを作成しながら勉強しよう
HTMLはウェブサイトの基盤を築く不可欠な標準マークアップ言語です。この記事では、その基礎と魅力を、初心者でも分かりやすく解説します。この記事でご紹介する内容を理解することで、HTMLの役割を理解し、自分だけのホームページをゼロから作成したり、WordPressやWix、Jimdoなどで作成されたブログなどのサイトを思い通りにカスタマイズしたりして楽しむことができます。必要な準備から、HTMLの基本的なタグの使い方、CSSを併用したオリジナルデザインの設定、最終的な公開に至るまでのプロセスを網羅します。
目次
HTMLとは何か？
インターネットの世界は複雑で多様な技術から成り立っていますが、すべてのウェブサイトの基盤となるのがHTMLです。HTML（HyperText Markup Language）は、ウェブページを記述するための標準マークアップ言語であり、インターネットのほぼ全てのページにおいて中心的な役割を果たしています。このセクションでは、HTMLの基本的な概念をご紹介し、ホームページ作成においてそれがどのように機能するのかを掘り下げていきます。
HTMLの基本的な概念
HTMLは、ウェブページの構造を定義するために使用されます。ウェブページは、頭部（head）と身体（body）の2つの主要な部分から成り立ちます。head部分ではページのタイトルやスタイルシート、スクリプトのリンクなどが定義され、body部分では実際にブラウザの画面上に表示されるコンテンツを記述します。HTMLタグを使ってテキスト、画像、リンクなどの要素を正しく配置し、ページの見栄えを整えることができます。
ホームページ作成におけるHTMLの役割
ホームページを作成する際、HTMLは土台となる骨組みを提供します。すべてのホームページはHTMLで書かれており、コンテンツやデザインをブラウザが解釈してユーザーに表示するための指示を含んでいます。HTMLを理解することは、コンテンツを正しく整理し、効果的なウェブサイトを構築するための最初のステップです。デジタル技術への理解が深まってくると、JavaScriptやTypeScriptなどのようなフロントエンド開発に適したWEBプログラミング言語を用いたフレームワーク（Node.jsやReact.jsなど）を用いたサイト開発にも興味が湧いてくることでしょう。しかし、こうしたフレームワークも全てHTMLに関する基礎知識があってはじめて自在に扱うことが出来るようになります。
この記事を使ったアプローチのメリット
- 初心者でも理解しやすい：この記事は、HTMLの基礎から始め、実際にホームページを作成するための具体的な手順を提供します。
- 実践的な学習：読むだけでなく、実際にコードを書きながら学びましょう。これにより、理論だけでなく実践的なスキルが身に付きます。
- SEO最適化：正しいHTML構造は、検索エンジンによるサイトの理解と評価を向上させるため、SEOに不可欠な要素です。この記事では、検索エンジン最適化を意識したHTMLの書き方を学びます。
この記事を通して、あなたは一つのホームページを最初から最後まで自分で作成する経験を積み、将来的により複雑なウェブプロジェクト開発に取り組むための土台を築くことができるでしょう。
準備：必要なツールとリソースの準備
ホームページの作成を始めるにあたり、いくつか準備しておくべきツールとリソースがあります。ここでは、HTMLでのウェブ開発をスムーズにスタートさせるために必要な基本的な項目に焦点を当ててご説明します。
テキストエディタの選定とセットアップ
HTMLコードを書くためには、テキストエディタが不可欠です。メモ帳などでもコードの編集は可能ですが、コーディングを支援してくれる便利な拡張機能などが利用できないためお勧めしません。
市場には様々なエディタが存在しますが、初心者には「Notepad++」や「Sublime Text」が使いやすいと評判です。また、より進んだ機能や将来的に様々なプログラミング言語に挑戦してみたい方は「Visual Studio Code」がおすすめです。選んだテキストエディタをダウンロードして、コンピュータにインストールします。セットアップが完了したら、エディタを開いて、新規ファイルを作成し、拡張子.html（「ファイル名.html」となる）として保存しておきましょう。
ブラウザの使用方法
作成したHTMLファイルは、使用しているパソコンでデフォルトとして設定しているブラウザの画面で表示されます。Google Chrome、Mozilla Firefox、Safariなど、多くのブラウザがデベロッパーツール（Google ChromeであればF12キーを押すとデベロッパーが展開されます）を内蔵しており、そのコンソール上に表示されるログによりHTMLやスタイルシートの変更、バグの発生状況などをリアルタイムで確認することができます。作成したHTMLファイルをブラウザで開いて、あなたのコードの変更が正しく反映されるかテストしましょう。なお、ファイルに変更を加え保存をした後に、ブラウザ側でその変更を確認するにはブラウザ側でファイルをリロードする必要があります。
HTMLを書くための基本的なルールと構文の理解
HTMLを書き始める前に、基本的なルールと構文を理解しておくことが重要です。HTMLはタグと呼ばれる特別なキーワードを使います。これらのタグを使って、テキストや画像などのコンテンツをウェブページ上でどのように表示するかをブラウザに指示します。例えば、<p>タグは段落を表し、<h1>タグはメインの見出しを表します。タグの中身は開始タグと終了タグ（例：<p>…段落の内容…</p>）の間に挟まれていることが必ず必要です。開始タグまたは終了タグのどちらか一方でも欠けていたり、記述が間違っていたりするとブラウザは正しく指示を理解してくれません。これらの基本構造を正しく使いこなすことが、効果的なウェブページを作成するための鍵となるのです。
これらの準備を整えることで、HTMLの世界に一歩踏み出す準備が整います。次のセクションでは、実際にHTMLコードを使ってホームページを構築する方法を見ていきましょう。
基本のHTML構造を理解する
最初のステップとして、HTMLの基礎から学びましょう。以下に、HTMLを用いたウェブページ作成の基本要素を解説します。
DOCTYPE宣言から始める
あらゆるHTMLファイルの最初には、必ずの<!DOCTYPE html>の宣言が必要です。これは文書タイプ宣言であり、ブラウザに現在書かれているファイルがHTML5に準拠していることを伝えます。この宣言を記述することで、互換性のある表示が保証され、ブラウザに文書の解析方法を指示します。
<!DOCTYPE html>
....以下他のコードを書く
html, head, および body タグの概要
DOCTYPE宣言の後には、タグでHTML文書が始まります。主に、<head>タグと<body>タグの二つのセクションに分かれています。
<head>タグ内：ページタイトルやメタ情報、スタイルシートのリンク、外部JavaScriptファイルへのリンクなど、ブラウザにページをどのように解釈するかに関する情報が含まれます。<body>タグ内：実際にユーザーがウェブページで見ることになる全てのコンテンツ（テキスト、画像、ビデオ、フォームなど）がここに置かれます。
<!DOCTYPE html>
<html>
<head>
<!-- head内の情報 -->
</head>
<body>
<!-- body部分のコンテンツ -->
</body>
</html>
上記のHTMLコードはここまで紹介した内容を書き記したものです。タグのレベルごとにインデントを揃えることでコードの可読性が高まり、コードのメンテナンスなどの保守性が高まります。HTMLではインデントを意識しなくても機能しますが、Pythonなどの他の言語ではインデントが重要になることもあります。普段からインデントを意識してコーディングする癖を付けておくことをお勧めします。
メタタグとSEOの基礎
SEO（検索エンジン最適化）では、ウェブページのメタタグが重要な役割を果たします。headセクション内に設置するこれらのタグは、ページの説明、キーワード、作者情報、ページのコンテンツを言語で定義するものなど、さまざまな情報を検索エンジンに提供します。
例えば、メタディスクリプションはページの要約を提供します。キーワードは関連するキーワードを指定します。これらを宣言することにより、検索結果の精度とページのランキングが向上し、SEO対策に大きな貢献をします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="メタディスクリプション">
<meta name="keywords" content="HTML,ウェブ開発,初心者">
<!-- その他のhead情報 -->
</head>
<body>
<!-- body部分のコンテンツ -->
</body>
</html>
主要なHTMLタグとその用途
見出し（h1〜h6タグ）の適切な使用
見出しタグは、h1からh6まであり、ページの構造を定義します。h1タグは通常、ページのメインタイトルに使用され、重要性が最も高いです。h2からh6までの見出しタグは、サブセクションのタイトルや、階層構造のマークアップに使われます。適切な階層使用が、ページを理解しやすくし、SEOにも良い効果を及ぼします。
<h1>ページのメインタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し１</h4>
<h5>小見出し２</h5>
<h6>小見出し３</h6>
段落（pタグ）と改行（brタグ）の使い方
段落タグ（<p>タグ）は、テキストを段落に区分けするために使用されます。Webページ上の読みやすいコンテンツを作成するために欠かせません。一方で、改行タグ（<br>タグ）は、同じ段落内で強制的に改行を挿入する際に使用されますが、過剰に使うことは避け、段落での区切りを優先するべきです。
<p>
段落の内容。
これは改行されません。
</p>
<p>
段落の内容。<br>
これは改行されます。
</p>
リンク（aタグ）と属性
アンカータグ（<a>タグ）は、他のページやサイト、ページ内の特定の部分にリンクを作成します。リンク作成には「href」属性が必須で、リンク先のURLやページ内アンカーを指定します。その他に「target」属性でリンク先を新しいタブで開くように指定することができます。
<!--ページ内で開くリンク-->
<a href="https://hogehoge.hogehoge/リンクURL">リンクテキストはココ</a>
<!--新しいタブで開くリンク-->
<a href="https://hogehoge.hogehoge/リンクURL" target="_blank">リンクテキストはココ</a>
画像（imgタグ）の挿入方法と注意点
画像をWebページに埋め込むには画像タグ（<img>タグ）を使用します。「src」属性で画像のURLを指定し、「alt」属性で画像の説明文を提供します。これにより、画像が表示されない場合やスクリーンリーダーを使用するユーザーに対して、内容を説明することができます。画像のサイズは、ページの読み込み時間に影響するため、最適化が必要です。
<img src="画像リンク" alt="画像の説明" />
ナビゲーションとレイアウトの基本
ホームページを構築する際に重要なのが、使いやすいナビゲーションと整理されたレイアウトです。ここでは、初心者の方でも簡単に取り組める基本的なナビゲーションメニューの作成、コンテンツの整理、そしてレスポンシブデザインについて解説します。
リストを使ったナビゲーションメニューの作成
ナビゲーションメニューはサイト内での移動を容易にするためのものです。HTMLでは、<ul>要素を使ってリスト形式でメニューを作成することができます。以下はその基本的な形です。
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">私たちについて</a></li>
<li><a href="services.html">サービス</a></li>
<li><a href="contact.html">コンタクト</a></li>
</ul>
</nav>
それぞれの<li>要素がメニューの項目になります。リンクを<a>タグで作成し、ユーザーがクリックすれば指定したページに移動します。ページごとにhtmlファイルを用意する必要があります。
ディビジョン（divタグ）を用いたコンテンツの整理
コンテンツを論理的に区別し、CSSでスタイリングしやすくするために、<div>タグを使用します。以下の例は、ヘッダー、メインコンテンツ、フッターという典型的なページ構造を<div>を使って作成する方法です。
<div id="header">ヘッダー内容</div>
<div id="main">メインコンテンツ</div>
<div id="footer">フッター内容</div>
各<div>は異なるIDを割り当て、CSSでのスタイリングを特定しやすくします。
レスポンシブデザインとフレックスボックスの初歩
全てのデバイスで見やすいホームページを設計するためには、レスポンシブデザインが必要です。フレックスボックスは、柔軟性のあるレイアウトを実現するCSSの仕様の一つで、特にレスポンシブデザインに有効です。
<div style="display: flex;">
<div style="flex: 1;">項目1</div>
<div style="flex: 1;">項目2</div>
<div style="flex: 1;">項目3</div>
</div>
このように設定することで、親<div>内の子要素が均等にスペースを分け合って表示されます。これにより、さまざまな画面サイズに対応した柔軟なデザインを実現できます。
ここまでご紹介したHTMLの基礎をHTMLファイルに書き込むと以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="メタディスクリプション">
<meta name="keywords" content="HTML,ウェブ開発,初心者">
<!-- その他のhead情報 -->
</head>
<body>
<!-- body部分のコンテンツ -->
<div id="header">
<!-- ヘッダー内容 -->
<h1>ページタイトル<h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">私たちについて</a></li>
<li><a href="services.html">サービス</a></li>
<li><a href="contact.html">コンタクト</a></li>
</ul>
</nav>
</div>
<div id="main">
<!-- メインコンテンツ -->
<h2>見出し</h2>
<img src="画像リンク" alt="画像の説明" />
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
</div>
<div id="footer">
<!-- フッター内容 -->
</div>
</body>
</html>
HTMLを装飾する：CSSとの組み合わせ
HTMLファイルに見栄えを加えるためには、CSS（Cascading Style Sheets）が不可欠です。CSSを利用すると、Webページのデザインとコンテンツを分離し、保守や改善が容易になります。ここでは、HTMLにCSSを組み合わせて美しいWebページを作成する基本的な方法を学びます。
スタイルシートリンク（linkタグ）の設定
CSSファイルをHTMLに適用させるには、<link>タグを使用して外部のスタイルシートをリンクします。通常、このタグは<head>セクション内に配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="メタディスクリプション">
<meta name="keywords" content="HTML,ウェブ開発,初心者">
<!-- CSSファイルへのリンクを設定する -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- その他のhead情報 -->
</head>
<body>
<!-- body部分のコンテンツは省略 -->
</body>
</html>
上記のコードでは、「styles.css」という名前のCSSファイルを現在のHTMLファイルにリンクしています。相対パスまたは絶対パスを使用してファイルの場所を指定できます。
その他にも以下に例を示すように、headタグ内やbodyタグ内、各種タグ内でもCSSを設定することが出来ますが、保守性の観点から別のファイルで管理するのがおすすめです。
<head>
<!-- その他のhead情報 -->
<!-- CSSの記述 -->
<style>
h1 {
color: blue; /* 青色の文字 */
font-size: 24px; /* 文字サイズ */
}
</style>
</head>
↑これはheadタグ内に直接CSSを書き込む例です。
<body>
<h1>見出し<h1>
<style>
h1 {
color: blue; /* 青色の文字 */
font-size: 24px; /* 文字サイズ */
}
</style>
</body>
↑これはbodyタグ内にCSSを直接書き込む例です。
<div style="color:#ff0000">あああ</div>
<body>
<h1 style="color:blue;font-size:24px;">見出し<h1>
</body>
↑これはタグ内にCSSを直接書き込む例です。
CSSのセレクタとプロパティの基本
CSSでは、セレクタを通じてスタイルを適用したいHTML要素を指定します。そして、セレクタに続けて波括弧{ }の中にプロパティとその値を記述します。セレクタにはタグ名（<html>, <body>, <h1>, <div>, <p>など）で指定したり、タグにクラス名（<html class="hogehoge">, <body class="hogehoge">, <h1 class="hogehoge">, <div class="hogehoge">, <p class="hogehoge">など）を利用します。CSSの記述は、セレクタとしてタグ名を用いる場合は以下の例のように直接h1などから始めます。クラスで指定する場合は.hogehogeのように「.」から書き始めます。
h1 {
text-align: center; /* 中央揃え */
color: blue; /* 青色の文字 */
font-size: 24px; /* 文字サイズ */
}
上の例では、<h1>タグに対して青色の文字と24ピクセルのフォントサイズを設定しています。
色、フォント、レイアウトのカスタマイズ
CSSを使用すると、色、フォント、レイアウトなど、多岐にわたるスタイルのカスタマイズが可能です。具体的な例で見てみましょう。
色
CSSには色を指定するさまざまな方法があります。例えば、色の名前（例：red）、RGB値（例：rgb(255, 0, 0)）、HEXコード（例：#ff0000）などです。
p {
color: #ff0000; /* 赤色の文字 */
}
フォント
フォントの種類やサイズも自由に設定できます。Webセーフフォントを使用することで、異なるデバイスやブラウザでも安定した表示を実現します。
body {
font-family: Arial, sans-serif; /* フォントの種類 */
font-size: 16px; /* フォントサイズ */
}
レイアウト
ボックスモデル、フレックスボックス、グリッドなどのCSSのレイアウト技術を利用して、要素の配置やサイズをコントロールできます。これらの技術を駆使することで、レスポンシブなデザインも実現できます。
.container {
display: flex;
justify-content: space-between;
}
これらの基本的なCSSの概念を理解し、適用することで、HTMLだけでなく見た目にも魅力的なWebページを作成することができます。
テストと公開
ローカルでのページの確認方法
実際にサイトを公開する前に、ローカル環境でページをテストすることが重要です。これは、自分のコンピューター上でHTMLファイルを開くか、HTMLファイルをブラウザにドラッグ&ドロップすることで簡単に行えます。全てのページが意図した通りに表示され、リンクが適切に機能するか等を確認してください。何か意図しない動作が起こった時にはF12キーでデベロッパーツールを開き、コンソールでエラーの原因の特定に取り組んでみてください。
バリデーションツールを使ったHTMLのチェック
HTMLコードには、標準に沿って記述されているかどうかをチェックするために、W3Cのバリデーションサービスなどのバリデーションツールを使用することをお勧めします。この作業により、コードに隠れたエラーや問題を発見し、ウェブページの互換性とアクセシビリティを向上させることができます。なお、高度な拡張機能が利用できる「visual studio code」などのテキストエディタでは、HTMLやCSSのコーディング補助拡張が充実しているため、特別なバリデーションサービスを利用せずとも完成度の高いコーディングが快適に行えます。
Webホスティングとドメインの選び方
実際にホームページをインターネット上に公開するにはサーバー上にHTMLファイルやCSSファイル、画像ファイルなどを格納し、インターネットからアクセス可能な状態にする必要があります。それらを可能にするホスティングサービスを選ぶ際には、価格、信頼性、ユーザーサポート、アップタイム、ストレージサイズなどを考慮する必要があります。
また、サーバー上に格納されたファイルを識別しアクセス可能にするドメインも重要です。例えば、このページであれば「http://miso-note.com」の「miso-note.com」の部分がドメイン名になります。ドメイン名は、覚えやすく、ブランドを反映した名前を選ぶことが重要です。ドメインはドメイン作成サービスを利用して取得します。有名なサービスの例としては「お名前ドットコム」などがありますが、複数の提供元を比較検討し、最適なサービスを選択しましょう。
FTPを使ったファイルのアップロード
サイト公開のためには、作成したHTMLファイルをWebサーバーにアップロードする必要があります。FTP（File Transfer Protocol）クライアントを使用することで、これを容易に行うことができます。FTPクライアントの設定には、ホスティング提供者から提供されるホスト名、ユーザー名、パスワードが必要です。これらの情報を使用してログインし、ファイルをサーバーに転送しましょう。有名なサービスとしては、「さくらサーバー」などがあります。
具体的な公開プロセスはここまでで説明した通りです。しかし、詳細の設定などは利用するサーバーやドメインによって異なります。利用するサービスページで手順を調べたり、カスタマーサポートの支援を受けながら公開に挑戦してみてください。
まとめ：自らのサイトを成長させるための次のステップ
この記事ではHTMLを使った初歩中の初歩のホームページの作成方法を学んできましたが、ウェブサイトを成功させるためには、持続的な成長と改善が不可欠です。最後に、サイトの成長を促進するためのいくつかの重要なステップを見ていきましょう。
定期的な内容の更新の重要性
ユーザーが戻ってくるようにするためには、サイトを常に新鮮で関連性のある情報で更新し続けることが大切です。定期的なブログ投稿、ニュースアップデート、または業界のトレンドに合わせた内容を追加することで、訪問者にとって価値ある資源となります。
SEO対策の拡張
検索エンジン最適化（SEO）は、あなたのサイトが検索結果で見つけやすくなるようにすることです。キーワードの研究、高品質で関連性のあるコンテンツの作成、そしてメタデータの最適化を含むSEOの戦略を常に改善しましょう。これにより、より多くのトラフィックがあなたのサイトに流れるようになります。
Webデザインやコーディングスキルの向上
技術は絶えず進化しており、最新のウェブデザインのトレンドやコーディングのテクニックを学び続けることが重要です。レスポンシブデザイン、アクセシビリティの改善、CSSのグリッドシステムなど、新しいスキルを取り入れてユーザーエクスペリエンスを向上させましょう。
ユーザーからのフィードバックを活かした改善の重要性
最後に、ユーザーの声は非常に有益です。彼らのフィードバックを受け入れ、サイトのユーザビリティやコンテンツを向上させるためにそれを活用することは、ユーザーロイヤリティを構築し、再訪を促すために欠かせないステップです。アンケート、コメントセクション、ソーシャルメディアなどを通じて、ユーザーと積極的にコミュニケーションを取りましょう。
