図で理解するFlexbox

2021/08/15 267 users Flexbox align レイアウト 毎回 要素

Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央... 続きを読む

jQueryスニペット：FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる | かちびと.net

2019/04/28 25 users jQueryスニペット Flex Flexbox span

Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています ... 続きを読む

均等割り付けで美しい表デザインを実現するjQueryを作ってみました。 | 株式会社LIG

2013/09/13 90 users jQuery 株式会社LIG text-align 両端 本日

ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ　　です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上... 続きを読む

webkit系ブラウザ（Chrome/Safari）で両端揃えはできないの？jQueryで検証 | 株式会社LIG

2013/07/23 81 users jQuery 両端 Safari Webkit系ブラウザ 検証

p { width: 455px; text-align: justify; } Σ(ﾟдﾟlll)ガーン。 ガッタガタです。 同じChromeでも文字種によって揃い方が違う webkit系でも、text-align: justify;は効いているのです。下をご覧ください。 というわけで問題点は、 全角・半角が混じった際、webkit系のChromeやSafariはの両端揃えをしてくれない！ とい... 続きを読む