グループ化 【<div>タグ】：HTML入門
HTML入門（9）
今回は、各タグをグループ化する<div>タグです。
<div>タグは、今までお話してきたタグとは、ちょっと違うので、分かり難いかもしれません。
しかーし、CSSにて必須となるタグなので、がっちり慣れておきましょう。お話は、次の順番で進みます。
グループ化するタグ（<div>タグ）とは？
1：<div>タグの基本形
<div>タグは、グループ化するためのタグです。
<div>〜</div>で囲むと、ひとつのグループとなります。
<div>〜</div>
しかし、グループなどと言われても、ぴんと来ないのではないかしら。「へー、あ、そう・・・で？」と思うだけかもしれません。
そう、使い道が明確にならないと、なかなかイメージできるものではありません。もう少し読み進めてください。
2：グループ化するタグ（<div>タグ）の属性
<div>タグでよく利用する属性は、次の2つです。（詳しくは、CSS入門にて記述します）
id | CSSなどで識別子として使います。一意である必要があります。 |
|---|---|
class | CSSなどでクラス名を付けるために使います。 |
そうなのです。世の中が、「<div>！<div>！<div>！<div>！」と騒がしいのは、CSSと大きく関係があるからです。
<div>タグがないと、CSSが使えないという意味ではありません。CSSを使う場合のひとつの方法ということです。
本にたとえてイメージする
前述したように、<div>タグは、CSSと密接に関わっています。
本にたとえて言うなら、次のような状況がイメージできます。
- カラーページにする。（背景に色が付いている）
- 読み手に印象づけるために、文章を罫線（けいせん）で囲んでおく。
などなど。
色を付ける領域、罫線で囲む領域などを、<div>〜</div>で範囲指定するわけです。
くどいようですが、実際に色を付けたり、線を引くのは、CSSの役目です。<div>タグ自体は、領域を指定するだけです。
実習 <div>タグ
<div>タグを使って、グループ化してみましょう。
（01）
例えば、次のような文章があるとします。（真実はいつもひとつ!!）
江戸川乱歩は、エドガー・アラン・ポーをもじって付けたんだ。
江戸川コナンは、江戸川乱歩とコナン・ドイルをくっつけたんだ。
HTMLコードは、次のようになります。
（02）
ブラウザで表示してみましょう。
しかし、残念ながら、何か表示されるわけではありません。<div>タグは、無色透明のペンで囲ったようなものなのです。
（03）
これでは何も分からないので、CSSを設定して枠線で囲ってみます。
（04）
改めて、ブラウザで表示してみましょう。<div>タグで囲んだ領域が、枠線で分かるはずです。
<span>タグも覚えておこう
<div>タグと併せて覚えておきたいのが、<span>タグです。
どのようなときに使うかと言えば、文章にメリハリを付けたい場合などに利用します。
（01）
例えば、次の文章にメリハリを付けるために、文章中の文字の色を変更してみます。
江戸川乱歩は、エドガー・アラン・ポーをもじって付けたんだ。
江戸川コナンは、江戸川乱歩とコナン・ドイルをくっつけたんだ。
HTMLコードは、次のようにします。
（02）
ブラウザで表示してみましょう。文字の色と背景色を変更してあります。
<div>タグと<span>タグは、何が違うのかと言えば、次のように区分することが出来ます。
<div> | ブロックレベルで使う |
|---|---|
<span> | インラインで使う |
ここに来て、「ブロックレベルで淫乱（インライン）だのインリン・オブ・ジョイトイさんだのと言われても、何のことやら・・・」と思うかもしれません、確かに。
出来るだけ専門用語を使わないようにしてきましたが、ブロックレベルとインラインという概念は、覚えておく方が良さそうです。
ブロックレベルとインライン
HTMLタグには、ブロックレベルのものと、インラインのものがあるんだなぁ。
1：ブロックレベルとは？
ブロックレベルのタグは、ブロック（ひとつのかたまり）として扱われるHTMLタグのことを指して言います。
次のタグは、ブロックレベルとして扱われています。
address | blockquote | center | div |
dl | fieldset | form | h1〜h6 |
hr | menu | noframes | noscript |
ol | p | pre | table |
ul |
もちろん、すべてのタグを覚える必要はありません。
カスタマイズするだけなら、赤文字にしてあるタグだけで十分です。他のタグは、必要に応じて覚えていってください。
2：インラインとは？
インラインのタグは、ひとつの行の中の一部として扱われるHTMLタグのことを指して言います。
次のタグは、インラインとして扱われています。
a | abbr | acronym | applet |
b | basefont | big | br |
button | cite | code | em |
font | i | iframe | img |
input | kbd | label | map |
object | q | s | samp |
script | select | small | span |
strike | strong | sub | sup |
textarea | tt | u | var |
赤文字のよく使うタグが、ブロックレベルに入るのか、インラインに入るのか、ざっくり眺めたら、解説をご覧ください。
3：ブロックレベルとインラインの解説
ブロックレベルのタグと、インラインのタグを、ずらずらと並べられたところで、何のことだか分からないと思うので、解説いたします。
（1） <p>タグと<a>タグで考えてみる
例えば、文章を書く場合、<p>タグを使って、次のようなHTMLコードを書きます。ちなみに、<p>タグは、ブロックレベルです。
<p>FC2ブログを、利用しています。</p>
さて、リンクを張りたい（<a>タグ）場合は、どうしたでしょうか。ちなみに、<a>タグは、インラインです。
<p><a href="http://blog.fc2.com/">FC2ブログを、利用しています。</a></p>
えぇ、そうです。<a>〜</a>を<p>〜</p>の内側に書いたはずです。
内側！そう、内側なのです！間違っても、インラインのタグで、ブロックレベルのタグを囲んだりはしないのです。
いかがでしょうか、じんわりと分かってきたのではないかしら。
（2） もう少し考えてみる
例えば、次のように「FC2ブログ」の箇所にだけリンクを張りたいときのことを考えてみてください。
<p><a href="http://blog.fc2.com/">FC2ブログ</a>を、利用しています。</p>
この状況で、<p>タグの外から、「FC2ブログ」の箇所だけにリンクを張ることが出来るでしょうか？そう、出来やしないのです。
もしどちらが内側だったかしら？というときは、この話を思い出してみてください。そのうち慣れれば、意識しなくとも、書けるようになります。
次回予告
次回は、HTML入門まとめです。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTMLを表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】（この記事です）
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/28 更新日：2008/05/12
« 「箇条書き 【<ul>タグ】」｜「HTML入門まとめ」 »
コメントありがとうございます。
こんばんは！
向学心
お忙しいところ恐れ入ります。
分かりやすいと言っていただけると、ホッとします。
再、再、再・・・ですか？？？
やはり、デザイナー志望の人は、
ソースコードまで気が回らないよね。(´ー｀)
やることいっぱいあるものなぁ。
たしかに、Dreamweaverを使えば、
それほど、コードを意識する必要もないものねぇ。
それでも、覚えようだなんて、
ichimarugoさんは、向学心があるのだね！(・∀・)スゴイ
No title
ネットで独学しながらwebサイトを作っている者です。
HTMLの方はおざなりなままCSSにこだわっていたので、なんとなく落ち着かない気分だったんです＾＾；
こちらのサイトにたどり着いたのを機会にきっちりお勉強させていただきますね。
丁寧にわかりやすく説明されているので感謝感謝です！！
これからもお世話になると思いますので、どうぞ宜しくお願いします。
Webクリエーター
コメントありがとうございます。
CSSから入るだなんて、ツワモノですね！(・∀・)
猫さんは、Webクリエーターなんすか。
あるいは、目指しているところなのかしらん。
いろいろと楽しい感じで、意見交換できたら嬉しいです。
CSSなど、もろもろお気付きの点があれば、
ご指摘ご指導いただきたいッス。
猫さんが作ったサイトも見てみたいなぁ。(´ー｀)
こちらこそ宜しくお願い致します。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/248-0bd163cf
すごく解り易いです！
こちらで再、再、再勉強させてもらってます(^^;)