CSS3によるタイポグラフィ

Lettering.jsとは

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lettering.jsを使うと、テキストのスタイルを文字単位で定めることができます。
講師:
07:14

字幕

このレッスンでは jQuery のプラグイン Lettering.js を使うと どんなことが出来るのか 簡単な操作の方法についてご説明します Lettering.js .js ですね letteringjs.com がサイトなんですけれども このサイトに簡単な サンプルも載っています これなんかちょっと面白いんですけれども Lettering.js を使うと テキストを例えば1文字ずつ切り分けて 扱うことが出来たりします 1文字ずつに スタイルを当てたり アニメーションあるいは Java Script のコントロール といったことも出来るようになります こちらが今回作るサンプルなんですけれども .com の .(ドット)が青くなっていますね この1文字だけを青くしています あと これは実際に比べてみないと 分からないんですが 実はこの辺りの文字について 重なっている部分がちょっと見えますね kerning(カーニング) 文字詰めをしています こういった1文字1文字の 感覚を詰めるといったことも Lettering.js を使えば出来ます Dreamweaver CC で開いている HTML ドキュメントには jQuery のプラグイン Lettering.js と それからもちろん jQuery が読み込まれています そして h1要素で文字が打ちこんであります まだ文字のカラーとかは変えていません Lettering.js を 読み込んだだけですので まだこれを活動が出来る状態 動く状態にしていないんですね そのためには簡単な Java Script の コードを書く必要があります jQuery のコードです ではそれを書き加えましょう script の要素を加えます そして閉じて jQuery ではお馴染みの書き方 なんですけれども まずはこの h1要素には domain という class が付けてありますので ここに「$(document).ready」と これが Java Script なんですけれども jQuery を使う時の決まった 書き方になっています ドキュメントを読み込んで準備が整ったら これをしてくださいという書き方です そして何をするかというと 今 確認した さっき確認した domain という class に対して操作をしましょうということです ここで Lettering.js のメソッド になりますけれども lettering() と そして ;(セミコロン) これで Java Script コードは 出来上がりました 一旦「保存」をして 「ブラウザでプレビュー」で確かめてみましょう もちろん何も起こりません では先ほどのメソッド letteirng ( ) 何をしたかというと 要素の詳細を表示してみると 分かるんですけれども span(スパン)があって class が char(キャラ)1 ・char2・char3と 連番で通っていますね そんな class ありましたっけ そもそも span 要素ありましたっけと 思い出していただきたいんですが ありません 実は Lettering.js が span 要素で 1文字1文字を囲んでくれるんです そのための先ほどのメソッドが lettering ( ) です 1文字ずつばらしてくださいな ということです ですからあの HTML ドキュメントの中には span も class もこのような class はないんですけれども あるものとして CSS を 変えてしまうことは出来ます ではまず文字詰めからいってみましょう char2 「 u 」と char7 「 o 」ですね これをちょっと大文字との間隔が あるので 詰めたいと思います では Dreamweaver CC の方に戻りましょう コードの body 要素を確認しますと h1要素しかありません span 要素はないですし もちろん char なんとかという class も設定されていません けれども それがあるものとして スタイルシートを設定して しまうことが出来ます class の char2と char7でしたね 少し文字を詰めたいと思いますので margin-left 左側に -0.07em ということでやってみましょう 一旦ファイルを「保存」して 「ブラウザーでプレビュー」します 文字の間隔が詰まりましたね といってもお分かりに ならないと思います 大丈夫です 先ほどの状態を こちらのタブに残してあります 「F」と「u」の間それから「N」と「o」の間ですね これが元は間隔が開いているんですけれども 今 スタイルシート char2と char7に 設定しましたので 文字が詰まっているということが お分かりいただけると思います もう1つだけ手を加えましょう .com の「. (ドット)」あれは実は char の12番だったんですけれども class の char の12に対して 文字の色を変えましょう 色は color ですね blue にしたいと思います ではこれでまたファイルを「保存」して 「ブラウザーでプレビュー」します ドットが青くなりましたね このレッスンでは文字を 1つ1つ切り分けて 細かいスタイル設定が出来る そのためのツール jQuery のプラグインですけれども Lettering.js の基本的な使い方 についてご説明しました

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

4時間01分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年08月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。