記号や環境依存文字などの直接記述できないテキストの入力の仕方を練習しながら説明します。
実体参照とは
HTML内に直接記述できない文字（機種依存文字など）を記述する場合は、文字参照で対応します。文字参照では「実体参照」と「数値参照」という方法があります。現在の文字コードはUTF-8が主流になり、文字化けすることが少なくなりました。直に記号を記述することができるようになったため、文字参照を使用しなくても表示できるようになってきています。実体参照は主に、「<」「>」「&」などのソースコードに使われる記号等に使用されています。
(1)index.htmlのフッターのコピーライトを実体参照から記号に修正しましょう。見た目には変化しません。
<!DOCTYPE html>
<html>
<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div>
<img src="asset/img/top.jpg" alt="メインイメージ" width="960px">
<ul>
<li style="display: inline-block"><a href="#"><img src="asset/img/data.svg" alt="WEBデザイン" width="240px"><br>WEBデザイン</a></li>
<li style="display: inline-block"><a href="#"><img src="asset/img/work.svg" alt="WEBディレクション" width="240px"><br>WEBディレクション</a></li>
<li style="display: inline-block"><a href="#"><img src="asset/img/social-media.svg" alt="デジタルマーケティング" width="240px"><br>デジタルマーケティング</a></li>
</ul>
</div>
<footer>
<p>©︎ Menter</p>
</footer>
</body>
</html>(2)メインイメージ下に、h2タグで「このような仕事を承ります」と記述して保存してください。
<!DOCTYPE html>
<html>
<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div>
<img src="asset/img/top.jpg" alt="メインイメージ" width="960px">
<h2>このような仕事を承ります</h2>
<ul>
<li style="display: inline-block"><a href="#"><img src="asset/img/data.svg" alt="WEBデザイン" width="240px"><br>WEBデザイン</a></li>
<li style="display: inline-block"><a href="#"><img src="asset/img/work.svg" alt="WEBディレクション" width="240px"><br>WEBディレクション</a></li>
<li style="display: inline-block"><a href="#"><img src="asset/img/social-media.svg" alt="デジタルマーケティング" width="240px"><br>デジタルマーケティング</a></li>
</ul>
</div>
<footer>
<p>©︎ Menter</p>
</footer>
</body>
</html>*HTMLを作成~編集する際にはHTML作成に対応したメモ帳をダウンロードする必要があります。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。#推奨ツール1. Sublime Text
https://www.sublimetext.com/3
#推奨ツール2. Tera Pad
https://tera-net.com/library/tpad.html
POINT
特殊な文字を文字列として表示させたい場合は実体参照で記述しましょう。
コメント