2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
レスポンシブで変な改行が入ると全部切っちゃうタイプのコーダー、オガワです。
改行の調整を行う時、brにPC用、TB用、SP用…とclassを振ることありますよね。
個人的にはあれをするのがすごく苦手で、入れるぐらいなら切ってしまえ!となりがちでした…笑
Xをボケーっと見ていたところ、最近のCSSではもうそんなことをしなくて良くなったらしいです!
今回はその方法について検証してみたいと思います!
▽参考にしたポストはこちら
目次
改行指定をするCSSプロパティの「word-break
」の値を「auto-phrase
」にすることで文節で切ってくれるらしく…
実際に検証してみました!
こちらは弊社のブログ一覧ページ。
記事のタイトル部分に記述を追記してみたところ…
かなり正確な日本語の文節で改行されていますね!
これはbr
地獄から解放される予感がします!
最初、codepenで検証をしようとしたのですが全く効かず…。
SNSでの話題は嘘だったのか!?と思い調べたところ、html
タグにlang
属性をきちんと指定しておく必要があるそうです。
(日本語であればlang="ja"
を指定する必要があります)
▽参考サイト
日本語はかなり難しい言語だと思っているのですが、ここまで正確に改行されるのはすごいなと感動してました!lang
属性で言語の指定さえしっかりとしてあれば多言語をしているときに自分がいまいちわからない言語でも上手い感じに改行してもらえそうなので、活用していきたいですね!
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design