HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでtableタグを使わないで段組レイアウトする方法について解説しています。ここではinline-block、float、flexboxを使った方法について説明します。それぞれの書き方を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLでtableタグを使わないで段組レイアウトする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

tableタグを使わないで段組レイアウトする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

tableタグを用いるメリットとデメリット

テキストなどのひとかたまりとなっている要素を、段組レイアウトにする場合にはいくつかの方法があります。

tableタグを用いる方法は以前のwebサイトではよく用いられていた方法です。

しかし、メリットとしてはCSSに記述をしなくても横並びの段組にすることができるということです。

細かい表示方法は気にせずにhtmlファイルに記述するだけで段組を実現すれば良いという環境であれば、tableタグを使用することで表示が可能になります。

また、CSSを使用してvertical-alignプロパティを使用したい場合にはtableタグを用いることで実現ができます。

このvertical-alignはインライン要素とテーブルセルにのみ使用することができ、ブロック要素には使用することが出来ないため、あえてtableタグを使用することでベースラインを基準としたフォント調整が出来るようになります。

デメリットとしては、修正がしづらくなります。複数人でメンテナンスをする場合や日にちが大分経過してからコードを見直した場合に、マークアップとしてのHTMLの記述と視覚的なスタイル調整としてのCSSの記述が混在した書かれ方となってしまうために、よく分からなくなってしまいます。

そして新しく段組として追加のカラムを記述したい場合にtableの中に余計な要素などを加えたり、table全てを書き直す必要が出る場合があり複雑になってしまいます。

 

tableタグを使わないデザインレイアウト

tableタグは表形式などで表示したい場合には使用していきたいですが、段組みレイアウトとしては不向きなタグになります。

tableタグを使わない方法はいくつもありますが、基本的にはhtmlにid属性やclass属性を記述し、それをセレクタにしてCSSでスタイルを設定していきます。

inline-blockを使った方法は簡単です。

横並びとなるようにCSSにdisplay:inline-blockを記述することでブロック要素として横並びにすることが出来、縦横の大きさなども指定をすることが出来ます。

また、floatを使った方法もよく使われます。

通常のブロックは上から下に表示されますが、右側に配置したいものにfloat:rightと記述することで横並びに表示させることが出来ます。

次のブロックに横並びを解除するようにclear:bothと記述したり、架空のボックスを記述して横並びの設定を解除することで意図した部分だけを段組みとすることが出来ます。

そして、flexboxを使った方法でも段組みレイアウトに出来ます。

flexboxは最新の環境のみで利用する必要があるため注意が必要ですが、CSSにdisplay:flexと記述することで要素をflexboxコンテナーの中に並べていくことが出来るため、修正などがしや少なっています。

 

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

実際に段組レイアウトしてみよう

inline-boxを使った場合

(htmlファイル)

<div>

<div class="sample1">左</div>

<div class="sample1">中</div>

<div class="sample1">右</div>

</div>

(cssファイル)

.sample1 {

display: inline-block;

text-align: center;

line-height: 100px;

width: 200px;

height: 100px;

background-color: blue;

margin-top: 100px;

}

floatを使った場合

(htmlファイル)

<div class="clearfix">

<div class="sample2">左</div>

<div class="sample2">中</div>

<div class="sample2">右</div>

</div>

(cssファイル)

.sample2 {

float: left;

text-align: center;

line-height: 100px;

width: 200px;

height: 100px;

background-color: yellow;

margin:3px;

margin-top: 100px;

}

.clearfix:after{

content:"";

display: block;

clear: both;

}

flexboxを使った場合

(htmlファイル)

<div class="sample3">

<div class="sample4">左</div>

<div class="sample4">中</div>

<div class="sample4">右</div>

</div>

(cssファイル)

.sample3 {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

align-items: center;

}

.sample4{

text-align: center;

line-height: 100px;

width: 200px;

height: 100px;

background-color: green;

margin-top: 100px;

}

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLでtableタグを使わないで段組レイアウトする方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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