画像は使わない！文字を装飾するCSS／jsまとめ

• 作成：2013/11/5
• 更新：2014/10/24
• Webデザイン >

画像を使うと変更がめんどう。出来ることならテキストで済ませたい。Webデザインはカーニングなどによる可読性の調整は難しいですが、CSSやjsを用いた簡単な指定で、文章の読みやすくしたり、注意をひくことが可能です。今回はCSSやjQueryで調整できるテキストまわりをまとめました。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

もくじ

js／プラグインなど

• １．文字詰め
• ２．テキストの幅にあわせてテキストのサイズを自動調整
• ３．縦書き
• ４．均等割り付け
• ５．画面幅に応じて可変
• ６．一文字ずつ、文字ごとに色を変える
• ７．回転
• ８．文字の色を反転
• ９．弧を描くように文字列を配置

CSS

• １０．カーニング
• １１．3D風
• １２．テキスト選択時
• １３．ヴィンテージ風、ストローク状、エンボス加工
• １４．エフェクト
• １５．回転と動き
• １６．ドロップシャドウ、レタープレス、エンボス、光彩

CSS3ジェネレーター

• １７．CSS3ののジェネレータ

js／プラグインなど

サイト組版の考え方としてぱっと思いつくのは、若者向けなら、文字サイズ・字間・行間は小さめで余白も少なく、書体はゴシック系。年齢層が上がれば大きめ、書体は明朝体に設定。高級感や和テイストを出したいときは、明朝系と縦組みなど。以下、画像を使わないjQuery系の文字詰め、自動サイズ調整、縦書など。

１．文字詰め

テキストに字詰め(文字の空間調整)を行ってくれるスクリプト「FLAutoKerning.js」。文字詰めを自動でやってくれます。

• HTMLで文字詰めするタイポグラフィー用JS | fladdict

２．テキストの幅にあわせてテキストのサイズを自動調整

文字幅にあわせてテキストサイズを自動調整するjQueryプラグイン。横幅に合わせてテキストのサイズが変わり、余白がないようにピッタリとおさまります。

• テキストのサイズを自動調整して幅一杯に広げる - かちびと.net

３．縦書き

縦書きを可能にするjavascriptライブラリ「竹取JS」。見た目が結構綺麗で半角数字２つまでなら横並びにできるのが凄いです。ダブルクリックで縦横変わります。

• 竹取 JS
• 日本の文章はやはり縦書きが読みやすい「tategumi.js」

４．均等割り付け

やはり全半角混じりだとChromeでの表示がうまくいかないようですが、均等割り付け(指定した文字数分の幅に均等に文字を配置)を行うjQueryスクリプト。

• 均等割り付け超軽量jQueryスクリプト配布場所 | web屋 内藤

５．画面幅に応じて可変

フォントサイズ、行の高さをベースに幅を変更するjs。フォントサイズやline-heightを自動で調整してくれます。

• 要素サイズに応じてフォントサイズを自動調節「FlowType.JS」:phpspot開発日誌

６．一文字ずつ、文字ごとに色を変える

テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変えるspanを使う方法。

• jQuery テキストをタイピング風に一文字ずつ表示したり… | Stronghold

７．回転

文字を回転させたり、ずらしたり自由度の高いjQueryプラグイン「Super Easy Text Rotator」。

• テキストの一部を回転させたりしてクールに切替えられる…:phpspot開発日誌

８．文字の色を反転

背景画像に被っている文字色を可視性の高い色に変更してくれるJavaScriptライブラリ。画像の色に対して見やすい色に反転します。

• 背景画像の明暗に合わせて文字色を自動変更…- あのねノート。

９．弧を描くように文字列を配置

CSS3とjQueryで弧を描くように文字列を配置。

• Arctext.js - Curving Text with CSS3 and jQuery | Codrops

CSS

１０．カーニング

漢字・平仮名・カタカナが混在すると文字間の空白がバラバラになってしまいます。こちらはカーニングと合字をいい感じに調整してくれるプロパティ(text-rendering: optimizeLegibility)。

• text-rendering: optimizeLegibility – terkel.jp

１１．3D風

CSSで3Dに見せる方法。そのままコピペ。

• 3D Text

１２．テキスト選択時

テキスト選択時の色を変更する方法。

• CSS3 Tutorial: How To Change Default Text Selection Colour | Design Juices

１３．ヴィンテージ風、ストローク状、エンボス加工

ヴィンテージ風、ストローク状、エンボス加工風にスタイルしている例。

• 日本語にもマッチする、見出しの文字をかっこよくする| コリス

１４．エフェクト

マウスホバーにより、文字がパカっと開いたかのように見せるCSS。飛び出す絵本ならぬ、文字。

• 文字にちょっとかわいいエフェクトを加えるスタイルシート| コリス
• テキスト周りをかっこよくするCSS3のエフェクト集 | コリス

１５．回転と動き

クルクル回転しながら動かすCSS。画像じゃなくて、ちゃんとテキストが動いています。

• CSS3 でふわふわナビゲーション - えっちなのはいけないと思います

１６．ドロップシャドウ、レタープレス、エンボス、光彩

text-shadowを使ったサンプルまとめ。ドロップシャドウ、レタープレス、エンボス、光彩など盛りだくさん。

• css3のtext-shadowによるテキスト装飾のサンプル集 - かちびと.net

CSS3ジェネレーター

１７．CSS3ののジェネレータ

CSS3ののジェネレータ。スライダーで角丸・シャドウ・回転・文字装飾などを調整出来る。

• CSS3 Playground by Mike Plate
• CSS3プロパティジェネレーター | CSS-EBLOG
• CSS Button Generator