CSSでリストの日付とタイトル順を変える方法｜orderとnth-childの実例

新着記事リストや関連記事リストで、「日付をタイトルの上に出したい」「1件目だけ目立たせたい」と思うことがあります。

HTMLの並び順を変えなくても、CSSの order と nth-child を使えば、表示順や一部の見た目を調整できます。

ここでは、リスト内の日付とタイトルの順番を入れ替えたり、1件目だけ文字サイズを変えたりする方法を、実際のコード例で整理します。

日付とタイトルが並ぶリストを用意する

まずは、見本となるリストを用意します。div の中に ul と li を置き、各項目にタイトルと日付を入れた形です。

このリストをもとに、日付をタイトルの上へ移動し、1件目だけ文字サイズを変える形に調整します。

見本リストのHTMLは次の通りです。

<div class="sample-list-container">
  <ul class="sample-list">
    <li class="sample-list-item">
      <a href="#" class="sample-list-link">MySQLのインデックス最適化によるクエリ高速化の手法について</a>
      <span class="sample-list-date">2024.05.10</span>
    </li>
    <li class="sample-list-item">
      <a href="#" class="sample-list-link">PostgreSQLのレプリケーション設定と高可用性構成のポイント</a>
      <span class="sample-list-date">2024.05.08</span>
    </li>
    <li class="sample-list-item">
      <a href="#" class="sample-list-link">NoSQLデータベースとRDBの使い分け：スケーラビリティの観点から</a>
      <span class="sample-list-date">2024.05.01</span>
    </li>
  </ul>
</div>

日付をタイトルの上に移動する

まずは、公開日にあたる日付を a タグのリンクタイトルより上に移動させます。
そのために、先に親要素側の指定から見ていきます。

li の中にある日付やタイトルを並べ替えるために、親要素になる li のクラスセレクタに指定を追加します。
ここでは、.sample-list-item をセレクタとして指定しています。

.sample-list-item {
  display: flex;
  flex-direction: column; 
}

display: flex は親要素である li に指定することで、子要素（タイトルと日付）に対して、これから紹介するプロパティを有効にするために必要です。

flex-direction: column; は、タイトルと日付を縦方向に並べる指定です。この指定で縦並びを保ったうえで、次に説明する order を使って上下の順番を入れ替えます。

display: flex は必ず親とする要素に書きます。

次に、a タグに付けたクラス .sample-list-link をセレクタとして指定します。

親要素に display: flex; を指定すると、子要素の幅やクリック範囲の見え方が変わることがあります。リンクテキストの文字部分だけをクリックできるようにしたい場合は、親要素に align-items: flex-start; を追加すると調整しやすくなります。

.sample-list-link {
  order: 1;
}

ここでは order: 1 を書きます。

a にクラスを付与していない場合は、.sample-list-item a をセレクタとして設定します。

順番指定を可能にするプロパティ：order

order を使うことで、Flexbox内の子要素の表示順を指定できます。
数字が小さいほど「前（上）」に、大きいほど「後（下）」に移動します。

order の初期値は 0 です。

.sample-list-link に order: 1; を指定すると、リンクタイトルは日付より後ろに表示されます。

.sample-list-date { order: 0; }

order の初期値は 0 です。そのため、日付側に order: 0; を書かなくても、リンクタイトルに指定した order: 1; より前に表示されます。

ただし、順番を明示して管理したい場合は、日付側にも order: 0; を書いて問題ありません。コードの分かりやすさを優先して、書く・書かないを選ぶと良いでしょう。

nth-childで1件目だけ見た目を変える

次に、nth-child を使ってリストの1件目だけ見た目を変えます。ここでは、1件目のリンクタイトルだけ文字サイズを少し大きくします。

.sample-list-item:nth-child(1) .sample-list-link {
  font-size: 19px;
}

このコードでは、1件目のリスト内にあるリンク文字を指定しています。
.sample-list-item:nth-child(1) で1件目のリストを選び、その中にある .sample-list-link にスタイルを適用しています。文字の色や太さも、同じ考え方で1件目だけ変更できます。

2件目以降をまとめて指定することも出来ます。

.sample-list-item:nth-child(n+2) .sample-list-link {
  font-size: 14px;
}

要素指定を使いこなすと、リスト1件目だけにサムネイルを表示する、偶数・奇数で文字サイズを変える、背景色を1行おきに薄いグレーにしてストライプデザインにするなど、CSSを使ったデザインの幅が広がります。

orderとnth-childを使ったリストデザイン

CSSを適用すると、以下のようなデザインになります。

日付とリンクタイトルの順番が変わり、1件目とそれ以降で文字サイズも変えています。

実際に設定しているCSSは、下記をクリックして確認できます。

.sample-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sample-list-item {
  display: flex;
  flex-direction: column; 
  padding: 12px 10px;
  border-bottom: 1px solid #ddd;
  align-items: flex-start;
}

.sample-list-link {
  order: 1;
  font-weight: bold;
  color: #0044cc;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
}

.sample-list-link:hover {
  text-decoration: underline;
}

.sample-list-date {
  order: 0;
  font-size: 13px;
  color: #666;
}

.sample-list-item:nth-child(1) .sample-list-link {
  font-size: 19px;
}
.sample-list-item:nth-child(n+2) .sample-list-link {
  font-size: 14px;
}

記事冒頭付近の見本リストで使用しているHTMLと、上記のCSSは、codepen.io/pen/ に入力して動作を確認できます。

HTMLを変えずにリストの表示順と見た目を調整する

nth-child を使うと、単調になりやすいリストにメリハリを付けることができます。
そこに order による順番指定を組み合わせることで、HTML構造を変えずに、表示順や見た目を調整しやすくなります。

下記のことを覚えておいてください。

「順番を変える order」と「特定箇所を指定する nth-child など」は、どちらもリストの見た目を調整するときに役立つ指定です。

• 「HTMLの構造は変えたくないけど、見た目だけ逆にしたいならorder」
• 「特定の場所（最初だけ、n番目だけ）を指定したいならnth-child」

order と nth-child を組み合わせると、WordPressはもちろん、無料ブログサービスなどでもHTMLを大きく変えずに、リストの表示順や見た目を調整しやすくなります。

まずは、新着記事リストや関連記事リストなど、身近な場所から試してみるとよいでしょう。