テキスト周りで使えるCSSの小技いろいろ
モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。
↑私が10年以上利用している会計ソフト！
テキスト周りで使えるCSSの小技 目次
- テキストを選択する時の色を変更
- 蛍光ペンで線を引いたような効果
- 長いテキストを「…」で省略する
- 番号リストの表現を変更
- リンクの種類でアイコン変える
- 言語によってスタイルを変更
- テキストリンクのエフェクト
- プリント時はURLを表示
- 長いURLを途中で折返す
- 途中で折り返さず、次の行に
- 先頭の文字を大きく
- 先頭を一文字分あける
- グラデーションテキスト
ブラウザーは特記していなければChrome、Safari、Firefox、IE10で動作確認しています。IE8やIE9でも動くかも。
1. テキストを選択する時の色を変更
文章をコピーする時などに目にするテキスト選択色。デフォルトでは薄い青ですね。この色をお好みで変更できます。サイトのテーマ色と合わせてみるのもいいかも。Firefoxには -moz- を加える必要があります。サンプルは以下。テキストを選択してみてください。
See the Pen Text selection colour by Mana (@manabox) on CodePen.
2. 蛍光ペンで線を引いたような効果
ただテキストに背景色をつけるだけなら background で指定できますし、下線を引くなら border-bottom で実装できますが、太めの線をテキストに少し被せて表示するには linear-gradient を使います。数値を変えると線の太さを調整できます。
See the Pen Marker Line by Mana (@manabox) on CodePen.
3. 長いテキストを「…」で省略する
ブログ記事の一覧などで、短いテキストと長いテキストが混在する場合に使える方法。幅はお好みで変更してください。
See the Pen Crop long text by Mana (@manabox) on CodePen.
4. 番号リストの表現を変更
番号だけを表示するなら ol 要素を使えばいいのですが、「第一章、第二章…」や「一時間目、二時間目…」など、数字＋他の単語も一緒に表示したい場合は counter-increment を使います。このプロパティを使えば、指定した要素が登場する度に数字を1つずつ増やしていくことができます。また、リストタグを使わなくても実装できますが、「番号リスト」の役割を持つ ol タグを使うのが無難かと思います。
See the Pen Ordered List Text by Mana (@manabox) on CodePen.
5. リンクの種類でアイコン変える
テキストリンクにリンクの種類によって異なるアイコンを一緒に表示することができます。ユーザビリティの向上にも。
See the Pen Link text with icon by Mana (@manabox) on CodePen.
過去記事「アイコンフォントでリンクタイプ別にアイコンつける方法」ではこれを応用した、アイコンフォントを使った実装方法を紹介しています。色の変更もできて便利。
テキスト周りで使えるCSSの小技 目次へ。
6. 言語によってスタイルを変更
<html lang="">によって設定されている言語（日本語ならja、アメリカ英語ならen-US等）によってスタイルを変更可能！例では日本語なら青で表示。多言語サイトを制作する時、日本語と英語でどうにかして別のフォントを指定したい！と調べて発見した方法です。サンプル画面右上の「Edit on CODEPEN」をクリックし、言語を en-US に変更してみてください。文字がオレンジに変わります。
See the Pen Change colour by language by Mana (@manabox) on CodePen.
7. テキストリンクのエフェクト
transition を使ってリンクにカーソルを合わせた時にふんわりと色を変更することができます。過去記事「コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ」ではカスタマイズしたその他様々なエフェクトを紹介しています。参考にしてみてください！
See the Pen Text Link Transition by Mana (@manabox) on CodePen.
8. プリント時はURLを表示
ページを印刷する機会はあまり多くないかと思いますが、対応させる際に気をつけて欲しいのがリンクテキスト。リンクテキストを印刷してもURLが表示されないので、どこにリンクされているのかがわかりません。そんな時 @media print で印刷用のCSSを用意し、content: " (" attr(href) ")"; でリンクテキストの横にURLを表示させるといいでしょう。また、リンク先が # や、JavaScriptの場合は表示しないようにしています。サンプルページを開いて ⌘ + P （Windowsは Ctrl + P）で印刷プレビュー画面をご覧ください。
See the Pen Show URL for Print by Mana (@manabox) on CodePen.
9. 長いURLを途中で折返す
URLなどの長い英単語が続くとうまく改行せず続けて表示されてしまいます。その問題は word-wrap で解決。
See the Pen word-break by Mana (@manabox) on CodePen.
10. 途中で折り返さず、次の行に
上記例とは逆に、タグクラウドや日付表示など、テキストを途中で切らず次の行に表示させたい場合は white-space: nowrap; が有効。
See the Pen white-space – show text next line by Mana (@manabox) on CodePen.
11. 先頭の文字を大きく
洋書等で時々見かけるこの表現。p:first-child:first-letter と書くことで一番始めのパラグラフの一番始めの文字だけに指定することができます。
See the Pen Drop caps by Mana (@manabox) on CodePen.
12. 先頭を一文字分あける
※を使った注意事項などに使える小技。最初の行は通常に、次の行からは一文字分開けて表示します。
See the Pen 1 letter space by Mana (@manabox) on CodePen.
13. グラデーションテキスト
背景色にグラデーションを指定しておき、background-clip: text; でテキストを繰り抜きます。「素敵な３つのWebサイトの使用技術を分析& 実践してみた」では背景色の代わりに背景画像を使用した例を記載。様々な表現ができるようになります。ただし対応ブラウザーは現在Safari、Chromeのみ。
See the Pen Gradation Text by Mana (@manabox) on CodePen.
背景画像を使用した例
テキスト周りで使えるCSSの小技 目次へ。
その他よく使うスタイルやオススメのテクニックがあれば教えてください！
