要素と要素を結ぶ線
Leader-lineライブラリの使用
要素と要素を線でつなぎたいのならLeader-lineライブラリがおすすめ。
まず<head>内に次のタグを記述する。
<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.7/leader-line.min.js"></script>要素を線でつなぎたいのなら新たに作成したjsファイル内か<script>タグ内に次の文を挿入する。
new LeaderLine関数、
- 第一引数に要素1個め
- 第二引数に要素2個め
- 第三引数に線のオプション付ける。
color- 線の色size- 線の太さendPlug- 線の終点に表示する要素path- 線の種類
new LeaderLine(
document.getElementById("red"),
document.getElementById("yellow"),
{ color: 'black', size: 2, endPlug: 'behind', path: 'straight' }
);