画面表示をセンター揃えにする
演習1.7 画面表示をセンター揃えにする
☑画面のセンターに表示する <center>○○○</center>
ページ全体のレイアウトは、左寄せ、右寄せ、センター揃えなどに指定できます。目的に応じて使い分けますが、ここでは中央に揃えてみます。
1. 文章と写真をセンター揃えにする
現時点では、文章や画像がブラウザ上で、左寄せで表示されています。（ただし、罫線だけは、ブラウザによっては中央に表示されます）
図 1.7.1
全体をセンター揃えにするために、<center>タグを挿入します。
2. すべてをセンターに揃える
センター揃えにするには、<body>タグの中で全体を<center>タグで囲みます。以下のように、ソースコードに記述を追加してください。
①ソース・フォルダー ：html/ch06
②ファイル名 ：index.html
➢ index.html (※必要部分のみ記載)
～前略～
<body bgcolor="#FFFFCC">
<center>
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<img src="img/img01.jpg" border="0" alt="メイン写真"><br><br>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ！</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。
<br><br>
<hr width="540">
</center>
</body>
</html>
<body>タグの中の記述を、<center>と</center>で囲みました。
3. HTMLファイルを保存
記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.7.2
<center>タグを挿入することによって、ページの中身がセンター揃えになり、見た目がすっきりとしました。
