divは、単体では意味を持たないタグですが、コンテンツをグループ分けしたり、任意でブロックを作ったりする場合に使用する、ホームページを作る上で大変重要なタグであります。

divを使いこなす事が出来る様になれば、ホームページの幅も大きく広がると思います。

Advertisement

1.divを表示

divを扱う場合は、<div>を使用します。

基本的に、divタグは単体で扱うものではなく、文章や画像などを中に入れて扱う入れ物の様なものです。

まずは、下図の様なソースコードをつくり、ブラウザに表示してみて下さい。

ソースコード

image34

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divを扱う</title>
</head>
<body>

<div style="border:1px solid;">
<p>線ありdiv</p>
</div>

<div>
<p>線なしdiv</p>
</div>

</body>
<html>

ブラウザ

image36

ソースコードの赤枠内青枠内で違いがありますね。

赤枠内のスタイルシートで指定している、「border:1px solid」の一文ですが、divの枠を表示させるためのものであります。

「border:1px」は枠の太さを、1pxに指定していて、「solid」は枠の種類を実線に指定しています。
枠の種類は「テーブルを扱う」のページ内、4.テーブルの枠を変更するに載っています。

青枠内に記載されているdivも、枠を表示させていないだけでブロックは存在しているのです。

2.divのサイズを変更

divのサイズは自由に設定することができます

divのサイズを設定する場合は、「画像を表示する」のページ内3.画像のサイズを変更するでも使用した、widthとheightを指定する事で可能です。

ただし、divの場合style属性に対してwidthとheightを指定しなければならないので、
<div style="width: 値; height: 値;">
の様な書き方が必要になります。

3.divに間隔をつくる

divは、外側や内側に間隔を作る事ができます。

外側の間隔を指定する場合はmargin属性を使い、内側の属性を指定する場合はpadding属性を仕様します。

下図のソースコードと、ブラウザ上の表示を見比べて下さい。

ソースコード

image37

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divで間隔をあける</title>
</head>
<body>

<div style="margin:15px; width:200px; border:1px solid;">
<p>外に間隔</p>
</div>

<div style="padding:15px; width:200px; border:1px solid;">
<p>内に間隔</p>
</div>

</body>
<html>

ブラウザ

image38

上のdivはmarginが指定された事で外側に15pxの間隔があき、下のdivはpaddingが指定された事で内側に15pxの間隔があいています。

双方ともにwidthで幅を200pxに指定していますが、下のdivのほうが大きく表示されています。
その理由は、paddingで内側に15px加算されているためであります。
paddingで指定した数値は、widthや heightの数値に加算されてしまう事を覚えておきましょう。

また、上下左右の幅をそれぞれ指定する事もできます。

marginやpaddingに、top(上)やbottom(下)などを書き加えて指定する方法になります。
下記のリストを参考にして下さい。

margin 説明
margin-top 上の外幅を指定
margin-bottom 下の外幅を指定
margin-left 左の外幅を指定
margin-right 右の外幅を指定

padding 説明
padding-top 上の内幅を指定
padding-bottom 下の内幅を指定
padding-left 左の内幅を指定
padding-right 右の内幅を指定

この様な記述が面倒くさいという人は、まとめて記述する方法もあります。
「margin:15px 20px 25px 0px ;」の様な記述方法です。
並びは、上、下、左、右、の順となり、この場合、上に15pxの外幅、下に20pxの外幅、左に25px外幅、右に0px(指定しない)の外幅となります。

4.divにスクロールバーを付ける

divにはスクロールバーを付けることが出来ます。

スクロールバーは、overflow属性にscroll値を指定します。

ソースコード

<div style="width:150px; height:150px; border:1px solid; overflow: scroll;">
スクロールして下さい。
divにスクロールバーをつけます。
枠を超えている部分がスクロールされているのがお解かりでしょうか。
</div>

表示

スクロールして下さい。divにスクロールバーをつけます。枠を超えている部分がスクロールされているのがお解かりでしょうか。

上の図では値にscrollを指定していますが、この値を変化させることで、スクロールの動きも変えることができます。

値をhiddenにすればスクロールがなくなり、autoにすればブラウザによって違った動きをみせます(大抵はscrollと同様)。

また、属性をoverflow-xとすれば縦だけのスクロールとなり、overflow-yとすれば横だけのスクロールバーを作れますが、Internet Explorer独自の機能ですので、ブラウザによっては機能しないことを覚えておいて下さ い。

5.div同士の位置関係を指定する

divが複数存在している場合、div同士の位置関係を指定する事ができます。
大まかに説明すると、Aのdivは左に位置させてBのdivは右に位置させるという事であります。

div同士の位置関係を指定した場合は、float属性を使用します。

下図のソースコードと、ブラウザの表示を見比べて下さい。

ソースコード

image39

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同士の位置関係を指定する</title>
</head>
<body>

<div style="float:left; width:200px; border:1px solid;">
<p>左側</p>
</div>

<div style="float:right; width:200px; border:1px solid;">
<p>右側</p>
</div>

</body>
<html>

ブラウザ

image40

float属性の値に、「left」を指定したdivが左側、「right」を指定したdivが右側によっています。
float属性では左右の位置関係しか指定する事はできません。

では次は、clear属性の説明をいたします。

clear属性はfloat属性の影響を解除するための属性であります。
例えば、HTMLでは
<div>一段目</div><div>二段目</div>
と記述した場合は、縦に並んで表示される法則になっています。

しかし、float属性を指定した場合はその影響を受け、法則が無視されてしまうのです。

下図のソースコードとブラウザの表示を見比べて下さい。

ソースコード

image41

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同士の位置関係を指定する</title>
</head>
<body>

<div style="float:left; width:200px; border:1px solid;">
<p>左側</p>
</div>

<p>通常表示</p>

<p style="Clear:left">クリア表示</p>

</body>
<html>

ブラウザ

image42

ブラウザ上では、「通常表示」がdivの右側に並んでいます。
本来であれば、通常表示はdivの下に配置されるはずです。
これはfloatの影響を受けて並んで表示されてしまっているのです。。

対して「クリア表示」はfloatの影響を受けていません。
赤枠内で指定したfloat-leftを、青枠内でclear:leftで無効化しているからであります。

上図では分かりやすく文章とdivの位置関係であらわしていますが、これはdiv同士でも同様であります。

clear属性の値には、「right」、「left」、「both」が存在します。
bothは左右共のfloat属性を解除する場合に指定します。

この特性を上手く使う事で上下の位置関係を調節する事もできますし、floatをclearで解除しなければ表示が重なってしまう様なパターンもあるので気をつけて下さい。

6.divの位置を指定する

ブラウザ上に表示されるdivの位置を細かく指定する方法もあります。
5.div同士の位置関係を指定するで行った様な大まかな位置ではなく、もっと細かな位置を指定する事ができるのです。

位置を細かく指定する場合には、position属性を使用します。
position属性には以下の様な値が入ります。

使い方
static 初期値
absolute 絶対位置
relative 相対位置
fixed 固定位置

少々ややこしい話しになりますが、図で説明する前に基本の情報を読んで下さい。

初期値(static)は、位置指定を行わないことと同義であります。
あまり使う頻度は高くないでしょう。

絶対位置(absolute)は、基準となる位置からの位置指定であります。
absoluteは囲まれている親ボックス(囲っているdiv)を基準とした位置指定になります。
divに囲われていない場合は、ウィンドウ自体が基準となります。

相対位置(relative)は、本来あるべき位置から見た位置指定になります。
つまり、親ボックスやウィンドウには依存せず、常にあるべき位置を基準にして配置されます。

そして固定位置(fixed)は、基本的に絶対位置と同様でありますが、画面をスクロールさせても位置を変えません。

この説明だけで理解できた人は少ないと思いますので、図を使って順に説明します。

ソースコード

image43

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divの位置を指定する</title>
</head>
<body>

<div style="width:500px; border:1px solid;">
 <div style="width:200px; border:1px solid #F00;">
 <p>static</p>
 </div>

 <div style="width:200px; border:1px solid #0F0;">
 <p>absolute</p>
 </div>

 <div style="width:200px; border:1px solid #00F;">
 <p>relative</p>
 </div>

 <div style="width:200px; border:1px solid #F0F;">
 <p>fixed</p>
 </div>
</div>

</body>
<html>

ブラウザ

image44

上図は、まだpositionを指定していな状態です。
わかりやすい様にそれぞれのボックスには色をつけています。

では、順にpositionを指定していきます。

まずは、staticとabsoluteの動きを説明します。
下図をご覧下さい。

ソースコード

image45

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divの位置を指定する</title>
</head>
<body>

<div style="width:500px; border:1px solid; position:relative;">
 <div style="width:200px; border:1px solid #F00; position:static;">
 <p>static</p>
 </div>

 <div style="width:200px; border:1px solid #0F0; position:absolute; top:10px; left: 100px;">
 <p>absolute</p>
 </div>

 <div style="width:200px; border:1px solid #00F;">
 <p>relative</p>
 </div>

 <div style="width:200px; border:1px solid #F0F;">
 <p>fixed</p>
 </div>
</div>

</body>
<html>

ブラウザ

image46

staticは初期値になりますので、赤枠内のstaticを指定しているdivの位置に変化はありません。
divのpositionは、他のpositionを指定しないかぎりはstaticと同様の動きをするので、上記にある様にstaticの使用頻度は低いと言えます。


緑枠内のabsoluteは、親ボックスを基準に配置されています。
ソースコードの青枠内でrelativeを指定していますが、これがabsoluteの親ボックスとなるdivです。
absoluteの親ボックスには、relative、absolute、fixedのいずれかを指定しなければなりません。(仕様です)
指定しない場合、absoluteはウィンドウを基準として動きます。
つまり上図の場合、absoluteのdivは親ボックスの位置を基準に、topから10px、leftから100pxの位置にいるわけです。
absoluteは親ボックスから見た絶対位置となりますので、親divを動かせばabsoluteも一緒に動きます。

次はrelativeです。

ソースコード

image47

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divの位置を指定する</title>
</head>
<body>

<div style="width:500px; border:1px solid;">
 <div style="width:200px; border:1px solid #F00;">
 <p>static</p>
 </div>

 <div style="width:200px; border:1px solid #0F0;">
 <p>absolute</p>
 </div>

 <div style="width:200px; border:1px solid #00F; position:relative; top:10px; left: 100px;">
 <p>relative</p>
 </div>

 <div style="width:200px; border:1px solid #F0F;">
 <p>fixed</p>
 </div>
</div>

</body>
<html>

ブラウザ

image48

relativeは本来あるべき場所からの指定となり、上図の場合は、元々relativeがいた場所(absoluteとfixedの間)からtopから10px、leftから100pxの位置になるわけです。
absoluteとの違いとして、もともとrelativeが配置されていたスペースが存在していますので、下のfixedのボックスが詰めて表示されません。
これは、relative自体の位置を変えるというよりは、見え方を変えているという表現の方があっているかもしれません。

最後はfixedです。

ソースコード

image49

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divの位置を指定する</title>
</head>
<body>

<div style="width:500px; border:1px solid;">
 <div style="width:200px; border:1px solid #F00;">
 <p>static</p>
 </div>

 <div style="width:200px; border:1px solid #0F0;">
 <p>absolute</p>
 </div>

 <div style="width:200px; border:1px solid #00F;">
 <p>relative</p>
 </div>

 <div style="width:200px; border:1px solid #F0F; position:fixed; top:10px; left: 100px;">
 <p>fixed</p>
 </div>
</div>

</body>
<html>

image51

ブラウザ2

image52

ソースコードの紫枠内で、topから10px、leftから100pxでfixed要素を指定しています。

fixedは固定値となりますので、どの状況で指定した位置から動きません。
ブラウザ上で画面をスクロールしたとしても、fixed要素を指定されているdivは指定の位置に配置され続けます。

ブラウザ1とブラウザ1を見比べてみると、紫枠内のスクロールバーを動かしているのが分かりますが、fixedのdivの位置は変わっていませんね。
(ソースコードには記載していませんが、上図の場合スクロール出来るように<body>内に改行タグをかきこんでいます。)

positionを使った位置の設定はホームページ作成の中でもややこしい部分です。
実際に色々試してみるのが理解する早道だと思います。

それでは次の項目、スタイルシートに進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。