HTMLとCSSで作るウェブサイト作成入門

ブロックレベル要素(６)HTMLに範囲指定＆スタイル適用<div>タグ

　<div>〜</div>は、それだけでは特に効果のないブロックレベル要素のタグです。例えば、　<div>ぬかにくぎ</div>　というHTMLを書いても、ブラウザには「ぬかにくぎ」と表示されるだけで、特に変化はありません。もし<div>タグだけで何か効果を出す場合には、align属性を指定して、右寄せ(align="right")、中央寄せ(align="center")、左寄せ(align="left")、を指定するぐらいです。
　しかし、特に効果がないからこそ、<div>タグには重要な役割があります。それは、HTMLソースを区切る役割と、スタイルシートと組み合わせて様々な働きを指定する役割です。

●HTMLソースの範囲指定
　それは、第一に、ブラウザ上に影響しないように、HTMLソース内の領域を区切る、という役割です。例えば、次のサンプルを見て下さい。

[HTMLサンプル]
<html>
<head>
<title>XYZ株式会社ホームページ</title>
</head>
<body>
<div id="topvisual">XYZ株式会社ホームページ</div>
<div id="mainmenu">TOP　／　会社概要　／　商品案内　／　アクセス　／　問合せ</div>
<div id="message"><p>当社ホームページへようこそ</p>
日頃は、ご愛顧を賜りありがとうございます。<br>
このホームページでは、会社概要や取扱商品などをご紹介しております。<br>
ぜひごゆっくりご覧下さいませ。<br>
</div>
<div id="footer">Copyright (c) 2014 XYZ Corporation All right reserved.</div>
</body>
</html>

[サンプルのブラウザ表示結果]
divタグのサンプル

　上記サンプルは、基本的なタグに、いくつかの文字を書き、所々<div>タグを付けているだけのHTML文書です。<div>タグ自体には効果はありませんので、ブラウザに表示させても、文字部分が示されるだけです。ただ、このサンプルの<div>タグには、id属性(ログインIDや会員IDと同じIDです)が付けられ、意味ごとに区切られています。例えば、「topvisual」(トップビジュアル＝ページトップのタイトル表示)とか、「mainmenu」メインメニュー(サイト全体のメニュー)とかの識別名称をidとして指定しています。ブラウザ上ではこの区切りは見えませんが、こうすることで、HTML文書が、ここからここまでの範囲はメニューを書く場所だな、ここからここまではフッターだな、ということがわかります。

●スタイルシートの適用

　<div>タグのいまひとつの重要な使われ方は、<div>〜</div>で囲まれた範囲に、スタイルシートを適用することです。HTMLソースに、単に範囲指定をするだけならコメントタグでもできますが、それだけではありません。例えば、上記のサンプルHTMLに、スタイルシートを適用した、次のサンプルを見て下さい。

[HTMLサンプル]
<html>
<head>
<title>XYZ株式会社ホームページ</title>
<style type="text/css">
#topvisual { color: red; }
#mainmenu { color: blue; }
#message { color: green; }
#footer { color: orange; }
</style>
</head>
<body>
<div id="topvisual">XYZ株式会社ホームページ</div>
<div id="mainmenu">TOP　／　会社概要　／　商品案内　／　アクセス　／　問合せ</div>
<div id="message"><p>当社ホームページへようこそ</p>
日頃は、ご愛顧を賜りありがとうございます。<br>
このホームページでは、会社概要や取扱商品などをご紹介しております。<br>
ぜひごゆっくりご覧下さいませ。<br>
</div>
<div id="footer">Copyright (c) 2014 XYZ Corporation All right reserved.</div>
</body>
</html>

[サンプルのブラウザ表示結果]
divタグスタイル適用

　<style>〜</style>で適用しているのがスタイルシートCSSです。#topvisualや#mainmenuは、<div>タグのid属性でしていした識別名で、それぞれに、color: red(＝文字色を赤に)などとスタイルを指定しています。つまり、<div>タグで、HTMLソースに範囲を指定し、この範囲のスタイルはこれ、別の範囲のスタイルはこれ、という具合に指定することができるのです。<div>タグは、それ自体に特に効果がありませんが、それがかえって、このようなスタイルを指定するための、多能性タグいわば変幻自在な百面相タグとして利用されるのです。なお、ブロックレベル要素の<div>タグと、同様の働きを持つインライン要素として<span>タグがありますが、これはあくまでもインライン要素ですので使い分けて下さい。また、スタイルシートの詳細については、別途ご紹介します。

 　 　
　
　
　
SPONSORED LINK
　

SPONSORED LINK