テキスト関係で使えるプロパティ(改行表示方法など)【CSS】

カテゴリー:Think    |    タグ:

テキスト関係で使えるプロパティ(改行表示方法など)【CSS】

表示結果をCodepenを使って見せています。
HTML/CSSの文字をクリックするとそれぞれのコードが表示されます。

1. へんなところで改行されないようにする

こういった改行の表示の仕方を指定する場合にはwhite-spaceプロパティを使います。
例えば、タグクラウドなどのように途中で改行されると読みづらくなってしまう時などに使用します。

値としては、white-space: normal;white-space: pre; white-space: nowrap;の3つがあります。
それぞれどのように表示されるのかは以下を参照してください。

See the Pen white-space by mami (@yoshida) on CodePen.

このブログでは、タグクラウドとcodeタグのところで white-space: nowrap;を使用しています。
文言の途中で改行されることなく一文として表示されていると思います。

※ 今回、改行にフォーカスを当てていますが、もう少し厳密に言うと、このプロパティは、ソース中の連続する半角スペース・タブ・改行の表示の仕方を指定するプロパティです。
ちゃんと知りたいよーという方は、white-spaceで検索してみてください。


2. ボックスの大きさよりはみ出る場合の文末の表示を「...」にする

ボックス(要素)の大きさよりもはみ出したくない場合に、overflow: hidden;を使います。これを使うとはみ出した部分は表示させないとなるわけですが、その中に書いてある文章の文末を「....」と表示させる方法です。

説明がうまくできていませんが、下記の結果をみてもらったほうが早いので見てください。使用するプロパティは、text-overflow: ellipsis;です。

See the Pen text-overflow by mami (@yoshida) on CodePen.

3. 文字と文字の間隔をあける

日本語というのは、ひらがな・カタカナ・漢字を使い、ブログともなると英数字も加わってきます。
そのままの表示でも特別何か苦になるというわけでは無いですが、漢字ばかりが続いてしまったりすると窮屈に見えてしまったりすることがあります。

そんな場合に文字と文字の間隔を開けるletter-spacingを使います。
このプロパティを使うことによってブログの文面の印象が少しやわらかくなったようにも感じることができます。

See the Pen letter-spacing by mami (@yoshida) on CodePen.

このブログでもサイドバーのもっと見るというところで使っています。


4. 英語をすべて大文字にする

このブログのメニューのところでこれを使っています。
text-transform:uppercase;というのを使います。

See the Pen text-transform by mami (@yoshida) on CodePen.

5. 文頭に※(米印)が付く注意書きをきれいに表示させる

text-indentというのを使います。
このブログでは使っていませんが、リストや文頭※(米印)で綺麗に見せたいときに。

文章の段落などの一行目のインデント幅を指定するときに使います。負(-)の値も使えるので、これを利用します。

※空想は知識より重要である。知識には限界がある。想像力は世界を包み込む。 「アインシュタイン」

See the Pen bBClf by mami (@yoshida) on CodePen.

いかがでしたでしょうか?
今回ご紹介したものも深くは触れておりませんが、この他にもたくさんテキスト関係のプロパティがあります。
あまり気にならないといえば気にならないのですが、ブログを書いていく上でテキストが見やすいというのは重要な要素のひとつだなと思うので、興味や参考にしていただけると幸いです。

ADVERTISEMENT

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

published:2014/05/16    Written by:
カテゴリー:Think,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

think

ブログを書き始める時に考えるあれこれ。ずっとブログを書いていくために

Ans. 「」 ブログはあなたのいろいろを入れておく器 スケールが大きくなってる感じですが、最近

記事を読む

GAK85_orangeironoyuuhitoshiroikosumosu

ブログ書くことどう思う?

突然ですが、検索語句『ブログ書くことどう思う?』でこのブログにたどり着かれた方がいたようで、その言葉

記事を読む

time

カウントダウンを設置! 残り○○日○○時間○○秒を表示させるjavaScript

先日作成したバナーの上にカウントダウンを設置してみました。 残り○○日○○時間○○秒を表示させ

記事を読む

amekiiroisen1299

ブログをつくるときに気をつけたい「カテゴリー」や「タグ」について考えてみる

これずーーーっといろいろと考えているところであり、試行錯誤しているところでもあります。 「カテゴリ

記事を読む

girl

ブログをいくつか書いていると思うことってあるよね?みんなどうしてるのだろう

つい先日このような記事をみました。 ブログ2個運営で見えた失敗と注意点・そしてさらなる挑戦! |

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年7月
    « 12月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
電子書籍ストア BookLive!
PAGE TOP ↑