スライドショー

CSSで横並びレイアウトを実現簡単にするinline-blockとは?

こんにちは!ライターのナナミです。

WEBサイトを作っていて、

ブロック要素やインライン要素では実現できないレイアウトが出てきた…

なんてことありませんか?そんなあなたにとってもおすすめ、インラインブロック要素をご紹介します!この記事では

  • インラインブロック要素とはどのようなものか
  • CSSでの指定方法
  • 具体的な活用例
  • 注意するべきこと

まで、徹底的に掘り下げていきます。インラインブロック要素を覚えて、今まで苦戦していたレイアウトもさらさらっと書いちゃいましょう!

インラインブロック要素とは?

インラインブロック要素は、ブロック要素とインライン要素のいいとこどりをしている要素です。ブロック要素についてはこちら

インライン要素のリファレンス
http://www.htmq.com/htmlkihon/005.shtml

どのような役割や特徴があるのか、細かく見ていきましょう!

コンテンツの小さなまとまり

インラインブロック要素は、ブロック要素とインライン要素それぞれの特徴を併せ持っている要素です。ブロック要素よりも小さく、インライン要素よりも大きいまとまりを示す時に使用します。

inline-block1

画像:ブロック要素とインライン要素の解説

  • コンテンツのアウトラインがブロック要素
  • コンテンツ自体の小さなまとまりがインラインブロック要素
  • 文字や画像がインライン要素

という感じですね。

要素の幅は中身に合わせる

インラインブロック要素のデフォルトの幅は、要素の中身の幅に合わせた大きさになります。例えば、文字を10文字入れると…

inline-block2

画像:インラインブロック要素の解説 10文字

HTML

<div class="inline-block_test">
    1234567890
</div>

CSS

.inline-block_test {
    display: inline-block;        /* インラインブロック要素にする */
    background-color:  #ccc;      /* 背景色指定 */
}

10文字分の幅になっていますね。5文字に減らしてみると…

inline-block3

画像:インラインブロック要素の解説 5文字

HTML

<div class="inline-block_test">
    12345
</div>

CSS

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
}

文字に合わせて要素自体も小さくなります。

高さや幅を指定できる

ブロック要素のように、高さを指定することができます。

inline-block4

画像:高さの指定

HTML

<div class="inline-block_test">
    高さや幅を指定できます
</div>

CSS

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    height:  300px;             /* 高さ指定 */
    width: 50%;                 /* 幅指定 */
}

余白の指定ができる

ブロック要素と同じく、余白の指定もしっかり行なうことができます。

inline-block5

画像:余白の指定

HTML

<div class="inline-block_test">
    余白を指定できます
</div>

CSS

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    padding: 50px;              /* 余白指定 */
}

横並びにできる

インラインブロック要素最大の特徴がこれです!インライン要素と同じく、要素を横並びにすることができます。しかも、高さや余白の指定ができるので…

inline-block6

画像:横並び

HTML

<div class="inline-block_test">
    横並びにできます
</div>
<div class="inline-block_test">
    横並びにできます
</div>
<div class="inline-block_test">
    横並びにできます
</div>

CSS

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
}

こんな風に、ボックス状にしてレイアウトすることが可能です。

text-alignが使える

text-alignは、親要素に記述することでインライン要素を右揃えにしたり中央揃えにしたりできるプロパティです。インライン要素対応なので、インラインブロック要素も中央揃えなどにすることができます。

inline-block7

画像:中央揃え

HTML

<div class="parent">
    <div class="inline-block_test">
        中央揃えにできます
    </div>
</div>

CSS

.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */
    border: solid 2px;          /* 枠線指定 */
    padding:  20px;             /* 余白指定 */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
}

vertical-alignが使える

vertical-alignはtableなどで横の要素との文頭の揃えを調整するプロパティです。このプロパティはインライン要素に使用することができます。つまり、インライン要素の特徴を持っているインラインブロック要素にも使えちゃいます。

inline-block8

画像:横揃えと文字の上下中央揃え

HTML

<div class="inline-block_test">
    上下中央揃えができます上下中央揃えができます
</div>
<div class="inline-block_test">
    文字数を変えても
</div>
<div class="inline-block_test">
    大丈夫!
</div>

CSS

.inline-block_test {
    display:  inline-block;     /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    width: 100px;               /* 幅指定 */
    padding:  10px;             /* 余白指定 */
    vertical-align:  middle;    /* 要素を上下中央揃えにする */
}

インラインブロック要素のHTMLタグはない

ブロック要素やインライン要素は、それぞれ対応したHTMLタグが存在しています。

しかし、インラインブロック要素は、対応したHTMLタグはありません。使いたいときはCSSで指定する必要があります。

CSSでinline-blockを指定する

インラインブロック要素を使いたいときは、CSSを使って要素の種類を変更します。手順は簡単!要素の種類を指定するdisplayプロパティでinline-blockを指定するだけです。

inline-block_css

画像:displayプロパティでinline-blockを指定

HTML

<div class="inline-block_test">
    ブロック要素だけど、インラインブロック要素になったよ
</div>
<span class="inline-block_test">
    インライン要素だけど、インラインブロック要素になったよ
</span>

CSS

.inline-block_test {
    display:  inline-block;     /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    width: 250px;               /* 幅指定 */
}

ブロック要素だろうがインライン要素だろうが、全部インラインブロック要素になります。

inline-blockの使用例

横並びにできたり、余白の指定ができたり…インラインブロック要素は様々な場面で活躍してくれます。具体的な例を挙げてみましたので、参考にしてみてください。

グローバルメニュー

ex1

画像:インラインブロック要素の具体例

HTML

<header>
    <ul class="global">
        <li><a href="URL">項目名</a></li>
        <li><a href="URL">文字数が多い項目名</a></li>
        <li><a href="URL">項目名</a></li>
        <li><a href="URL">項目名</a></li>
    </ul>
</header>
<main>
    メインコンテンツ
</main>
<footer>
    フッター
</footer>

CSS

header {
    padding-bottom:  10px;      /* 余白指定 */
}

.global {
    padding:  0;                /* ulタグのデフォルトCSSを打ち消し */
    margin:  0;                 /* ulタグのデフォルトCSSを打ち消し */
    list-style: none;           /* ulタグのデフォルトCSSを打ち消し */
    text-align:  center;        /* 子要素を左右中央揃え */
}

.global > li {
    display:  inline-block;     /* インラインブロック要素にする */
    width: 100px;               /* 幅指定 */
    vertical-align:  middle;    /* 要素を上下中央で揃える */
}

.global > li > a {
    color: #222;                /* 文字の色指定 */
    background-color:  #ccc;    /* 背景色指定 */
    text-decoration:  none;     /* 文字のデフォルトCSSを打ち消し */
    display:  inline-block;     /* インラインブロック要素にする */
    padding:  10px;             /* 余白指定 */
    width:  100%;               /* 幅指定 */
    box-sizing:  border-box;    /* 崩れ防止 */
}

main {
    border: solid 2px;          /* 枠線指定 */
    padding: 50px 10px;         /* 余白指定 */
}

footer {
    background-color:  #ccc;    /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
}

インラインブロック要素を使えば、グローバルメニューもこんなに簡単にできちゃいます。メニューの文字が長くて二行になってしまう場合でも、vertical-alignで中央に揃えられるのでバッチリです。

サムネイルを並べる

ex2

画像:サムネイルの具体例

HTML

<div class="thumbnail">
    サムネイルを並べるのも簡単
</div>
<div class="thumbnail">
    文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ
</div>
<div class="thumbnail">
    文字が多くても崩れない!
</div>
<div class="thumbnail">
    簡単!
</div>

CSS

.thumbnail {
    width: 32.3333%;            /* 幅指定 */
    display:  inline-block;     /* インラインブロック要素にする */
    vertical-align:  top;       /* 要素を上揃えにする */
    background-color:  #ccc;    /* 背景色指定 */
    margin-bottom: 10px;        /* 要素同士の隙間調整 */
    padding:  10px;             /* 余白指定 */
    box-sizing: border-box;     /* 崩れ防止 */
}

ポートフォリオサイトなどで、画像のサムネイルが並んでいたりしますよね。インラインブロック要素ならそれも簡単、高さが揃ってなくても綺麗に並んでくれます。

ピラミッド型に並べる

ex3

画像:ピラミッド型

HTML

<div class="pyramid_parent">
    <div class="pyramid_box">
        一番上!
    </div>
</div>
<div class="pyramid_parent">
    <div class="pyramid_box">
        二番目
    </div>
    <div class="pyramid_box">
        二番目
    </div>
</div>
<div class="pyramid_parent">
    <div class="pyramid_box">
        三番目だよ
    </div>
    <div class="pyramid_box">
        三番目だよ
    </div>
    <div class="pyramid_box">
        三番目だよ
    </div>
</div>

CSS

.pyramid_parent {
    text-align: center;         /* 子要素を左右中央揃えにする */
}

.pyramid_box {
    width: 200px;               /* 幅指定 */
    display:  inline-block;     /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    margin-bottom: 5px;         /* 要素同士の隙間調整 */
    padding: 30px;              /* 余白指定 */
    box-sizing: border-box;     /* 崩れ防止 */
}

text-alignが使えるので、こんな感じのピラミッド型レイアウトもできちゃいます。ちょっと変わったレイアウトにしたいときに大活躍ですね。

横並びにした時の隙間を消す方法

インラインブロック要素は色々できて便利なのですが、横並びにした時に要素と要素の間に隙間ができてしまうという欠点があります。

bug0

画像:要素間にある余白の例

しかしご安心を。この問題はHTMLやCSSで簡単に解消できちゃいます。ただ、どれも一長一短な方法なので、状況に合わせて使いわけるようにしましょう。

HTMLを改行しない

HTMLを書いているとき、下記のようにタグごとに改行して書くことが多いと思います。

HTML

<div class="inline-block_test">
    要素と要素の
</div>
<div class="inline-block_test">
    間に
</div>
<div class="inline-block_test">
    隙間ができてしまう
</div>

これをあえて改行せずに書くことで、インラインブロック要素の隙間を無くすことができます。

bug1

画像:改行をしない場合

HTML

<div class="inline-block_test">隙間をなくします</div><div class="inline-block_test">隙間をなくします</div><div class="inline-block_test">隙間をなくします</div>

CSS

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    border: solid 1px;          /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}

ただ、ソースコードが見づらくなるのが欠点ですね…

閉じタグを入れない

HTMLにおいて閉じタグを入れるのは当たり前ですね。

しかし<li>タグに限っては、下記のようにあえて閉じタグを入れないようにすると、隙間をなくすことができます。

bug1

画像:<li>タグの閉じタグを記載しない場合

HTML

<ul class="inline-block_parent">
    <li class="inline-block_test">隙間をなくします
    <li class="inline-block_test">隙間をなくします
    <li class="inline-block_test">隙間をなくします
</ul>

CSS

.inline-block_parent {
    margin:  0;                 /* ulタグのデフォルトCSSを打ち消し */
    padding:  0;                /* ulタグのデフォルトCSSを打ち消し */
    list-style:  none;          /* ulタグのデフォルトCSSを打ち消し */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    border: solid 1px;          /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}

閉じタグの部分はブラウザが自動解釈して補完してくれますが、不完全なコードなのには違いないので、おすすめな方法ではありません。また、divなどの他のタグでは使えない方法なので、あまり汎用的ではないでしょう。

ネガティブマージンを入れる

ネガティブマージンとは、marginをマイナスの値で指定する方法です。

bug1

画像:ネガティブマージンを利用する場合

HTML

<ul class="inline-block_parent">
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
</ul>

CSS

.inline-block_parent {
    margin:  0;                 /* ulタグのデフォルトCSSを打ち消し */
    padding:  0;                /* ulタグのデフォルトCSSを打ち消し */
    list-style:  none;          /* ulタグのデフォルトCSSを打ち消し */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    border: solid 1px;          /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
    margin-right: -7px;         /* 隙間をなくす */
}

手軽ですが、環境によって隙間の空き具合が違うので、うまくできない場合もあります。

親要素にfont-size:0;を入れる

インラインブロック要素にする要素を内包している要素、つまり親要素のフォントサイズを0にする方法です。

bug1

画像:親要素のフォントサイズを0にする場合

HTML

<ul class="inline-block_parent">
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
</ul>

CSS

.inline-block_parent {
    margin:  0;                 /* ulタグのデフォルトCSSを打ち消し */
    padding:  0;                /* ulタグのデフォルトCSSを打ち消し */
    list-style:  none;          /* ulタグのデフォルトCSSを打ち消し */
    font-size: 0;               /* 隙間をなくす */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    border: solid 1px;          /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
    font-size: 16px;            /* フォントサイズを復活させる */
}

もちろん子要素のフォントサイズも小さくなってしまうので、子要素には子要素用にフォントサイズを指定する手間があります。

親要素にletter-spacing: -1em;を入れる

letter-spacingとは、文字と文字の間のスペーシングを指定するプロパティです。これを親要素に指定することで、隙間を無くすことができます。

bug1

画像:スペーシングの指定

HTML

<ul class="inline-block_parent">
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
    <li class="inline-block_test">隙間をなくします</li>
</ul>

CSS

.inline-block_parent {
    margin:  0;                 /* ulタグのデフォルトCSSを打ち消し */
    padding:  0;                /* ulタグのデフォルトCSSを打ち消し */
    list-style:  none;          /* ulのデフォルトCSSを打ち消し */
    letter-spacing: -1em;       /* 隙間をなくす */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ccc;    /* 背景色指定 */
    border: solid 1px;          /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
    letter-spacing: 0em;        /* 文字同士の隙間を復活させる */
}

こちらも子要素に影響が出てしまうので、子要素にはletter-spacing: 0;を入れる必要があります。

オールドブラウザでの注意点

IE7以下では<div>などのブロック要素にインラインブロックがききません。IE7に対応したサイトを作成している場合、ブロック要素への指定を下記のようにしましょう。

CSS

セレクタ{
   display: inline-block;       /* インラインブロック要素にする */
   *display: inline;            /* IEに効かせるための小技 */
   zoom: 1;                     /* IEの独自のレイアウト情報を有効にする */
}

CSSの学習だけで大丈夫?役割やできないことのおさらい

今回ご紹介したCSSやHTMLはすべてのプログラミングに必要なスキルです。

そのため、いまCSSを学習しているあなたは考えようによっては、更に発展したプログラミング学習の第一歩を既に踏み出しているといえます。

もしあなたの目的が、スマホアプリ開発やWEBサイト作成・オリジナルサービス開発などであれば、HTML/CSSの他にもRuby・Python・PHPなどのプログラミング言語を学習する必要があります。

いまいちどHTML/CSSでできることのおさらいをして、本当にあなたの目的にあった学習を進められているのか確認しておきましょう。

HTML/CSSの役割

基本的に全てのWebページは、HTMLで作られています。そのため、Web制作においてHTMLは欠かせません。

しかし、HTMLだけで作られたWebページは非常にシンプルな構造になってしまいます。そこで活用するのがCSSです。CSSはご存知のとおり、見た目を整え、ユーザーにわかりやすいWebデザインを作ることが出来ます。

例えば、

  • テキストの色を変更する
  • テキストで強調したい部分にマーカーを引く
  • 余白の位置や幅を調整する
  • 表のデザインを整える

などなど様々な装飾が可能です。HTMLとCSSを習得するだけでも、普段あなたがみているようなWebページを作成することができますよ。

HTML/CSSでできないこと

先程ご紹介したとおり、HTMLとCSSだけでも簡単なWebページを作成することは可能です。しかし、残念ながらこの2つの言語だけではWEBページに動きを加えたり、オリジナルアプリを開発することはできません。

こういった機能の追加やアプリ開発を行うためには、それぞれに適したプログラミング言語を習得する必要があります。もしあなたが目的をもった上で、CSSの学習をしているのならば、目的にあったプログラミング言語がどの言語なのかを確認したほうがいいでしょう。

目的はあるんだけど、必要なスキルがなにかよく分からない……。
調べたらCSSが必要らしかったから学習してるけど違うの?

あなたがこのように感じているならば、こちらの「プログラミング学習診断」をご活用ください。あなたの目的から必要な言語と簡易的な学習プランを提供いたします。

目的にあった学習プランを診断する

効率よく目的を達成したいなら、プログラミングスクールがおすすめ


CSSだけじゃなく、他にも色々学習するのは大変そうだな……。
ひとりで学習を続けるのはちょっと不安……。

といった悩みや不安をお持ちの方は、弊社「侍エンジニア塾」をご利用下さい。

侍エンジニア塾では、

  • 現役エンジニアによるマンツーマンレッスン
  • 目的に合わせたあなた専用のオーダーメイドカリキュラム
  • キャリアアドバイザーによる転職・就職支援

を受けることができます。現役エンジニアからあなたの目的に合わせて効率化されたカリキュラムを受けることで、より早く必要なスキルだけを身につけることができますよ。

いきなり受講するのはちょっと……。

という方はまず弊社の無料体験レッスンを受講ください。

業界屈指のコンサルタントが、効率的な学習方法や仕事獲得術、今後のキャリアまでさまざまな疑問にお答えいたします。遠方の方でもオンラインで受講できるのでお気軽にご利用ください。

無料体験レッスンを予約する

まとめ

いかがでしたか?インラインブロック要素は指定も簡単だし、使い勝手の良い要素です。ぜひどんどん活用していってください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。