文字列をHTMLタグに分割

文字列をHTMLタグに分割

下の文字分割の部分をJavaScriptのDOM操作によって行ってみる

上を下のように変更まだ文字分割されていないのでアニメーションしない 

文字列が複数になった場合を考えてみる　PLAY ANIMATIONとしてみる

PLAYとANIMATIONの間の半角スペースが生まれていない

これはdisplayのタイプがinline-blockとなっているため

inline-blockは，中になにか文字列や画像などがなにか存在しない限りは高さと横幅がゼロになる。

文字列に半角スペースが渡ってきたときにreplaceメソッドで というHTMLの特殊文字に置換してやる事が必要

 は厳密にいえば半角スペースではないが，便宜的に半角スペースとして用いることが多い。

reduceを使ってfor文を書き換える
reduceを使うときはsplitを使って配列になおす必要がある