HTMLの特殊文字に関して💻

2023年5月17日 ITｶﾚｯｼﾞ愛西(就労移行支援)


こんにちは、愛西スタッフです💻

 

ITカレッジ愛西では、ITスキルを身につけたいと思って通っている方のために、学習環境を整えております。

 

 

就労移行支援の訓練生用のパソコンでは、Webページ作成のためのソフトとして、最新のDreamweaverを使用することができます。

 

 

HTMLで特定の文字を表示させたいとき、その文字自体に意味を持つことがあります。
それを「ただの文字」として扱うために特殊な書き方をします。
以下がその一例です。

 

記号 エスケープ後 語源
< &lt; less than（より小さい）
> &gt; greater than（より大きい）
“ &quot; quotation（引用）
& &amp; ampersand（アンパサンド）
(空白) &nbsp; non-breaking space（空白無しスペース）
© &copy; copyright（著作権）

 

特に、「<」「>」はHTMLのタグの一部として使われますので、エスケープは必須です。
<span>や<div>など、「開始タグがあり終了タグが無い」と判定されるとページ全体のレイアウトが崩れかねません。

 

以下のように、2通りのコードを書いてみましょう。2つ目が<p>タグ内の「<」「>」「”」をエスケープしたコードです。

 

HTML

<p class="sample-sentence"><span style="font-weight:bold;">これは太字になります</span></p>
<p class="sample-sentence">&lt;span style=&quot;font-weight:bold;&quot;&gt;これは太字になりません&lt;/span&gt;</p>

 

デモ

これは太字になります

<span style=”font-weight:bold;”>これは太字になりません</span>

 

ちなみに、CSS内の「content」プロパティはエスケープ処理されるようです。
試しに以下のコードを書いてみましょう。2つのアイテムの頭に何が表示されるか、お確かめください。

HTML

<p class="sample-item first-item">1つ目のアイテム</p>
<p class="sample-item second-item">2つ目のアイテム</p>

 

CSS

.sample-item::before {
  display: inline;
  margin-right: 1em;
}
.sample-item.first-item::before {
  content: ">";
}
.sample-item.second-item::before {
  content: "&gt;";
}

 

デモ

1つ目のアイテム

2つ目のアイテム

 

以上、HTMLの文字のエスケープのことを少しばかり説明させていただきました。
基本的にはITの勉強は自主学習として取り組んでいただいていますが、不明点が出てきた場合には、Web制作などやチラシ制作、ロゴのデザイン制作などの担当スタッフが説明いたしております。

 

 

皆さんも、行き詰まることを恐れず知識を深めていきましょう💪❗