作成方法：並べ替えテーブル

並べ替えテーブルの作成方法

CSSを使用して float 並べ替えテーブルを作成する属性

例

* {
  box-sizing: border-box;
}
/* 2つの列のレイアウトを作成 */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix（浮動を解除） */
.row::after {
  content: "";
  clear: both;
  display: table;
}

自分で試してみてください

CSSを使用して flex 並べ替えテーブルを作成する属性

例

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

自分で試してみてください

注意：FlexboxはInternet Explorer 10およびそれ以前のバージョンでサポートされていません。使用するかどうか float または flex それはあなた次第です。ただし、IE10およびそれ以前のバージョンをサポートする必要がある場合は、 float。

ヒント：Flexible Box レイアウトモジュールに関する情報をさらに詳しく知りたい場合は、私たちの CSS Flexbox ガイド。

レスポンシブ化

上の例では、2つの列がページの多くのスペースを占めるため、モバイルデバイス上では見た目があまり美しくありません。

レスポンシブなテーブルを作成し、2つの列のレイアウトからモバイルデバイス上の全幅レイアウトに変換するには、以下のメディアクエリを追加してください：

例

/* レスポンシブレイアウト - 600ピクセル以下のスクリーンでは、2つの列を並べ替えではなく積み重ねにします */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

自分で試してみてください

関連ページ

チュートリアル：CSSテーブル

チュートリアル：CSSフロート

チュートリアル：CSS Flexbox