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

初心者向けにCSSのtable-cellの使い方について解説しています。table-cellはインライン要素やブロック要素などのようにdisplayプロパティで表現される表示形式です。テーブルやエクセルのセルのような要素を作成することが出来ます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSのtable-cellの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

table-cellとは

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

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

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

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

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

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

 

table-cellの書き方

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

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では、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

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