サイトのメニューやリストを横並びにして、項目と項目の間に縦線を入れたい。
ところが…末尾まで線が入ってしまう、折り返した行の先頭にも線が付く…
そんな "モヤッ"と 経験、ありませんか？

しかもレスポンシブ対応だと、画面幅を変えるたびにデザインによっては改行される項目の位置も様々なので、「こことここだけ線！」のように仕込んでも、位置がずれてしまって狙ったデザインにならないことも "モヤッ"の要員だったりします。

今回は JS＋CSS のコンボで、レスポンシブでも自然に「項目間だけ線」を入れる方法をご紹介します。

例えば「List」を横並びにするとして…

• りんご
• いちご
• とまと

このようなとてもシンプルなリスト表示に以下のようなCSSを与えると…

.demo-list {
  display: flex;           /* 横並び */
  flex-wrap: wrap;         /* 折り返し対応 */
  list-style: none;        /* 黒ポチ消す */
  margin: 0;
  padding: 0;
}

.demo-list li {
  padding: 0 12px;
}

• りんご
• いちご
• とまと

と、CSSでListをこんな感じに横並びにはできますよね。
それから…見やすくするために各項目の間に区切り線を入れようとする…

.demo-list li {
  padding: 0 12px;
  border-right: 1px solid #000;
}

このCSSでは…こうなります。

• りんご
• いちご
• とまと

…そこで皆さん思います。とまとの右の区切り線、いらなくない？と。
ここで「モヤッ」してしまうこと、ありませんか？
左右にborder入れると重なった箇所は太くなってしまうし…
CSSでこれを上手く解消する方法がないものか、と悩んでみました。

課題として…

• りんごとイチジクのコンポート
• いちごとベリーのコンポート
• とまととモツァレラのサラダ
• ピーマンと挽肉の肉詰め
• ナスの揚げ浸し　キーマカレーソース仕立て
• セロリとかつお節の和風サラダ
• しいたけとたけのこのさっぱり煮付け

のように、複数にわたり項目が追加される、画面サイズによって改行される項目が都度異なる…のようなレスポンシブル対応しつつ、１行で見たときに行頭と行末の区切り線は消したい！をクリアすること。

なかなかハードル高そうではないですか？

今回は、こんな状況をCSSだけで解決策を探るのではなく、「JavaScript＋CSS」でレスポンシブでも自然に「項目間だけ線」を入れる方法を模索、実装してみました。

解決アプローチ「CSSだけじゃなくJSも使ってみよう！」

1. 線は左側だけに入れる
2. JSで「行頭」のliにクラスを付与して線を消す
3. 線のオンオフは opacity で制御して、ふわっと自然に表示

を目指します。

実装CSSコード

ul.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  position: relative;
  padding: 0 12px;
}

ul.menu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s ease; /* フワッと */
}

/* 行頭と先頭は線を消す */
ul.menu li:first-child::before,
ul.menu li.is-first-in-row::before {
  opacity: 0;
}

/* それ以外は線を表示 */
ul.menu li:not(.is-first-in-row)::before {
  opacity: 0.9;
}

ポイント

• flex-wrap: wrap で横並び＋折り返しを実現
• is-first-in-row クラスで行頭を判定し、線を消す
• 「opacity＋transition」でパッと切り替わる違和感を解消
• HTML構造はそのままでOK

表示結果はこちら

これは、シンプルなListにclassだけ追加することで実装されています。画面サイズに応じて改行される位置がかわりますが、その都度、自動的に項目間のみに区切り線が発生します。
ブラウザの幅を動かして確認してみてください。

まとめ

「項目間だけ線を入れる」というシンプルな見た目でも、レスポンシブ対応や視覚的な自然さまで考えるとCSSだけでは限界があります。
今回のように CSSとJSを組み合わせることで、"モヤッ"を解消した気持ちいい仕上がり にできます。

但し…「もっと簡単にCSSだけで実装できるよ！」という場合もあるかも…
今回のケースは、過去にクライアント様に納品したWordPressサイトに業務書類のリンクエリアを設けました。これはクライアント様がアップ後にWordPressのメニュー機能を使ってご自身で追加可能になるよう簡易的に構築した要素なんですが、知らない間に莫大な量の項目が増えてしまって、表示が煩雑になってしまったケースに利用しててみました。
今なら、別の方法をとるかと思いますが…

皆さんも是非、ベストな方法で実装してみてくださいね！