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

      2016/01/28

htmlcss
Code部

ゼロから始める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;
}

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

例) 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;
}

block-inline2-639block_inline-3widthと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;
}
}

block-inline3-639block_inline-5ブロックボックスになることで、width・height・marginが適用され、各ボックスが改行されて表示されるようになりました。

この際、a要素のクリック可能な範囲は表示領域(サンプル: 300px × 50px)となります。

ブロックボックスとインラインボックスの特徴についてまとめると、以下になります。

ブロックボックス
display: block;
要素を1つのかたまり(ブロック)として表示する
前後に改行が挿入される

インラインボックス
display: inline;
要素を横並びで表示する
表示領域は要素の内容に依存し、CSSで指定できない
上下marginは指定できない

ボックスはWebページのデザインに大きく関わるため、非常に重要です。今後も頻繁に利用するため、しっかりと理解した上で、適切な設定を行えるようになりましょう。

NEXT LESSON ☛ article要素とsection要素

PREV LESSON ☛ autoの使い方

 - HTML5/CSS3, プログラミング, プログラミング基礎 , ,