まずはやってみる

文字を書いてみる
取り敢えず書いてみましょう。
まずはテキストエディタを開いてください。
Windowsの例で言えば。
『スタートメニュー → (すべての)プログラム → アクセサリ → メモ帳』
です。(Macintoshは知らないので悪しからず)
『書き方』のところでも書きましたが、拡張子が表示されていることを確認しておいてください。

問題其の一:下記と同じ文字にしてください。
太字は<B>です
だから僕は歌うんだよ でかい声で!
どんなもんでしょ。答えはこのページの一番最後で♪

調子に乗って後一問
問題其の二:下記と同じ文字にしてください
太字は<B>。斜め文字は<I>です
淋しげな雨に濡れた君の唇が忘れられなくて
別れても私は信じたいいつの日かあなたに愛される愛の奇跡
ネタが古いんだよ!とか言わないで頂戴。
デュエット局で一番初めに思いついたのがこれだったんだから。
・・・でも、太字と斜め文字がヒデとロザンナに対応していないオチ。覚えてないもの。

んで、できましたか?
躓きどころとして<B>と<I>の入れ子(順番)。そして改行(次の行へ移る)だと思います。
と言うか、改行については一言も言っていないので、知らない人はできなくて当然。
書いていて気づいたと思いますが、HTMLのソース内でいくら改行したってブラウザでは改行してくれません。
ブラウザで改行するときは、画面(ブラウザ)の端っこまで文字が続いてしまったときです。
では、改行するにはどうすればよいのでしょう?

実はこの改行にもタグを使う必要があるんです。
改行のタグは「Break(改行)」の頭二つをもじった<Br>です。
では、どこからどこまでを<Br>と</Br>に入れればよいのでしょう?
二つ案を用意しました。
<Br>これが一行目</Br>
<Br>これが二行目</Br>
これが一行目<Br></Br>
これが二行目<Br></Br>
どちらが正しいか? と言うと、どちらも正しくはありませんが、ニュアンス的には後者があっています。
ただ、開始してから終了するまで何も書くことがないと、いちいち開始と終了を二つ書くのが馬鹿馬鹿しいですね。
なので、<Br>の場合は開始タグだけで良いんです。
そもそもHTMLには</Br>なんてタグはないんですよ。(XMLにはあるのかな?)
つまり正解は
これが一行目<Br>
これが二行目<Br>
と、こうなるわけです。
このように、HTMLには終わりのタグがないものがいくつかあります。
言ってみれば空の箱に札だけが付いてる状態ですね。
こう言うタグを空要素と呼ぶそうです。ま、だからなんだってわけじゃありませんが。

先ほどの問題『愛の奇跡』に改行を入れてみましょう。
<Br>を『忘れられなくて』の後ろに入れればOKです。


※答え
問題其の一
だから僕は歌うんだよ <B>でかい声</b>で!
問題其の二
<I>淋しげな雨に濡れた君の<B>唇が忘れられなくて</b></i><Br> <B>別れても私は信じたい</b><I>いつの日か</i><B>あなたに</b><B><I>愛される愛の奇跡</i></b>
→ 深い話(ソース内の改行について)
属性
太字。斜め文字を極めたところで、次に『色をつける』事をやってみましょう。
文字を赤くするには以下のタグを使います。
<Font Color="Red">
なんか今までより文字数が増えてきましたね(笑)
今までは<B>見たいに単純なものだったのに対し、今度のは=とか余計なのがくっついてきました。

実は、HTMLのタグには『属性』と呼ばれるものがくっついてます。
タグの構成
タグ名・・・ このタグが何を意味するかを表しています。「B」であれば『太字』。「Font」であれば『文字』であることを意味します。
属性名・・・ このタグの細かい部分を表してます。この場合は『Color(色)』なので、『Font(文字)のColor(色)』を意味します。
属性値・・・ その属性が何であるかを表してます。この場合は『Red(赤)』なので、『Font(文字)のColor(色)はRed(赤)』であることを意味します。
こんな感じで分かりますか?
なんにせよ、一度書いてみましょう。
<Font Color="Red">赤い文字です</Font>
このように記述すれば、以下の通りになります。
赤い文字です
見ての通り、終わりのタグには属性や属性の値は要りません。タグ名だけで大丈夫です。
逆に、終わりのタグだけに属性や属性の値を書いても、ブラウザは認識してくれません。
下手をすると、終了タグであるということも認識してくれないかもしれません。
終わりのタグにはタグ名だけを記述しましょう。
ちなみに、色は「Red」の他に「Blue」や「Green」や「Yellow」などがあります。
RGBと言う3原色の色の指定もできますが、それは後述で。

どうせなので、文字の大きさを変える方法も試してみましょう。
文字の大きさを変える場合も、色と同じように<Font>のタグを使います。
<Font Size="7">
全く以って分かりやすいですね。
Size後は「1(小)〜7(大)」の間で好きな数字を指定します。通常の大きさは「3」となっています。
1は「この大きさ」。7は「この大きさ」です。
試しに、以下のようなグラディエーション(?)を書いてみましょう。
1 2 3 4 5 6 7
まぁ、暇な人しかやらないでしょうね。こう言う演習(ぁ

追記ですが、属性は纏めて書くことができます。
例えば、文字の大きさを大きくして、尚且つ色を赤くしたい。と言う場合。
<Font Color="Red" Size="5">我は草なり 伸びんとす<Font>
と書けば、赤字で大きな文字になります。この辺、わざわざ<Font>を沢山書かなくて良いので便利ですね。
余談ですが、わざわざ<Font>を二つ買いてもこの場合はちゃんと赤字で大きな文字になってくれます。

ふと、「<B Color="Red">」とすれば、太字で文字が赤くなってくれるのでは? と思った方はいないでしょうか。
残念ながら、タグには決められた属性があるので、存在しない属性を書いても思い通りにはなってくれません。
<B>に「Color」という属性は無いため、太字で赤字にしたい場合は
<B><Font Color="Red">〜〜</Font></B>
と書かないといけません。(もっと楽をしたい場合はスタイルシートを勉強しましょう)
→ 細かい話(引用符「"」について) → 細かい話(物理マークアップ)
HTMLのトップ に戻る