コーディング

【備忘録】覚えておくと便利かもしれないテキスト周りのCSS

  • このエントリーをはてなブックマークに追加
【備忘録】覚えておくと便利かもしれないテキスト周りのCSS

こんにちは!ワタナベです。

そろそろライブに行きたくなってきました。近々行く予定なので気をつけながら楽しみたいと思います(^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;

サンプル

※吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

 

以上です!
そのほかに便利なものがあればこっそり教えてください(^^♪

 

それではまた次回。

ご閲覧ありがとうございました!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ