文字を強調する
演習1.4 文字を強調する
☑文章に見出しをつける <h1～7>文章</h1～7>
☑文章のサイズを変えて表示する <font size=”文字のサイズ”>文章</font>
☑文字を強調する <strong>文章</strong>
☑文字に下線を引く <u >文章</u>
☑文字を斜体にする <i >文章</i>
☑水平な罫線を挿入する <hr width= “ピクセル数”>
続いて、Webページを見た人が一目で内容を把握できるようなタイトルをつけ、また文字に強弱をつけて、印象を強くしていきましょう。タイトルは「子猫と子犬の部屋」、サブタイトルは「かわいい動物たちの写真館」にします。
また、文章の一部に下線を引いたり太字にするなどのアクセントをつけて、注目を引きたい部分としてアピールしてみましょう。
1. タイトルやサブタイトルなどの文字を強調する
タイトルとサブタイトルを記述して、それぞれを見出しに設定します。見出しに設定する方法は、第2章で学習した<h>タグを利用します。タイトルには<h1>タグ、サブタイトルには<h3>タグを設定します。
また、フォントサイズを変更する<font size>タグを利用して、文章の一部の文字の大きさを変えてみます。
以下のように、ソースコードに文章の追加、またはタグの追加をしてください。
①ソース・フォルダー ：html/ch06
②ファイル名 ：index.html
➢ index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子猫と子犬の部屋</title>
<body>
<h1>子猫と子犬の部屋</h1>
<h3>かわいい動物たちの写真館</h3>
<font size="5">子猫と子犬の部屋にようこそ！</font><br>
子猫と子犬のとってもかわいい写真をご用意しました。<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
</body>
</html>
2. 文字に特徴をつける
続いて、文字を強調する<strong>タグと、文字に下線を引く<u>タグを使って、文章にメリハリをつけてみます。
次のように、記述の一部を変更してください。
～前略～
<font size="5"> <strong> 子猫と子犬の部屋にようこそ！</strong></font><br>
<strong>子猫と子犬 </strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br>
～後略～
「とってもかわいい写真」という文章を<strong>タグで強調し、さらに<u>タグで下線の設定を行いました。
3. 罫線を引いて内容が分かれていることを示す
ページのなかで、わかりやすく内容を区切るために、罫線を引いてみます。罫線を引くには、<hr>タグを利用します。10行目の記述のすぐ下に、以下のように記述を追加してください。
～前略～
今後も色々と紹介していきますので、楽しんでください。<br>
<hr width="540">
</body>
<hr>タグを利用して、幅540ピクセルの罫線を指定しました。
4. ブラウザで表示
では、これまで記述した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.4.1
見出しや、太字・下線などに設定した部分が、正しく表示できましたか？
もし、上の図のような表示になっていない場合には、ゆっくりで構いませんので、ここまで記述したソースコードを1行1行見直してみてください。
