HTMLテキスト書式の基本：強調、フォント、色の設定方法

HTML（HyperText Markup Language）は、ウェブページを作成するための基本的なマークアップ言語です。テキストの書式設定は、読みやすく、視覚的に魅力的なページを作成する上で非常に重要です。このガイドでは、初心者向けにHTMLを使った簡単なテキスト書式設定の方法を紹介します。基本的なタグを使って、テキストを強調したり、フォントサイズや色を変更したりする方法を学んでいきましょう。

テキストを強調する方法

HTMLでは、特定のテキストを強調したり、目立たせるためにいくつかのタグを使います。

太字にする: <strong> と <b>

• <strong>: 強調されたテキストを意味し、SEOにも有利です。
• <b>: 見た目を太字にするためだけのタグです。

<p>この文章は<strong>重要</strong>です。</p>
<p>この文章は<b>太字</b>です。</p>

イタリックにする: <em> と <i>

• <em>: 意味的に強調を表す（アクセントが強い場合）。
• <i>: 単にイタリック体にするだけ。

<p>この文章は<em>強調されています</em>。</p>
<p>この文章は<i>イタリック体</i>です。</p>

フォントサイズを変更する方法

テキストのサイズを変更するには、<h1>〜<h6>タグや<span>とCSSを組み合わせて使います。

見出しタグ: <h1>〜<h6>

HTMLには6段階の見出しタグがあり、<h1>が最も大きく、<h6>が最も小さいです。

<h1>大きい見出し (h1)</h1>
<h2>少し小さい見出し (h2)</h2>
<h3>もっと小さい見出し (h3)</h3>

CSSを使ったサイズ変更

さらに柔軟にサイズを設定したい場合、<span>タグとCSSで制御できます。

<p><span style="font-size: 24px;">大きめのテキスト</span></p>
<p><span style="font-size: 12px;">小さめのテキスト</span></p>

フォントカラーを変更する方法

テキストの色を変更するには、CSSのcolorプロパティを使用します。

<p><span style="color: red;">赤い文字</span></p>
<p><span style="color: blue;">青い文字</span></p>

アンダーライン、取り消し線をつける方法

テキストにアンダーラインや取り消し線を加えることで、情報を強調したり、視覚的にわかりやすくすることができます。

アンダーライン: <u>

<p><u>この文章はアンダーラインが引かれています。</u></p>

取り消し線: <s>

<p><s>この文章は取り消されています。</s></p>

リストを使って整然とした表示にする方法

リストを使うと、項目を整理して表示できます。番号付きリストと番号なしリストがあります。

番号付きリスト: <ol>

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

番号なしリスト: <ul>

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

テキストの配置を変更する方法

テキストの配置を変更するには、CSSのtext-alignプロパティを使用します。

<p style="text-align: left;">左寄せのテキスト</p>
<p style="text-align: center;">中央寄せのテキスト</p>
<p style="text-align: right;">右寄せのテキスト</p>

まとめ

このガイドでは、HTMLでテキストを簡単に書式設定する基本的な方法を紹介しました。これらのタグやCSSプロパティを使うことで、読みやすく、視覚的に魅力的なウェブページを作成することができます。HTMLの書式設定は、コンテンツを整理し、ユーザーに情報を効果的に伝えるための強力なツールです。引き続き練習を重ねて、さらに高度なデザインにも挑戦してみてください！