CSS3によるタイポグラフィ

カーニングを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lettering.jsでひと文字ずつ分けた要素に、文字単位でカーニングとオフセットを定めます。
講師:
10:29

字幕

このレッスンでは 1つの単語のテキストの位置を 文字ごとに微調整したいと思います 今 ブラウザで見ている右側が 目標の画像です 左側の方は CSS で 文字の位置を設定しています しかも 文字ごとに 左右の位置 上下の位置が 微妙に違っていて 右の画像に近い状態になっています 左右の文字詰めのことを 「カーニング」と言います 上下は「オフセット」と 言うことが多いです この カーニングとオフセットを Lettering.js という jQuery のツールを使って 設定したいと思います Dreamweaver CC で開いている html ドキュメントは Lettering.js の設定まで 出来ています Lettering.js は jQuery のプラグインで jQuery の読み込みが必要です jQuery の方は CDN サイトから読み込んでいます そして Lettering.js は 今 ローカルで 「 lib 」というフォルダに 入れてある これを読み込み これは jQuery のお約束の副列ですが 「ドキュメントが読み込まれて 準備ができたら " これ " をしてください」 と言う設定になっています " これ "と言うのは "stack" と言うクラス それは 文字単位で位置調整をしたい この Competition という

要素の中にクラスとして 定められています これを文字ごとにバラバラにしたいので lettering() というメソッドを 呼び出しています すると この の方には 要素として

があり
要素があり その中に3つの

要素がある 後は (イメージ)要素です これは参考にしている 本のカバーの画像です これだけの非常にシンプルな 構成になっています 今の状態を確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」します 今は 単に単語が改行されているだけで 位置調整は厳密にはしていません 実は1つだけ この「 C 」だけ 動かしてあるのですが まだ 他の文字については 調整できていません これを「要素の詳細を表示」で 右クリックで表示すると こちらですね "stack" の

要素の中が 要素に分けられています しかも一文字ずつです そして クラス名は "char1" から "char11" までです "char11" が最後の「 N 」になります これが Lettering.js が 自動的にやったことです 要素に分けて それに対して 連番のクラス名が付いています ですから このクラスに対して 位置調整の CSS を書き加えれば 文字ごとに位置が調整できます では Dreamweaver CC の方に 戻りましょう Lettering.js で 「 CONPETITION 」と言う文字が 一文字ずつ 要素で分けられ 最初の文字の「 C 」には "char1" というクラスが設定されています それに対して margin-left で カーニングを行います -0.05em で少しだけ 左に寄せています これを「コピー」して 「ペースト」です ペーストはショートカットを 使いましょう コマンド + V が Mac OS Ctrl + V がWindows です これで あと2つ 忘れないうちに クラス名の連番を 調整しておきましょう 2 3 4 です そして char2 の margin-left を -0.09 更に左寄せです そして 上下方向にも動かしたいので top: 0.05em で 少し下に下げます これは「 COMPETITION 」の 「 O 」です 「 O 」を少し下げます そして char3 について これは「 COMPETITION 」の 「 M 」になります -0.05 はそのまま やはり 上下を少し動かします char3 は 0.05em そして char4 です char4 は「 P 」です -0.02 ちょっと控えめにして やはり 上下も動かします top: -0.01em ということで 少し上に引っ張る感じです 4つの文字の設定を行いましたので 確認しましょう 「ファイル」を一旦「保存」して 「ブラウザでプレビュー」です 4つの文字を調整しましたので 「 C 」は元々 少し左に寄っていましたが 「 O 」が下に下がっています 「 M 」の位置 「 P 」の位置も少し左に寄せています 「 E 」から後はこれから設定していきます 大体 感じは良さそうです では 続けてやっていきましょう 今度は char5 からです 「コピー」して 「ペースト」です char5 ということで 左には -0.06 として 少し多めに寄せます そして top 上方向には -0.01 引っ張ります では これを char6 にも 今回はこのままコピーします コピーをこのまま使って char6 としましょう あと 2つほど追加します この辺をコピーして char7 と 8 です char7 は「 I 」になります 「 I 」は -0.05 は良いとして 上下はちょっと下げます それから char8 です これは「 T 」になります left の方は -0.06 top も -0.06 少し上に大きめに引っ張ります また 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します これで「 T 」までいきました 「 E 」の位置が少し下げてあります それから「 T 」の位置 そして「 I 」 もう1つの「 T 」 良いですね 「 N 」が無くなってます これは下の方に実はあります カーニングを調整すれば 「 N 」が上に上がってきます こういう状態なので カーニングは基本的に 左に引っ張る形です 右に寄せると つい 改行してしまうので 基本的には - (マイナス)を使っています では 残りのキャラクターの 「 I 」「 O 」「 N 」を 設定したいと思います また 上から3つ分コピーを 貰ってきましょう Dreamweaver CC では Mac の場合はオプションキー Windows の場合は Alt キー を押しながら ドラッグするとコピーになります そして 9 10 11 です 「 I 」「 O 」「 N 」の 所になります では 9 「 I 」です これは -0.08 そして top は -0.04 引っ張ります 10 は「 O 」です -0.01 左に持ってきて -0.06 引っ張ります 最後の「 N 」 ちょっと大きめに -0.1 引っ張ります それから top は -0.04 としましょう これで確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です 改めて「 N 」が下から 上がってきました 「 I 」「 O 」「 N 」の 位置は相対的に見て 大体 同じくらいになったのでは ないでしょうか? このレッスンでは jQuery のプラグイン Lettering.js を使って 文字を一文字単位に切り分ける lettering() というメソッドを stack というクラスを定めた 文字に対して適用すると こちらです 文字が 要素で しかも連番クラスが付けられるので その連番クラスに対して margin-left と top を 調整することによって 参考にした画像と ほぼ同じ位置調整を行いました

CSS3によるタイポグラフィ

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

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

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

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

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