HTMLの順番を変えずにカードの表示順を変えるFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

HTMLの順番を変えずにカードの表示順を変えるFlexboxの使い方

HTMLの順番を変えずにカードの表示順を変えるFlexboxの使い方を紹介します。本記事では、HTMLの記述順はそのままに、CSSだけでカードの表示順を変更する方法を解説します。HTMLを書き換えずにレイアウトだけ変更したい場合に便利なテクニックです。

このサンプルコードでは、Flexboxの order プロパティを使用します。特定のカードだけを先頭や最後へ移動できるため、HTMLを編集せずに表示順を自由に変更できます。

この方法は、おすすめ商品を先頭へ表示したい場合や、お知らせを一番上へ移動したい場合、PCとスマートフォンで表示順を変更したい場合などに活用できます。Flexboxの便利な機能を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTMLの順番を変えずに表示順を変更

HTMLの並びと、Flexboxで表示順を変更した結果を比較できます。

HTMLの順番
△
三角
□
四角
⬟
五角
Flexboxで表示順を変更
△
三角
□
四角
⬟
五角
HTMLの記述順は「三角 → 四角 → 五角」のままです。
order:-1; を指定した五角だけが先頭へ移動し、HTMLを書き換えなくても表示順だけ変更できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>HTMLの順番を変えずにカードの表示順を変えるFlexboxの使い方</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 全体エリア -->
  <div class="flexbox-order-layout_wrap">

    <!-- タイトル -->
    <h1 class="flexbox-order-layout_title">
      HTMLの順番を変えずにカードの表示順を変更
    </h1>

    <!--
      HTMLの記述順は
      三角 → 四角 → 五角
      の順番です。
    -->
    <div class="flexbox-order-layout_list">

      <div class="flexbox-order-layout_card">
        三角
      </div>

      <div class="flexbox-order-layout_card">
        四角
      </div>

      <!--
        HTMLでは3番目ですが、
        CSSの order を使って
        表示だけ先頭へ移動します。
      -->
      <div class="flexbox-order-layout_card flexbox-order-layout_card-first">
        五角
      </div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLの記述順はそのままに、CSSの order を使ってカードの表示順だけを変更します。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。表示順を変更したいカードに order を指定すると、HTMLを書き換えなくても表示順だけを変更できます。

コメント