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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、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デザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。