CSS3によるタイポグラフィ

Modernizrの基礎

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザがサポートしない機能に、ModernizrでどうCSSを設定するのかご説明します。
講師:
08:26

字幕

このレッスンではModernizrを使って ブラウザごとに異なるCSSの設定を どのように行うのか についてご説明します DreamweaverCCで開いたHTMLドキュメントは ごく基本的なCSSの設定しかしていません これであれば特にブラウザによって 設定が変わってしまうということを 気にする必要はありません 要素の中には

要素として class="reflect"というクラス名があります そしてreflect thisという文字が 打ってあります このreflectというクラスは セレクターで設定して font-size font-family textの位置 でタグがしてあります 現在の状態を確認しましょう ファイルからブラウザでプレビューします Safariで見ます 特に問題なく文字が表示されています ではブラウザによって結果の異なる プロパティの設定をしましょう ブラウザによって対応の 異なるプロパティとしては box reflect がありますので このクラス reflect のセレクターに その box reflect のプロパティを追加します そしてreflectというのは鏡のように 反射するのですが どちらの方向にということで 下にと "below" と設定します これで確認してみましょう ファイルを保存してブラウザでプレビューです 下に反映されましたね 鏡に映ったようになっています もうちょっと上に上げましょう 鏡の像のような反射した文字との距離は reflect のプロパティの below という方向の 後に付け加えることができます 上に引っ張りたいので -0.5 とすると 距離が縮まります 単位は em としましょう これで改めて確認してみます ファイルからブラウザでプレビューです 保存しましょう 今度はくっつきましたね ではこれはSafariの場合ですけど Safariの場合は レンダープレフィクスがwebkitですね そうでない Firefox で確認します Dreamweaverのメニュー>ファイルから ブラウザでプレビューで 今度はFirefoxを選択します そうすると何も起こりません box reflect というプロパティを サポートしていないからです こういう時にどうしたらいいかというと Modernizrを使います ちょっとここで要素を調査 見てみましょう すると既にModernizrが読み込んであるので HTMLのクラスの中にたくさん クラスが追加されています その中でずっとスクロールしていくと ここですね no-cssreflections とあります これはCSSのbox reflectを 反映していないことを意味するクラスです ですからこのクラスに対してFirefox用の CSSの設定を加えればいい ということになります ではDreamweaverCCに戻ります いまFirefoxで確認したクラス no-cssreflections ですね no-cssreflectionsのクラスに対して その中のreflectというクラス これがwebkitをサポートしていない webkitのベンダープレフィクスでない ブラウザに対する設定になります わかやすいようにカラーを redとしましょう そして飾りがないのもつまらないので テキストシャドウを加えます X方向Y方向の影のずれ 両方とも5pxにして 次にボケ幅ですね どれくらいぼかすか 10pxぼかします 影のカラーです RGBAで 影は黒ですね 0000で アルファを少し加えます 0.6 半透明の影ということになります ここでついでにもう1つ 隠れテクニックのようなものをご紹介しましょう box refrect webkitのレンダープレフィクスに対して 対応するだけですが linear-gradient 線形のグラデーションが文字に加えられます 影のほうですね 影というと誤解されますので 反射している鏡像のほうです そこに線形グラデーションの設定ができます RGBAで設定します 始まりはと 但しカラーは関係ないです アルファのグラデーションが設定できる という所がちょっと隠れテクニックですけど アルファを0.6でスタートし そして終わりのカラーですがやはりRGBAで カラーは関係ないので 0, 0, 0, 1 と linear-gradientの終わりのアルファ なんですけど透明にしたほうがいいですね 1でなく0にします これで保存しまして まずSafariでブラウザでプレビューします そうすると影がちょっと薄い黒から 完全な透明に変わります 次にFirefoxです Dreamweaverのファイルメニューから ブラウザでプレビューでFirefoxで確認します そうすると reflect 鏡像の反射は 起こりませんが いまさっきセレクターに設定したクラスの no-cssreflections に対して 赤いカラーの文字 そして後ろに影という設定をしたので これがFirefoxに生かされています このレッスンではModernizrを使って ブラウザによって異なる設定を する方法についてご紹介しました 基本的にはサポートしない機能については no-(その機能)というクラス名がつきますので そのクラスに対してCSSを設定すれば サポートしないブラウザに対する CSSの設定が行えます

CSS3によるタイポグラフィ

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

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

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

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

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