ながみえ
HTML/CSSレッスン1-1『HTML学習の入り口|Webページの基本構造を理解しよう』記事用アイキャッチ画像

Webサイトは私たちの生活を便利にし、情報やアイデアを世界中に届けるための重要なツールです。

そしてそんなWebサイトの基礎を支えるのが「HTML(HyperText Markup Language)」です。

このサイトはそのHTMLをゼロから学び、シンプルな構造から実用的なスキルまでを楽しく学べるサイトであり、このページはその最初の入り口です。

さあ、コードの力であなたの創造力を広げる旅を始めましょう!

<<前のページ

初心者でも簡単!無料でHTML/CSSの開発環境を整備しようと書かれたアイキャッチ画像。背景にはノートパソコンが映り、黄色と青色を基調としたデザイン。

記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像(Webサイト制作入門)、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン1-2『基本的なHTMLタグを理解しよう』記事用アイキャッチ画像

はじめに|HTMLとCSSの役割と関係性を理解しよう

Webサイトを作成するには、主に「HTML」と「CSS」という2つの技術が使われます。

これらはウェブページの基盤となる重要な要素であり、それぞれ異なる役割を担っています。

まず初めに、HTMLとCSSの概要とそれらの関係についてわかりやすく説明します。

【HTML】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

HTMLとは?|Webページを構成する基本要素

HTML(HyperText Markup Language) は、ウェブページの「構造」を作るためのマークアップ言語です。

文章の見出しや段落、画像、リンクなど、ページに表示する要素を定義する役割を持っています。

例えば、ニュース記事のタイトルや本文、画像などの配置を決めるのがHTMLです。

今あなたが見ているこのページの場合、この説明文や上の「HTMLとは?|Webページを構成する基本要素」という見出し、途中に挟まっている画像リンクなどをHTMLで記述・指定しています。

CSSとは?|Webページをデザインするためのスタイル指定

CSS(Cascading Style Sheets) は、HTMLで作成したページに「デザイン」を適用するためのスタイルシート言語です。

フォントの種類や色、レイアウトの調整など、ページの見た目を整える役割を果たします。

今あなたが見ているこのページの場合、文字の色を白、背景を黒にし、見出し部分に緑のデザインを当てる等のことをCSSにて実施しています。

HTMLとCSSの関係|構造とデザインで役割を分担

HTMLとCSSは密接に関連しており、それぞれ次のような役割を持っています。

  • HTML → ページの「骨組み」を作る(例:文章、画像、リンク)
  • CSS → ページの「デザイン」を整える(例:色、レイアウト、フォント)

例えば家を建てることを考えてみましょう。

HTMLは家の骨組みや部屋の配置を決める設計図のようなもので、CSSは壁の色や家具のデザインを決めるインテリアのような役割を果たします。

どちらも組み合わせることで、魅力的なウェブページを作成することができます。

これからの学習では、まずはHTMLの基本的なタグの使い方を覚え、次にCSSを使ってデザインをカスタマイズする方法を学んでいきましょう。

HTML学習の準備|必要なツールと環境を整えよう

このサイトでは、実際にHTMLのコードを書きながら学習を進めていきます。

ご自身のパソコンにまだHTMLの開発環境が整っていない人は、まずはこちらの記事を読んでVisual Studio Code(VSC)というMicrosoftのツールをダウンロードしましょう。

インターネット環境さえあれば初心者でも簡単にインストールでき、全ての機能が完全無料で使用できますので、HTMLの学習者には必須のツールとなっています。

以降の説明は全て、VSCで実際にコードを書きながら学習していく前提の説明となっています。

【HTML】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

DOCTYPE宣言と<html>タグ|HTML文書を正しく始めるために

HTMLのコードを書く時、ページの内容に関わらず必ず書かないといけないコードがあります。

それがDOCTYPE宣言と<html>タグです。

DOCTYPE宣言はHTML文書の1行目に書く必要があり、使っているHTMLのバージョンをブラウザに伝えるものです。

また<html>タグはHTML文書全体を囲むものであり、「lang=”ja”」という属性を付けることでそれが日本語のサイトであることを示すことができます。

最新のHTML5では以下のように記述します:

<!DOCTYPE html>
<html lang="ja">
  <!-- ここにHTML文書を書く -->
</html>

これは「このページがHTML5で書かれた日本語のページである」ことを示します。

また<html>タグには閉じタグもあります。作成したHTMLコードの最後には必ず「</html>」を付けましょう。

HTMLの基本構造|Webページを作る土台を理解しよう

COCTYPE宣言の後には<html>タグで囲ったHTML文書を書きます。

HTML文書の中には、以下の概念図のように headbody の2つの要素が入ります。

初心者向けHTMLの基本構造を示す概念図。DOCTYPE宣言、htmlタグ、headタグ、bodyタグの役割を解説。

実際のコードの例を見てみましょう。

以下は最も基本的なWebページのHTML文書の例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>基本構造の例</title>
  </head>
  <body>
    <p>これはHTMLの基本構造の例です。</p>
  </body>
</html>
  • <html> タグ: HTML文書全体を囲むルート要素。
  • <head> タグ: メタ情報(文字コードやタイトルなど)を定義。
  • <body> タグ: 実際に表示される内容(テキスト、画像、リンクなど)を記述。

どこからどこまでが、どのタグに含まれるのかを確認しましょう。

また<head>タグの中身の<meta charset=”UTF-8″>については次の節で紹介します。<title>タグはそのページ全体のタイトルを定義するものです。

現時点では細かい内容は気にせず、HTMLはこのような構造で成り立っていることを暗記しましょう。

コードを書いてみよう

上記のHTMLコードをVSCにコピーして、ブラウザに表示させてみましょう。

コードの中の2つの日本語が、「どこに」「どのように」表示されるかを確認してください。

ブラウザに表示させる方法が分からない人は「HTMLの開発環境構築」の記事に方法を記載していますので、そちらを確認してください。

インデントの必要性|読みやすいHTMLコードを書くコツ

先ほどのコードの3行目では、<head>の前に半角スペースを2つ入れています。また4行目の<meta>の前にはさらにもう2つ半角スペースを入れています。

これをインデント(字下げ)と言い、コードの構造を目で見て分かりやすく整理するものです。

インデントはHTML文書を書く際に必須ではありませんが、コードの「読みやすさ」を高めるために重要な役割を果たします。

なぜインデントが必要?

  • 階層構造を見やすくする: HTMLはタグが親子関係を持つため、インデントによって どの要素が どの要素 の中に含まれているかが簡単にわかります。
  • チーム開発での統一性: 他の開発者と共同作業をする際、整理されたインデントはコードを理解しやすくします。
  • エラーを見つけやすくする: タグの閉じ忘れやネストミスを防ぐためにも役立ちます。

インデントのルール

  • スペースかタブを使用: インデントには一般的にスペースを2つか4つ使用します。タブキーを使うこともありますが、プロジェクトで統一することが大切です。
  • 子要素を字下げする: 親タグの中に記述する子タグは1段階字下げします。
【HTML】勉強猫がコーヒーを片手にリラックスしている様子。記事内の休憩用イラスト

メタタグの基本|Webページの情報を設定しよう

メタタグは<head>タグの中に書くものであり、そのWebページの情報を書くスペースです。基本的に、<head>タグの中身はブラウザには表示されません。

例えば以下のようなメタタグがあります:

<meta charset="UTF-8">
  • charset="UTF-8": 文書の文字コードをUTF-8に設定(日本語など多言語対応可能)。
  • <meta> タグは、検索エンジン最適化(SEO)やソーシャルメディアの表示設定にも役立ちます。

他にも様々なメタタグがありますが、現時点ではこれだけ知っておけば十分です。

また<title>タグを使用するとそのページのタイトルを指定できます。

例えば今あなたが見ているこのページの場合、以下のようなタイトルタグを指定しています。

<title>【初心者向け】HTMLの基本構造を理解しよう|Webページ作成の第一歩</title>

<head>タグの中には 「日本語を正しく表示するための<meta charset=”UTF-8″>」 と 「そのページのタイトル」 を書きましょう。

メタタグについてはLesson1-7で詳細に学習します。

文章とコメントの書き方

HTML文書内に文字を記述するには、<body>タグの中で<p>タグを使用します。

また、コード内にメモを残したい場合は「<!–  –>」を使うことで「コメント」を書くこともできます。

<p>これは文章です</p>
<!-- これはコメントです -->

注意: コメントはブラウザに表示されません。コードの説明やメモに使います。

コードを書いてみよう

ここまで学習してきた内容をもとに、任意の文章をブラウザに表示するコードを書いてみましょう。

また、コード内の各タグに、そのタグの説明コメントを書いてみて下さい。

【テクニック紹介】

VSC(Visual Studio Code)では、何もコードを書いていない状態で「!」を打ち込みタブキーを押すとHTMLの基本構文が自動で表示されます。

初めのうちは覚えるために全て手打ちした方が良いですが、慣れてきたらこのテクニックも活用していきましょう。

HTMLを書くときの基本的なルール

HTMLはWebページの骨組みを作る言語です。初心者のうちから正しいルールを意識して書くことで、読みやすく、ミスの少ないHTMLを作成できます。

ここではHTMLを書くときに知っておきたい基本的なルールを紹介します。

タグは必ず正しい順序で使う

HTMLは「開始タグ」と「終了タグ」で囲んで使います。

<p>これは段落です。</p>
  • pタグで始まったら、必ず</p>で閉じるのがルールです。
  • 閉じ忘れやタグの順序が崩れると、ブラウザで正しく表示されません。
  • タグによっては、終了タグが存在しないものもあります。

タグは小文字で書く

HTML5では、タグ名は小文字で書くことが推奨されています。

<h1>見出し</h1> <!-- ○小文字で正しい -->
<H1>見出し</H1> <!-- ✕大文字は非推奨 -->

昔のHTMLでは大文字も使われていましたが、現在は小文字が標準です。

インデントでコードを整理する

インデント(字下げ)を使ってHTMLを書きましょう。

<html>
  <head>
    <title>HTMLの基本</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落です。</p>
  </body>
</html>
  • インデントがあるとタグの入れ子構造がひと目でわかります。
  • 読みやすいコードを書くことで、バグを減らし、修正や追加がしやすくなります。

コメントを活用する

HTMLコードの中にコメントを書いておくと、自分や他の人がコードを理解しやすくなります。

<!-- ここから本文 -->
<p>HTMLの学習を始めましょう。</p>
<!-- 本文ここまで -->
  • コメントはブラウザには表示されません。
  • 複雑な部分や重要な部分にはコメントを残しておくと、後から見返すときに役立ちます。

まとめ

今回のレッスンではHTMLの基本構造について学びました。これらの知識はこれからHTMLを使ってウェブページを作成する際の土台となるものです。

最初は覚えることが多いと感じるかもしれませんが、一歩一歩確実に進むことで、着実にスキルを身につけることができます。

「学びは未来への投資」です。

あなたがここで得た知識はウェブ開発の新しい世界への扉を開く鍵となるでしょう。この先のレッスンでHTMLのタグや構造をさらに深く学び、自分だけのウェブページを作り上げる楽しさを実感してください。

自分のペースで進んでいきましょう。あなたの挑戦を応援しています!

練習問題1-1:初めてのWebページを作ろう

【HTML】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

VSCで「training1-1.html」というファイルを作成しましょう。

そのファイルにhtmlコードを書き、ブラウザに以下のように表示させてください。

初めてのWebサイトを作ろう1-1

このサイトの Lesson1-1(このページ)から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る!HTML&CSSの学習サイト

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Q
Webサイト制作に挑戦する人はここをクリック!

Webサイト作成の準備

まずは以下のリンクをクリックし、基本セットをダウンロードしてください。

このzipファイルを解凍するとMyWebsiteというフォルダが展開され、その中には以下の内容が入っています。

MyWebsiteフォルダの中身
  • MyWebsite.html
  • lesson1(学習フォルダ)
  • lesson2(学習フォルダ)
  • lesson3(学習フォルダ)
  • image(トップページ用の画像フォルダ)
  • style(トップページ用のCSSフォルダ)

MyWebsite.htmlはこれから作成するWebサイトのトップページとなります。

これから「Lesson1:HTMLの基本」の学習を通してlesson1フォルダの中に新しいhtmlファイルを追加していき、一つのWebサイトを作成していきます。

Lesson1-1のまとめノートと練習問題を追加しよう

まずはダウンロードしたMyWebsite.htmlをブラウザで表示してみましょう。表示する方法が分からない方は先にこちらの記事を見て、HTMLの開発環境を構築してください。

各レッスンの学習内容が、それぞれ異なるデザインで表示されているかと思います。

Lesson1の知識だけでは殺風景なページしか作成できませんが、Lesson2~Lesson3へと学習を進めていくことで見栄えの良いWebサイトを作れるようになります。

それでは、ここから実際にその作業に入っていきましょう。

1.練習問題の解答を保存

練習問題1-1で作成した「training1-1.html」を、ダウンロードした「lesson1(学習フォルダ)」の中に保存してください。

トップページからリンクで飛べるようになりますので確認しましょう。

2.まとめノートを作成・保存

以下のHTMLコードは、このLesson1-1で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite1-1.html」という名前で保存し、「lesson1(学習フォルダ)」の中に保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson1-1</title>
    <link rel="stylesheet" href="style/styles-lesson1.css">
</head>
<body>
    <main class="container">
        <h1>Lesson1-1:HTMLの基本構造を理解しよう</h1>
        <h2>1.目的・要点</h2>
        <p>ウェブサイトの作成には「HTML」と「CSS」が不可欠であり、それぞれ異なる役割を持っています。本レッスンでは、Webページを構成する基本要素であるHTMLの概要を学び、その基本構造を理解することを目的とします。</p>

        <h2>2.このレッスンで学習した内容</h2>
        <h3>HTMLとは何か</h3>
        <ul>
            <li>ウェブページの構造を定義するマークアップ言語</li>
            <li>見出し、段落、画像、リンクなどの要素を指定</li>
        </ul>
        
        <h3>CSSとの関係</h3>
        <p>HTMLはページの構造を作り、CSSはデザインを整える</p>

        <h3>HTML文書の基本構造</h3>
        <ul>
            <li><code>&lt;!DOCTYPE html&gt;</code>:HTML5であることを宣言</li>
            <li><code>&lt;html&gt;</code>:HTML文書全体を囲むルート要素</li>
            <li><code>&lt;head&gt;</code>:メタ情報(文字コードやタイトルなど)を記述</li>
            <li><code>&lt;body&gt;</code>:実際に表示される内容を記述</li>
        </ul>
        
        <h3>開発環境の準備</h3>
        <ul>
            <li>Visual Studio Code(VSC)の導入</li>
            <li>コードを記述し、ブラウザで表示する方法</li>
        </ul>

        <h3>インデントと可読性</h3>
        <ul>
            <li>HTMLコードを整理しやすくするためのインデントの重要性</li>
            <li>タグの正しい順序での記述方法</li>
            <li>コメントの活用(例:<code>&lt;!-- ここにコメント --&gt;</code>)</li>
        </ul>

        <h2>3.トピック・豆知識</h2>
        <ul>
            <li>VSCのショートカット:<code>!</code> を入力してタブキーを押すと基本的なHTML構造が自動生成される</li>
            <li>HTMLタグは小文字推奨(例:<code>&lt;h1&gt;</code>見出し<code>&lt;/h1&gt;</code>)</li>
            <li>HTMLの進化:現在はHTML5が主流</li>
        </ul>

        <h2>4.まとめ</h2>
        <p>HTMLはウェブページの基礎となる言語であり、その正しい書き方を理解することが重要です。本レッスンでは、HTMLの基本構造を学び、実際にコードを書いてブラウザで確認することを通して、基礎的なスキルを身につけました。今後のレッスンでは、HTMLのタグや構造をさらに深く学び、ウェブページ作成の実践的なスキルを磨いていきましょう。</p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </main>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

※ MyWebsite1-1.htmlは先ほどのtraining1-1.htmlと違い、少しだけCSSを使用して見た目を整理しています。

これでLesson1-1の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

<<前のページ

初心者でも簡単!無料でHTML/CSSの開発環境を整備しようと書かれたアイキャッチ画像。背景にはノートパソコンが映り、黄色と青色を基調としたデザイン。

記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像(Webサイト制作入門)、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン1-2『基本的なHTMLタグを理解しよう』記事用アイキャッチ画像

FAQ|HTMLとCSS学習の第一歩に関するよくある質問

Q
Q1. HTMLとCSSはどちらから学べばいいですか?

初めてWebページを作る場合は、HTMLから学び始めるのがおすすめです。

HTMLはWebページの「骨組み」を作るもので、基本構造を理解することが大切です。

その後、CSSでデザインやレイアウトを整えていくと、よりスムーズに学習を進められます。

Q
Q2. HTMLを書くために必要なツールは何ですか?

初心者でもすぐに始められるツールは、テキストエディタ(例:VS Codeやメモ帳)とWebブラウザです。

本記事の「HTML学習の準備」では、推奨されるツールやその設定方法も紹介しているので、参考にしてください。

Q
Q3. HTMLを書くときにインデントは必ず必要ですか?

インデントは必ずしも機能的に必要なものではありませんが、コードを見やすくするために重要です。

インデントの必要性」セクションで、読みやすいコードを書くコツを詳しく解説していますので、ぜひ確認してください。

Q
Q4. DOCTYPE宣言は省略してもいいですか?

いいえ、省略はできません。

DOCTYPE宣言はHTML文書が正しく表示されるために必要な宣言です。

Q
Q5. HTMLでコメントを書く意味は何ですか?

コメントはコードにメモを残したり、他の人が理解しやすいコードを書くために使います。

初心者のうちは「ここは何をしている部分か」をコメントで説明する習慣をつけると良いでしょう。

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。

HTML/CSSのテキスト&問題集トップへ戻る
トップページへ戻る

記事URLをコピーしました