calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Character_css_top

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

js/プラグインなど

CSS

CSS3ジェネレーター

js/プラグインなど

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

1.文字詰め

fillcharacter_css

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

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

adjustsize_css

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

3.縦書き

vertical_writing_css

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

4.均等割り付け

justified_css

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

5.画面幅に応じて可変

variable_accord_css

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

6.一文字ずつ、文字ごとに色を変える

Character_css

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

7.回転

rotation_css

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

8.文字の色を反転

invert_colortext_css

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

9.弧を描くように文字列を配置

place_arc_css

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

CSS

10.カーニング

kerning_css

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

11.3D風

thirdd_css

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

12.テキスト選択時

text_selected_css

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

13.ヴィンテージ風、ストローク状、エンボス加工

vintage_css

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

14.エフェクト

effect_css

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

15.回転と動き

movement_rotation_css

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

16.ドロップシャドウ、レタープレス、エンボス、光彩

drop_shadow_css

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

CSS3ジェネレーター

17.CSS3ののジェネレータ

generator_css3_css

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする