【サンプルあり】HTMLを使ったホームページの作り方を詳細解説

この記事では、HTML（Hyper Text Markup Language）を使ったホームページの作り方を解説します。

現在のWeb制作の主流はCMS（コンテンツ管理システム）を使う方法であり、ゼロからHTMLをタグ打ちしてホームページを作ることは、あまりありません。

とは言え、1ページだけのペラサイトやブログ更新機能がない簡易的な名刺代わりのホームページなら、CMSの高度な機能は必ずしも必要ないため、HTMLでホームページ制作することも選択肢に入ります。

また、CMSを使っていたとしても、細かいカスタマイズにはHTMLの知識が不可欠です。必要に応じてカスタマイズや特殊な機能を実装できるスキルを身に付ける、という意味で、HTMLでのホームページ構築は一度、経験する価値はあります。

本記事ではHTMLを駆使したホームページ制作に必要な環境準備から、HTMLタグの基本的な使い方、サーバーにファイルをアップロードして公開するまでの一連の流れを解説します。

完成形のサンプルファイルもご用意しました。シンプルな1ページのホームページで、HTML初学者でも比較的、構造を理解しやすい作りになっています。HTMLの基礎や練習用として自由に編集・カスタマイズいただけます。ぜひダウンロードください。

ダウンロード

【前提知識】HTMLとは何か？
- HTMLはWebページの「設計図」
- なぜHTMLは重要なのか？
【必要な準備】ホームページの構築環境を整えよう
【実践】HTMLを記述してホームページを作る手順
まとめ
簡単にホームページを作るならWordPressがおすすめ

【前提知識】HTMLとは何か？

HTMLは、ホームページを作るための基本的なマークアップ言語です。

ホームページを構成する「骨組み」とも言えるもので、テキスト、画像、リンク、表、フォームなどの要素をどのように表示するかをブラウザに指示する役割があります。CSSやJavaScriptといった技術が組み合わさることが多いですが、すべてのホームページの基盤にあるのはこのHTMLなのです。

2024.08.01

2024.08.14

HTMLとは？初心者向けに基本構造をわかりやすく解説

自分でWebサイトを作ってみたいと思ったことはありませんか？そのWebサイトの基礎となるのが「HTML」です。 HTMLを学ぶことで、オリジナルのWebページを作成できるようになります。本稿では、HTMLの基礎知識と基本構造を初心者の方にもわかりやすく解説します。 HTMLと...

HTMLはWebページの「設計図」

HTMLが指示する内容は「どこに何があるのか」という構造情報です。

例えば、見出しは<h>タグ、段落は<p>タグ、リンクは<a>タグを使って指示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの基本構造</title>
</head>
<body>

<!-- 見出しの例 -->
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>

<!-- 段落の例 -->
<p>これは段落です。段落タグを使ってテキストをまとめます。</p>

<!-- リンクの例 -->
<p>こちらは<a href="https://example.com">リンク</a>です。クリックすると他のページに移動します。</p>

</body>
</html>

こうすると、ブラウザは「この部分は見出しとして表示するんだな」「ここはリンクとして機能させればいいのか」 といった具体的な指示を受け取ります。

実際に上記のHTMLをブラウザで見ると、以下のようになります。

HTMLの表示

見出しや段落、リンクが要素として機能していますね。

ポイント！
HTMLでは、ほとんどの要素は開始タグ（開きタグ）と終了タグ（閉じタグ）のペアで構成されています。例えば段落を作る場合、<p>これは段落です。</p> と書きます。<p> は開始タグで、</p> は終了タグです。終了タグで閉じないと、どこまでがその要素なのか、ブラウザ側は判断できないため、ページのレイアウトがうまく機能しません。HTMLの基礎といえる大事な概念です。

なぜHTMLは重要なのか？

現代のWeb制作では、WordPress（ワードプレス）などのCMSが主流になり、直接HTMLを扱わなくてもページが作成できるようになっています。

2023.12.09

2024.08.21

WordPress（ワードプレス）とは？初心者にもわかりやすく解説

WordPressは、世界中で利用されている人気のコンテンツ管理システム（CMS）です。ブログやWebサイトの作成、管理を簡単に行うことができます。「WordPressとはよく耳にするけど、いったい何のことかわからない。」「何のためのツールなの？」そういう方のために「WordPressと...

ただそれでも、HTMLを学ぶ意義は大きいです。

その理由は、HTMLが「Webの基本言語」 だからです。 HTMLはWeb技術の基礎であり、これを理解しておくと、CSSやJavaScriptなど、他のWeb技術を効率的に学ぶ土台ができます。

2024.08.14

2024.08.17

CSSとは？意味・基礎・書き方を初心者向けにわかりやすく解説

Webページをより美しく、そして魅力的にするためには、CSSという技術が欠かせません。 CSSを使うと、文字の色やサイズ、背景画像、レイアウトなど、Webページの見た目を思い通りにカスタマイズすることができます。本稿では、CSSの意味や基礎、具体的な書き方まで、初心者の方にもわかりやす...

2022.01.12

2024.08.01

JavaScriptとは？初心者でもわかる入門解説

JavaScriptは、数あるプログラミング言語の中の一つです。一般的に、動的なWebページやアプリを開発する際に使われてるというイメージがありますが、時代と共に進化していき、今ではJavaScript一つとってもできることは多様です。今回は第一回目として、そもそもJavaScriptと...

例えばHTMLでページの構造を定義した後に、CSSで見た目を整えて、さらにJavaScriptでインタラクションな要素を追加するという流れがありますが、HTMLの知識がないと、これらの技術がどのように連携して動作するのかを体系的に把握できません。

HTMLを知るというのは、単にホームページを作るためだけでなく、Webの仕組みそのものを理解することなのです。

知らなくてもなんとかなる、という側面はありますが、やはりWebを活用してビジネスを展開する以上、HTMLの最低限の知識は持っておいたほうが有利でしょう。例えばページのレイアウトが崩れたり、リンクが正しく機能しなかったりといった小さな問題が発生した際、HTMLを理解していれば、自分で素早く問題を特定して修正できます。

HTMLを知り、自分の手でWebの仕組みを活用できる力を持つことは、後々、大きな財産になるはずです。

【必要な準備】ホームページの構築環境を整えよう

ホームページをHTMLで作成する前に、いくつかの準備が必要です。

特別なソフトウェアや高価なツールを用意する必要はなく、すぐに始められるシンプルな環境で十分です。ここでは、初心者がスムーズにホームページ制作をスタートできるよう、具体的な準備手順を説明します。

1. テキストエディタを用意する

普通のテキストエディタ（Windowsならメモ帳）でも大丈夫ですが、HTMLのタグ打ちを効率化するために、便利な機能を持つエディタを使用することをおすすめします。

一押しは「Visual Studio Code」です。無料で利用でき、コード補完やシンタックスハイライト（コードの色分け）など、使いやすい機能が豊富。Windows、Mac、どちらにも対応しています。

まずは公式のダウンロードページにアクセスして、使用しているOSに対応したファイルをダウンロードしましょう。

Visual Studio Codeのダウンロード

ダウンロード後、インストールして起動します。

デフォルトでは言語が英語になっています。日本語化するには、左メニューの一番下（拡張機能）をクリックして、出てきた検索欄に「japanese」と入力してください。

Visual Studio Codeの拡張機能

日本語化の拡張機能が表示されるので、それをインストールします。すると、以下のように、Visual Studio Codeの言語が日本語になるはずです。

Visual Studio Codeの日本語化完了

ファイルを編集する際は、「ファイル」 > 「ファイルを開く」から、該当のHTMLやCSSファイルを選択すればOKです。

Visual Studio Codeでファイルを開く

2. Webブラウザの準備

次に、作成したHTMLファイルを表示するためのWebブラウザをインストールします。

ほとんどのPCにはブラウザが標準でインストールされていますが（WindowsならMicrosoft Edge、MacならSafari）、複数のブラウザを用意することをおすすめします。なぜなら、同じHTMLでもブラウザによって表示が微妙に異なる場合があるからです。複数ブラウザでのチェックが必要になります。

以下の2つのブラウザは利用者が多いため、最低限、インストールしておきましょう。

Google Chrome
開発者向けのツールが充実しており、コードをすぐに確認・デバッグすることができるため、多くの開発者に支持されています。
https://www.google.com/intl/ja_jp/chrome/

Firefox
こちらも開発者向けツールが豊富で、特にCSSやレイアウトに関するデバッグに強みがあります。
https://www.mozilla.org/ja/firefox/

3. ローカル環境のセットアップ

HTMLの表示を確認する際は、インターネット上のサーバーがなくても問題ありません。ローカル（自分のPC上）で作業を行い、ブラウザで実際のホームページの見た目を確認できます。

まずは、ホームページのファイルを管理するフォルダを作ります。フォルダ名は任意ですが、認識しやすい英数字を付けておくと良いでしょう。

ローカル環境にファイル格納のフォルダを用意

フォルダを作ったら、そこに、以下のファイル・フォルダを作って格納します。

フォルダに各種ファイルを格納

index.html（HTMLファイル）
テキストエディタでホームページの骨組みであるHTMLファイルを作成。ファイル名は必ず「.html」という拡張子を付けて保存。

style.css（CSSファイル）
テキストエディタでHTMLの見た目を調整するCSSファイルを作成。ファイル名は必ず「.css」という拡張子を付けて保存。

script.js（JavaScriptファイル）
テキストエディタでホームページに動的要素を加えるJavascriptファイルを作成。ファイル名は必ず「.js」という拡張子を付けて保存。

imgフォルダ（画像格納場所）
画像ファイルを格納するフォルダを作成。フォルダ名は任意ですが、「img」などわかりやすいものを推奨。

格納後、「index.html」のファイルをダブルクリックして、ブラウザ表示してみましょう。

ブラウザでHTMLファイルの表示を確認

まだ具体的なHTML記述がないので真っ白ですが、ローカル環境でページが表示されるのが確認できるはずです。

【実践】HTMLを記述してホームページを作る手順

ここからは、HTMLの基本構造や役割などを解説しつつ、HTMLでホームページを作る大まかな手順や考え方をお伝えします。

完成形のサンプルファイルもご用意しました。シンプルな1ページのホームページで、HTML初学者でも比較的、構造を理解しやすい作りになっています。HTMLの基礎や練習用として自由に編集・カスタマイズいただけます。ぜひダウンロードください。ここ以降はこの完成形のサンプルファイルをもとに解説していきます。

ダウンロード

なお、HTMLやCSSの細かいタグ全てを本記事でカバーすることはできません。わからないタグが出てきた際は、以下記事を参照するか、Web検索で都度調べていただけると幸いです。

2024.08.01

2024.08.14

HTMLとは？初心者向けに基本構造をわかりやすく解説

2024.08.14

2024.08.17

CSSとは？意味・基礎・書き方を初心者向けにわかりやすく解説

以下のサイトもタグの参考になるのでおすすめです。
お役立ちサイト：TAG index – HTML & CSS Web制作リファレンス

最初は何が何だかわからないかもしれませんが、まずはコードをコピーして実際に記述してみてください。コードの習得には、手を動かして書くこと、そして実際に表示を確認することが不可欠です。その試行錯誤の繰り返しで初めて、HTMLがどういうものかがわかってきます。

HTMLの基本構造

HTMLは大きく、<!DOCTYPE html> 宣言、headヘッドセクション、bodyボディセクション、これら3つで構成されています。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ホームページのタイトル</title>
<meta name="description" content="ホームページの説明文（ディスクリプション）を簡潔に記述">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>

<body>
<!-- ユーザーが見るホームページの内容はここに記述 -->
</body>

</html>

<!DOCTYPE html> 宣言
ブラウザがHTMLのバージョンを正しく認識し、ページを正確に表示できるようにします。HTMLの一番上に記述します。

headヘッドセクション
文字コードやページのtitleタグ、CSSファイルへのリンクなどを記述する部分です。検索エンジンやブラウザがページをどのように表示すべきかを決定するために使われるもので、この部分の内容は、ブラウザの画面には直接表示されません。

bodyボディセクション
実際にブラウザの画面に表示されるコンテンツが含まれる部分です。テキスト、画像、リンク、ボタンなどがここに配置され、ページの見た目や構造が決まります。

これらの各パーツを順々に記述して、HTMLを形成していくのが基本的な考え方です。

ステップ1. <!DOCTYPE html> 宣言～ headセクションを記述する

まずは、HTML上部の<!DOCTYPE html> 宣言と、headセクションを記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLサンプルサイト</title>
<meta name="description" content="このホームページは、HTMLとCSS、Javascriptを使ったサンプルサイトです。基本的なHTMLタグ打ちの練習用として作成されました。">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>

それぞれの記述の意味を補足します。

<!DOCTYPE html>
これは「HTML5で書かれています」という宣言です。必ず一番上に書きます。html5と書く必要はなく、この宣言だけでブラウザはHTML5で書かれた文書だと認識します。

<html lang=”ja”>
ヘッドセクション、ボディセクション含む、HTML全体を囲むための記述。lang=”ja”はページの言語が日本語であることを指定しています。

<meta charset=”UTF-8″>
文字コードをUTF-8として指定。UTF-8は日本語を含む多くの言語に対応しており、文字化けを防げます。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
レスポンシブWebデザインに対応するための記述。デバイスに応じてサイズを自動調整するようになります。

<title>
ブラウザのタブに表示されるページのタイトルを指定する記述。検索エンジンの検索結果ページに表示されるタイトルにもなり、SEOへの影響度が大きいです。

<meta name=”description”>
ホームページの説明文です。検索エンジンの検索結果ページにも表示され、ホームページの内容を簡潔に伝える役割があります。

<link rel=”stylesheet” href=”style.css”>
ホームページの見た目（フォントサイズやレイアウト、色など）を調整するCSSファイル（style.css）へのリンク。同じフォルダ内のCSSファイルをこれで呼び出しています。

<link rel=”icon” href=”img/favicon.png” type=”image/x-icon”>
ページのタブやブックマークに表示される小さなアイコン（ファビコン）を設定する記述。「img」フォルダ内の「favicon.png」の画像をこれで呼び出しています。

ステップ2. bodyセクションを記述する

次に、ブラウザで実際に表示される内容を記述するbodyセクションについて説明します。

bodyセクションは、HTMLページ全体の「中身」を表す部分です。headセクションがページの設定や外部ファイルの読み込みなどを行うのに対して、bodyセクションは、ユーザーが目にするテキストや画像、リンク、ボタンなどを記述していきます。

ブロック要素とインライン要素

HTMLでは、ブロック要素とインライン要素があり、bodyセクションでは、これらを組み合わせてレイアウトを構築します。

ブロック要素とインライン要素

例えば、段落や見出し、セクションごとのコンテンツはブロック要素で定義され、リンクやボタンなどの小さな要素はインライン要素で定義されます。

項目	ブロック要素	インライン要素
表示形式	一つのブロック全体を占有し、次の要素は新しい行に配置される	コンテンツの一部として表示され、他の要素と同じ行に並ぶ
幅の扱い	デフォルトで親要素の幅いっぱいに広がる	コンテンツの幅だけに収まる
高さの扱い	高さは要素内の内容に応じて変わる	高さは内容に応じて最小限にしか変わらない
レイアウト	他の要素とは明確に分かれた大きなエリアを作る	テキストの中に配置される小さな要素として扱われる
よく使う要素	<div>, <header>, <footer>, <section>, <p>, <h1>～<h6>	<a>, <span>, <strong>, <em>, <img>
使用場面	大きなコンテンツの区切りやレイアウト作成時	リンクや強調表示、画像の埋め込みなど

<header>や<section>などのブロック要素は、ページ全体を構造化するために使われます。新しいブロックが始まると、その前後にある要素とは独立した配置になり、レイアウトが明確に区切られます。

一方、インライン要素は、テキスト内に含まれる小さなパーツに使われる要素で、他のテキストや要素と同じ行に並びます。リンクを作る<a>や、テキストの一部にスタイルを適用する<span>がよく使われます。

ブロック要素の階層構造

また、ブロック要素の中にブロック要素を配置することもできます。

<section>内に<div>を入れたり、<header>の中に<nav>を配置したりすることも可能。ページの特定の部分をさらに小さなパーツに分けることができるわけです。

例えば、<section>で大きなコンテンツの区切りを作り、その中でさらに<div>を使って細かくコンテンツを整理できます。

<!-- お悩みセクション -->
<section id="problems">
<h2>こんなお悩みはありませんか？</h2>
<div class="problem-grid">
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
</div>
</section>

この例では、<section>内に<div>を使用して、3つのブロック（よくある悩み）を分けています。それぞれのブロックを別々の<div>に入れることで、デザインやレイアウトを調整しやすくなるのです。

bodyセクション記述のポイント

bodyセクションの記述は難しく思えるかもしれませんが、シンプルにこう考えてください。

大きな要素の塊（ブロック要素）を上から下に順々に配置していく

例えば、一般的な企業のホームページは、以下のような3つの大きな要素の塊に分解できます。

- ヘッダー（ロゴやナビゲーション）
- セクションごとのコンテンツ（ファーストビュー、特徴、料金、お客様の声など）
- フッター（連絡先や著作権情報）

これらの要素を、<hearder>や<footer>、<section>といったブロック要素で一つひとつ囲ってグループ化し、上から下に順々に積み重ねていくイメージです。そして必要に応じて、ブロック要素の中にさらにブロック要素を入れ込んだり、インライン要素を組み合わせたりして、ホームページ全体を構築していきます。

<body>

<!-- ロゴとヘッダーメニュー -->
<header>
<div id="logo">
<img src="img/logo.png" alt="HTMLサンプルサイト">
</div>
<button class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<nav>
<ul id="menu">
<li><a href="#features">特徴</a></li>
<li><a href="#pricing">料金</a></li>
<li><a href="#testimonials">お客様の声</a></li>
<li><a href="#flow">ご利用の流れ</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#company-profile">会社概要</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>

<!-- ファーストビュー -->
<section id="first-view">
<h1>ここにキャッチコピーが入ります</h1>
<p>キャッチコピーを補足するサブキャッチコピーが入ります。</p>
<a href="#contact" class="fv-button">お問い合わせはこちら</a>
</section>

<!-- お悩みセクション -->
<section id="problems">
<h2>こんなお悩みはありませんか？</h2>
<div class="problem-grid">
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
<div class="problem-item">
<img src="img/check.png" alt="チェックアイコン" class="problem-image">
<p>顧客の抱えるよくある課題、悩みのテキストが入ります。</p>
</div>
</div>
</section>

/* ... */

</body>

このように、各要素をブロックで区切って順に配置していくことで、整理されたWebページを作成できます。

ステップ3. CSSでホームページの見た目を整える

HTMLを書き終わったら、CSSファイル（style.css）を編集して、ホームページのデザインやレイアウトを調整しましょう。

2024.08.14

2024.08.17

CSSとは？意味・基礎・書き方を初心者向けにわかりやすく解説

ここでは、完成形のサンプルHTMLのファーストビューの箇所を例に解説します。

<!-- ファーストビュー -->
<section id="first-view">
<h1>ここにキャッチコピーが入ります</h1>
<p>キャッチコピーを補足するサブキャッチコピーが入ります。</p>
<a href="#contact" class="fv-button">お問い合わせはこちら</a>
</section>

これはホームページのファーストビューを表すセクションです。

<section>のブロック要素に「id=”first-view”」が、リンク要素に「class=”fv-button”」がそれぞれ付与されています。CSSでは、ここで指定したidとclassそれぞれに対して、装飾のスタイルを適用していきます。

ファーストビュー全体のCSS設定

ファーストビュー全体

/* ファーストビュー */
#first-view {
background-color: #005f99;
color: #fff;
text-align: center;
padding: 0 20px;
height: 100vh; /* 画面の高さ全体に設定 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

- 背景色：background-color: #005f99;でファーストビューの背景色を青に設定。
- テキストカラー：color: #fff;で文字の色を白に設定。
- 中央揃え：text-align: center;でテキストを中央揃え。
- 高さ: height：100vh;で画面全体の高さをファーストビューに設定（ページを開いた際に一画面に収まる）。
- フレックスボックス：display: flex;、flex-direction: column;、justify-content: center;、align-items: center;で、子要素を垂直方向に中央揃えし、上下の余白も中央に配置しています。

「id=”first-view”」が付与されたブロック要素全体に適用させるCSSです。「height: 100vh;」でフルスクリーンのファーストビューを構築しています。CSSの中で、id名の前には必ずシャープ（#）をつけます。

ファーストビュー内の<h1>（大見出し）のCSS設定

ファーストビューのH1

#first-view h1 {
font-size: 4rem;
margin-bottom: 1rem;
}

- フォントサイズ：font-size: 4rem;で見出しを大きく設定（1remは基準フォントサイズの約16pxに相当します）。
- 下余白：margin-bottom：1rem;で下に余白を設定し、次の要素とスペースを確保。

「id=”first-view”」が付与されたブロック要素の中にある、<h1>要素だけに適用させるCSSです。半角スペースを使って、親要素（#first-view）と子要素（h1）を指定しています。

ファーストビュー内の<p>（段落）のCSS設定

ファーストビューのp（段落）

#first-view p {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}

- フォントサイズ：font-size: 1.5rem;で段落の文字サイズを設定。
- 下余白：margin-bottom: 1.5rem;で次の要素（ボタン）との間に余白を設けています。

「id=”first-view”」が付与されたブロック要素の中にある、<p>要素だけに適用させるCSSです。こちらも上と同様、半角スペースを使って、親要素（#first-view）と子要素（p）を指定しています。

モバイルデバイス向けのCSS設定

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
#first-view h1 {
font-size: 2.5rem; /* 小さく調整 */
}
#first-view p {
font-size: 1.2rem; /* 小さく調整 */
}
}

- #first-view h1：768px以下では見出し1のフォントサイズを2.5remに設定。
- #first-view p：768px以下では段落のフォントサイズを1.2remに設定。

画面の幅が768px以下のモバイルデバイス向けにスタイルを指定しています。メディアクエリと呼ばれる技術で、異なる画面サイズでの見た目を細かく調整可能です。

2019.04.21

2020.09.07

【初心者向け】メディアクエリを活用しモバイルファーストなレスポンシブWebデザインを構築する方法

昨今はスマホの普及により、ウェブサイトを制作する上でもモバイルファーストの風潮がどんどん強くなっています。スマホ環境で見られることを想定して制作されたウェブサイトでない限り、PC用のウェブサイトをスマホ用やタブレット用の表示に切り替える必要があります。それがレスポンシブWebデザインと呼ばれる仕様で...

ちなみに、レスポンシブWebデザインへの対応自体は、HTMLのheadセクションに以下を記述した時点で完了します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ただこれだけでは、デバイスごとのフォントサイズなどは変わらないので、メディアクエリで細かく制御する必要があるわけです。

ボタンのCSS設定

ファーストビューのボタン要素

.fv-button {
background-color: #32CD32;
color: #fff;
padding: 10px 80px;
margin-top: 30px;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
}

- 背景色：background-color: #32CD32;でボタンの背景色をライトグリーンに設定。
- テキスト色：color: #fff;で文字色を白に設定。
- 内側の余白：padding: 10px 80px;で、ボタンの上下左右に余白を設定。
- フォントサイズ：font-size: 1rem;で文字サイズを指定。
- 角丸： border-radius: 5px;でボタンの角を丸くします。
- テキストデコレーション：text-decoration: none;で、リンクの下線を削除（ボタンなので）。

「class=”fv-button”」が付与された要素に適用させるCSSです。CSSの中で、class名の前には必ず.（ピリオド）をつけます。

ボタンのホバーアクションのCSS設定

.fv-button:hover {
background-color: #2E8B57;
}

マウスホバー時にボタンの背景色を濃い緑（#2E8B57）に変更するCSSです。ユーザーがボタンにカーソルを合わせた際に色が変わるホバーアクションが発生します。

なお、idはページ内で一意である必要があり、同じidは一つのページで一度しか使用できません。つまり、idは特定の要素を一つだけ識別するために使われます。例えば、ページ内で特定のセクション（ファーストビューやフッターなど）に特定のidを与えることで、その要素を一意に区別できます。

一方、classは同じものを複数回使用できます。複数の要素に対して同じclassを付けることで、同じスタイルや機能を一括で適用することが可能です。例えば、複数のボタンに同じスタイルを適用したい場合、すべてのボタンに同じclassを付けることができます。

<!-- idの例 -->
<section id="first-view">
<h1>ここにキャッチコピーが入ります</h1>
</section>

<!-- classの例 -->
<button class="btn">クリック</button>
<button class="btn">クリック</button>

このように、id=”first-view”は一つのページ内で唯一の要素にしか使えませんが、class=”btn”は複数の要素に繰り返し使うことができます。

ステップ4. JavaScriptでインタラクション要素を加える

JavaScriptは、ホームページに動的な機能を追加するためのプログラミング言語です。

2022.01.12

2024.08.01

JavaScriptとは？初心者でもわかる入門解説

HTMLやCSSが「構造」や「デザイン」を定義するのに対して、JavaScriptはインタラクティブな動作を加えます。例えば、ユーザーがボタンをクリックしたときにメニューが開閉したり、フォームの入力内容をリアルタイムでチェックすることが可能です。

簡易的なホームページでは、JavaScriptを多用しない場合もありますが、モバイルデバイス向けのハンバーガーメニュー※の動作を制御する際には重要な技術です。

※ハンバーガーメニューとは、3本の水平線で表現されるアイコンのことです。アイコンをタップやクリックすると、隠れているメニューが表示され、再度クリックすると非表示になります。コンパクトなデザインで画面スペースを節約できるため、特にモバイル端末でよく利用されています。

以下では、完成形のサンプルHTMLを例にして説明します。

HTMLにJavaScriptファイルへのリンクを追加

まず、JavaScriptファイルをHTMLに読み込ませるために、HTMLの</body>タグの直前に次のコードを追加してください。

<script src="script.js"></script>

</body>タグの直前にJavaScriptファイルへのリンクを記述

CSSの設定について

次に、JavaScriptと関連しているCSSの設定を見ていきましょう。

/* ハンバーガーメニューのスタイル */
.hamburger {
font-size: 0;
position: absolute; /* 絶対位置で配置 */
top: 10px; /* ヘッダーの上からの距離を調整 */
right: 50px; /* 右端からの距離を調整 */
width: 40px;
height: 20px;
display: none; /* デフォルトでは非表示 */
cursor: pointer;
border: none;
background: none;
}

初期状態（PC表示）では、hamburgerクラスの要素はdisplay: none;で非表示にしています。これは、PC表示時には横並びの通常のナビゲーションメニューを使用するため、ハンバーガーメニューは不要だからです。

次に、モバイルデバイス向けの設定です。メディアクエリを使って、画面幅が768px以下のときにCSSが適用されるようにします。

@media (max-width: 768px) {
.hamburger {
display: block;
}

header nav ul {
display: none;
flex-direction: column;
position: absolute;
right: 0;
background-color: #444;
width: 100%;
}

header nav ul.active {
display: flex;
padding-top: 20px;
padding-bottom: 20px;
}
}

それぞれの記述を詳細に解説します。

.hamburger {
display: block;
}

ハンバーガーメニューのボタンを表示するための記述です。モバイル表示時に、hamburgerクラスがdisplay: block;に変更され、ハンバーガーメニューのボタンが表示されます。

ハンバーガーメニュー

header nav ul {
display: none;
flex-direction: column;
position: absolute;
right: 0;
background-color: #444;
width: 100%;
}

header nav ul.active {
display: flex;
padding-top: 20px;
padding-bottom: 20px;
}

こちらは、ナビゲーションメニューを表示するための記述です。nav ulは最初display: none;で非表示ですが、activeクラスが追加されるとdisplay: flex;に変わり、メニューが表示されます。

ハンバーガーメニュークリックで表示されるメニュー

JavaScriptでやりたいのは、このactiveクラスの追加・削除をリアルタイムで動的にコントロールすることです。

JavaScriptの実装

ここまではCSSの設定でした。次に、JavaScriptでハンバーガーメニューの開閉を制御するコードを実装します。

編集対象はJavaScriptファイル（script.js）です。

document.addEventListener("DOMContentLoaded", function () {
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');
const menuItems = document.querySelectorAll('nav ul li a');

// ハンバーガーメニューの開閉
hamburger.addEventListener('click', function () {
menu.classList.toggle('active');
});

// リンクをクリックした後にメニューを閉じる
menuItems.forEach(item => {
item.addEventListener('click', function () {
menu.classList.remove('active');
});
});
});

これにより、メニューの表示・非表示がクリックに応じて切り替わります。記述内容について補足します。

document.addEventListener("DOMContentLoaded", function () {
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');
const menuItems = document.querySelectorAll('nav ul li a');

DOMContentLoadedにより、ページのすべてのリソース（画像やスタイルシートなど）が完全に読み込まれる前に、HTMLの構造（DOM）が完全に構築された時点でスクリプトが実行されます。これにより、ページの内容が操作可能になった時点でJavaScriptが動作するようになります。

// ハンバーガーメニューの開閉
hamburger.addEventListener('click', function () {
menu.classList.toggle('active');
});

ハンバーガーメニューのボタンをクリックすると、menu（ナビゲーションメニュー）のクラスリストにactiveクラスがトグル（2つの状態を交互に切り替える動作）されます。クラスが存在すれば削除し、存在しなければ追加する動作を実現しています。ハンバーガーメニューの開閉を制御する記述です。

menuItems.forEach(item => {
item.addEventListener('click', function () {
menu.classList.remove('active');
});
});
});

ハンバーガーメニュークリック時の動作に関する記述です。ナビゲーションメニュー内のリンクをクリックすると、menuからactiveクラスが削除され、メニューが閉じるように設定されています。

activeクラスの操作について

ちなみにactiveクラスの付与・削除は、HTMLファイルそのものを書き換えているわけではなく、ブラウザが表示しているDOM（Document Object Model）に対して一時的にクラスを操作している形です。

DOMは、理解するのがなかなか難しい概念ではありますが・・・HTMLファイルの内容を「ツリー構造」に変換して、JavaScriptで操作できるようにした「仮想のオブジェクト」とご理解ください。

2021.05.28

2022.08.15

【JavaScriptの基本】DOMの仕組みと構造

JavaScriptを使ってWebページに動きを付けるには、DOMの操作が必要です。しかし、DOMは直感的に理解しにくく、説明を読んでもイマイチ分からないことが良くあります。 DOM操作には多くの方法がありますが、その前にDOMの仕組みや構造を知ることが大切です。そこで今回は、初学者の...

DOM上で動的にクラスを操作することにより、ページを再読み込みすることなくリアルタイムにメニューの表示・非表示を切り替えることが可能になります。

JavaScriptは最初は少し難しく感じるかもしれません。当サイトではJavaScriptに関する知識を網羅したコンテンツを用意していますので、ぜひそちらもチェックしてみてください。

2022.06.08

2023.09.08

JavaScript大全集

Javascriptの基本から応用まで幅広く網羅。プログラミング初心者でもJavaScriptが習得できます。 JavaScriptを学ぶ前にはじめてのJavaScript プログラムを実行する準備 JavaScriptの構造 ...

ステップ5. サーバーにファイルをアップロード

ローカル環境でチェックして、見た目や挙動に問題がなければ、ホームページのファイル一式をサーバーにアップロードしましょう。この作業は、独自ドメインの取得とサーバーの契約が済んでいることが前提です。まだの場合は、以下の記事を参考に、ドメイン取得とサーバー契約を進めてください。

2017.01.01

2022.08.08

ドメインとは？基礎知識と選び方、運用方法を解説

ホームページやブログを作成するために最初に必要なのがドメイン。ここではドメインとは何か？からドメインの基礎知識、選び方、運用方法をわかりやすく解説いたします。ドメインとはドメイン（domain）とは、インターネット上の住所のようなものです。ホームページのURLの一部のことを指しま...

2017.01.01

2024.08.21

サーバーとは

まず、「サーバーとは何か」「サーバーの役割は何か」についてから説明します。ドメインについては住所のようなもの、と説明した例えに合わせますと、「サーバー」はサイトやブログという家を建てるために必要な「土地」のようなものです。ホームページやネットショップと...

ドメインとサーバーの用意ができたら、FTPソフトを使って、ファイルをサーバーにアップロードします。お使いのOSに対応したFTPソフトをダウンロードしてインストールしましょう。FileZillaはユーザー数が多く無料、Windows・Macのどちらでも使えるのでおすすめです。

以下の記事で、ダウンロード方法からセットアップ、アップロードの手順を解説していますので、よければ参考にしてください。

2024.09.05

無料FTPソフト「FileZilla」の使い方｜ファイル転送の一時停止、複数サーバー同時接続も可能。

Windows・Macのどちらでも使えるFTPソフト「FileZilla」。世界中にユーザーがいる人気の無料ソフトです。当記事でその特徴と基本的な使い方をご紹介いたします。 FileZillaとは FileZillaとは、フリーで使える人気のFTPソフトです。2001年にリリースされてか...

使用するFTPソフトによって多少の差異はありますが、基本的には、ホームページを構成するファイル一式をドラッグ&ドロップすれば簡単にサーバーにアップロードできます。

アップロードするファイルは、HTML、CSS、JavaScriptファイル、画像フォルダの一式が必要です。

アップロードするファイル

アップロードする場所は、通常は「public_html」フォルダ（ホームページの公開フォルダ）です。

public_htmlにアップロード

アップロードが完了したら、URLを叩いてブラウザでサイトを確認しましょう。例えば「http://example.com」のようにアクセスして、ホームページが正しく表示されるかチェックします。

まとめ

ここまで、HTMLを使用したホームページの作り方を解説し、実際の構築プロセスを具体的に説明してきました。

HTMLをベースに、CSSで見た目を整え、JavaScriptで動きを加えるという、ホームページを作成するための基礎を学ぶことができたかと思います。

HTMLやCSSの知識や技術は、試行錯誤を繰り返す中で自然と身に付いていくものです。おすすめの方法は、サンプルファイルを実際に編集しながら、さまざまなタグやスタイルを試してみることです。

例えば、「この場所にこのタグを入れたら、こう表示が変わるのか」といった実験を繰り返すことで、直感的に理解が深まっていきます。細かな修正や調整をしながら、実際に見た目やレイアウトがどのように変わるかを確認することで、自然とスキルが磨かれていくはずです。

簡単にホームページを作るならWordPressがおすすめ

現在、ホームページ作成は、WordPressなどのCMS（コンテンツ管理システム）やノーコードのホームページ作成ツールを使うことが一般的です。これらのツールを使えば、HTMLをゼロから手打ちする必要はなく、初心者でも簡単にホームページを作ることができます。

もちろん、HTMLやCSSの基本的な知識は今でも非常に役立ちます。例えば、サイトを細かくカスタマイズしたいときや、トラブルが発生した際には、HTMLやCSSの理解があることで柔軟に対応できるようになります。また、HTMLやCSSを扱えれば、デザインやレイアウトを自分で自由に調整できるので、より個性的で魅力的なホームページを作り上げることが可能です。

だからこそ、最初にHTMLやCSSを触ってみることは良い経験ですが、もっと簡単に本格的なホームページを作りたいのであれば、WordPressのようなツールを使うのも良いでしょう。