HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでtableタグを使わないで段組レイアウトする方法について解説しています。ここではinline-block、float、flexboxを使った方法について説明します。それぞれの書き方を見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
ノマリカ
伝わりやすくて明快なデザインを得意としている。
HTMLでtableタグを使わないで段組みレイアウトする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
tableタグを使わないで段組みレイアウトする方法について詳しく説明していくね！
お願いします！
段組みレイアウトの歴史
CSSがまだ一般的ではなかったインターネット黎明期は、Webページをレイアウトする目的でtableタグを用いていました。
段組みレイアウトなどはもちろん、Excelのセルを結合する感覚でtableタグが用いられていたのです。
2000年代になり、レイアウトをはじめとする見た目の制御をCSSが担うようになってくると、floatプロパティを使って段組みレイアウトを実現する方法が主流になっていきました。
それから10年ほどたつと、レイアウトに特化した一連のCSSプロパティ「flexbox（フレックスボックス）」が日の目を浴びてくるようになります。
さらに近年では、段組みレイアウトが自由自在に操れる「CSSグリッド」などが登場しており、より直感的に段組みレイアウトが実現できるようになっています。
tableタグでの段組みレイアウトはコードが複雑になりやすい
tableタグを用いてレイアウトするメリットは、CSSに記述をしなくても段組みレイアウトが実現できることです。
細かいことは気にせずにHTMLファイルだけ編集したいのであれば、tableタグを使用することでシンプルな段組みレイアウトが簡単に作成できます。
しかしながら複雑なレイアウトになると、tableタグを使った方法はコードを注意深く確認しないと修正がしづらくなってきます。
マークアップとしてのHTMLの記述と、視覚的なスタイル調整としてのCSSの記述が混在した書き方になってしまうために、分かりづらくなってしまうのです。
新しくカラムを追加したい場合にも、tableの中に余計な要素を加えたりtableすべてを書き直す必要があるなどコードが複雑になりやすく、決して保守性が高いとは言えません。
よって、tableタグは表組みを表示させる場合には今後も使用していきたいですが、段組みレイアウトとしては不向きなタグです。
さまざまな段組みレイアウト方法
tableタグを使わずに、段組みレイアウトを実現する方法はいくつもあります。
以降ではさまざまな方法を紹介していきます。
inline-blockを使った方法
要素が横並びとなるよう、CSSにdisplay:inline-blockを記述することでブロック要素を横並びにでき、縦や横の幅も指定できます。
See the Pen
inline-blockを使った段組みレイアウト方法 by nomallica (@nomallica)
on CodePen.
floatプロパティを使った方法
通常のブロックは上から下に表示されますが、右側に配置したいものにfloat:leftと記述することで横並びに表示させることができます。
横並びを解除する際はclear:bothと記述したり、架空のボックスを記述して横並びの設定を解除する「clearfix」という手法を用いることで、意図した部分だけを段組みにすることができます。
See the Pen
floatプロパティを使った段組みレイアウト方法 by nomallica (@nomallica)
on CodePen.
flexboxを使った方法
flexboxと呼ばれる一連のCSSプロパティを使った方法は、段組みレイアウトを実現する際に現在最も利用されています。
CSSにdisplay:flexと記述することで要素をflexboxコンテナの中に並べていくことができるため、修正がしやすく記述量も少なく済みます。
See the Pen
Untitled by nomallica (@nomallica)
on CodePen.
CSSグリッドを使った方法
CSSグリッドは、これまでのレイアウト手法よりも直感的に扱えることで近年注目されています。
CSSにdisplay:gridと記述することでgridコンテナーを形成し、さらにgrid-template-rows、grid-template-columnsを指定してグリッドのサイズを決めることができます。
See the Pen
CSSグリッドを使った段組みレイアウト方法 by nomallica (@nomallica)
on CodePen.
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回は、HTMLでtableタグを使わないで段組みレイアウトする方法について説明しました。
CSSの進化により、直感的に段組みレイアウトを実現できる方法が複数あります。
現在の主流はflexboxを使った方法ですが、今後はCSSグリッドやその他の方法が主流となっていくでしょう。
ぜひ環境にあった新しい方法を取り入れてみてください。
HTMLでtableタグを使わないで段組みレイアウトする方法がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
