CSS3によるタイポグラフィ

遠近感を調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
視点とスクリーンとの距離および消失点の位置を定めて、遠近感を調整します。
講師:
08:17

字幕

このレッスンでは 三次元で変換した要素について 遠近感の調整の仕方をご説明します 今 ブラウザで開いている html ドキュメントの文字 この下半分のぼけた所は 少し手前に X 軸で 回転させているのですが 確かに 手前に回転している感じがします 何故かというと このハッキリとした文字との境目と それから 下の手前の方の 幅が違っているからです 遠近感と言うのは 遠いものが小さく見えることです ですから その調整をすることによって 遠近があることを実感できるのです この調整ができるプロパティを ご紹介します Dreamweaver CC で開いた html ドキュメントです 下半分の文字は この span のセレクターで transform プロパティに rotateX X 軸による回転として 45 度を設定しています ですから 手前に回転しているのですが デフォルトの状態ではこう見えます 「ファイル」から 「ブラウザでプレビュー」します 回転しているのですが あまり回転している感じがしません 単に 丈が詰まっているように見えます 手前と奥との幅の差が あまり感じられないからです この調整をするのが perspective というプロパティです この設定をしましょう 遠近感を設定したい 下のテキストは この p 要素の文字です ですから セレクター p に対して 設定を加えます プロパティは perspective です そして 距離を入れます 距離と言われても どれくらいの数字を入れて良いのか ちょっと分からないです 試しに 50px と入れてみます これで保存して確かめましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 遠近感がすごいことになっています 手前が広がりすぎて 領域からはみ出てしまっています perspective の数字は 視点とスクリーンとの距離です これが短いほど 遠近感が強くなります 長いほど 遠近感が感じられなくなります では 数字をもっと 大きくしてみましょう perspective のプロパティに 与えた数値を 一気に 1000 にします そして「保存」を押して 「ブラウザでプレビュー」です 今度はほとんど差が無いですね はじめの状態の様に この切れ目の所と下の幅が ほとんど違わないので 回転しているのか ただ縮んだだけなのか 分からない状態です これがいわゆる 遠近法と言うものです ウィキペディアで 遠近法のページを開きました この中に分かりやすい写真があるので それを見ながら説明を補足します この写真です 既に別タブに開いてありますが 遠近感があります この 道幅はずっと 最後まで同じはずです けれど 遠近感があると 遠くに行くほど小さくなる そして 最後には一点に集束します この集束する角度が 緩やかだと あまり遠近感が感じられません この角度が強いと 一点に向かって集束していきます この点を消失点と言います 2つの物体があり 消失点とこの2つの関係を結んだ時 この角度が直角に近いと あまり遠近感がありません 遠くなってもあまり小さくなりません 逆に遠近感が強いということは この角度が鋭角になることです ですから perspective の 数字が小さいほど その遠近感が強まり 数字が大きくなるほど この角度が緩やかになる 遠近感が弱まるという 関係になっています 今回は遠近感を強めに演出したいので perspective の値は 80px としておきます すると 先ほど 50px だと すごいことになりましたが 遠近感が強ければ角度が小さくても その変化が分かりますので ここを逆に小さくします そして 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 10 度しか回転しなくても ちゃんと遠近感が感じられます もう1つ プロパティを紹介します 先ほどの 消失点の位置を 調整することができます MDN の CSS リファレンスを 開きました 使うプロパティは perspective-origin です perspective の原点 と言う意味です 消失点をコントロールします 設定できる値は水平方向と 垂直方向があります 水平方向は left center right 垂直方向は top center bottom とあり パーセンテージでの指定もできますが 今回はこのキーワードを 使うことにします 実際 どんな感じかは 例があります 例えば これは 左上から見ています top left です これは center です 両方とも center そして 少し下に下がって 例えば一番右下だと 右下から見ているので bottom right となります では perspective-origin の プロパティを加えます ここに― perspective-origin として 水平方向は center にしましょう 垂直方向は bottom とします デフォルトは両方とも center ど真ん中から見ていることになります では 「保存」を押して 「ブラウザでプレビュー」です 先ほどよりも少し 広がった感じになりました 先ほどの状態も タブで用意してありますので 比べてみます 下から見ていますので 幅がさらに広がって 遠近感が更に強調されています このレッスンでは 三次元の変換した要素の 遠近感を調整するための プロパティを2つ 遠近感の強さを示す perspective と どこから見ているか消失点を表す perspective-origin これらのプロパティの 使い方についてご説明しました

CSS3によるタイポグラフィ

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

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

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

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

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