第3回 テキストの装飾とフォーマット – h1〜h6、p, strong, em など – HTML入門講座

はじめに

HTMLでは、テキストを簡単に表示するだけでなく、装飾やフォーマットを追加することができます。文章を読みやすく、また視覚的に強調することで、訪問者に情報を効果的に伝えることができるようになります。この講座では、HTMLでのテキストの装飾やフォーマット方法について学び、基本的なタグの使い方をマスターしましょう。

見出し要素（<h1>〜<h6>）

見出し要素は、文書の構造を整理し、重要な情報を強調するために使用されます。HTMLには6段階の見出し要素があり、それぞれの要素は異なる重要度を表します。

• <h1> – 文書のメインタイトル（最も重要な見出し）
• <h2> – セクションのタイトル
• <h3> – サブセクションのタイトル
• <h4> – 小さな見出し
• <h5> – さらに小さな見出し
• <h6> – 最も小さな見出し

以下の例では、見出しの使い方を示しています。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>さらに小さい見出し</h4>
<h5>ほぼ一番小さい見出し</h5>
<h6>最も小さな見出し</h6>

段落要素（<p>）

段落要素（<p>）は、文章を区切り、整然と表示するために使われます。複数の段落を用いることで、読みやすく、情報を分かりやすく整理できます。

<p>これは段落です。</p>
<p>もう一つの段落です。</p>

このように、段落ごとに<p>タグで囲むことで、文章が自動的に適切なスペースで表示されます。

強調表示のタグ

HTMLには、テキストを強調するためのいくつかのタグがあります。それぞれのタグは異なる意味で強調を表します。

<strong> と <em>

<strong> はテキストを強く重要であると示すために使われます。一方、<em> は「強調」されたテキストとして、通常は斜体で表示されます。

<strong>この部分は重要です。</strong>
<em>この部分は強調されています。</em>

<b> と <i>

<b> は太字（ボールド）を表し、<i> は斜体（イタリック）を表します。これらのタグは、視覚的な強調を意味しますが、必ずしも意味的な重要性を表すわけではありません。

<b>このテキストは太字です。</b>
<i>このテキストは斜体です。</i>

リスト要素

リストを使うことで、情報を整理して視覚的にわかりやすくすることができます。HTMLでは、番号付きリスト（<ol>）と番号なしリスト（<ul>）の2種類があります。

番号なしリスト（<ul>）

<ul> タグは、箇条書きリストを作成します。各項目は <li> タグで囲みます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

これは以下のように表示されます：

• 項目1
• 項目2
• 項目3

番号付きリスト（<ol>）

<ol> タグは、番号付きリストを作成します。

<ol>
  <li>最初の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ol>

これは以下のように表示されます：

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

引用とコード

HTMLでは、引用文やコードを表現するためのタグも提供されています。

<blockquote> – ブロック引用

<blockquote> タグは、長めの引用文をブロックとして引用する際に使います。

<blockquote>
これは引用された文章です。出典があればそれも記載します。
</blockquote>

<code> – コード表示

<code> タグは、プログラムのコードやコマンドを表示する際に使います。通常、固定幅フォントで表示されます。

<code>print('Hello, world!')</code>

まとめ

今回の講座では、HTMLでのテキストの装飾とフォーマットについて学びました。見出しや段落、強調表示、リスト、引用などを使いこなすことで、文章をより分かりやすく、美しく整理することができます。これらの基本的なタグを活用して、より豊かなウェブページを作成してみましょう。

次回は、リンクの作成について詳しく学びます。ウェブページの最も基本的な機能の1つであるハイパーリンクをどのように使うか、見ていきましょう！