🍆

文字数未定の1行目の末尾に2行目の右端を揃えて、その要素を左に寄せる

2022/08/18に公開

文章では自分でも何言ってるか分からないので上の例をご覧ください。
1行目は文字数が増減する可能性があります。その1行目の右端に2行目のテキストを揃えるというCSSテクニックです。(当初ボケててめっちゃ複雑に書いてました。超シンプルにできるのにドヤってすみません。今後もボケると思うので自分のために残させてください。)

なお、クソほど見にくいのでやめました。

<div className={`flex`}>
  <div className={`text-right`}>
    <h2>愛知県の市区町村</h2>
    <p>エリア数:53</p>
  </div>
</div>

※余計な記述は全て取り除きました。

横幅を絞るために1行目の <div className={flex}> を適用することでまとまって左に寄ります。

1行目のflexは table でも同じ効果を得られますが、GooglebotさんがCSSも解析して "こいつはテーブルのくせにデータ全然足んねぇじゃん!" ってなるといけない気がするのでflexであくまでレイアウト調整ですよっていうアピールをしてます。

Discussion

ログインするとコメントできます