2019年04月28日(日)
FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result
See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito
(@kachibito) on CodePen.
text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね
他ライブラリに依存せず、バニラなコードとなっています
JavaScript
var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = line.innerHTML.spl...
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
UIデザインは色で勝負!Webサイトやアプリの配色で押さえておくべき7つのポイント
NEXT ›
【SNSマーケティング】ソーシャルメディアを利用して自社のブランド認知度を高める12の方法
関連記事
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる』についてまとめています。
この記事は特にレスポンシブ・javascript・jQuery・フォント・LINE・Webサービスについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。