以前にも、演劇が好きな方には見ていただきたい！
オンラインサロン「リトルシアターユニオン」さんのサイトをご紹介させていただきました。
また、このサイトを作る際に使った方法として、吹き出しの作り方をご紹介しました。
今回は、線を引く方法をご紹介します。
方法① linear-gradientを使う
linear-gradientとは？
linear-gradientというのは、線形グラデーションを作るためのスタイルです。
linear-gradientの基本的な使い方
linear-gradientを使うには、divなどの要素を使い、
CSSで色や、幅、角度などを設定します。
linear-gradientの例
例1
上記のような線を引くためのコードは以下となります。
＜div class="diagonal1"＞＜/div＞
.diagonal1 {
/*幅50px、高さ100pxの箱を用意*/
width: 50px;
height: 100px;
/*右上に向けて、45%までは透明、45%～55%は黒、55%以降は透明*/
background-image: linear-gradient(to right top, transparent 45%, black 45%, black 55%, transparent 55%);
}
例2
上記のような線を引くためのコードは以下となります。
＜div class="diagonal2"＞＜/div＞
.diagonal2 {
width: 50px;
height: 100px;
background-image: linear-gradient(to right bottom, #EDFFBE 36%, #FF9872 67%, #FFDBC9 33%);
}
}
上記の意味は
右下に向けて、
36%までは■#EDFFBEという色、
36%～67%は■#FF9872という色、
67%以降は■#FFDBC9という色
になるようグラデーションさせています。
例3
上記のような線を引くためのコードは以下となります。
＜div class="diagonal3"＞＜/div＞
.diagonal3 {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, #fff 10%, #FF9872 10%, #FF9872 20%, #fff 20%, #fff 30%, #FF9872 30%, #FF9872 40%, #fff 40%, #fff 50%, #FF9872 50%, #FF9872 60%,#fff 60%, #fff 70%, #FF9872 70%, #FF9872 80%, #fff 80%, #fff 90%, #FF9872 90%, #FF9872);
}
}
上記の意味は
幅100px、高さ100pxの箱を用意
45度の角度で左下から順に、
10%までは白、
10%～20%は■#FF9872の色、
20%～30%は白、
30%～40%は■#FF9872の色…
と繰返すことで、ボーダーを表示させています。
linear-gradientのまとめ
linear-gradientを使うことで、線は引けますが、
どんな線を引くかを考え、角度や、どこからどこまで何色にするかなどを考えコードを書く必要があり、
1本の線を引くだけでもかなりの手間暇がかかりますね。
方法② canvasを使う
JavaScriptのcanvasというAPIを使う方法です。
canvasとは？
JavaScriptとHTMLのcanvas要素を使い、グラフィックを描く方法です。
canvasの基本的な使い方
HTMLで、描画する場所（キャンバス）を準備し、
JavaScriptでキャンバスに描く線の色や長さなどを設定します。
canvasの例
例1
上記のような線を引くためのコードは以下となります。
＜canvas id="canvas" width="300" height="5"＞＜/canvas＞
// canvasの名前の要素を取得
var canvas = document.getElementById("canvas");
// 2D グラフィックでの描画を指定
var ctx = canvas.getContext("2d");
// キャンバスを黒で塗る
ctx.fillStyle = "#000";
// 左上から (0,3) の位置で、幅200、高さ3の線を描画する
ctx.fillRect(0,3,200,3);
例2
上記のような線を引くためのコードは以下となります。
＜canvas id="canvas2" width="200" height="100"＞＜/canvas＞
// 変数定義
var cs = document.getElementById('canvas2'),
ctx2 = cs.getContext('2d'),
// 指定した要素の幅、高さを取得して変数に入れる
csWidth = cs.width,
csHeight = cs.height,
// 要素の幅、高さの半分の位置を中心とする
center = {
x: csWidth / 2,
y: csHeight / 2
};
// 線の基本スタイル
// 線の色を黒にする
ctx2.strokeStyle = '#000';
// 線の幅を5にする
ctx2.lineWidth = 5;
var drawLine = function() {
// 現在のパスをリセットする
ctx2.beginPath();
// パスの開始座標を、キャンバスの左上端から(0,指定した要素の高さ) に設定する
ctx2.moveTo(0, csHeight);
// 上述の開始座標から、キャンバスの左上端から(指定した要素の幅,0)まで直線を引く
ctx2.lineTo(csWidth, 0);
// パスを閉じる（最後の座標から開始座標に向けてラインを引く）
ctx2.closePath();
// 現在のパスを表示する
ctx2.stroke();
};
drawLine();
canvasのまとめ
canvasは座標を指定して、線を引くことができることがお分かりいただけたかと思います。
方法③ SVGを使う
SVGとは
SVGは、以前アニメーション吹き出しをご紹介した際に使った画像ファイルをイメージされる方もいらっしゃると思います。
SVGは、Scalable Vector Graphics の略で、
2DグラフィックスをXMLで記述するための言語であるため、
SVGを使って線を描画させることが可能です。
SVGの基本的な使い方
HTMLでSVGのコードを記載します。
SVGの例
例1
上記のような線を引くためのコードは以下となります。
＜svg height="5" width="300"＞
＜line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" /＞
＜/svg＞
例2
上記のような線を引くためのコードは以下となります。
＜svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 2 2" preserveAspectRatio="none"＞ ＜path fill="#fff" d="M-1-1v4h4v-4z"/＞ ＜path fill="none" stroke="#333333" stroke-width=".03" d="M1-1-2 2M1.01-1l-4 4M3-1l-4 4M2.01 0l-4 4M3 1 1 3"/＞ ＜/svg＞
SVGのまとめ
とても特殊なコードを書きますね。
そんなときは、設定だけでコードを生成してくれるサイトを使いましょう！
方法④ LeaderLineを使う
「リトルシアターユニオン」さんのサイトを作る際に利用したのが、このLeaderLine。
※現在のリトユニさんのサイトでは、線はなくなっております。
LeaderLineとは？
要素間の線を引くための、オープンソース・ソフトウェアです。
LeaderLineの基本的な使い方
上記サイトから、ソースファイルをダウンロードし、
JavaScriptファイルを埋め込み、
必要なコードを書くことで、描画することができます。
LeaderLineの例
例1
上記のような線を引くためのコードは以下となります。
※四角い箱から線が離れてしまっている場合は、
ウィンドウのサイズを変更してみてください。
functions.php
function my_enqueue_scripts() {
// leader-lineのJavaScriptを埋め込みます。
wp_enqueue_script('leader-line', 'https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js');
wp_enqueue_script('offset', 'https://code.jquery.com/jquery-1.12.3.min.js');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
記事編集画面
＜div class="stage" style="width: 400px; height: 100px;"＞ ＜div id="ex1-a" class="ex-box" style="left: 10px; top: 10px;"＞＜/div＞ ＜div id="ex1-b" class="ex-box" style="left: 200px; top: 50px;"＞＜/div＞ ＜/div＞
上記では、stageクラスのdiv要素の中に、
2つのdiv要素を用意しています。
styleで、div要素の位置を指定しています。
javascript
Cocoonであれば、編集画面下部のカスタムjavascriptに以下を書きます。
var line1=new LeaderLine(
// 線を結ぶ2つの要素を取得します。
document.getElementById('ex1-a'),
document.getElementById('ex1-b'),
{
// 線の色は黒を指定
color: '#333',
// 線の太さを指定
size: 2,
// 線の種類は直線を指定
path: "straight",
// 線の終わりは直線のままを指定
endPlug: "behind"
}
);
画面表示をした際、線がずれて見えることがあります。
その場合は、以下をカスタムjavascriptに追記してください。
// 画面のサイズが変更になったときに処理を行う
$(window).resize(function(){
// 100ミリ秒後に、線の位置を再取得
setTimeout(function(){
line1.position();
},100);
});
例2
上記のような線を引くためのコードは以下となります。
記事編集画面
＜div class="stage" style="width: 400px; height: 100px;"＞ ＜div id="ex2-a" class="ex-box" style="left: 10px; top: 10px;"＞＜/div＞ ＜div id="ex2-b" class="ex-box" style="left: 200px; top: 50px;"＞＜/div＞ ＜div id="ex2-c" class="ex-box" style="left: 100px; top: 75px;"＞＜/div＞ ＜/div＞
上記では、stageクラスのdiv要素の中に、
3つのdiv要素を用意しています。
styleで、div要素の位置を指定しています。
javascript
var line2=new LeaderLine(
// 1つ目の線を引く場所を指定
document.getElementById('ex2-a'),
document.getElementById('ex2-b'),
{
// 線の色を指定
color: '#333',
// 線の太さを指定
size: 2,
// 線の形は弓なりを指定
path: "arc",
// 線の始まりは四角を指定
startPlug: "square",
// 線の終わりは的を指定
endPlug: "crosshair",
// 線は点線で、アニメーションを設定
dash: {animation: true}
}
);
var line3=new LeaderLine(
// 2つ目の線を引く場所を指定
document.getElementById('ex2-c'),
document.getElementById('ex2-a'),
{
// 線の色を指定
color: 'rgba(30, 130, 250, 0.5)',
// 線の太さを指定
size: 3,
// 線の形は直角を指定
path: "grid",
// 線の始まりは直線を指定
startPlug: "behind",
// 線の終わりは手を指定
endPlug: "hand",
// 線は点線で、アニメーションを設定
dash: {animation: true},
// 線の影を設定
dropShadow: true,
// 線の終わりはdiv要素の底を指定
endSocket: 'bottom'
}
);
LeaderLineのまとめ
LeaderLineを使うと、2つの要素間の線を引くことができ、
様々な形や、アニメーションなど、バリエーション豊かな線を引くことができることがお分かりいただけたと思います。
まとめ
Webサイトで線を引くのは、簡単ではありませんが、
やり方がわかると、いろんな線を、いろんな方法で引くことができ、
どんな線を引こうか、
どの方法で引こうかと楽しくなるかもしれません✨
いろんな方法を試してみてくださいね！
コメント