CSS3によるタイポグラフィ

テキストの影を調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
文字ごとの影の方向とぼけ幅を調整して、目指す表現に近づけます。
講師:
07:56

字幕

このレッスンでは テキストの1文字1文字に作る影の 方向やぼかし幅を細かく調整して 目的とする表現に近づけてみたいと思います さて画面でブラウザーで開いている このドキュメントなんですが 右側の画像に近づけるように テキストの調整をしてあります テキストはフォントを揃えてありますし 重なり順も画像と合わせてありますが それに加えて影の調整をしたことによって かなり画像の表現に近づいています 細かい作業ですけれど 練習としてやってみましょう 今Dreamweaver CCで開いている HTMLドキュメントは ”COMPETITION”という文字1つ1つが span要素に切り分けられていて それぞれにchar1からchar11までの 連番のクラスが与えられています そしてすでにtext-shadowプロパティで 影が付いているのですが これは全て共通です ですから調整をしないと あの画像のような形にはならないので ここに細かい数字の調整をしたいと思います 今現在どういう表現に なっているかを確認しておきましょう 「ファイル」メニューから 「ブラウザーでプレビュー」です かなり右の画像に近いのですけれども 先ほど言いました通り 1つ1つの文字の影が ちょっと違いますね ですから今ひとつなので そこを調整してみたいと思います まずchar1 これはCOMPETITIONの"C"ですけれども この設定は影はこのままで行けるので あと3つぐらいをまず調整してみましょう char2 "O"ですね このtext-shadowプロパティの設定を 変えていきますけれども 数字がまず3つありますね これは最初の2つが 影というのはズレていますので 水平方向 あるいはx方向ですね それから垂直方向に どれほどずらすかというズレです ここをまず変えていくのですが 水平方向0.05は良いとして 垂直方向は0.01とします そして3番目の数字なのですが これはボケ幅です 数字が大きほどボケが広がります 最初の"C"よりも"O"の方を ボケを大きくします あとRGBIカラーは少しアルファのかかった かなり黒に近いカラーなんですが これは全て統一でいきます では今度はchar3ですね "M"になります x方向はマイナスにしますので 左にずれます -0.02 そして垂直方向は0.02で 少しずれ幅が狭まりますね そしてボケ幅なんですが 0.14として少しシャープにします 今度はchar4 これは"P"ですね COMPETITIONの"P"なんですけれども 水平方向を0.01 垂直方向はマイナスで上にあげます そして0.01 ボケ幅はやはり少しシャープ目 ということで今4つのキャラクターの 影を個別に調整してあります これで確認しましょう ファイルを保存して ブラウザーでプレビューします C, O, M, Pまでやりました "COMP" だいたい 良さげな感じですかね あと残りを順番に半分ずつぐらい やっていきたいと思います 次はchar5からchar9まで "ETITI"を設定したいと思います ではchar5ですね "E"になりますけれども マイナス0.02 x方向です y方向もマイナス0.02とします そしてボケ幅は 0.14 少しシャープ目というやつですね これを一応 標準にしたいと思いますので char6から9にも これをペーストしちゃいます コピーをして char6 "T"ですね それからchar7 "I"です char8 また"T"ですね そしてchar9 これは"I"になります ペーストということで 標準の設定を全部同じにしました では確認します ファイルを保存して 「ブラウザーでプレビュー」です 今度は"E"から"I"までですね ちょっと選びにくいのですが ここの調整をしました 影"E" これはあまり影が出ていないですね "TITI"と だいたいみな似たような感じなので 同じ設定で問題ないと思います あと残り2つありますので この設定をしましょう 残るは"O"と"N"ですが 最後の"N"も標準設定で 行ってしまいますので これをコピーして char11ですね ペーストします そしてchar10 最後から2番目の"O"ですけれども 0.05em, 0.05em そして ボケ幅ちょっとシャープ目ということで 0.14とします これで全部設定し終わりました では確認してみましょう ファイルを保存して 「ブラウザーでプレビュー」します 影の付き方どうでしょうか? だいたい右の画像に近づけたつもりです 良さそうでしょうか? ではあと1つだけ ちょっと変えてみたいと思います 何を変えるかというと char5の"E"なんですけれども "E"だけ文字のサイズを気持ち縮めます フォントサイズですね そして 気持ちですので0.96 差があるんだろうかと思うかもしれませんが これをちょっと比べてみることにします では一旦保存して これで最終確認をします 「ブラウザーでプレビュー」です どうでしょうか? "E"をちょっと小さくしたんです 実は元の画像はこちらにありまして 影の調整をする前ですね "E"がちょっと持ち上がって見えるのは 位置を変えたのではなくて サイズを変えています もう一回 切り替えましょう こちらが最終的な文字のスタイルですね 文字ですから"E"が小さくなると "T"もちょっと左に寄ったりしますけれども これがレッスンの始めの状態 言われてみると 一応近づいたというのが お分りいただけるでしょうか? このレッスンでは テキストの文字 1文字1文字の 影の方向やそのボケ幅を調整することによって 目指す右側の画像の表現に近づけました そして最後にちょっとだけ文字を1つ "E"を小さくしてみました かなり近づいたと感じて いただけるんではないでしょうか?

CSS3によるタイポグラフィ

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

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

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

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

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