2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
できる限り変なタグやclassをつけたくないタイプのコーダー、オガワです。
デザイナーさんから「1行の時は中央揃え、2行以上の時は左揃えにできますか?」なんてことをよく相談されます。
「内容が更新されなければclass振ってできますよ〜」なんて返していたのですが、更新性があるコンテンツでもやりたい!というのが本音です。
できる方法ないかなぁなんて思っていたところ、Xで実はできる!という情報を見かけました!
今回はそのプロパティについて検証したいと思います!
See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.
試したところ、きれいに1行の時は中央揃え、2行になると左揃えになりました!
色々な記述をしていますが、大事なのはこの2つ。
margin-inline: auto;
max-inline-size: max-content;
インライン要素の幅や位置を調整することで、調整が可能でした!
ちょっとした工夫で意外となんとかなるもんですね。
無理やりclassやタグを足さなくても、ちょっとした工夫でいい感じにできる小技は大事ですね…!
まだまだいろんな小技があると思うので、これからも探していきたいと思います!
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design