Webページ作成入門

文章の改行や配置と水平線について

文章の改行や配置と水平線について簡単に学びます。

改行しよう

文章が長くなればなるほど、「改行」しないと読みにくくなります。

実は、TeraPadで改行してもWebページ上では改行されません。
改行したい所に「<br>」と書きましょう

<html>
<head>
<title>私の日記</title>
</head>
<body>
今日は、Webページで「改行」する方法を勉強した。
もっと勉強して、ページの見栄えを良くしたい。
</body>
</html>
<html>
<head>
<title>私の日記</title>
</head>
<body>
今日は、Webページで「改行」する方法を勉強した。<br>
もっと勉強して、ページの見栄えを良くしたい。
</body>
</html>
こうなる:改行されていない こうなる:改行されている

これを使うと、改行箇所に自動で<br>を挿入します

文章の配置をしよう

これまでの知識で作ったWebページの文章は、「左揃え」でした。

しかし、「中央揃え」や「右揃え」もあります。

文章を中央揃えにしたい場合は、
その文章を「<div style="text-align:center;">」と「</div>」で囲みます

文章を右揃えにしたい場合は、
その文章を「<div style="text-align:right;">」と「</div>」で囲みます

ちなみに、通常は不要ですが、文章を左揃えにしたい場合は、その文章を「<div style="text-align:left;">」と「</div>」で囲みます。

<html>
<head>
<title>私の日記</title>
</head>
<body>
<div style="text-align:left;">
左揃え(標準)。<br>
各行の左端が画面の左端になるようにする。<br>
</div>

<div style="text-align:center;">
中央揃え。<br>
各行の中央が画面の中央になるようにする。<br>
</div>

<div style="text-align:right;">
右揃え。<br>
各行の右端が画面の右端になるようにする。<br>
</div>

</body>
</html>

こうなる

水平線を挿入しよう

「水平線」は以下のように画面の左端から右端を貫く直線です。


これを使うことにより、ページが見やすくなることがあります。

水平線を挿入したい部分に「<hr>」と書きます。

<html>
<head>
<title>私の日記</title>
</head>
<body>
文章1
<hr>
文章2
</body>
</html>

こうなる


作成者 組長