横並びにできる！CSSのtable-cellの使い方【初心者向け】

CSSのtable-cellの使い方について解説します。table-cellは名前の通りテーブルやエクセルのセルのような表示を行うことが出来ます。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

table-cellとは

table-cellは、テーブルタグの子要素のようなスタイルを与えることができる、displayプロパティの値です。

よく、「要素をカンタンに横並びにできるもの」として登場しているのではないかと思います。

そもそもこの「テーブル」の部分ですが、元をたどればテーブルタグというものが存在します。（ご存知の方は読み飛ばしてください。）いわゆるWebサイトが普及し始めた頃、フレームワークはほぼテーブルタグで行われていました。

HTMLタグ自体が、強制的に表のようになるようにできているので、「表示幅によっては縦並び」みたいなことが不可能で、今ではWebのレスポンシブ化とともに、すっかり見かけなくなってしまいました。

その「テーブル」の「セル」。エクセルなどで「セル」って聞いたことないでしょうか。つまり、display: table-cell; とは、テーブルの中身の枠をを再現できるものだということです。

通常のブロック要素とは違う動きをしますので、注意が必要です。

 

table-cellの書き方

基本的には、親要素にdisplay: table;を与えた上で使います。

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

HTML

<div class="container">
  <div class="box apple">
    <p>りんご</p>
  </div>
  
  <div class="box orange">
    <p>みかん</p>
  </div>
  
  <div class="box grape">
    <p>ぶどう</p>
  </div>
</div>

 

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}

.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}

.apple{
  background: #ED3B2B;
  vertical-align: middle;
}

.orange{
  background: #E4642C;
  vertical-align: top;
}

.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

プロパティの値を変えたり色々操作してみてください。

 

この記事を監修してくれた方 和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。 テニスと音楽とビールが好きです。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。