みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
今回はLeaderLine.jsの使い方を学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- LeaderLineの導入方法がわかる
- LeaderLineを使って要素間を繋ぐ線が引ける
- LeaderLineのオプションがわかる
すごく便利なライブラリなので、ぜひ使ってみよう!!
LeaderLine.jsとは?
- JavaScriptのライブラリ
- HTMLの要素と要素を線で結ぶことができるもの
https://anseki.github.io/leader-line/
LeaderLine.jsの導入方法
導入方法は簡単で、以下の2通りです。
- ダウンロードしたファイルを配置
- 直接CDNのリンクを貼る
今回はリンクを貼る前提で解説しています。
HTMLのbodyタグ内に以下のscriptタグを記述してください。
<script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script>
ちなみにだけど、上記スクリプトタグは自分の作ったJavaScriptファイルより上で読み込んでね!
<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割位の機能はここに入っています。
細かなスタイルの変更は公式サイトをご確認ください
- ホバーしたら線を引く※コメントアウト中
- 終了位置の要素を枠で囲う
- 線の形状
- 線の色
- 線の太さ
- 開始位置の形状・サイズ
- 終了位置の形状・サイズ
- アニメーション
- 線にテキストを表示
今回設定したオプションはこれらだよ!
まとめ
-
LeaderLineとは、HTMLの要素と要素を線で繋ぐライブラリ
- 必要な手順
- 開始位置のHTMLの要素を取得
- 終了位置のHTMLの要素を取得
new LeaderLine(開始位置の要素, 終了位置の要素, オプション);
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈