ホームページ作成講座 -入門編-第3講

第3講では前講で作った「test.htm」に様々なタグを使ってメイクアップしていきます。第2講をまだお読みでない方は、先に第2講をお読みください。

文字をいろいろ変化させよう

	なぁこれだけじゃつまらないぜ
	仕方ないなじゃあまず文字を太くしてみよう
	太く？！パソコンの文字なのに太く書けるのか？
	そこで登場するのが「タグ」だ「タグ」を使えば魔法みたいに文字に変化をつける事が出来るぞ
	おお！楽しみだぜ！
	じゃあさっきの「メモ帳」で書いた「test.htm」に――――――
	え・・・もう消しちゃったんだけど
	ならもう1回開こうさっきの要領で「メモ帳」を開いて「ファイル(F)」→「開く(O)」で「HP」フォルダに保存した「test.htm」を開いてごらん
	うん・・・あれ？「HP」フォルダに「test.htm」がないよ？
	「ファイルの種類(T)」ってところが「テキスト文書 (*.txt)」になってるからだなそこを「すべてのファイル」に変更してごらん
	あ！ちゃんと表示されたぜ！・・・よし開いたぜ

前講で作った「test.htm」を編集します。「メモ帳」を閉じてしまった場合は、さっきと同じ要領で「メモ帳」を立ち上げ、「ファイル(F)」→「開く(O)」で「HP」フォルダの「test.htm」を開きましょう。その際、「ファイルの種類(T)」が「テキスト文書 (*.txt)」等になっている場合は「すべてのファイル」に変更してください。「開く(O)」ボタンを押せば、先ほど保存したものが開かれます。

	<html><head><title>テストページ</title></head><body>テストです。</body></html> これを <html><head><title>テストページ</title></head><body><strong>テストです。</strong></body></html> にしてごらん
	<strong> と </strong> というのを「テストです。」を挟むように追加するんだなよーし・・・できたぜ！
	そしたら上書き保存だ
	上書き保存？ただの保存じゃないの？
	上書き保存というのは保存の事だがこれまで保存されていたデータを消しちゃってその上に保存するという事なんだ
	へえ・・・でその上書き保存っていうのはどうやるんだ？
	簡単さ「ファイル(F)」→「上書き保存(S)」を選択するだけだ
	え・・・やったけど何も起こらなかったよ？
	それでいいんだもう上書き保存されたよ
	へえ！簡単だな！
	じゃあさっきと同じ要領でブラウザで「test.htm」を開いてごらん
	おお！文字が太くなってる！

さっき書いた「HTML文書」を以下のように書き換えましょう。

<html><head><title>テストページ</title></head><body>テストです。</body></html>

～ という「タグ」は文字を強調させたい時に使う「タグ」です。 テストです。とした事で、文字が太字になります。上書き保存して実際に確かめてみましょう。上書き保存は、「ファイル(F)」→「上書き保存(S)」で出来ます。前講と同じ要領で「エクスプローラ」で「HP」フォルダを開き、「test.htm」をブラウザで開いてみましょう。以下のように太い文字になっていれば大成功です。

テストです。

	「strong」ってストロングって読むんだよな「強い」っていう意味じゃなかったっけ
	その通り！鋭いなサトシ「強い」、つまり「強調」するという意味なんだ「タグ名」は英語で書かれていて、みんなそれぞれ意味があるんだ
	へえ！英語が解れば楽なのになあ・・・
	でも英語が解らなくても心配は要らないよ逆に英語が解るからって HTMLが書けるわけではないんだよ
	そうなんだ
	ちなみにさっきの <strong>～</strong> は <b>～</b> と書いても同じ結果になるよ
	え？そうなの？？ <b>～</b> の方が短くて簡単じゃん
	<b>～</b> を使っているホームページが多いんだけれど最近は推奨されていないんだ HTMLにも規則があってなるべく <strong>～</strong> を使うようにしよう
	ふーんわかった他にはどんなタグがあるんだ？
	色々あるよ例えば・・・

色々試してみましょう。次のようにすると、文字が大きくなります。 ※今回から <head><title>テストページ</title></head> は省略して表記しますが、皆さんはきちんと書きましょう。

<html><body><big>テストです。</big></body></html>

<big>～</big> は文字を大きくするためのタグです。上書き保存して、ブラウザで開くと次のようになります。

テストです。

文字を小さくするには ～ とします。

テストです。

「タグ」は組み合わせて使う事が出来ます。例えば <big>～</big> とすれば、大きくて太い文字になります。

テストです。

他にも、次のような様々な文字を修飾する「タグ」があります。 ～ は ～ でも通常同じ結果になりますが、 ～ は ～ 同様に使用を推奨されていません。 ※デザインの都合上、改行されて2行になっていますが、改行する必要はありません。

<html><body><big>全体的に文字が大きくなります。下線を付けます。斜め文字にします。<s>取り消し線を付けます。</s></big></body></html>

全体的に文字が大きくなります。下線を付けます。斜め文字にします。~~取り消し線を付けます。~~

	色々出来て楽しいぜ！でも文字に色を付けるにはどうしたらいいんだ？
	色を付けるのは <font> タグで出来るんだがその前に「カラーコード」というのを教えないといけないな
	「カラーコード」？

第4講：文字に色を付けようへ続く