【４】レイアウトの設定

○ＨＴＭＬ入力

１．文字をセンタリングします。

　ａ．「index.html」ファイルを開き、［表示］［ソース］から、「index.html文書」
　　　を表示させます。

　ｂ．＜font size="7"＞生活者主権の会 の前に、＜br＞＜br＞と入力し、上部に余白
　　　を取り、文字を見やすくします。また「生活者主権の会」と「平成維新の誓い」
　　　の間にも＜br＞をいくつか入れ、ＨＰを見やすくします。
　　　（ただし、これは、ＨＰを作る人の好みです。）

　ｃ．＜font size="7"＞生活者主権の会 の前の行に、＜center＞　と入力し、「平成
　　　維新の誓い」の最後の 「誓います。」の後ろに入れた、 ＜/font＞　の後ろに
　　　＜/center＞と入力します。

　ｄ．上書き保存し、ＨＰに画面を切り替え、更新すると、「生活者主権の会」か「平
　　　成維新の誓い」の最後までが、センタリングされます。


２．「平成維新憲章」の、桁ずれを直します。

　ａ．＜font size="6"＞ ＜i＞「平成維新憲章」の前の行に ＜pre＞ と入力し、文の
　　　最後の、「続けます。」＜br＞ の下の行に ＜/pre＞ と入力します。

　☆＜pre＞＜/pre＞ は「文字列をＨＴＭＬ文書に入力したとおりの形に表示させる」
　　ための『タグ』で、[Enter] による改行や、半角のスペースも、この間に入ってい
　　るものは、そのままの形で表示されます。

　ｂ．上書き保存し、ＨＰに画面を切り替え、更新すると、「平成維新憲章」の文の桁
　　　ずれがなくなります。

　ｃ．桁ずれはなくなりましたが、改行するごとに＜br＞を入れましたので、すべての
　　　行に一行分のスペースができてしまいました。そこで面倒ですが、「平成維新憲
　　　章」の文を改行するために付けたすべての＜br＞を削除して下さい。


３．区切り線を挿入します。

　ａ．水平線を引くには、＜hr＞ を使います。　(これは『単独タグ』です。）

　ｂ．「生活者主権の会」と「平成維新の誓い」の間に、＜hr＞と入力します。

　☆これで「水平線」は引けましたが、属性を使ってさらに、太さ、長さ、位置、色を
　　指定します。

　ｃ．＜hrに続けて、半角スペースを入れ、さらに続けて、size="5" width="400"
       align="center" color="#008000"＞ とします。
　
　☆これで、太さ５ピクセル、長さ４００ピクセル、センタリング、緑、の水平線が引
　　けました。


４．「平成維新の誓い」のレイアウトに手を入れます。

　ａ．「平成維新の誓い」の前後を ＜font size="5"＞ と ＜/font＞ で挟み、文字を
　　　大きくします。

　ｂ．「平成維新の誓い」と本文の間に ＜br＞ を入れ、一行スペースを作ります。

　ｃ．本文の ＜br＞ の位置を適当に変更し、文章の区切りを良くします。


　《委員会ＨＰ・第２回学習会−その４の完成ＨＰの画面と同じになればＯＫです。》

　　　　　　　↓

◎これで第４回目は終了です。

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会【その５】へ

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会　目次へ