こんにちは！ワタナベです。
そろそろライブに行きたくなってきました。近々行く予定なので気をつけながら楽しみたいと思います(^O^)
今回はテキスト周りの知っておくと便利なcss備忘録です！
よく使う、使えそうなのをまとめてみました。
両端揃え
text-align: justify;
text-justify: inter-ideograph; /* IE対応 */
text-justify: inter-character; /* Firefox対応 */
恥ずかしながら最近までcssでできないと思ってました。
そこまで使用する機会はありませんが、どうしてもきれいにそろえたいときに知っていると便利です。
サンプル
css適用前
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
css適用後
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
表示範囲に合わせて改行
word-break:break-all;
たまに英文や数字を使用したときに、表示範囲から改行されずにはみ出してしまう場合があります。
そういう時に使うと言語関係なく問答無用で改行してくれます。
単語の途中でも改行してしまうので嫌な人は別の調整方法を考えましょう。
サンプル
css適用前
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
css適用後
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
英単語
動的に入力する部分とかに使用すると便利かも？
↓のサンプル検証ツールを使うとちゃんと元のテキストが違うので確認してみてください。
全て大文字
text-transform: uppercase;
design
全て小文字
text-transform: lowercase;
DESIGN
単語の先頭文字を大文字
text-transform: capitalize;
design
2行目以降1文字下げる
※←を使ったときに便利なやつです！
padding-left:1em;
text-indent:-1em;
サンプル
※吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
以上です！
そのほかに便利なものがあればこっそり教えてください(^^♪
それではまた次回。
ご閲覧ありがとうございました！
