ホームページ作成講座 -入門編-第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><strong>テストです。</strong></body></html>
<strong>〜</strong> という「タグ」は文字を強調させたい時に使う「タグ」です。 <strong>テストです。</strong>とした事で、文字が太字になります。 上書き保存して実際に確かめてみましょう。上書き保存は、「ファイル(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> は文字を大きくするためのタグです。 上書き保存して、ブラウザで開くと次のようになります。
テストです。
文字を小さくするには <small>〜</small> とします。
テストです。
「タグ」は組み合わせて使う事が出来ます。 例えば <big><strong>〜</strong></big> とすれば、大きくて太い文字になります。
テストです。
他にも、次のような様々な文字を修飾する「タグ」があります。 <em>〜</em> は <i>〜</i> でも通常同じ結果になりますが、 <i>〜</i> は <b>〜</b> 同様に使用を推奨されていません。 ※デザインの都合上、改行されて2行になっていますが、改行する必要はありません。
<html><body><big>全体的に文字が大きくなります。<u>下線を付けます。</u><em>斜め文字にします。</em><s>取り消し線を付けます。</s></big></body></html>
全体的に文字が大きくなります。下線を付けます。斜め文字にします。取り消し線を付けます。
色々出来て楽しいぜ! でも 文字に色を付けるには どうしたらいいんだ? | |
色を付けるのは <font> タグで出来るんだが その前に「カラーコード」というのを教えないといけないな | |
「カラーコード」? |
まとめ
- 文字を強調したい時は、 <strong>〜</strong> を用いる
- 文字を修飾するタグには、推奨されていなものがある
スポンサーリンク