ばぼびぃのおへや

どうです？
ページを作ってみました？
文章だけのページですが、作れたんじゃないでしょうか？
ただ、改行されませんでしたよね。

-------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> test </TITLE>
</HEAD>
<BODY>
テストです。
</BODY>
</HTML>
-------------------------------------------------------------

これが、前回使ったテストページです。
「テストです」の部分を書き換えてみましたね？
例えば、

こんにちわ
今日はいい天気ですね

と、2つの言葉を2行に分けて書いてみても、ブラウザで表示してみると、1行に表示されてしまいます。

こんにちわ今日はいい天気ですね

このように表示されたのではないでしょうか。

では、どうやって改行するのでしょう？

 

これが、改行タグです。
このタグには終了タグがありません。 だけで改行してくれます。
方法は簡単。
改行したい位置に、 を書き込むだけです。
上の例でいうと、

こんにちわ 
今日はいい天気ですね

と書くことになります。
さらに行間を開けたい場合は、そのぶんだけ を追加すればいいんです。

あ。
唐突ですみません。
改行の次に、段落の話に進むか水平線の表示方法を先に書こうか考えていたら、私、なんてバカなことしてたんだろうと、思い当たってしまいました。
それは、上のHTML ファイルの紹介をマイナス記号を連ねて囲ってました。
が。

↑ これで事足りたんですよね…。
おバカでした（苦笑）
これが、水平線です。

<HR>

タグはこう書きます。
このタグも、終了タグがありません。単独で用います。

この線は、色や幅、長さなどを変更することができます。

色：
<HR color="blue">

横幅：
<HR width="100">

縦幅：
<HR size="10">

平面的な線：
<HR noshade size="10">

表示位置：
<HR align="right" color="black" width="100" size="20">

この例だけで理解できた方は、優秀です。
次の説明文を読み飛ばしてもかまいませんが、復習の意味もこめて、読んでみて下さい。

では、ひとつひとつ説明していきますよ。

FONT タグのところでも説明しましたが、＜タグ名属性名＝属性値＞という書き方になっています。
color はもうお分かりだと思います。
そう、色の指定です。
size はそのまま大きさで、見た目の変化では縦幅に相当します。
width は幅、横幅のことです。
noshade には、属性値が存在しません。効果は、見たまま、です。効果を見やすいようにsize 指定をしています。
align が表示位置を指定します。
水平線の場合、横幅を決めてやらないと端から端まで表示されるので、表示位置を確認できるように横幅も設定しています。ついでとばかりに、全部の設定をしてますけど…（笑）

size とwidth の値は、２つの指定方法があります。
ピクセル値指定と、パーセント指定です。
上の例文は、ピクセルという単位で指定されています。

1ピクセル＝（表示上の）1ドット

だそうです。
パソコンのモニタ画面は、沢山の光の点で構成されていると思ってください。
光の点が集まって、いろいろなものを表示していると…。
この光の点1つの大きさを、1ドットといいます。

例えば、モニタの画面が800×600とか、1024×768などと、説明書や広告に書いてないですか？
その数字は、800×600ピクセル、1024×768ピクセルなんです。
この単位の大きさは、まあ、漠然と覚えておけばいいです。
結局、表示してみて、気に入る大きさに変更していけば良いだけですから。

パーセント指定は、割合で指定します。って、まんまですね（笑）

<HR width="100%">

このようになります。
文章で説明するより、見たほうが早いですね。

align について。
表示位置の値は、次の3つになります。

属性値	行揃え位置
left	左揃え
center	中央揃え（標準）
right	右揃え

align を指定しなかった場合、中央揃えで表示されます。

どうです？少しは分かりました？
とにかく、自分で使ってみれば、なんとなく分かると思います。
まずは、利用してみることです。

さて、段落については後回しにして、次へ行きます。

文字の書体を指定する
～

指定したいフォント名を値に記入すると、そのフォントで表示されるようになります。
ただし、指定したフォントが相手のパソコンにインストールされていないと、デフォルトのフォントで表示されてしまいます。
できるだけ、思い描いているものに近いものを相手に見せたい場合、複数のフォントを指定しておきます。左から順番に見ていき、指定のフォントがあった時点で、そのフォントでの表示となります。最後まで見てもフォントがなかった場合は、デフォルトのフォントとなります。
複数のフォントを指定する場合は、次のように書きます。

This is a pen.

表示例：This is a pen.

ペンはペンでしょ？

表示例：ペンはペンでしょ？

ただし、日本語を指定するとNetscape （ブラウザの1つ）は指定を無視し、無効化してくれるそうです。

利用方法としては、ウィンドウズのパソコンは「MS 明朝」、マッキントッシュは「細明朝体」と、それぞれ別々の明朝体が入っています。両方とも明朝体で表示したい場合に、face="'細明朝体','MS 明朝'"と指定します。

文字を強調する
～

より強調する
～

プログラムソース（以後、ソース）例：
すごいで～！ 
ものごっつ！

表示例：
すごいで～！
ものごっつ！

どこがやねん。
なんてつっこみはなしや。
この強調表示は、太字にするとか斜体にする、などといった意味ではありません。
見た目で目立つようにする、という意味です。
太字にするときは タグ、斜体にするときは タグを用いるようにしましょう。
見た目も、微妙に異なりますけどね。

文字をイタリック／斜体にする
～

文字を太字にする
～

ソース例：
傾いた文字 
太くなる

表示例：
傾いた文字
太くなる

これは、見たままなので、説明を省きます。

文字を等幅文字にする
<TT>～</TT>

見る側のブラウザに等幅フォントが設定されている必要があるそうです。
実は、私も知らないんです（笑）

ソース例：
<TT>等幅フォント？ 
What is it? </TT>

表示例：
等幅フォント What is it?
通常：
等幅フォント
What is it?

う～ん…。
なんとなく、分かったような分からないような…（笑）
え～と、あ、分かりました。
等幅フォントは、半角文字（英数文字）と全角文字（日本語）との文字幅比率が2対1になっています。
つまり、半角英数文字2文字に対して、日本語1文字の割合です。

上付文字
～

下付文字
～

ソース例：
210 = 1024 
log102

表示例：
2¹⁰ = 1024
log₁₀2

文字を上側に付けたり、下側に付けたりするタグです。
文字サイズも、一回り小さくなるようです。

文字に下線をつける
～

ソース例：
ここは重要です。

表示例：
ここは重要です。

青い字で書くと、リンクと間違われるかもしれませんが、こうなります。
見たまんまですね？

文字に取り消し線をつける
<S>～</S>
<STRIKE>～</STRIKE>

ソース例：
<S>これはテストに出ます</S> 
<STRIKE>これはテストに出ます。</STRIKE>

表示例：
~~これはテストに出ます。~~
~~これはテストに出ます。~~

効果は見てのとおりです。この2つのタグは、同じ効果のものです。

今回は、タグがいっぱい出てきますね。
混乱していませんか？
できるだけ、自分で試してみてくださいね。

次回は、文章の見栄えで、説明を飛ばしていた段落について行います。

もし、この説明の間違い（誤字脱字も含む）や、分からないところがありましたら、掲示板で指摘してください。

では、次の講座で…。