要素指定とorderを使いこなそう！リストの表示順変更や特定要素のデザイン調整術

　この記事では、見慣れたリストに変化を加えて、少しでも納得のいくデザインに近づけるためのCSSを紹介します。

　Flexboxなどを使っていれば、ul / li を使っていないリスト形式以外でも応用が効きます。
　「リストの表示に不満を抱えている」という方は、ぜひ活用してみてください。

リストの表示をCSSを使って巧みに操る

　見本のリストを用意しました。一般的な div の中で ul /li を使ったリストです。

　このリストに手を加えて少しいつものリストとは違う見た目にしようと思います。

　下記は、見本リストの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のクラスセレクタに追加します。ここでは、liタグに付与したクラス名「sample-list-item」をセレクタとして指定しています。

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

• display: flex は li の中にある日付やタイトルを自由に並べ替える為に必要です。

• flex-direction: column は、もともとのリストのような縦並びを維持しつつ、日付やタイトルを入れ替える準備として必要です。

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

　次に a タグに付与したクラス名である sample-list-link をセレクタとして指定します。
　親要素に display: flex (Flexbox) を使うと、子要素は強制的にブロックのような性質になります。
　つまり、display: block を使っているようなリンクテキストの横の空白部分までクリックできる範囲が広がります。それが嫌な場合は親要素に align-items: flex-start を追加します。

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

　そして order: 1 を付け加えます。

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

　order を使う事で順番を指定することが出来ます。
　数字が小さいほど「前（上）」に、大きいほど「後（下）」に移動します。

　そして orderの値は 0 がデフォルトです。

　sample-list-link に order: 1 を追加したことにより、上に表示する年月日のセレクタにはデフォルト値の order: 0 が割り振られます。

　書くことが間違いではありませんが、書かないことで無駄を削ぎ落とした最も綺麗な状態のCSSとなります。

要素指定を使って指定した箇所のみ変化を加える

　リストの一番上を目立たせるために要素指定を使って順列に特徴を付けます。
　まずは要素指定の nth-child(n) を使い、リストの一番上の設定からです。

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

　上のコードはリスト1件目の sample-list-item 内にある、sample-list-link セレクタを指定しています。
　文字の色や太さもこれを使うことで、特定の箇所のみスタイルを適用できます。

　2件目以降の全要素を一括で指定することも出来ます。

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

　要素指定の基礎をこちらの記事「要素指定の見本帳～順番など正しい指定で操作しよう～基礎編」で紹介しています。
　要素指定を使いこなすと、リスト1件目だけサムネイルの表示や、偶数・奇数だけ文字サイズを変える、または背景色を1行おきに薄いグレーにしてストライプデザインにするなど、CSSを使ったデザインの幅が広がります。

要素指定とorderを追加した新しいデザイン

　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 {
  font-size: 13px;
  color: #666;
}

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

　冒頭付近で見本リストで使用しているHTMLと、このCSSをcodepen.io/pen/で実際に入力して確認ができます。

今まで変えられなかったデザインを好きなように操るCSS

　要素指定は使い方次第で、均等の取れた平坦なデザインにメリハリを付けることができます。
　そこに order による順番を指定することで、色もサイズも順番も思いのままにすることができます。

ぜひ、活用してみてください。