単語と単語を結ぶ点線

2022年11月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は上の画像のような「単語と単語を結ぶ点線」を作ってみたいと思います。

参考：インクループ株式会社 |【レスポンシブ対応】CSSでメニュー表のように単語と単語を点線で結ぶリストを作る　CSSでのタブリーダーの作り方

リーダーというらしい

この単語と単語を結ぶ点線のことを「リーダー」というらしいです。

「⋯」のことを「3点リーダー」と言いますもんね。

・単語と単語はそれぞれ両端にある

・単語の長さ、画面の幅に応じて点線が伸縮する

という感じで作ってみましょう。

実装

• カッコン

  ---

  4.0g
• タイソウ

  ---

  3.0g
• マオウ

  ---

  3.0g
• カンゾウ

  ---

  2.0g
• ケイヒ

  ---

  2.0g
• シャクヤク

  ---

  2.0g
• ショウキョウ

  ---

  2.0g

例として上のような成分表を作ってみます。葛根湯ですね

<ul>と<li>を使います。

<ul>
  <li>
  </li>
</ul>

<li>の中に左の単語、<hr>、右の単語を入れて、それぞれを<span>で囲みます。

<ul>
  <li>
    <span>カッコン</span>
	<span><hr></span>
	<span>4.0g</span>
  </li>
</ul>

以下のCSSを設定します。

.flex {
  display: flex;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
}

.f-auto {
  flex: auto;
}

hr.leader {
  position: relative;
  top: calc(50% - 1px);
  margin: 0 10px;
  border: none;
  border-top: dotted 2px #CCC;
}

<li>にflex
<hr>を囲む<span>にf-auto
<hr>にleaderというクラスを付与します。

<ul>
  <li class="flex">
    <span>カッコン</span>
    <span class="f-auto"><hr class="leader"></span>
    <span>4.0g</span>
  </li>
</ul>

• カッコン

  ---

  4.0g

あとは<li>を好きなだけ増やせば完成です！

まとめ

飲食店のメニュー表とかにも使えそうです！

大きい画面だと単語と単語の間隔が開きすぎるので、<ul>にmax-widthを設定してもいいと思います。