技術学習

HTML 学習 その1 - 基礎

📢 この記事は gemini-2.5-flash によって翻訳されました

はじめに

HTML 学習 その1 - 基礎: https://blog.yexca.net/archives/146
HTML 学習 その2 - リスト、テーブル、フォーム: https://blog.yexca.net/archives/150
HTML 学習 その3 - ウェブページのレイアウト: https://blog.yexca.net/archives/195

基本的な骨組み

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>ウェブページのタイトル</title>
    </head>
    <body>
        ウェブページの本文
    </body>
</html>

普通はソフトウェアで自動生成されるよ。例えば、VS Code で .html ファイルを新規作成して、!って入力してTABキーを押すと自動で生成してくれるんだ。

headタグは主にブラウザ向け、bodyタグはユーザー向けって感じかな。

コメント

1

<!-- コメント内容 -->

VS Code では、行を選択してショートカットキーの Ctrl + / を使うと一発でコメントアウトできるよ。

ブラウザはコメントの中身は表示しないんだ。

見出しと段落

1
2
3
4
5
6
7
8

<h1>レベル1見出し</h1>
<h2>レベル2見出し</h2>
<h3>レベル3見出し</h3>
<h4>レベル4見出し</h4>
<h5>レベル5見出し</h5>
<h6>レベル6見出し</h6>
<p>段落内容</p>
<p>段落内容</p>

見出しタグは文字が太字になって、一行を独占するよ。

段落タグの中身も一行を独占するんだけど、段落と段落の間には隙間ができるんだ。

改行と水平線

段落タグの中身を改行しても表示されないから、改行したいときは改行タグを使う必要があるよ。

1

<br />

水平線タグのコードはこんな感じ。

1

<hr />

表示はこんな感じ。

テキスト書式設定タグ

効果タグ名略称
太字strongb
斜体emi
下線insu
取り消し線dels

普通は略称を使うのはおすすめしないよ。使用例はこんな感じ。

1
2
3
4

<p>
    こんにちは、<em>yexca</em>だよ。このブログに<strong>ようこそ</strong>！<ins>見てくれてありがとう</ins><br />
    <del>で、次は何を書けばいいんだっけ？</del>
</p>

表示はこんな感じ。

こんにちは、yexcaだよ。このブログにようこそ！見てくれてありがとう
で、次は何を書けばいいんだっけ？

画像タグ

画像タグは、src属性で画像の場所を指定する必要があるんだ。

1

<img src="path" alt="画像が読み込めない時に表示される内容" />

パスには絶対パスと相対パスがあるよ。今のパスを（Linuxシステムだと仮定して）こうするね。

1
2
3

/home/yexca/code
	index.html
	photo.jpg

index.htmlファイルにコードを書くとして、相対パスはこうなるよ。

1

<img src="./photo.jpg" />

絶対パスはこう。

1

<img src="/home/yexca/code/photo.jpg" />

ハイパーリンクタグ

1

<a href="目的のページ" target="方法">リンクテキスト</a>

このタグはウェブページにジャンプするための、つまりウェブサイトのリンクなんだ。もし新しいウィンドウでページを開きたいなら、target属性の値を_blankにするだけでいいよ。例えばこんなコード。

1
2
3
4
5

<p>
    ジャンプ先：
    <a href="https://yexca.net">yexca</a><br />
    これは新しいタブで開くよ：<a href="https://yexca.net">yexca</a>
</p>

表示はこんな感じ。

ジャンプ先： yexca
これは新しいタブで開くよ：yexca

音声・動画タグ

1
2

<audio src="path">音声タグ</audio>
<video src="path">動画タグ</video>

音声タグの属性はこんな感じだよ。

属性役割説明
src音声ファイルのパス必須属性、mp3、ogg、wavに対応
controls音声コントロールパネルを表示
loop繰り返し再生
autoplay自動再生ブラウザは通常、自動再生を禁止してるよ

動画タグの属性はこんな感じだよ。

属性役割説明
src動画ファイルのパス必須属性、mp4、webm、oggに対応
controls動画コントロールパネルを表示
loop繰り返し再生
mutedミュートで再生
autoplay自動再生ブラウザはミュート状態なら自動再生をサポートしてるよ

今のパスがこんな感じだと仮定するね。

1
2
3
4

/home/yexca/code
	index.html
	audio.mp3
	video.mp4

例えばこんなコード。

1
2
3
4
5
6
7
8

<audio src="./audio.mp3" controls loop></audio>
<!-- コントロールを表示して、最後まで再生したら最初に戻ってループ再生 -->
<video src="./video.mp4" controls loop></video>
<!-- コントロールを表示して、最後まで再生したら最初に戻ってループ再生 -->
<video src="./video.mp4" controls muted autoplay></video>
<!-- このコードは自動再生されるよ -->
<video src="./video.mp4" controls autoplay></video>
<!-- このコードは自動再生されないよ -->

レイアウトタグ

特に意味を持たないけど、ウェブページのレイアウトに使われるタグだよ。エリアを分けたり、コンテンツを配置したりするのに使うんだ。

  • div: 一行を独占する
  • span: 改行しない

例えばこんなコード。

1
2
3
4
5
6
7
8

<div>
    div1
</div>
<div>
    div2
</div>
<span>span1</span>
<span>span2</span>

表示はこんな感じ。

div1
div2
span1 span2

文字参照

ウェブページで予約文字を表示するために使うんだ。例えば、半角スペースとか<とか>とかを表示するときだね。

ResultDescriptionEntity NameEntity Number
改行しないスペース&nbsp;&#160;
<より小さい&lt;&#60;
>より大きい&gt;&#62;
&アンパサンド&amp;&#38;
“二重引用符&quot;&#34;
‘単一引用符（アポストロフィ）&apos;&#39;
¢セント&cent;&#162;
£ポンド&pound;&#163;
¥円&yen;&#165;
€ユーロ&euro;&#8364;
©著作権&copy;&#169;
®登録商標&reg;&#174;

例えば、<p>を表示するとき。

1
2
3

<p>
    &lt;p&gt;
</p>

参考： HTML文字参照 &Nbsp; &Ensp; &Emsp; の違い

© 2021 - 2026 yexca

Visits Since 2025-02-28

Hugo で構築されています。 | テーマ Stack は Jimmy によって設計されています。