CSS3によるタイポグラフィ

ロールオーバーで表現を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
:hover擬似クラスでプロパティ設定を変えることにより、マウスのロールオーバーで表現が変わります。
講師:
05:47

字幕

このレッスンでは要素に ポイントを合わせたときに その要素の表現が変わるという 「マウスオーバー」の表現を作ってみます 今ブラウザで開いている htmlドキュメントなんですが うっすらと白い影のようなものがあります そこにポイントを合わせると そこの位置に応じた文字が現れるといった CSSの設定を行ってみます DreamweaverCCで開いたhtmlドキュメントには まだマウスインタラクションの 表現 設定は与えていません ただスパン要素で定められている文字に対して テキストシャドーを加え そしてテキストそのものの アルファ[α]をゼロにすることで 影のようにぼかすという表現までは 作ってあります 確認してみましょう ファイルからブラウザでプレビューです テキストは透明になり 影だけがにじんだように表示されています これをもっとぼけさせましょう テキストシャドープロパティで ボケ幅を定めるのは3つ目の数字です 現在0.1emとなっていますが 0.5とボケ幅を増やします これで確認してみましょう ファイルを保存してブラウザでプレビューします もう元の文字が判らないくらい ぼけぼけになりました 次にマウスインタラクションを加えます スパン要素にマウスポインターが 重なった時というのは スパン要素にホバー疑似クラスを添えて セレクターを定めますが 基本的にこの設定を使って 変更しますのでコピーします コピーしてペースト そして重なった時というホバー疑似クラスです そしてまずテキストのカラーです スパン要素の始めはアルファ0ですが これをアルファ1にします つまり完全に見える状態です そしてテキストシャドーは影は消しましょう その場合には影をnoneとします これでマウスポインターが 重なった時に影は消えて その代わりはっきりとした文字が現れます では保存をして確かめましょう ブラウザでプレビューします まず最初の状態はぼけぼけの影があります マウスポインターを合わせると その影に代わって文字が現れる 影が消えて文字になる ちょっと面白い表現になりました もう少しだけ手を加えましょう マウスポインターがスパン要素に重なった時に はっきり くっきり出てくるだけではなく 少しサイズを大きくしましょう トランスフォームプロパティで スケールという関数で拡大縮小 伸縮を定めることができます スケール関数のかっこの中には 数字を2つ入れることができます X方向とY方向それぞれ1を実寸とした比率で 大きくしたり小さくしたりできるのですが 両方同じ数字でいい場合は数字は1つで結構です では試しに2倍としてみましょう これで保存をしてブラウザでプレビューします マウスポインターを重ねると 大きくなっている気がしません 実は拡大されていません トランスフォームプロパティで スケールを広げたりとか あるいは回転させるといった 座標変換する時には プロパティの設定がもう1つ必要です トランスフォームプロパティで座標の変換 変形をする時にはその要素 今回はスパンですが そのディスプレイプロパティを インラインブロックにしなければいけません これで改めて確認しましょう ファイルを保存してブラウザでプレビューします 始めの状態は同じですが ポインターを重ねると大きい文字がでてきます ちょっと大きすぎますので 少しスケールを抑えましょう トランスフォームプロパティに 定めたスケール関数 渡す値を2から1.4に少し抑えます そして保存して最終的に ブラウザでプレビューしましょう マウスポインターを合わせると 少し大きめの文字が影に代わって現れる というインタラクティブな表現になりました このレッスンではぼけたテキストに マウスポインターを合わせると はっきりとした文字が浮かび上がる という設定をしました そのためにはポインターを合わせた時の ホバー疑似クラスに対して 始めにテキストが透明になっていたので それを完全な不透明にし シャドーでぼかしていたので シャドーを無しにする テキストプロパティの値を変更して あのような表現にしました

CSS3によるタイポグラフィ

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

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

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

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

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