更新日2024年11月9日

テキスト周りで使えるCSSの小技いろいろ

モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。

テキスト周りで使える CSS の小技　目次

ブラウザーは特記していなければ Chrome、Safari、Firefox、IE10 で動作確認しています。IE8 や IE9 でも動くかも。

1. テキストを選択する時の色を変更

文章をコピーする時などに目にするテキスト選択色。デフォルトでは薄い青ですね。この色をお好みで変更できます。サイトのテーマ色と合わせてみるのもいいかも。Firefox には -moz- を加える必要があります。サンプルは以下。テキストを選択してみてください。

テキスト周りで使える CSS の小技目次へ。

2. 蛍光ペンで線を引いたような効果

ただテキストに背景色をつけるだけなら background で指定できますし、下線を引くなら border-bottom で実装できますが、太めの線をテキストに少し被せて表示するには linear-gradient を使います。数値を変えると線の太さを調整できます。

テキスト周りで使える CSS の小技目次へ。

3. 長いテキストを「…」で省略する

ブログ記事の一覧などで、短いテキストと長いテキストが混在する場合に使える方法。幅はお好みで変更してください。

テキスト周りで使える CSS の小技目次へ。

4. 番号リストの表現を変更

番号だけを表示するなら ol 要素を使えばいいのですが、「第一章、第二章…」や「一時間目、二時間目…」など、数字＋他の単語も一緒に表示したい場合は counter-increment を使います。このプロパティを使えば、指定した要素が登場する度に数字を 1 つずつ増やしていくことができます。また、リストタグを使わなくても実装できますが、「番号リスト」の役割を持つ ol タグを使うのが無難かと思います。

テキスト周りで使える CSS の小技目次へ。

5. リンクの種類でアイコン変える

テキストリンクにリンクの種類によって異なるアイコンを一緒に表示することができます。ユーザビリティの向上にも。

過去記事「アイコンフォントでリンクタイプ別にアイコンつける方法」ではこれを応用した、アイコンフォントを使った実装方法を紹介しています。色の変更もできて便利。

テキスト周りで使える CSS の小技目次へ。

6. 言語によってスタイルを変更

<html lang="">によって設定されている言語（日本語ならja、アメリカ英語ならen-US等）によってスタイルを変更可能！例では日本語なら青で表示。多言語サイトを制作する時、日本語と英語でどうにかして別のフォントを指定したい！と調べて発見した方法です。サンプル画面右上の「Edit on CODEPEN」をクリックし、言語を en-US に変更してみてください。文字がオレンジに変わります。

テキスト周りで使える CSS の小技目次へ。

7. テキストリンクのエフェクト

transition を使ってリンクにカーソルを合わせた時にふんわりと色を変更することができます。過去記事「コピペでできる！CSS3 の素敵効果でテキストリンクを装飾する小技あれこれ」ではカスタマイズしたその他様々なエフェクトを紹介しています。参考にしてみてください！

テキスト周りで使える CSS の小技目次へ。

8. プリント時は URL を表示

ページを印刷する機会はあまり多くないかと思いますが、対応させる際に気をつけて欲しいのがリンクテキスト。リンクテキストを印刷しても URL が表示されないので、どこにリンクされているのかがわかりません。そんな時 @media print で印刷用の CSS を用意し、content: " (" attr(href) ")"; でリンクテキストの横に URL を表示させるといいでしょう。また、リンク先が # や、JavaScript の場合は表示しないようにしています。

テキスト周りで使える CSS の小技目次へ。