安達司法書士.comブログ:HTMLタグのすすめ - livedoor Blog(ブログ)

2006年12月02日

HTMLタグのすすめ


ブログは、HTMLタグ(以下「タグ」といいます。)などを知らない初心者でも、簡単にホームページが作れるということが売りですが、記事の表現の幅を広げるには、どうしてもタグを知っておく必要があります。そもそもタグとは、二つの不等号< >で囲まれ、ホームページを作るときに使われるものです。Internet Explorerなどのブラウザは、このタグを元にホームページを表示しています。あなたもブログを書いているなら、ぜひ簡単なタグを覚えることをおすすめします。

タグの記入方法ですが、基本的には<開始タグ>と</終了タグ>のペアで使います。要は、変更したい箇所をタグで囲むだけです。ただし、改行を指定する<br>タグのように、終了タグがないものもあります。それでは、タグの具体例をご紹介しましょう。なお、分かりやすくするために、ここではタグを赤字で表記しています。

ブログサービスによっては、ご紹介するタグが使用できない可能性がありますので、予めご了承ください。

  
文字の大きさ、色 <font>〜</font>および太文字 <strong>〜</strong>
<font size="3" color="green"><strong>ブログ</strong>のための</font>HTML<strong>タグ</strong>
青色下線部分は文字の大きさ、金色下線部分は文字の色
色の指定についてはこちら
ブログのためのHTMLタグ
文字の書体 <font face>〜</font>
<font face="HG正楷書体-PRO">ブログのためのHTMLタグ</font>
ブログのためのHTMLタグ
斜体文字 <em>〜</em>
<em>ブログのためのHTMLタグ</em>
ブログのためのHTMLタグ
文字のスクロール <marquee>〜</marquee>と中央揃え <center>〜</center>
<marquee onmouseover="this.stop()" onmouseout="this.start()">ブログのためのHTMLタグ</marquee>
青色下線部分を記入すれば、文字にマウスを当てると静止します。
ブログのためのHTMLタグ
<marquee width="140" height="60" direction="up">ブログのためのHTMLタグ</marquee>
青色下線部分は横幅、金色下線部分は高さ、緑色下線部分は文字の流れる方向
ブログのためのHTMLタグ
<center><marquee width="300" bgcolor="#e0e0e0" scrollamount="3"><font color="crimson">ブログのためのHTMLタグ</font></marquee></center>
茶色下線部分はセンタリングタグ
青色下線部分は背景色、金色下線部分は文字の流れる速度(指定しないと"6")
ブログのためのHTMLタグ
単純な下線 <u>〜</u>
<u>ブログのためのHTMLタグ</u>
ブログのためのHTMLタグ
下線の太さと色 <span style="border-bottom: ">〜</span>
<span style="border-bottom:1px solid #cc0099">ブログのためのHTMLタグ</span>
青色下線部分は線の太さ、金色下線部分は線の種類、緑色下線部分は線の色
ブログのためのHTMLタグ
<span style="border-bottom:3px dashed #66cc33">ブログのためのHTMLタグ</span>
ブログのためのHTMLタグ
<span style="border-bottom:5px double #800000">ブログのためのHTMLタグ</span>
ブログのためのHTMLタグ
取り消し線 <del>〜</del>と内容の追加 <ins>〜</ins>
ブログのため<del>になる</del><ins>HTML</ins>タグ
ブログのためになるHTMLタグ
行のスタイル <p style=" ">と横罫線(区切り線) <hr>
<p style="line-height:2em;text-align:center;">これだけ知っていればいい!<br>ブログのためのHTMLタグ<hr width="線の長さ" color="線の色" align="center">
青色下線部分は行の高さ(2em = 文字の高さ×2)、金色下線部分は行のセンタリング
緑色下線部分は横罫線のスタイル(align="center"はセンタリング)

これだけ知っていればいい!
ブログのためのHTMLタグ


画像の周りの文字の回り込み <img>
<img src="URL(画像のアドレス)" width="画像の横幅" height="画像の高さ" title="春の環状線" align="right" hspace="10" vspace="5"><img>タグに、align="right"またはalign="left"を記入すると、…<br>また、<br clear="all">を記入すれば、<br clear="all">この回り込みを途中でやめることもできます。
金色下線部分は左右の余白、緑色下線部分は上下の余白、茶色下線部分は回り込みの解除
<img>タグに、align="right"またはalign="left"を記入すると、画像の周りの文字の回り込み方法を指定することができます。
この例では、"right"を指定(<img>タグの青色下線部分)していますので、画像が右端に寄り、画像に続く文字が回り込んでいます。
また、<br clear="all">を記入すれば、
この回り込みを途中でやめることもできます。


記事の内容(画)が良かった!と思われたら、バナークリックをお願いします...
人気ブログランキング
書式の無償ダウンロード・便利ツールのご利用はホームページ

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔