HTML 入門トップページ


目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
    1. 段落を作る
    2. 改行する
    3. 見出しの設定
    4. 文字スタイルの変更(太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル)
    5. 箇条書き
    6. 表を配置する
    7. 画像を配置する
    8. リンクを設定する
    9. 特殊文字を表示する
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

基礎的なタグをマスターしよう

特殊文字を表示する

HTMLでは <p> のようにタグで文書の構造を記述するので,<> という文字を本文にそのまま使用すると,それらがタグとして認識されてしまいます.したがって,<> などの特殊文字を本文で表示するにはエスケープ処理が必要になります.

< を本文中で利用するには &lt; と入力します.> を本文中で利用するためには &gt; と入力します.

index.html(抜粋)
本文中で &lt; や &gt; を表示させたい.

ブラウザでの表示結果

本文中で < や > を表示させたい.

つまり,& 文字を使ってエスケープ処理を行うことから,やはり & 自体を表示させる場合もエスケープ処理が必要です.&&amp; と入力します.

index.html(抜粋)
本文中で &amp; を表示させたい.

ブラウザでの表示結果

本文中で & を表示させたい.

主なエスケープ記号を表にまとめておきます.

入力 表示 説明
&lt; < 不等号記号 (Less Than)
&gt; > 不等号記号 (Greater Than)
&amp; & アンドマーク(アンパサンド: AMPersand)
&quot; " ダブルクォート (double QUOTe)
&apos; ' シングルクォート (APOStrophe)
&nbsp;   空白文字(ただし改行を認めない: Non-Breaking SPace)

上の表で &nbsp; は改行を認めない空白文字です.PC の場合は Web ブラウザの横幅を変更して,下の表示結果が「xyz」と「xyz」の間では改行されないことを確認してください.これは例えば,論文での参考文献リストなどにおいて「Vol. 1, No. 5, pp. 123-128 (2021)」を「Vol.&nbsp;1, No.&nbsp;5, pp.&nbsp;123-128 (2021)」と入力することで,ピリオドと数字の間では改行されない「Vol. 1, No. 5, pp. 123-128 (2021)」のような表示を実現したいときなどに利用できます.

index.html(抜粋)
ab abc ab abc ab abc ab ab abc xyz&nbsp;xyz ab abc ab xyz&nbsp;xyz ab xyz&nbsp;xyz ab abc abc abc abc abc xyz&nbsp;xyz abc ab xyz&nbsp;xyz ab abc ab abc ab ab abc xyz&nbsp;xyz ab abc ab xyz&nbsp;xyz ab xyz&nbsp;xyz ab abc abc abc abc abc xyz&nbsp;xyz abc ab xyz&nbsp;xyz abc 本文中で改行を認めない空白文字&nbsp;を表示させたい.本文中で改行を認めない空白文字&nbsp;を表示させたい.「xyz」と「xyz」の間だけは改行を認めたくない状況です.

ブラウザでの表示結果(ブラウザの幅を変更して確かめてください)

ab abc ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz abc 本文中で改行を認めない空白文字 を表示させたい.本文中で改行を認めない空白文字 を表示させたい.「xyz」と「xyz」の間だけは改行を認めたくない状況です.