HTMLとCSSで点線リーダー：目次や索引で項目名とページの間を点線で結ぶ。（Googleフォント）

目次や索引で、項目名とページの間を点線で結ぶ（タブリ－ダー）のをHTMLとCSSで実現する方法の備忘録。

≪完成イメージ≫

≪参考にさせてもらったページ≫

他の方法を公開しているページ。

【関連：Wordで点線リーダーをつくる方法】

≪作成したページ≫

→→→　https://ok2nd.github.io/tool/leader/leader-sample.html

≪HTMLとCSS≫

<style>
.line {
	position: relative;
	height: 1.5em;
}
.line::before {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	margin-top: 0.5em;
	border-top: 1px dashed silver;
}
.line .name {
	position: absolute;
	padding-right: 1ex;
	background-color: white;
}
.line .page {
	right: 0;
	position: absolute;
	padding-left: 1ex;
	background-color: white;
}
</style>

<div class="line"><span class="name">アオジ</span><span class="page">4</span></div>
<div class="line"><span class="name">アトリ</span><span class="page">6</span></div>
<div class="line"><span class="name">イスカ</span><span class="page">8</span></div>
・・・

≪2段組みにして体裁を整えたページも作成≫

→→→　https://ok2nd.github.io/tool/leader/leader-index.html

フォントは、Googleフォント「Noto Sans JP」の「Regular 400」を使用。

≪Googleフォントの指定≫

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap" rel="stylesheet">
<style>
body {
	font-family: 'Noto Sans JP', sans-serif;
}
</style>