演習1.4 文字を強調する

  • 文章に見出しをつける <h1~7>文章</h1~7>
  • 文字を強調する <strong>文章</strong>
  • 水平な罫線を挿入する <hr>

続いて、Webページを見た人が一目で内容を把握できるようなタイトルをつけ、また文字に強弱をつけて、印象を強くしていきましょう。タイトルは「子猫と子犬の部屋」、サブタイトルは「かわいい動物たちの写真館」にします。

1. タイトルやサブタイトルなどの文字を強調する

タイトルとサブタイトルを記述して、それぞれを見出しに設定します。見出しに設定する方法は、第2章で学習した<h>タグを利用します。タイトルには<h1>タグ、サブタイトルには<h3>タグを設定します。

以下のように、ソースコードに文章の追加、またはタグの追加をしてください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>子猫と子犬の部屋</title>
    </head>
    <body>
        <h1>子猫と子犬の部屋</h1>
        <h3>かわいい動物たちの写真館</h3>
        <p>
            子猫と子犬の部屋にようこそ!<br>
            子猫と子犬のとってもかわいい写真をご用意しました。<br><br>
            今後も色々と紹介していきますので、楽しんでください。<br>
        </p>
    </body>
</html>

2. 文字に特徴をつける

続いて、文字を強調する<strong>タグを使って、文章にメリハリをつけてみます。
次のように、記述の一部を変更してください。

<strong>子猫と子犬の部屋にようこそ!</strong><br>
<strong>子猫と子犬 </strong>の<strong>とってもかわいい写真</strong>をご用意しました。<br><br>

「子猫と子犬の部屋にようこそ!」「子猫と子犬」「とってもかわいい写真」という文章を<strong>タグで強調しました。

3. 罫線を引いて内容が分かれていることを示す

ページのなかで、わかりやすく内容を区切るために、罫線を引いてみます。罫線を引くには、<hr>タグを利用します。14行目の記述のすぐ下に、以下のように記述を追加してください。

            今後も色々と紹介していきますので、楽しんでください。<br>
        </p>
        <hr>
    </body>

<hr>タグを利用して、罫線を指定しました。

4. ブラウザで表示

では、これまで記述した内容がブラウザでどのように表示されるか、確認してみましょう。

図 1.4.3

見出しや、太字・下線などに設定した部分が、正しく表示できましたか?

もし、上の図のような表示になっていない場合には、ゆっくりで構いませんので、ここまで記述したソースコードを1行1行見直してみてください。