We Blog Weblog

単語と単語を結ぶ点線

Web

2022年11月15日

Sticky Fingers Sticky Fingers

みなさんこんにちは。
ケミストの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>を好きなだけ増やせば完成です!

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP