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

first-line疑似要素を使用すると、その要素の最初の行だけスタイルを適用できますが、それを拡張するかのようにさまざまな行の指定ができるスクリプトを紹介します。

外部スクリプトを加えるだけで、先頭行、最終行、n番目の行、奇数・偶数行などが利用できます。

サイトのキャプチャ

Lining.js
Lining.js -GitHub

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

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

sponsors

top of page

©2018 coliss