テキスト関係で使えるプロパティ(改行表示方法など)【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

関連記事

PAK77_ameagarikanaami

キーボードカタカタして書く事だけがブログではない!ビデオブログというかたち

つい最近知りました。ブログと言えばこうして文字にして発信するものだと思ってました。 ブログ(blo

記事を読む

PAK25_tokyobigsitero-tari

ブログを書き始めたばかりのわたしが思うどうでもいいこと

このブログもまだまだ始まったばかりですが、少し思ったことを。 ブログに思うこと いまやたくさんの

記事を読む

PAK42_oisisounamakaron20140304

ブログ書いている人なのでブロガーさんなのだろうけど、どうにもしっくりこないというどうでもいい話

はい。タイトルで全部言い切りました。 ブロガーさんと言われることに違和感を感じる 最近というわけ

記事を読む

time

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

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

記事を読む

door

ふと思い出しては読み返す。そんなブログ記事を昨日また読み返していました。

何度も読み返してしまう。ふと思い出しては読み、あぁそうだな。。と思ってまたそっと閉じる。そしてまた。

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑