[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js

サイト構築 -JavaScript

Pocket

Lining.jsのデモ

デモでは英語の文章、リスト、漢字を使った縦書きなどがあります。

demo 1

demo 1は、英文の1, 2行目だけカラーを変更しています。

demo 1：日本語に変更

demo 1を日本語に変更してみました。

demo 2

行指定は一つだけでなく、複数それぞれ別のスタイルを適用することも可能です。
最後の行、最後から2, 3番目の行にスタイルを適用。

demo 3

リストにも使用できます。

demo 4

縦書きの行数にも対応。

demo 5

一行ごとにさまざまなアニメーションで表示します。
「rolling」のエフェクトかっこいいです。

Lining.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="build/lining.min.js"></script>
</head>

デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。

<head>
  ...
  <script src="build/lining.min.js"></script>
  <script src="build/lining.effect.min.js"></script>
</head>

Step 2: HTML

適用する要素に「data-lining」を加えます。

<p class="poem" data-lining>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、</p>

エフェクトを使用する時は「data-effect」を加えます。

<p class="poem" data-lining data-lining data-effect="rolling">洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、</p>

Step 3: CSS

Step 1, 2で、下記のスタイルシートのセレクタが利用できるようになります。

<style>
.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>

あとは、各セレクタに好きなスタイルを適用するだけでOK。