けいのdreamweaverでホームページ制作入門

文字を囲むタグを把握しよう！

とりあえず内容の文字は打ったので、ここらでこれさえ覚えればホームページは出来る！！ってタグを紹介します。これは僕が個人的に思ったことなんで、他によく使うよ。ってタグもあるやも知れませんが。

htmlタグ
headタグ
titleタグ
bodyタグ
metaタグ

これらについては、タグの見方で、解説してます。

h1〜6　タグ

見出し文字に使います。かなり重要なタグで、このタグがないサイトは駄目なサイトといってもいいです。詳しくはこちら

p　タグ

普通に文を打つときに使います。囲まれた部分が、一つの段落になります。勝手に改行してくれるタグで、1行分改行されます。さっき、＜BR　／＞でも改行出来るといいましたが、これはただ単に、改行されます。　詳しくはこちら

divタグ

ボックスを作るタグです。ひとかたまりの範囲として定義されます。同様な使い方をするタグに＜SPAN＞がありますが、 ＜DIV＞はブロック要素であり、＜SPAN＞はインライン要素です。
※ブロック要素とは、ひとつのまとまった単位として表されるもので、 ブラウザで見たときに前後に改行が入って表示されます。
※インライン要素は主に文章の一部として利用されるもので、その前後は改行されません。詳しくはこちら

brタグ

改行するときに使います。＜＞＜／＞ではなく、＜／br＞の一つで改行します。詳しくはこちら

spanタグ

divと同じく、ひとかたまりの範囲として定義するタグです。ただしインライン要素で、改行されません。画像の横っちょにキャプションをつけるときとか、部分的にCSS定義をしたいときに使います。詳しくはこちら

ol,ulの中にliタグ

リストタグです。主にナビや料理の材料リストなどの部分に使います。ulは順序がありません。1,2,3・・・と表示させたい場合は、順序があるolを使用します。olとli、またはulとliは一緒になっているもので、リストとするものにはolまたはulで囲まなくてはいけません。リストの各項目をliで囲みます。詳しくはこちら

dlの中にdt,ddタグ

リストの説明をしたいときに使います。今まさに、各タグについて説明していますね。この部分は、このタグでかこっています。dtに定義する用語を記述し、ddにその用語の説明を記述します。 このdt、ddのセットはdlで囲んでやらなければいけません。また、dt、ddのセットはdlの中に複数並べることが出来ます。詳しくはこちら

aタグ

リンクを貼る画像や文字などを囲むタグです。詳しくはこちら

imgタグ

その名の通り、イメージのタグです。注意すべきは、使える拡張子。現在、僕の知る限りでは、『jpgとpngとgif』の三種類しか使えません。

jpg

jpgは色数が多く、背景が白です。容量は中

png

pngは色数が多く、背景が透明です。容量はやや高

gif

gifは色数が少なく、グラデーションの表現がしょぼいです。背景白。容量が低いので、小さい画像向き（アイコンとか）

このように、それぞれ特徴があるので、うまく使って容量を抑えましょう。

さて、imgタグですが、画像を［挿入］で入れたときに、勝手に書かれるので、自分で書くことは稀です。ただ、画像に名前をつけるタグのaltなんですが、これは自分で打つときもあります。（しかし僕はほとんどプロパティパレットから入れてます。）なお、altを使って名前は確実につけてください。
なぜかというと、検索エンジンは、画像自体は認識してくれないからです。画像にテキストで名前をつければ、認識してくれます。詳しくはこちら

strongタグ

文字を強調したいときに使います。こんな感じ▶強調詳しくはこちら

tableの中にtr,th,tdタグ

表を描くタグです。テーブルの基本的な構造は、 ＜table＞～ ＜table＞>内に＜tr＞～＜／tr＞で表の横一行を定義して、 さらにその中に＜th＞〜＜／th＞や ＜td＞～＜／td＞でセルを定義します。thは見出しに使用します。でも、基本的にtdで事足りると思います。詳しくはこちら

addressタグ

普通のサイトには、あんまり必要はないかもしれないですが著作権のことを描きたいときや、その名の通り住所などを書くときに使用します。このサイトの一番下の Copyright (C) 2008 けいのdreamweaverでホームページ制作入門 , All rights reserved.はこのタグでかこっているため、斜めになってます。詳しくはこちら

idとclass

これはCSSで定義するときに使います。箱の名札みたいなもので、CSSでは、○○という名前のついた箱の文字は赤くする、などの定義が出来ます。bodyの中の、＜＞〜＜／＞（箱）で囲われているもの全てに名前をつけることが出来ます。 だから、たとえば

こんな感じに名前をつけることが出来ます。名前は自分の好きにつけていいですが、長い名前のやつには、大文字を使うなどして、見たときに分かりやすくしましょう。idとclassについては、＜div＞〜＜/div＞タグでボックスを作ろう！でも説明しています。
CSSについては、カスケーリングスタイルシートを学ぼうで、詳しく説明しています。

さて、こんなもんで、ホームページは出来てしまいます。簡単ですね〜。じゃあこれをふまえて、書いた文字を囲んでいきましょう！