更新日: 2017年03月21日
公開日: 2015年12月04日

HTMLのボックスを詳しく説明！ゼロから始めるHTML/CSS講座Vol11

ゼロから始めるHTML/CSS講座ブロックボックスとインラインボックス
ブロックとインライン

ゼロから始めるHTML/CSS講座ブロックボックスとインラインボックス

ブロックとインライン

ボックスには大きく分けてブロックボックスとインラインボックスの2種類があります。下記HTMLとCSSを作成し、Webページより閲覧してみましょう。

ファイル名:block_inline.html,block_inline.css

※div要素とspan要素の詳細は別途説明します


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>block&amp;inline</title>
    <link rel="stylesheet" href="block_inline.css">
</head>
<body>
    <span>親譲の無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜ぬかした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</span>
    <div>親譲の無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜ぬかした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</div>
    <a href="http://codecamp.jp/">CodeCamp</a>
    <a href="http://codecamp.jp/">CodeCamp</a>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>


span {
    border: solid 2px #ff0000;
}

div {
    border: solid 2px #0000ff;
}

a {
    border: solid 2px #00ff00;
}

ブロックボックス 要素を1つのかたまり(ブロック)として表示する例) div要素

インラインボックス

要素を1行ずつボックスにし折り返して表示する

例) span要素、a要素

ブロックボックスは要素を1つのかたまり(ブロック)として表示します。ブロックボックスには前後に「改行」が挿入されるという特徴があり、サンプルでもdiv要素の前後は改行して表示されています。

インラインボックスは要素を1行ずつボックスにし折り返して表示します。ブロックと違い改行はされないため、インラインボックスを続けて記載すると、ブラウザ横幅まで横並びに表示されます。

これまでボックスの境界線・padding・margin・表示領域は全てブロックボックスを利用し解説していました。インラインボックスも考え方は基本的に同じですが、ブロックボックスと異なり、以下のように一部CSSを適用できません。

表示領域(width&height)は指定できず、表示領域は要素の内容に依存する。
marginは左右のみ指定可能で、上下は指定はできない

実際にa要素の表示領域とmarginを変更するCSSを追加してみましょう。


span {
    border: solid 2px #ff0000;
}

div {
    border: solid 2px #0000ff;
}

a {
    border: solid 2px #00ff00;
    width: 300px;
    height: 50px;
    margin: 20px;
}

widthとheightを指定しても、表示領域に変更はありません。またmarginで上下左右の余白を20pxと指定しましたが、上にあるdiv要素との間に余白はなく、左右のみ余白ができています。 ※利用しているOS(Windows or Mac)やブラウザによって、border部分の表示が上記画像と多少異なることがあります

paddingは上下左右共に指定することが可能ですが、表示領域の関係上、境界線がおかしな表示になりやすいため、インラインボックスのpadding指定は推奨しません。どのようになるか興味がある人は、span要素にpaddingを追加して表示してみましょう。

ボックスの種類は、CSSのdisplayプロパティにより決められています。

displayプロパティ
ブロックボックス	display:block
インラインボックス	display:inline

各要素ごとにブロックボックスとインラインボックスのどちらになるのかは初期値が設定されています。これまで利用した要素の初期値を一部紹介します。

初期値:ブロックボックス
html要素、body要素、h1要素、p要素、div要素

初期値:インラインボックス
a要素、span要素

あくまで初期値のため、displayプロパティにより変更は可能です。実際にa要素をブロックボックスに変更してみましょう。


span {
    border: solid 2px #ff0000;
}

div {
    border: solid 2px #0000ff;
}

a {
    border: solid 2px #00ff00;
    width: 300px;
    height: 50px;
    margin: 20px;
    display: block;
}
}