Skip to content

4. テキストのフォーマット

HTML(HyperText Markup Language)は、ウェブページを構築するための基本的なマークアップ言語です。本章では、HTML を用いてテキストをフォーマットする方法について学びます。テキストのフォーマットを正しく行うことで、ウェブページを見やすく整理されたものにすることができます。

4.1 見出しタグ

見出しタグは、文書のセクションやサブセクションを示すために使用されます。HTML では、<h1>から<h6>までの 6 つの見出しレベルが用意されています。数値が小さいほど重要度が高い見出しとなります。

<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>

4.2 段落タグ

段落タグは、テキストの段落を示すために使用されます。HTML では段落を<p>タグで囲みます。

<p>これは段落1です。この段落にはいくつかの文が含まれています。</p>
<p>これは段落2です。新しい段落は別の</p>
<p>タグで囲みます。</p>

4.3 強調タグ

強調したいテキストには、<strong>タグや<em>タグを使用します。<strong>は重要なテキストを示し、<em>は強調するためのテキストを示します。スクリーンリーダーでは、それぞれ音声で強調されます。

<p>これは<strong>重要な</strong>情報です。</p>
<p>これは<em>強調したい</em>部分です。</p>

4.4 引用タグ

引用文には<blockquote>タグを使用します。インラインの短い引用には<q>タグを用います。

<blockquote>
  これは長い引用文の例です。引用はインデントされて表示されます。
</blockquote>

<p>この文中に <q>短い引用</q> を含めることができます。</p>

4.5 プレフォーマットされたテキスト

フォーマットをそのまま保持したい場合には、<pre>タグを使用します。このタグは、スペースや改行をそのまま表示します。

<pre>
これはプレフォーマットされたテキストです。
スペースや改行もそのまま表示されます。
    インデントもそのまま保持されます。
</pre>

4.6 HTML の特殊文字

HTML で特殊文字や符号を表示するためには、エンティティを使用します。例えば、&, <, > などです。

<p>これはアンパサンド(&amp;)の例です。</p>
<p>これは小なり記号(&lt;)の例です。</p>
<p>これは大なり記号(&gt;)の例です。</p>

4.7 まとめ

以上が HTML のテキストフォーマットの基本です。これらのタグを適切に使用することで、テキストを効果的に構造化できます。まずは実際にコードを書いて試しながら学んでみましょう。次回はリンクの作成について学びます。