【🔰初心者向け】HTMLの基本 - PF-Creator 【無料】ノーコードでウェブサイト編集アプリ

目次 open close

1. はじめに
2. HTMLとは
3. HTMLの基本構造
4. HTMLタグの基本
5. よく使うHTMLタグ
6. HTMLの属性
7. HTMLのコメント
8. まとめ

1. はじめに

ここでは、HTMLの基本を初心者向けに説明します。

2. HTMLとは

HTML（HyperText Markup Language）は、ウェブページを作成するための基本的なマークアップ言語です。HTMLは、ウェブページの構造を記述するために使用され、テキスト、画像、リンク、ボタンなど、さまざまな要素を指定します。

3. HTMLの基本構造

HTMLドキュメントは、以下のような基本的な構造を持っています

<!DOCTYPE html>
<html>
<head>
    <title>ウェブページのタイトル</title>
</head>
<body>
    <!-- ここにコンテンツが入ります -->
</body>
</html>

<!DOCTYPE html>: これは文書型宣言で、HTML5を使用していることを示します。
<html>: HTMLドキュメントのルート要素です。
<head>: メタ情報（文字コード、タイトル、スタイルシートのリンクなど）を含む部分です。
<title>: ブラウザのタブに表示されるウェブページのタイトルです。
<body>: 実際のウェブページのコンテンツが含まれる部分です。

【‼️】最低限の記述のためブラウザー上では何も映らない状態になります。
【‼️】サンプルコードを変更ができます。
　　　黒枠内の記載を変えると、プレビューが連動します。

4. HTMLタグの基本

HTMLは「タグ」と呼ばれる構文を使用して、要素を定義します。タグは<タグ名>の形式で記述され、多くの場合、対応する閉じタグ（</タグ名>）とセットで使用されます。

例：
<p>これは段落です。</p>

<p>: 段落を示すタグ
</p>: 段落の終わりを示す閉じタグ

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します

5. よく使うHTMLタグ

見出しタグ（<h1>～<h6>）

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

<h1>は最も大きな見出し、<h6>は最も小さな見出しを表します。

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

段落タグ（<p>）

<p>これは段落です。</p>

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

リンクタグ（<a>）

<a href="https://www.example.com">ここをクリック</a>

href属性でリンク先のURLを指定します。

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

画像タグ（<img>）

<img src="image.jpg" alt="画像の説明">

src属性で画像のURLを指定し、alt属性で画像が表示されない場合の説明を記述します。

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。
【‼️】alt属性の表示状態を見せるため、ワザと画像リンクを切っています。

リストタグ

順序付きリスト（<ol>）

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
</ol>

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

順序なしリスト（<ul>）

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
</ul>

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

6. HTMLの属性

タグには「属性」を追加して、より多くの情報を提供することができます。属性は通常、タグの開始部分に記述されます。

例：
<a href="https://www.example.com" target="_blank">新しいタブで開くリンク</a>

href属性: リンク先のURL
target="_blank": リンクを新しいタブで開く

【‼️】サンプルコードを変更ができます。黒枠内の記載を変えると、プレビューが連動します。

7. HTMLのコメント

HTMLドキュメント内でコードに注釈を付けたい場合、コメントを使用します。コメントはブラウザに表示されません。

<!-- これはコメントです -->

【‼️】コメント記述のためブラウザー上では何も映らない状態になります。
【‼️】サンプルコードを変更ができます。
　　　黒枠内の記載を変えると、プレビューが連動します。

8. まとめ

HTMLは、タグを使ってウェブページの構造を定義する簡単な言語です。基本的な構造とよく使うタグを覚えることで、ウェブページを作成する第一歩を踏み出せます。次のステップとして、CSS（Cascading Style Sheets）やJavaScriptを学ぶと、ウェブページにスタイルやインタラクティブな機能を追加できるようになります。

【PR】