LeaderLineの使い方”ほぼ”完全攻略【JavaScript】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回はLeaderLine.jsの使い方を学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

LeaderLine.jsとは?

LeaderLine.jsの導入方法

導入方法は簡単で、以下の2通りです。

今回はリンクを貼る前提で解説しています。
HTMLのbodyタグ内に以下のscriptタグを記述してください。

<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script>
<script src="./script.js"></script>

LeaderLineを使って要素間を線で繋ぐ

やるべきことは以下の3つです。

See the Pen 【leaderLine】要素を線で繋ぐ※デフォルト by samehack (@samehack) on CodePen.

HTMLの要素を取得する構文

document.getElementById(HTMLのid名)

要素間を線で繋ぐ構文

new LeaderLine(開始位置の要素, 終了位置の要素, オプション);

このように簡単に要素と要素を線で繋ぐことが可能です！

LeaderLineのオプションを設定しよう

LeaderLineには様々なオプションがあるのですが、今回は代表的な物を設定してみました。
目的に応じて設定してみてください

See the Pen 【leaderLine】要素を線で繋ぐ※デフォルト by samehack (@samehack) on CodePen.

大体8割位の機能はここに入っています。
細かなスタイルの変更は公式サイトをご確認ください

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram