知って得する!基本的なタグの解説1


知って得する!基本的なタグの解説1文字の大きさを変えたり、色をつけたり等の文字を飾り付けるためのタグです。
いくつかの種類があるので実例を出してみましょう

<font color=”red”>色を変えたい文字</font>
<font size=”5″>大きさを変えたい文字</font>

ブラウザで表示すると↓
色を変えたい文字大きさを変えたい文字
こんな風になります。

色は「COLOR」、大きさは「SIZE」で指定しているのがわかりますよね。

では、ここを強調して表示させたい!という場合はどうでしょう。

文字の太さを変えるタグ

この言葉は大事だからちょっと太く表示したい!と思ったときのタグもちゃんとあります。

<b>太くしたい文字</b>

ブラウザで表示すると↓
太くしたい文字
こんな風になります。

ここでは「B」で指定しています。強調したい時はその言葉を「B」タグで囲えば太字で表示することが出来ます。

その他、文字も太くした上で、意味も強調したい時にはストロングタグを使います。

<strong>太く強調したい文字</strong>

ブラウザで表示すると↓
太く強調したい文字
こんな風になります。

改行のタグ

文章をブラウザで表示させるにあたって、だらだらと改行も無しに延々と文字ばかりが書かれていたら、あまり読む気がなくなってしまいますよね。文章を読ませやすくする為にも、適度な改行が必要です。

例えば、

「ホームページを作成したのですが、読みやすい文章を表示させる為には、改行が必要です。」という文章を改行するとしたら次のようになります。

「ホームページを作成したのですが、<br />読みやすい文章を表示させる為には、<br />改行が必要です。」

ブラウザで表示すると↓

「ホームページを作成したのですが、

読みやすい文章を表示させる為には、

改行が必要です。」

と表示されます。

文章の間に、<br />タグをしようすることで改行する事ができます。だらだらと長く読みにくい文章を、改行する事によってすっきり読みやすく表示させる為に、多様されるタグです。

見出しを作るタグ

文章に見出しをつけるときの基本的なタグの一つです。h1が一番大きな見出しタグで、h6が一番小さな見出しタグとなります。

<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し6</h5> <h6>見出し6</h6>

ブラウザで表示すると↓

見出しタグ

こんな風になります。自動的に文字が大きくなり、改行されて行と行の間にスペースが出来ました。

他にも色々なタグがありますが、実践しながら少しずつ知識を広げていくといいと思います。

一度に沢山使おうとしても、収集がつかなくなってしまうかもしれませんから、楽しみながら覚えていきましょう!

 合わせて読みたい関連記事

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

タグ


トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ