CSS3によるタイポグラフィ

テキストに影をつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
text-shadowプロパティを使って、テキストのひと文字ごとに影をつけます。
講師:
06:36

字幕

このレッスンでは テキストに一文字ずつ影を付けます 今 ブラウザで開いているドキュメントは 右側が画像で左が CSS で コントロールしているテキストです テキストのカラーは白ですので 影が付かないと 全てがくっ付いて見えてしまいますが 薄らと黒い影が付いているために 文字ごとの境目が分かるようになっています この様な影を設定したいと思います Dreamweaver CC で開いている html ドキュメントは まだ テキストに影が付いていません lettering.js を使って lettering() メソッドで 文字ごとに切り分けて 「 COMPETITION 」という文字が クラスにより分かれていますので 文字ごとに位置の調整を行っています ここに影を付けたいと思いますが まだ影の付く前の状態を 確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」します 影が付いていませんので 白の文字が重なると 全部くっ付いて見えてしまって 境目が分かりません これに影を付けたいと思います 「 COMPETITION 」というテキストは lettering.js で 一文字ずつ 要素に 切り分けられています 要素には それぞれ char1 から char11 まで 連番のクラスが設定されています これは lettering.js で 自動的に設定されています char1 と言うクラス これは「 COMPETITION 」の 「 C 」です ここに早速 text-shadow を 設定しましょう taxt-shadow の構文は 2つ数字が入ります これは X 方向と Y 方向の 位置のズレです かけているのは光の方向によって 多くの場合は右下が多いでしょうが 少し位置がずれますので そのズレの度合いを設定します では X 方向 水平方向に 0.05em として スペースで切り分けます Y 方向も同じように 0.05em 3番目にまた 数字を指定します これは影がどれくらい ぼやけるかです 数字が大きいほど ぼやける幅が広がります 今回は 0.2 としましょう 0.2em です そして 最後にカラーです カラーの指定の仕方はいくつかありますが 今回はアルファも使いたいので RGBa で設定します 基本的には黒ですが 少しだけグレーっぽくしたいので 10 を入れます 0 が完全な黒です 255 が完全な白ですので かなり黒に近い状態です そしてアルファも 100% に近い状態ですが 0.8 つまり 80% の設定にします これで「 C 」の文字に 影が付きましたので 確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します あれ? 影が付いていません! いえ これは影が付いているのです 付いているのですが 右の画像は「 C 」が 「 O 」の手前にあるので 影が「 O 」に映っています けれど デフォルトでは 文字は順番に手前に来ていますので 「 C 」は一番後ろなのです ですから 影は 黒い背景に付いているのですが 黒い背景に黒いアルファの付いた影が 付いても見えません ですから 今度は「 O 」と「 M 」にも 影を加えてみましょう 「 COMPETITION 」の 「 C 」の文字の影ですから char1 です これをコピーして 「 O 」と「 M 」 char2 と char3 のクラスの方にも 設定します 改めてこれで確認してみましょう 一旦「保存」して 「ブラウザでプレビュー」します 今度は 「 C 」の方に 「 O 」の影が付きました 「 O 」と「 M 」も よく見れば 影が付いているような感じも しないではないです 後の下の行は当然 全部手前に付いていますので 文字の位置が手前ですので 「 C 」「 O 」「 M 」の影は 下の行の文字には映りません では 残りの文字も全て 設定してしまいましょう このレッスンでは 影は共通で行きます 全部 コピーで持っていきます char3 にあるものを char4 に char5 に char6 char7 char8 char9 スクロールして あと2文字です char10 と char11 これで全部に影が付きました では 一旦「保存」をして 改めて確認しましょう 「ブラウザでプレビュー」です 文字の全てに影が付きました 重ね順は 先ほど言った通り 一番初めの「 C 」が一番下で 一番最後の「 N 」が一番手前に 来るようになっています しかも 影は右下の方向に付いていますから 重なり方によっては あまりよく見えないかもしれません 「 I 」の影が 「 M 」に映っている辺りが 多分 濃いと思います また 右下にずらしたのですが ぼけがあるので 左上の方にも 薄らと影がかかりますので 一応 全部の文字 それぞれの どこが境界になっているか 分かるように影が付きました あとは 影をもっと調整すれば 右の画像に近づけることができますが このレッスンではここまでにします このレッスンでは テキスト一文字一文字に 影をつける text-shadow プロパティの 使い方について説明しました

CSS3によるタイポグラフィ

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

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

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

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

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