要素指定の見本帳～リストに要素指定やorderを使って新たな魅せ方をしよう～応用編

以前書いた記事：要素指定の見本帳～順番など正しい指定で操作しよう～基礎編の応用編になります。

この記事では li タグを使ったリストを前提に話を進めていきますが、これも以前書いた記事：画像やテキストを追加できる before/after を使った魅せ方と、\Aを使ってCSSで改行を可能にする小技で紹介したbefore/afterを使う事で、ウィジェット内の書き込めない箇所に割り込んで表示する事が可能です。

つまりは li を使っていないウェジットの新着記事の表示にも十分対応できます。

要素指定やorderを使ったリストデザイン

新着リストを想定して作ったのが下のリストになります。

• 2026.03.28 静謐なグリッドシステムの構築について
• 2026.03.25 アクセントカラー「#43577a」の運用記録
• 2026.03.20 擬似要素 before/after の制圧術
• 2026.03.15 詳細度の支配：CSSセレクタの優先順位

まず注目するべき点は今回の目玉となるリストの一件目です。新着リストのもっとも新しい項目を目立たせる為のデザインにしています。

始まりは display: flexとflex-direction: column から

一件目はテキストを使った装飾、投稿年月日、投稿タイトルの３パーツ。それ以降は２パーツです。それらを要素指定やorderを使って何を指示しているのか解説していきます。

始めに li のセレクタに余白、罫線を含めた並びの指示を設定します。
以下、CSSの数値は実際に見本としてあげているリストの数値です。

HTML
<li class=”new-entry-item”>

CSS
.new-entry-item {
display: flex; /* 要素の並び方を指示するため */
flex-direction: column; /* 要素を縦並びに指示するため */
padding: 15px 5px;
border-bottom: 1px solid #eeeeee;
}

まずは、li のセレクタ（.new-entry-item）に display: flex; を指示します。これは、中にある日付やタイトルを「自由に並べ替える」為に必要です。

flex-direction: column; は、並べる方向を「縦（垂直）」に指定するものです。また row というキーワード指定もあります。横に並べたい時は row をキーワード指定します。

リンクタグ<a>のセレクタの設定もしています。

HTML
<a href=”#” class=”entry-title”>

CSS
.entry-title {
text-decoration: none !important;
display: block;
order: 2; /* 順番：下 */
margin: 0;
line-height: 1.5;
transition: color 0.2s ease; /* ホバー時の色の変化を滑らかに */
}

<a>のセレクタにdisplay: block;を設定している理由としては、リンクテキストの横の空白部分までクリックできる範囲を広げて利用者が押しやすくする為です。
それが嫌な場合はinlineを指示します。

order: 2;の説明は後程します。

nth-child(n)とorderを使い、文字を追加して並び順序を支配する

表示順に不満を覚える事は多々あると思います。もっと細かく設定出来たらいいのに…そんな事を思う日も確実に今日までです。

orderの値は0がデフォルトです。数字が小さいほど「前（上）」に、大きいほど「後（下）」に移動します。

日付をタイトルの下にしたい時、普通ならHTMLを書き換えます。しかし、そこを書き換える事ができない場合は、orderの値を「1」から「3」にするだけです。

最初に li のセレクタにプロパティdisplay: flex;を設定しました。orderを使う前提条件としてこのプロパティは絶対です。

擬似要素を使って追加した文字「NEW」の項目設定は以下となります。

HTML
<li class=”new-entry-item”>

CSS
.new-entry-item:nth-child(1)::before {
content: “NEW”;
order: 0; /* 一番上なのでデフォルトの0 */
display: inline-block; /* 横幅に広がる事を防ぐため */
width: fit-content; /* テキストの幅に合わせる */
font-size: 10px;
color: #43577a;
border: 1px solid #43577a;
padding: 1px 6px;
margin-bottom: 5px;
font-weight: bold;
}

まずはリストの一番上を対象にする為に .new-entry-item に疑似クラスである :nth-child(1) を繋げます。更に ::before を繋げて文字の前に文字を表示させる設定をします。

width: fit-content; を設定する事で、border: 1px solid #43577a; で表示される枠が文字を包みます。もし、これを設定しなければ、border が横の空白一杯まで広がります。

そして order: 0; を指定します。一番上にするので値は 0 です。

その他のorder設定と疑似クラスを使った変化

年月日の設定は特に特筆する事はありません。order: 0; の次なので値は1 にするだけです。

HTML
<span class=”entry-date”>

CSS
.entry-date {
order: 1; /* 順序：中 */
font-size: 12px;
color: #999;
margin-bottom: 5px;
}

これまでの流れを見ると .entry-title で設定したorder: 2; が一番下になる意味が分かると思います。

もし、日付を一番下に持っていきたいなら、この数値を『3』に変えるだけ。HTMLの構造を一切いじらずに、一瞬でデザインを入れ替えられます。

リストの一番目を指定したデザイン

リスト一番目の特徴は追加文字の他に文字の大きさにあります。

CSS
.new-entry-item:nth-child(1) .entry-title {
font-size: 18px;
font-weight: bold;
color: #2c3e5a;
}

一番目のリストのリンク文字を対象にしています。

リストの二番目以降を指定したデザイン

文字サイズや、太さ、色の調整をしています。見本だと一件目に対して控えめに見せる設定にしています。

CSS
.new-entry-item:nth-child(n+2) .entry-title {
font-size: 14px;
font-weight: normal;
color: #5a7da3;
}

年月日の設定もあります。文字サイズ。色の調整です。

CSS
.new-entry-item:nth-child(n+2) .entry-date {
font-size: 11px;
color: #bbb;
}

リンクホバーアクション

これはお好みで、一応設定しているので。

CSS
.entry-title:hover {
color: #d9534f !important;
text-decoration: underline !important;
}

一応、設定しているCSSを載せておきます。

.mikoto-new-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.new-entry-item {
  display: flex;
  flex-direction: column;
  padding: 15px 5px;
  border-bottom: 1px solid #eeeeee;
}
.entry-title {
  text-decoration: none !important;
  display: block;
  order: 2;
  margin: 0;
  line-height: 1.5;
}
.entry-date {
  order: 1; 
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}
.new-entry-item:nth-child(1)::before {
  content: "NEW";
  order: 0;
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  color: #43577a;
  border: 1px solid #43577a;
  padding: 1px 6px;
  margin-bottom: 5px;
  font-weight: bold;
}
.new-entry-item:nth-child(1) .entry-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e5a;
}
.new-entry-item:nth-child(n+2) .entry-title {
  font-size: 14px;
  font-weight: normal;
  color: #5a7da3; 
}
.new-entry-item:nth-child(n+2) .entry-date {
  font-size: 11px;
  color: #bbb;
}
.entry-title:hover {
  color: #d9534f !important;
  text-decoration: underline !important;
}