[JS]HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS

h1, p などで実装したテキスト箇所にspanを自動で挿入できるスクリプトを紹介します。

スクリプトの適用イメージ

Lettering.JS

各spanにカラー指定を行うと、下記のようなこともHTMLを汚さずに可能です。

デモのキャプチャ

追加したspanに個別にカラー指定したキャプチャ

Lettring.JSの実装

実装は簡単です。スクリプトを外部ファイルとして指定し、下記のように記述します。

HTML

JavaScript

spanを挿入する単位は一文字ずつ、単語単位(英語のみ)、一行単位(br)に対応しています。
また、スクリプトのデモは、ダウンロードファイルに付属しています。
Lettering.jsのダウンロードページ

top of page

©2017 coliss