CSS3によるタイポグラフィ

テキストの位置を文字ごとに調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
文字ごとに切り分けた要素の位置を、ひとつずつ微調整します。
講師:
07:23

字幕

このレッスンでは 文字単位に切り分けたテキストの要素を 一文字ずつ 細かく位置調整します 今 ブラウザで開いている html ドキュメントは 上半分のハッキリとした 3D 風の文字の下に 別の文字をぼかして 下半分に切り出して 一文字ずつ 3D の回転を 加えています そのうえで位置を調整しています デフォルトのままだと 少しずつ水平位置がズレてしまいます その位置を文字ごとに調整します 今 Dreamweaver CC で開いている html ドキュメントは デフォルトのままで 文字ごとの調整はしていません けれど ハッキリとした文字の下に ぼけた文字を 3D で回転して くっ付けるところまで 出来ています どれくらいズレているか 確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 大体 良さそうに見えますが もっと拡大して見たいと思います もう2回ほど拡大すると テキストのズレが見えてきます 一番右の「 E 」は良さそうですが 左に行くほど ずれています この「 U 」は分かりやすいと思います 多分「 S 」が一番ズレているのですが このズレが気になります ですから 文字ごとに 少しずつズレが違うので 文字単位でズレの調整を しなければなりません それをしたいと思います まず テキストの要素ですが 下の文字は class="bottom" という div 要素に囲まれた p 要素の中に 1単語として入っています これを一文字ずつ調整したいので 一文字ずつ分けなければいけません この html ドキュメントでは 既にこの分ける作業は この Lettering.js で 行っています この jQuery のプラグインで jQuery の JavaScript コードを 書くことによって p 要素を lettering() という この Lettering.js のメソッドで span 要素に一文字ずつ 切り分けています 改めて確認してみましょう もう一回 「ブラウザでプレビュー」します そして この下の文字の 「要素の詳細を表示」します p 要素が一番子どもだったのですが 更にその子どもとして span 要素に文字が一文字ずつ 切り分けられていて しかも ― char1 から char7 下までスクロールして char8 まで 連番のクラスが与えられています ですから このクラスをセレクターに使えば 一文字ずつ位置調整できます それをやってみましょう 位置調整をするために span 要素のセレクターに position として relative を選択しておきます そのうえで 先ほど見た通り char1 から char8 までの連番で span 要素に文字が一文字ずつ 納められていますから char1 から試しに設定してみましょう 左にずれていましたから left に少し足し込みます 10px とします これを char1 最初の文字に設定しました 「ファイル」を「保存」して 「ブラウザでプレビュー」します この「 S 」の文字が 右に寄りました ですから 大体 合って見えます その分「 U 」との距離が 近づいていますが 「 U 」以降も全体的に 右に動かします まずは半分 最初の4文字を やってしまいましょう これをコピーして ペーストは コマンドもしくは Ctrl + V なので ショートカットを使います 3つ加えました 連番のクラスになっていますので 連番に書き換えます 2 3 4 と 右に行くほどズレ幅は狭まりますので 少しずつ数字を小さくします 2番目は 6px 3番目は 5px 4番目も 5px で 最初の4文字を設定しました では 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 最初の4文字 「 SUBM 」までです 「 SUBM 」までが かなりぴっちり合ってきました 「 M 」の辺りは結構きれいです 後の4文字は あまりズレていないのですが やはり 少しずつ 右にずらした方が良いです 「 E 」は多分ずらさなくても 良いと思いますので あと 調整したいのは 「 ERG 」の3文字です 連番のクラス char のセレクターを あと3つコピーして 調整します 連番で 5 6 7 で 8 はそのままです では 5 は 3px にしましょう ちょっと減らします 6 は 2px 7 も 2px くらいで良さそうです それでは 「ファイル」を「保存」して 「ブラウザでプレビュー」で 確認します どうでしょうか? 大分 ぴっちりと 合ったのではないでしょうか? このレッスンでは 一文字単位で 水平位置の調整を行いました そのために Lettering.js で p 要素を一文字ずつ span 要素に切り分けて span 要素に自動的に付けられる 連番のクラスに対して 細かい位置調整を行いました

CSS3によるタイポグラフィ

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

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

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

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

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