スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。
ここではデモ等は用意していないので、実際の動きを見たい場合は以下デモページにまとめているのでこちらをご覧ください。
※念のため記載しておくと、デモページはスマートフォンなどではなくPCでの閲覧推奨（推奨というかスマートフォンではまともにページを確認できないです…）で、その際にChromeで閲覧してもらったほうが全ての動きを確認することができると思います。
※以下では具体的にどのブラウザで使用できるかなどの情報は省略していますので、各自で環境を作るなどして自身で確認してもらうか、「Can I use」などを利用して各種プロパティのブラウザサポートを調べてください。
テキスト周りのスタイリングに使えるCSSプロパティやスニペット 目次
1. アンチエイリアスを設定する
font-smoothingというプロパティを使うことでアンチエイリアスのかかり方を設定することができ、テキストをより綺麗に表示させることができます。
最近だとリセットスタイルなどと一緒にベースのスタイルとして指定されていることも多く、有名なサイトだとAppleやMicrosoftでも記述されていますし、他にもWordPressインストール時に同梱されている「Twenty Fifteen」などのテーマ内にあるCSSにも記述されています。
使用する際はWebkit系とFirefoxとで下記のように記述し、下記では要素をelementとしていますが、よく見かけるのはbodyに対して記述されていることが多いです。
CSS
element {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}2. テキスト選択時のハイライトカラーを変更する
ブラウザでテキストをコピーなどをしようとして選択した際、デフォルトだとほとんどのブラウザが青背景の白文字という見た目でハイライト表示されますが、それらを任意のカラーにする方法です。
実装には::selectionを使用し、Firefoxにも対応させるために下記のようにして記述します。
CSS
::selection {
background: #000;
color: #fff;
}
::-moz-selection {
background: #000;
color: #fff;
}::-moz-selectionというのがFirefoxでもスタイルを適用させるために必要な記述になり、上記を記述後にテキストを選択してみると選択時のハイライトカラーが黒背景に白文字に変更されているのを確認できます。
また、今回のサンプルでは記述していませんが、上記に加えてtext-shadowを使ったりするのも良いと思います。
3. テキスト選択を無効にする
コピー対策として導入しようというのも見かけますが実際のところほぼ効果はないし、現時点ではいずれのブラウザでもプレフィックス付きで記述する必要があったりするものではあるのですが、何らの理由でテキストが選択されるのを向こうにしたい場合は、下記のようにuser-selectを使うことで実装することができます。
CSS
element {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}4. 文字間隔を調整する
テキストを表示させる際、文字と文字の間隔が詰まり過ぎてるとか逆に広がりすぎていると感じて調整したい場合はletter-spacingというプロパティを利用することで、文字間隔を任意で調整することができます。
使用する際は下記のように記述し、ここでは単位を「em」で指定していますが、「px」や「%」といった単位でも指定することができます。
CSS
element {
letter-spacing: .5em;
}上で紹介した方法で簡単に文字間隔を調整することができるのですが、間隔を広げようとした際に画像のようにletter-spacingを指定している最後の文字の後ろに余白ができてしまいます。
間隔を広げているので当たり前ではあるのですが、これをどうにかしたいという時はletter-spacingに加えて下記のようにネガティブマージンを指定してやることでこの余白を消すことができます。
CSS
element {
margin-right: -1em;
letter-spacing: 1em;
}ほとんどの場合はこのようにletter-spacingで指定した数値をマイナスにしたものをmarginに指定することで余白は消すことができると思います。
ただ、この方法はネガティブマージンを使用している為にletter-spacingが指定してある部分に背景色やボーダーなどを指定している場合はその後のテキストや領域にそれらのスタイルが表示されてしまうので注意が必要です。
どうしても文字間隔を調整して且つ後ろのテキストに影響が出ないようにしたい場合は、少し微妙な方法ですがネガティブマージンは使用せずに最後の文字をletter-spacingを指定する領域から外してやれば意図する見栄えにできると思います。
5. 先頭の文字を字下げする
この画像のように、サイトによっては文章の先頭を必ず字下げする（先頭に空白を空ける）形をとることがあります。
その際たまに全角スペースを入力しているような方法をとっているサイトを見かけますが、下記のようにCSSでその見た目を実装できます。
CSS
element {
text-indent: 1em;
}6. 2行目以降を字下げする
注釈や注意書きを表すような文章を表示する際に使える方法で、例えばこの画像の場合だと2行目以降は「※」記号の下には文章が表示されないようにできます。
先ほどと同じくtext-indentを利用して、CSSで下記のように記述すればこの見た目を実装できます。
CSS
element {
margin-left: 1em;
text-indent: -1em;
}7. 先頭の文字を○○する
先頭の一文字だけ大きくしたいとか背景色付けて目立たせたいという時には、:first-letterという擬似要素を使用して実装できます。
ここでは単純にフォントサイズを大きくしたもの（画像左）と、背景色と文字色を変更して更に2文字目以降のテキストが回り込むようなスタイルを指定したもの（画像右）とで2種類の実装方法を紹介します。
先頭のフォントサイズを大きくする
CSS
element:first-letter {
font-size: 42px;
line-height: 1;
}背景色をつけたり、2文字目以降のテキストが回り込むようなスタイルを指定
CSS
element:first-letter {
float: left;
margin-right: .2em;
padding: .2em;
background-color: #3498db;
color: #fff;
font-size: 36px;
line-height: 1;
}8. 最初の行だけ○○する
上で最初の文字を装飾したりする方法を書きましたが、文字ではなく最初の行で何かスタイルをあてたいという時は:first-lineという擬似要素を使用して実装できます。
例えばCSSで下記のように記述すると、最初の1行分のみカラー変更と太字指定が適用されます。
CSS
element:first-line {
color: #3498db;
font-weight: bold;
}9. 文字を折り返させない（改行させない）
通常はテキストを表示させようとした時に幅がいっぱいになると折り返されたり改行されて次の行にいくと思いますが、これをさせたくないという場合は下記のようなプロパティを利用することで意図的に折り返しや改行がされないようにできます。
具体的な使用例としては、テーブルの見出しが変なところで改行されてしまうのを防ぐために利用する機会が個人的に多く、あとは日付やタグクラウドといった改行されると読みづらいと感じる部分などにはよく使ったりします。
CSS
element {
white-space: nowrap;
}かなり手抜きな感じですが一応簡単に動きを確認できるデモを用意していて、それぞれ基本的なスタイルは一緒のものを指定している2つのテーブルがあり、いずれもthとtdに関しては幅指定をしていません。
なので、サンプル1のテーブルはそれぞれの幅を均等にしようとして真ん中の見出しは改行されていますが、サンプル2のテーブルは見出しにwhite-space: nowrap;を指定しているために改行されずに表示されています。
今回のデモの場合は普通に幅指定をしてやったりpaddingを調整したりすればどうにかなるようなものではありますが、覚えておくと結構使える場面が多いので便利だと思います。
10. 文字を折り返させる（改行させる）
こちらは先ほどとは逆に意図的に折り返させたいという時に便利なものです。
例えば、長いURLや英単語などを表示する際に思った通りに改行されず、最悪の場合親要素の幅を突き抜けて表示されてしまうなんてことがあります。
それを回避したい場合は、下記のようなプロパティを利用します。
CSS
element {
word-wrap: break-word;
}デモにあるサンプル1とサンプル2はそれぞれ基本的なスタイルは一緒で親要素に幅も指定されているのですが、サンプル1はテキストが領域（グレーに塗られた部分）からはみ出てしまっています。
これをword-wrap: break-word;を指定することで、サンプル2のように折り返して表示させることができます。
11. テキストを両端揃え
テキストを両端揃えで綺麗に表示させたいという時に便利なプロパティです。
以前は一部ブラウザで特に全角・半角が混合しているテキストの場合に揃ってくれないというのがあって、どうしても実装する必要がある場合はJavaScriptなどを使っていたのですが、最近ではひと通りのブラウザで問題なく表示されているような感じがします。（ちゃんと検証したわけではありませんが…）
CSS
element {
text-align: justify;
text-justify: inter-ideograph;
}12. テキストを省略する
スマホサイトのように表示領域が狭いデバイス向けのサイトやブログなどのように文字の増減があるが表示が崩れてほしくない箇所などに使える方法です。
親や自身に幅指定がされている要素へ下記のように記述すれば、その幅以上のテキストが入ってきた場合も省略されて「…」と表示されます。
CSS
element {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}ただし、この方法は1行表示でしか対応ができないので、例えば”2行以上”でとか”○文字以上で”のような形にしたい時はJavaScriptやPHPなどを使ってやるのが無難だと思います。
13. 長体や平体で表示する
実際に使うとなると余白や幅などいろいろと考慮する必要があるのですが、下記のようにtransformを使うことでテキストを長体や平体のような見栄えで表示させることができます。
CSS
/* 長体 */
element {
-webkit-transform: scaleX(.8);
transform: scaleX(.8);
-webkit-transform-origin: left top;
transform-origin: left top;
}
/* 平体 */
element {
-webkit-transform: scaleY(.8);
transform: scaleY(.8);
-webkit-transform-origin: left top;
transform-origin: left top;
}14. テキストに縁取りをつける
上の画像のようにテキストにアウトラインとも呼ばれる縁取りをつける方法ですが、ブラウザによっては表示させられないものもあるので2通りの方法をご紹介します。
まず、ChromeなどのWebkit系であれば-webkit-text-fill-colorと-webkit-text-strokeを利用して、下記のような記述で画像のような見栄えを実装できます。
CSS
element {
-webkit-text-fill-color: #fff;
-webkit-text-stroke: 1px #000;
}先述したようにChromeなどでは上記の記述でテキストが縁取りされた見栄えを確認できますが、FirefoxやIE 11などでは通常のテキストのように表示されます。
その他のブラウザでも同じような見栄えを実装したいという時は、下記のようにtext-shadowを使えば実装できます。
CSS
element {
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}また、text-shadowの記述を以下のように変更することで、画像の一番下にある文字のように縁取りに＋α加えたような見栄えにすることも可能です。
CSS
element {
color: #fff;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}15. ブラーテキストを表示する
このまま利用した場合に一部のブラウザでは何も表示されてない感じになってしまうので注意が必要だったり、場合によっては代替案なども考える必要が出てきますが、color: transparent;とtext-shadowを利用して、ぼかしがかかっているブラー効果がついたテキストを実装する方法です。
ちなみに、transitionと:hoverを使えば、テキストにホバーすると文字がふわっとハッキリ読めるものに切り替わるといった動きなども実装できます。
CSS
element {
color: transparent;
text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}16. テキストにグラデーションをかける
こちらもまだまだ全てのブラウザで使えるというものではないのですが、画像を使わずにテキストにグラデーションをかけて表示させる方法です。-webkit-background-clipと-webkit-text-fill-colorを利用し、グラデーションは一部ブラウザでだけ反映されてほしいので-webkit-linear-gradientを利用します。
CSS
element {
background: -webkit-linear-gradient(#3498db 0%, #9b59b6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}17. 強調文字をより目立たせる
文字を強調させたい時にstrongなどを用いてCSSではfont-weight: bold;で太字指定したりしますが、それをより目立たせたい時などに使える方法です。
下記のようにlinear-gradientを利用してテキストにマーカーを引いたような見栄えを実装できます。
CSS
strong {
background: linear-gradient(transparent 60%, #3498db 60%);
}18. 英テキストの大文字・小文字・スモールキャップス表示を指定する
text-transformを使うことでHTML側では小文字で指定されている英テキストを大文字にしたり、逆に大文字になっているものを小文字にしたりといったことが可能です。
もちろんCSSに頼らずしっかり入力するのが一番なのですが、例えば「見出しで英文を使用する際は大文字を使用する」というルールがサイト内であった時、うっかり小文字で入力してしまった場合にもこれを使うことで大文字でちゃんと表示されたり、他にも単語の先頭を大文字で表示させることもできます。
実装にはそれぞれ下記のように記述します。
CSS
/* uppercase 大文字表示 */
element {
text-transform: uppercase;
}
/* lowercase 小文字表示 */
element {
text-transform: lowercase;
}
/* capitalize 単語の先頭を大文字に */
element {
text-transform: capitalize;
}また、font-variantを使うことで小文字をそのまま表示するのではなく、大文字を小文字のサイズにして表示させるスモールキャップスの見栄えを実装できます。
スモールキャップスの実装には下記のように記述します。
CSS
element {
font-variant: small-caps;
}19. 段組表示を実装する
これまで段組表示を実装したい場合はfloatなどを利用してそれっぽい見た目にすることが多かったと思いますが、column-countを使うことで簡単に段組表示を実装できるようになり、テキストも流し込まれたような良い感じの見栄えにしてくれます。
下記は3カラムを実装する場合の記述方法となり、プレフィックスを記述する必要はありますが見ての通りこれだけで段組表示を実装することができます。
CSS
element {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}column-gapはカラム感の余白を指定している記述となりますので、単純に段組表示を実装したいだけであればcolumn-countのみで実装できます。
また、ここでは割愛しますがcolumn-gap以外にもカラムの横幅指定や線を引くプロパティも用意されています。
20. テキストを縦書きにする
writing-modeを使うことでテキストの縦書きを実装することが可能で、例えばこの画像のように某アニメのタイトル風の見出しなんかも再現することができますね。
CSS
element {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}