lab: 項目間にリーダー線を付ける

目次や料理の価格表のように、二つの項目間にリーダー線を付ける（レスポンシブ対応）。

CSS

ul.add-leader > li {
  display: flex;
  margin-bottom: 10px;
}
 
/* 品名 */
ul.add-leader > li > em {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  white-space: nowrap;
  overflow: hidden;
}
 
ul.add-leader > li > em:after {
  content: " …………………………………………………………………………………………………………………………………………………………";  /* 要調整（長めに設定） */
}
 
/* 価格 */
ul.add-leader > li > span {
  flex-grow: 0;
  flex-shrink: 0; 
  flex-basis: 3em; /* 要調整 */
  text-align: right;
}
 
ul.add-leader > li > span:after {
  content: "円";
}

補足

16行目：リーダー線に使う文字列を長めに設定する。
レイアウトが崩れる場合はリセットCSS・共通CSS の内容を確認。

HTML

<h2>お飲み物メニュー</h2>
<ul class="add-leader">
  <li><em>珈琲</em><span>310</span></li>
  <li><em>烏龍茶</em><span>250</span></li>
  <li><em>カプチーノ</em><span>300</span></li>
  <li><em>キャラメルマキアート</em><span>360</span></li>
  <li><em>ホットチョコ</em><span>320</span></li>
  <li><em>コーラ</em><span>250</span></li>
</ul>

補足

ul 要素に add-leader クラスを付ける。
li 要素内の em 要素と span 要素の間に、指定した文字でリーダー線が表示される。

2020年11月27日金曜日

項目間にリーダー線を付ける

CSS

補足

HTML

補足