簡単ホームページをメモ帳で作ろうよ


第三回

<nifty:FROM40PC/MES/11/430>

<改行の仕方とフォントのサイズや色をいろいろ指定する>

今までのサンプルでは、テキストの改行位置はブラウザの幅によって自動的に決められてしまいましたので、
今回は任意の位置でテキストを改行するタグを覚えていただきましょう。

こんなのを作りましたよね。ところで、ブラウザでこれを読み込むと、これとは
本文の見え方が違いますよね。横に文がつながってしまっています。
一文ずつで改行を入れたいとき、使うタグが次のものです。

<改行して遊ぼ、うちの親戚は開業医>

<BR>

普通、タグは二個セットで使うのですが、これは例外です。改行を入れたい場所で <BR> を挿入すればオッケーです。
たとえば、次のように編集すると、一文ずつで改行されて表示されます。ささ、お好きな場所で <BR>を挿入して、じゃんじゃん強制改行させましょう。前回のサンプルを一文ずつ改行させるように変更してみます。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
さっそく簡単なページを作ってみましたぞ。<br>
たったこれだけでもホームページなんやね。<br>
いやー、今日も暑かったよねえ。<br>
ビアガーデンに行きたいぞ。<br>
ほんちの日記<br>
</body>
</html>


では、今回のは mypage3a.htm とでも名前を付けて保存して、ブラウザで確認してみましょう。

見事に、一文ずつ改行に成功しました。

もうひとつ、改行してから空白行を入れてくれるタグもあります。
<P>です。これもセットで用いなくてもいいタグです。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
さっそく簡単なページを作ってみましたぞ。<br>
たったこれだけでもホームページなんやね。<p>
いやー、今日も暑かったよねえ。<br>
ビアガーデンに行きたいぞ。<br>
ほんちの日記<br>
</body>
</html>


二番目の<br>を<p>に変更しただけです。mypageb.htmとして保存し、ブラウザで確認してみます。

<p>を使うと、改行してくれて一行の空白ができるんですね。

<フォントの大きさ、色を変えて遊ぼ>

次は文字の一部分だけを大きくしたり、小さくしたり、色を変えて遊びます。今までのタグの記述の仕方では、本文の文字全部が同じ大きさになったり、同じ色になっています。これを、指定した部分だけ変えるわけです。そんな時に使うのがまずこれです。

<FONT SIZE=1~7>文字</FONT> 

SIZE(サイズ)の後の数字は 1 が最小で、7 が最大です。さきほどのを下のように変えてみましょうか。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
<font size=3>さっそく簡単なページを作ってみましたぞ。</font><br>
<font size=4>たったこれだけでもホームページなんやね。</font><br>
<font size=5>いやー、今日も暑かったよねえ。</font><br>
<font size=6>ビアガーデンに行きたいぞ。</font><br>
<font size=7>ほんちの日記</font><br>
</body>
</html>


タイプが済んだら、mypagec.htmと保存して、ブラウザで確認してみます。

文字がだんだん大きくなって表示されました。

では、次は文字の色を指定するタグです。今のと似てます。
<font color="red">文字</font>

これは、さきほどのフォントの大きさを指定するのと一緒に使って、たとえば次のようにすることもできます。
<font size=3 color="red">文字</font>

では、練習です。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
<font size=3 color="red">さっそく簡単なページを作ってみましたぞ。
</font><br>
<font size=4 color="yellow">たったこれだけでもホームページなんやね。
</font><br>
<font size=5 color="green">いやー、今日も暑かったよねえ。</font><br>
<font size=6 color="black">ビアガーデンに行きたいぞ。</font><br>
<font size=7 color="white">ほんちの日記</font><br>
</body>
</html>

修正が済んだら、mypaged.htmと保存してブラウザで確認してみます。

どうです、カラフルで大きさがばらばらに表示されたでしょう。

次は字体を変えますね。
<B>文字</B> これで文字が太字になります。
<I>文字</I> これで文字が斜体になります。

では、これを使って練習してみます。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
<font size=3 color="red"><b>さっそく簡単なページを作ってみましたぞ。
</b></font><br>
<font size=4 color="yellow"><i>たったこれだけでもホームページなんやね。
</i></font><br>
<font size=5 color="green"><b>いやー、今日も暑かったよねえ。
</b></font><br>
<font size=6 color="black"><i>ビアガーデンに行きたいぞ。</i></font><br>
<font size=7 color="white"><i>ほんちの日記</i></font><br>
</body>
</html>


変更が済んだら、mypagee.htmと保存して、ブラウザで確認してみます。

なんか、すごい事になってきていますね。(^_^;)

では、本日最後のタグはこれです。

<BLINK>文字</BLINK> (ただし、Internet Explorerでは効果なしです)
このタグの効果は、あえて言わないことにしましょう。だって、使ってみれば一目瞭然ですから。
たとえば、次のように変更してみましょう。mypagef.htmと保存後にブラウザで確認します。

<html>
<head><title>簡単なページ・パート2</title></head>
<body bgcolor="pink" text="blue">
<font size=3 color="red"><b>さっそく簡単なページを作ってみましたぞ。
</b></font><br>
<font size=4 color="yellow"><i>たったこれだけでもホームページなんやね。
</i></font><br>
<font size=5 color="green"><b>いやー、今日も暑かったよねえ。
</b></font><br>
<font size=6 color="black"><blink><i>ビアガーデンに行きたいぞ。
</i></blink></font><br>
<font size=7 color="white"><i>ほんちの日記</i></font><br>
</body>
</html>


残念ながら、Internet Explorerでは変化が見られません。このように、特定のブラウザにしか対応していないタグはけっこうあるようです。

Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson10
Lesson11 Lesson12 Lesson13 Lesson14 Lesson15 Lesson16 Lesson17 Lesson18 Lesson19 Lesson20
Lesson21 Lesson22 Lesson23 Lesson24 Lesson25 Lesson26 Lesson27 Lesson28 Lesson29 Lesson30

みつりんの簡単ホームページ講座トップ

トップページへ コマンドプロンプト VBAで遊ぼう パレットへ(注) ホームページ道場へ(注)
(注)@nifty会員のみご利用いただけます 30日で完成ホームページ本 ファイルの開き方

Since 15/06/1999
ホームページの内容の転載を禁じます made by mitsurin