[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
Post on:2014年11月25日
sponsors
first-line疑似要素を使用すると、その要素の最初の行だけスタイルを適用できますが、それを拡張するかのようにさまざまな行の指定ができるスクリプトを紹介します。
外部スクリプトを加えるだけで、先頭行、最終行、n番目の行、奇数・偶数行などが利用できます。
Lining.jsのデモ
デモでは英語の文章、リスト、漢字を使った縦書きなどがあります。
demo 1は、英文の1, 2行目だけカラーを変更しています。
demo 1：日本語に変更
demo 1を日本語に変更してみました。
行指定は一つだけでなく、複数それぞれ別のスタイルを適用することも可能です。
最後の行、最後から2, 3番目の行にスタイルを適用。
リストにも使用できます。
縦書きの行数にも対応。
一行ごとにさまざまなアニメーションで表示します。
「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
