Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML+CSSでの段組みレイアウト作成について

More than 5 years have passed since last update.

はじめに

HTML+CSSで段組み作る際にはdivタグとfloatスタイルを使うことが一般的と思わる。(よく知らないが)

それに取って代わりそうな、便利なスタイル指定を見つけたのでメモしておくこととする。

※IE8から対応しているのでそれなりに使えると思っている。

CSS Table display

display: table と display: table-cell の組み合わせで

お手軽に段組みレイアウト作成することができる。

display: table が 行に相当し、display: table-cell が セルに相当するイメージ。

記述する際は、display: table スタイルと同時に table-layout: fixed も記述すること。

これがないとセル幅が自動計算されてしまう。

以下は簡単なテーブルの例。

div{
    box-sizing: border-box;
}

.row{
    display: table;
    width: 100%;
    table-layout: fixed;
    background: gray;
    color: white;
}

.cell-1{
    display: table-cell;
    width: 25%;
    background: blue;
    color: white;
}

.cell-2{
    display: table-cell;
    width: 50%;
    background: tomato;
    color: white;
}
<div class="row">
    <div class="cell-1">行1列1</div>
    <div class="cell-2">行1列2</div>
    <div class="cell-1">行1列3</div>
</div>
<div class="row">
    <div class="cell-1">行2列1</div>
    <div class="cell-2">行2列2</div>
    <div class="cell-1">行2列3</div>
</div>
<div class="row">
    <div class="cell-1">行3列1</div>
    <div class="cell-2">行3列2</div>
    <div class="cell-1">行3列3</div>
</div>
<div class="row">
    <div class="cell-1">行4列1</div>
    <div class="cell-2">行4列2</div>
    <div class="cell-1">行4列3</div>
</div>

実行結果の確認はこちら http://jsfiddle.net/5denknxw/

複雑な段組みについて

作成途中で且つそこまで複雑では無いですが、http://jsfiddle.net/bjywym4a/ に配置しました。

IE8~, Chrome, Firefox でレイアウト崩れが無いことを確認しています。

複雑な段組みについて2

ブログっぽい段組みを http://jsfiddle.net/ufmhnsdj/ に配置しました。

IE8~, Chrome, Firefox でレイアウト崩れが無いことを確認しています。

2例だけですが、floatプロパティよりはかなり簡単に利用できるんじゃないかなと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away