ボックスの種類と指定方法、それぞれの違いについて

ボックスの違いと種類など
ボックスについて

htmlのボックスの種類とそれぞれの違い、指定の方法についての紹介です。

htmlタグでマークアップした部分(htmlタグを入力した部分)には、ボックスが構成されます。 例えばインラインボックスやブロックボックスという言葉を聞いた事がないですか?

以前にも紹介しましたし、一度は聞いた事あると思いますが、htmlタグを入力すると目には見えないですが上記のようなボックスが勝手に構成されます。 どのボックスを構成するかはデフォルトスタイルシートの「displayプロパティ」の値(inlineやblockなど)によって決まり、表示の仕方も変わります。

といっても分かりづらいのでまずは下の例を見て下さい。

構成されるボックスの例
<h1>h1の部分</h1>
<p>pタグの部分です。サンプルとして右の部分を<a href="url">aタグ(リンク)</a>で囲みます</p>

例えば上記の場合だと、ページタイトルをh1タグ、文章をpタグ、リンクをaタグでマークアップ(記述)しています。 ブロック要素であるh1タグとpタグのdisplayプロパティの初期値は「block」です。 なのでブロックボックスが構成されるわけです。

逆にインライン要素である「aタグ」のdisplayプロパティの初期値は「inline」です。 なのでinlineボックスを構成します。

で、ブロックボックスとインラインボックスの違いなんですが、まずは下の画像を見て下さい。

それぞれのボックス領域に背景を付けた例

上の画像はh1、p、aタグのそれぞれに背景を付けた例です。 背景の付いてる部分がそれぞれのボックスの表示領域となってます。

見るとわかると思うのですが、ブロックボックスは横幅いっぱいに表示され、前後に改行が入っています。 逆にインラインボックス(aタグの部分)は中身に合わせた横幅となり、ボックスの前後に改行も入りません。

htmlタグごとにどのボックスが構成されるかは、指針が示されていて、各ブラウザはこの指針に沿って表示されます。 簡単にいうと、h1~h6、div、p、table、ol、dl、ulタグがブロックボックス a、span、strong、b、img、q、などがインラインボックスとなります。

よく使うタグだけ、例として挙げました。 実際入力してみると、前後に改行が入らなかったり、表示領域の違いなどで、それぞれ見分ける事ができるようになると思います。

ちなみにdisplayプロパティの値を変える事で構成されるボックスを変更する事も可能です。 例えば、aタグはインラインボックスを構成しますが、diplay:block;と記述するとブロックボックスを構成するようになります。

ではそれぞれのボックスの種類や違い、変更の仕方などを書いていきますね。

ブロックボックス(block)

ブロックボックスの説明

ブロックボックスを構成するためには、displayプロパティの値を「block」にします。 例えば「aタグ」にブロックボックスを構成するように指定すると、上記の画像のようにボックスが横幅いっぱいに表示され、前後に改行を入った表示となります。

ちなみにグローバルメニューやサイドバーのリンクなどで、文字以外の所にカーソルを当ててもクリックできるようになっているモノを見たことがあると思います。 そういう場合は、大体が「aタグ」にdisplay:block;を設定して、paddingなどで上下の余白を調整している場合はほとんどです。

example {display:block;}

インラインボックス(inline)

インラインボックスの説明

インラインボックスを構成する場合は、displayプロパティの値を「inline」にします。 例えば、h1、p、aタグにインラインボックスを構成するように指定すると、それぞれのボックスが中身に合わせた横幅で表示されるようになります。

ちなみにインラインの場合は、前後に改行が入りません。 なので1行に繋がった状態で表示されます。

あとインラインボックスではwidth(横幅)、height(高さ)プロパティによる横幅と高さの設定が無効となります。 まあ、無効というより設定しても、反映されません。

横幅と高さを設定したい場合は、インラインボックスと同じように扱われる「インラインブロックボックス(inline-block)」を使いましょう。

.example {display: inline;}
.example {display: inline-block;}

リストボックス(list-item)

リストボックスの説明

リストボックスは基本的にはブロックボックスと同じです。

違いは行の先頭にリストマーク「・」が導入され、リスト形式で表示がされるようになります。

上記の画像はh1、p、aタグのdisplayプロパティの値を「list-item」にした時の例です。 行の先頭にリストマークが表示され、リストボックスが構成されているのがわかると思います。

.example {display: list-item;}

ボックスの形の変化

何となく違いもわかったと思いますが、一応ブロックボックスとインラインボックスの形の違いも載せておきますね。

ブロックボックスの形 インラインボックスの形

上の画像はテキストをpタグで囲み、pタグの背景を青にしたものです。 例えばpタグのdisplayプロパティの値を「block」にした場合(pは初期値でblock)、画像のようにpタグの中身全てを含むブロックボックスが構成されます。 ですが「inline」にした場合は、中身のテキストに合わせて行ごとのインラインボックスが構成されます。

それぞれのボックスの違いを紹介しましたが、いかがでしたでしょうか? 何となくわかって頂ければ幸いです。

中々説明が難しい部分ではあったんですが、なんとなーくわかってれば大丈夫です(^^♪ リストボックスはほとんど指定する事がないと思いますが、ブロックとインラインは100%使うので違いだけは覚えておくと後々楽ですよ(^^)/

以上、ボックスの種類についてでしたー