【HTML/CSS】HTML全体の骨組みの作成｜簡単なポートフォリオサイトの作成
この記事では、Webページの土台となるHTMLの全体構造を学びます。ポートフォリオサイトを題材に、ページのタイトルやCSSを設定する<head>タグと、ヘッダーやフッターなどの表示内容を記述する<body>タグの使い方を基礎から解説します。
開発環境
- OS: Windows10
- Editor: Visual Studio Code
- HTML: 5
- CSS: 3
- JavaScript: ES6以降
サンプルコード
/assets/css/style.css
/assets/css/style.css1undefined
/index.html
/index.html1+<!DOCTYPE html> 2+<html lang="ja"> 3+ 4+<head> 5+ <meta charset="UTF-8" /> 6+ <meta name="viewport" content="width=device-width, initial-scale=1" /> 7+ <title>ポートフォリオ</title> 8+ <link rel="stylesheet" href="assets/css/style.css" /> 9+</head> 10+ 11+<body> 12+ <header> 13+ <div class="container"> 14+ <h1 class="logo">My Portfolio</h1> 15+ <nav> 16+ <ul class="nav-list"> 17+ <li><a href="#about">About</a></li> 18+ <li><a href="#skills">Skills</a></li> 19+ <li><a href="#works">Works</a></li> 20+ <li><a href="#contact">Contact</a></li> 21+ </ul> 22+ </nav> 23+ </div> 24+ </header> 25+ 26+ <section id="main-visual"> 27+ <h2>Welcome to My Portfolio</h2> 28+ <p>フロントエンドとWebデザインの制作事例を紹介します</p> 29+ </section> 30+ 31+ <section id="about"> 32+ <h2>About</h2> 33+ <p>自己紹介文をここに記載します。</p> 34+ </section> 35+ 36+ <section id="skills"> 37+ <h2>Skills</h2> 38+ <p>得意なスキル一覧をここに記載します。</p> 39+ </section> 40+ 41+ <section id="works"> 42+ <h2>Works</h2> 43+ <p>これまでの制作実績を紹介します。</p> 44+ </section> 45+ 46+ <section id="contact"> 47+ <h2>Contact</h2> 48+ <p>お問い合わせはこちらから。</p> 49+ </section> 50+ 51+ <footer> 52+ <p>© 2025 My Portfolio</p> 53+ </footer> 54+ 55+</body> 56+ 57+</html> 58
コード解説
変更点: HTML5文書の宣言
/index.html1+<!DOCTYPE html> 2+<html lang="ja"> 3... 4+</html>
Webページを作成する際、最初に<!DOCTYPE html>と記述します。これは、このファイルがHTML5というバージョンで書かれた文書であることをブラウザに伝えるための宣言です。すべてのHTML要素を囲む<html>タグにはlang="ja"という属性が指定されています。これは、このページが日本語で書かれていることを示し、翻訳機能や音声読み上げソフトが正しく動作するために役立ちます。
変更点: ページ設定を行うheadタグの追加
/index.html1+<head> 2+ <meta charset="UTF-8" /> 3+ <meta name="viewport" content="width=device-width, initial-scale=1" /> 4+ <title>ポートフォリオ</title> 5+ <link rel="stylesheet" href="assets/css/style.css" /> 6+</head>
<head>タグは、Webページそのものに関する設定情報を記述する部分です。ここに書かれた内容は、ページのタイトルなどを除き、直接ブラウザの画面に表示されることはありません。今回は、文字コードの指定、表示領域の設定、ページのタイトル設定、CSSファイルの読み込みといった、ページを表示するために不可欠な設定を記述しています。
変更点: 文字コードの指定
/index.html1+ <meta charset="UTF-8" />
<meta charset="UTF-8" />は、このHTMLファイルが「UTF-8」という文字コードで書かれていることをブラウザに伝えます。文字コードとは、コンピュータが文字を扱うためのルールのことです。この指定がないと、ブラウザが文字を正しく解釈できず、日本語が意味不明な記号で表示される「文字化け」の原因になるため、必ず記述します。
変更点: 表示領域（viewport）の設定
/index.html1+ <meta name="viewport" content="width=device-width, initial-scale=1" />
この<meta>タグは、スマートフォンやタブレットなど、さまざまな画面サイズのデバイスでWebページを適切に表示させるための設定です。width=device-widthはページの横幅をデバイスの画面幅に合わせる設定で、initial-scale=1はページの初期ズーム倍率を1.0倍にすることを意味します。これは、レスポンシブデザインを実現するための基本となる重要な記述です。
変更点: ページのタイトル設定
/index.html1+ <title>ポートフォリオ</title>
<title>タグは、Webページのタイトルを設定します。ここで設定した「ポートフォリオ」というテキストは、ブラウザのタブやウィンドウの上部、ブックマークした際の既定の名前、検索エンジンの検索結果などに表示されます。ページの内容を的確に表すタイトルを設定することが重要です。
変更点: CSSファイルの読み込み
/index.html1+ <link rel="stylesheet" href="assets/css/style.css" />
<link>タグは、外部ファイルとHTMLを関連付けるために使用します。今回は、rel="stylesheet"でCSS（スタイルシート）ファイルを指定し、href="assets/css/style.css"でそのファイルの場所を指定しています。これにより、HTMLで定義した各要素の見た目（色、サイズ、レイアウトなど）をCSSで装飾できるようになります。
変更点: ページ本体となるbodyタグの追加
/index.html1+<body> 2+ ... 3+</body>
<body>タグは、Webページに実際に表示されるすべてのコンテンツを記述する部分です。見出し、文章、画像、リンクなど、ユーザーがブラウザで目にする内容はすべてこの<body>タグの中に配置します。HTMLの骨組みは、この<body>タグの中に<header>や<section>などのタグを配置して構成していきます。
変更点: ヘッダーの追加
/index.html1+ <header> 2+ <div class="container"> 3+ <h1 class="logo">My Portfolio</h1> 4+ <nav> 5+ <ul class="nav-list"> 6+ <li><a href="#about">About</a></li> 7+ <li><a href="#skills">Skills</a></li> 8+ <li><a href="#works">Works</a></li> 9+ <li><a href="#contact">Contact</a></li> 10+ </ul> 11+ </nav> 12+ </div> 13+ </header>
<header>タグは、Webページのヘッダー部分（冒頭部分）を定義します。一般的に、サイトのロゴ（今回は<h1>タグで表現）や、他のページへのリンクをまとめたナビゲーションメニュー（今回は<nav>タグで表現）などが配置されます。ページの導入部分として、サイト全体の案内役を担う重要なセクションです。
変更点: コンテンツの区画となるsectionの追加
/index.html1+ <section id="main-visual"> 2+ <h2>Welcome to My Portfolio</h2> 3+ <p>フロントエンドとWebデザインの制作事例を紹介します</p> 4+ </section> 5+ 6+ <section id="about"> 7+ <h2>About</h2> 8+ <p>自己紹介文をここに記載します。</p> 9+ </section>
<section>タグは、Webページ内のコンテンツを論理的なグループ（区画）に分けるために使用します。例えば、「自己紹介」「スキル」「制作実績」といったように、関連する内容を1つの<section>で囲みます。id属性は各セクションに固有の名前を付けるもので、ページ内リンクの移動先や、CSS・JavaScriptで特定のセクションを操作する際に利用されます。
変更点: フッターの追加
/index.html1+ <footer> 2+ <p>© 2025 My Portfolio</p> 3+ </footer>
<footer>タグは、Webページのフッター部分（末尾部分）を定義します。一般的に、コピーライト情報（著作権表示）、運営者情報、プライバシーポリシーへのリンクなどが配置されます。このコードでは、<p>タグを使ってコピーライトを記述しています。
おわりに
この記事では、<!DOCTYPE html>という宣言から始まり、<head>タグと<body>タグで構成されるHTMLの基本的な骨組みを作成しました。<head>にはページのタイトル設定やCSSファイルの読み込みといった、画面には直接表示されない重要な設定情報を記述します。一方、ヘッダーやフッターなど、ユーザーが目にするすべてのコンテンツは<body>の中に記述することを学びました。この構造を理解することが、あらゆるWebページ制作の揺るぎない土台となります。