画像は使わない!文字を装飾するCSS/jsまとめ作成:2013/11/5更新:2014/10/24Webデザイン画像を使うと変更がめんどう。出来ることならテキストで済ませたい。Webデザインはカーニングなどによる可読性の調整は難しいですが、CSSやjsを用いた簡単な指定で、文章の読みやすくしたり、注意をひくことが可能です。今回はCSSやjQueryで調整できるテキストまわりをまとめました。Linkもくじjs/プラグインなど1.文字詰め2.テキストの幅にあわせてテキストのサイズを自動調整3.縦書き4.均等割り付け5.画面幅に応じて可変6.一文字ずつ、文字ごとに色を変える7.回転8.文字の色を反転9.弧を描くように文字列を配置CSS10.カーニング11.3D風12.テキスト選択時13.ヴィンテージ風、ストローク状、エンボス加工14.エフェクト15.回転と動き16.ドロップシャドウ、レタープレス、エンボス、光彩CSS3ジェネレーター17.CSS3ののジェネレータjs/プラグインなどサイト組版の考え方としてぱっと思いつくのは、若者向けなら、文字サイズ・字間・行間は小さめで余白も少なく、書体はゴシック系。年齢層が上がれば大きめ、書体は明朝体に設定。高級感や和テイストを出したいときは、明朝系と縦組みなど。以下、画像を使わないjQuery系の文字詰め、自動サイズ調整、縦書など。1.文字詰めテキストに字詰め(文字の空間調整)を行ってくれるスクリプト「FLAutoKerning.js」。文字詰めを自動でやってくれます。文字幅にあわせてテキストサイズを自動調整するjQueryプラグイン。横幅に合わせてテキストのサイズが変わり、余白がないようにピッタリとおさまります。ちびと.net3.縦書き縦書きを可能にするjavascriptライブラリ「竹取JS」。見た目が結構綺麗で半角数字2つまでなら横並びにできるのが凄いです。ダブルクリックで縦横変わります。JS日本の文章はやはり縦書きが読みやすい「tategumi.js」4.均等割り付けやはり全半角混じりだとChromeでの表示がうまくいかないようですが、均等割り付け(指定した文字数分の幅に均等に文字を配置)を行うjQueryスクリプト。内藤5.画面幅に応じて可変フォントサイズ、行の高さをベースに幅を変更するjs。フォントサイズやline-heightを自動で調整してくれます。要素サイズに応じてフォントサイズを自動調節「FlowType.JS」:phpspot開発日誌6.一文字ずつ、文字ごとに色を変えるテキストをタイピング風に一文字ずつ表示したり文字ごとに色を変えるspanを使う方法。背景画像に被っている文字色を可視性の高い色に変更してくれるJavaScriptライブラリ。画像の色に対して見やすい色に反転します。9.弧を描くように文字列を配置CSS3とjQueryで弧を描くように文字列を配置。CodropsCSS10.カーニング漢字・平仮名・カタカナが混在すると文字間の空白がバラバラになってしまいます。optimizeLegibility)。terkel.jp11.3D風CSSで3Dに見せる方法。Text12.テキスト選択時テキスト選択時の色を変更する方法。ヴィンテージ風、ストローク状、エンボス加工風にスタイルしている例。コリス14.エフェクトマウスホバーにより、文字がパカっと開いたかのように見せるCSS。飛び出す絵本ならぬ、文字。コリス15.回転と動きクルクル回転しながら動かすCSS。画像じゃなくて、ちゃんとテキストが動いています。えっちなのはいけないと思います16.ドロップシャドウ、レタープレス、エンボス、光彩text-shadowを使ったサンプルまとめ。ドロップシャドウ、レタープレス、エンボス、光彩など盛りだくさん。ちびと.netCSS3ジェネレーター17.CSS3ののジェネレータCSS3ののジェネレータ。スライダーで角丸・シャドウ・回転・文字装飾などを調整出来る。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2014/03/17スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナ2017/11/20さりげなく目立つフッターデザインどうすれば一番下にあるフッターを目立たせることができるのか。ありきたりになりがちなフッターを面白くできるのか。今回は似たようなフッターデザインから脱却したいときに参考にしたいレ2013/10/28プロっぽくなった!フォントや「文字」に関するまとめ先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。1月号に執筆させていただきました。コメントデータの処理方法の詳細はこちらをご覧ください。