画像は使わない！文字を装飾するCSS／jsまとめ
画像を使うと変更がめんどう。出来ることならテキストで済ませたい。Webデザインはカーニングなどによる可読性の調整は難しいですが、CSSやjsを用いた簡単な指定で、文章の読みやすくしたり、注意をひくことが可能です。今回はCSSやjQueryで調整できるテキストまわりをまとめました。
PR
Sponsored Link
もくじ
js／プラグインなど
- １．文字詰め
- ２．テキストの幅にあわせてテキストのサイズを自動調整
- ３．縦書き
- ４．均等割り付け
- ５．画面幅に応じて可変
- ６．一文字ずつ、文字ごとに色を変える
- ７．回転
- ８．文字の色を反転
- ９．弧を描くように文字列を配置
CSS
CSS3ジェネレーター
js／プラグインなど
サイト組版の考え方としてぱっと思いつくのは、若者向けなら、文字サイズ・字間・行間は小さめで余白も少なく、書体はゴシック系。年齢層が上がれば大きめ、書体は明朝体に設定。高級感や和テイストを出したいときは、明朝系と縦組みなど。以下、画像を使わないjQuery系の文字詰め、自動サイズ調整、縦書など。
１．文字詰め
テキストに字詰め(文字の空間調整)を行ってくれるスクリプト「FLAutoKerning.js」。文字詰めを自動でやってくれます。
２．テキストの幅にあわせてテキストのサイズを自動調整
文字幅にあわせてテキストサイズを自動調整するjQueryプラグイン。横幅に合わせてテキストのサイズが変わり、余白がないようにピッタリとおさまります。
３．縦書き
縦書きを可能にするjavascriptライブラリ「竹取JS」。見た目が結構綺麗で半角数字２つまでなら横並びにできるのが凄いです。ダブルクリックで縦横変わります。
４．均等割り付け
やはり全半角混じりだとChromeでの表示がうまくいかないようですが、均等割り付け(指定した文字数分の幅に均等に文字を配置)を行うjQueryスクリプト。
５．画面幅に応じて可変
フォントサイズ、行の高さをベースに幅を変更するjs。フォントサイズやline-heightを自動で調整してくれます。
６．一文字ずつ、文字ごとに色を変える
テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変えるspanを使う方法。
７．回転
文字を回転させたり、ずらしたり自由度の高いjQueryプラグイン「Super Easy Text Rotator」。
８．文字の色を反転
背景画像に被っている文字色を可視性の高い色に変更してくれるJavaScriptライブラリ。画像の色に対して見やすい色に反転します。
９．弧を描くように文字列を配置
CSS3とjQueryで弧を描くように文字列を配置。
CSS
１０．カーニング
漢字・平仮名・カタカナが混在すると文字間の空白がバラバラになってしまいます。こちらはカーニングと合字をいい感じに調整してくれるプロパティ(text-rendering: optimizeLegibility)。
１１．3D風
CSSで3Dに見せる方法。そのままコピペ。
１２．テキスト選択時
テキスト選択時の色を変更する方法。
１３．ヴィンテージ風、ストローク状、エンボス加工
ヴィンテージ風、ストローク状、エンボス加工風にスタイルしている例。
１４．エフェクト
マウスホバーにより、文字がパカっと開いたかのように見せるCSS。飛び出す絵本ならぬ、文字。
１５．回転と動き
クルクル回転しながら動かすCSS。画像じゃなくて、ちゃんとテキストが動いています。
１６．ドロップシャドウ、レタープレス、エンボス、光彩
text-shadowを使ったサンプルまとめ。ドロップシャドウ、レタープレス、エンボス、光彩など盛りだくさん。
CSS3ジェネレーター
１７．CSS3ののジェネレータ
CSS3ののジェネレータ。スライダーで角丸・シャドウ・回転・文字装飾などを調整出来る。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment