CSS3によるタイポグラフィ

3D風の表現を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストにつける影を少しずつずらして重ねることにより、立体的な表現ができます。
講師:
06:27

字幕

このレッスンでは テキストが 立体的に浮き上がって見えるように 設定を加えます 今ブラウザで開いている HTMLドキュメントは 真ん中に大きく配置された 広い 「SUBMERGE』という文字の 右下の方に グレーの表現が加わって 出っ張っているように見えます この設定を付け加えたいと思います Dreamweaver CC で今開いている HTMLドキュメントには 文字は置いてありますけれども ほとんど基本的な設定だけで 浮き上がらせるような表現は してありません 浮き上がらせて見せたいのは この空の

要素 class topなんですが そのtopに 擬似要素で加えた 「SUBMERGE」というテキストです 色が白になっていて 太字になっていますけれども ほとんど基本的な設定しかされていません では 今の状態を確認しましょう ファイルのメニューから ブラウザでプレビューです 左の方に小さく「SUBMERGE」 というテキストがあります これをまず 大きく真ん中に配置しましょう 設定はclass topの擬似要素 before このセレクターの中に追加をしていきます まずは line-height 120pxとします サイズ関係も この機会に設定してしまいます それからfont-sizeですね こちらも同じく120px そしてmarginです いろいろ位置調整がしやすいように 0にしておきます そしてpadding これも位置調整なんですけれども padding-left 左側に60pxほど入れておきます これでとりあえずサイズ関係は済んだので まずこの状態を確認しましょう ファイルを一旦保存して ブラウザでプレビューで確認します テキストが大きくなって 画面の真ん中の少し下に配置されました この文字に対して浮き上がったような 表現を加えていきます 使うのは ドロップシャドウです テキストに加える影はプロパティは text-shadowになります そして 後々複数設定したいので 改行しておきます まずは 4px 4px この二つの数字で 水平方向Xですね それから垂直方向Yの ずれ幅 影をどれぐらいずらすかという設定をします 次はボケ幅で 普通ここを動かさないと 影にならないんですが ここでは敢えて ハッキリクッキリさせてしまいます そしてカラーなんですが RGBで決めます グレイにしましょう 185 全部同じ値にします 185 185です これで確認しましょう ファイルを保存して ブラウザーでプレビューします 影がハッキリクッキリつきました でもこれだとハッキリとした 影が下にあるという感じで 立体的に見える表現とはちょっと違いますね これは影を重ねる事によって表現するんです text-shadowプロパティに影を あと3つ付け加えます 付け加えるときにはカンマ区切りで 設定を加えていきます もうコピーしてしまいましょう この設定を コピー コピー もうひとつコピーと これで3つ付け加えました 最後のカンマは消さないと エラーになってしまいます どうするかというと 最大4にして 少しずつ下げるんですね 3 2 1 Y座標の図でも同じ事です 3 2 1と 少しずつズレが大きくなる 上からいくとですね 1px 2px 3px 4px 大きくなるズレを全部重ねてみる そういう事なんですね では確認してみましょう ファイルを保存して ブラウザでプレビューします 今度は立体的に見えますね でも今言いました通り 影を重ねているだけです ちょっと拡大して確認してみましょう 拡大はcommandもしくはcontrol +なので ショートカットで拡大します これで最大に拡大されたようですので スクロールして 実際にどうなってるか よく見てみましょう 「B」や「M」のこの下の あたりを見るとわかりますね なんか本のページが重なっているように見えます それと同じ原理です ページが重なって本の厚みがあるのと同じように 影を重ねて厚みを出したという事なので よーく見ると分かってしまいますが 普通のサイズであれば 立体的に見えるというわけです このレッスンでは テキストを立体的に見せる ちょっとした工夫をご紹介しました text-shadowプロパティで ハッキリクッキリした影を重ねて 少しずつずらすという そういうテクニックでした

CSS3によるタイポグラフィ

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

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

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

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

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