CSS3によるタイポグラフィ

2次元の変換を使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transformプロパティに変換関数を定めると、要素を回転・伸縮・傾斜・移動することができます。
講師:
07:24

字幕

このレッスンでは 要素に二次元の変形を加えます 今 ブラウザで開いている html ドキュメント 「 HOTROD」というテキストに 背景が付いています それぞれの要素が斜めに傾斜しています この設定を行いましょう Dreamweaver CC で開いている html ドキュメント これは テキストにまだ 傾斜が加えられていません jQuerty のプラグイン Lettering.jp で テキストには「 hotrod 」と言う クラス名が付いています それを lettering() メソッドで 1つ1つの文字に分けて こちらです hotrod のクラスの span 要素に分かれたテキストに対して グラデーションとその他の設定を 行っていますけれども まだ 傾斜はしていません 現在の状況を確認しましょう 「ファイル」から 「ブラウザでプレビュー」です 背景には赤から茶色の グラデーションがかかっています そして 一文字ずつの 左上に影が付いて 背景の左下にも影が付いています これを一文字ずつ 二次元で変形させたいと思います 変形のプロパティは transform です ここ クラス hotrod の span 要素 このセレクターに transform というプロパティを加えます そして ここには様々な関数が使えます まず 例えば拡大してみましょう 拡大は scale(,) という関数です () の中に , が入っていますが X 方向と Y 方向 それぞれについて 現在のサイズを1とした比率で 横方向 縦方向に 拡大 / 縮小ができるのですが 縦と横が同じ比率であれば 引数は1つで結構です 例えば 1.5 とします つまり 150% 1.5 倍になるということです 「ファイル」を「保存」して 「ブラウザでプレビュー」します すると 1.5 倍に拡大して 重なり合いました 更に変形を加えましょう 変形の関数は transform プロパティに スペース区切りで追加することができます 今度は回転です rotate rotate には角度を指定します 例えば -15 度 deg という単位を付けます degree のことです 「保存」して 確認します 「ブラウザでプレビュー」です 拡大した状態で 左方向に傾きました 角度の方向ですが 時計回りの方向がプラスです マイナスを指定しましたので 反時計回りに角度が回転したということです では もう少し変形します 移動も この transform プロパティに 関数で設定できます また スペース区切りで 移動は translate(,) です そして カンマ区切りで ( X 方向, Y 方向) それぞれ数字を入れます では X 方向は動かさず Y 方向に100 px (ピクセル) プラスだと下方向に動くことになります では 「保存」して また 確認します 「ブラウザでプレビュー」です 下に動きました では 最後にもう1つ ご紹介します 最終的に傾けたいので これらの関数は削除します そして 傾けるというのは skew です X 方向と Y 方向があります 最初にお見せしたのは X 方向に傾けるのですが 先に Y 方向をお見せしておきましょう やはり角度で指定します 例えば 10deg とします そして「ブラウザでプレビュー」しましょう Y 軸に対して 10 度 時計回りに傾いています 仕上げですが 仕上げとしては Y ではなく X で傾けます skewY を skewX に置き換えます そして 角度 方向を - (マイナス)方向 反時計回りとして 「ファイル」を「保存」して 最終確認です 「ブラウザでプレビュー」しましょう これで それぞれの文字が 水平方向に対して -10 度傾きました このレッスンでは 要素を二次元で変形する transform プロパティについて ご説明しました 構文は transform プロパティを指定して 変換関数をその後に置きます それによって要素を 回転・伸縮・移動・傾斜できました 変換関数には rotate() scale() translate() skewX() skewY() などがあります 変換関数の回転は rotate() で 角度を指定します 時計回りを正方向として回転します 伸縮は scale() です (,) の中に2つ数字を指定する場合 ( X 方向の比率 , Y 方向の比率)になります 1つだけ入れれば X と Y 両方共 同じ比率で拡大・縮小します その時 実寸を 1.0 とした比率で 拡大・縮小します そして 傾斜は水平軸方向と垂直軸方向に 関数が分かれていて skewX と skewY です X または Y 軸方向に それぞれ 傾斜させることができます

CSS3によるタイポグラフィ

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

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

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

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

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