CSS3によるタイポグラフィ

グラデーションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
linear-gradient()関数で背景色に線形のグラデーションを定めます。ブラウザのバージョンによって構文が少し異なります。
講師:
07:12

字幕

このレッスンでは テキストに対して定めた背景色に グラデーションを加えたいと思います 今 ブラウザで開いている THML ドキュメント 「 HOTROD 」という文字の 1つ1つに背景が定められています その背景色は 上から明るい赤 下に行くほど暗い茶色に 線形のグラデーションがかかっています この様なグラデーションの 設定を行ってみましょう Dreamweaver CC で開いている HTML ドキュメントには まだ 単純な赤の背景色しか 定められていません 今の状態を確認しましょう 「ファイル」メニューで 「ブラウザでプレビュー」です ただ単純な赤ですね これを線形のグラデーションにしましょう では background-color : red(赤) の下に 背景色のリニアグラデーション linear-gradient という プロパティ名ですけれども グラデーションを加えましょう background です そして 関数を使います linear-gradient ( ) そして この構文というのは まず最初に方向を定めます 方向は 上から下という場合には to bottom です そして あと2つ 始まりの色 赤にしましょう 完全な真っ赤です そして 茶色っぽい暗い赤 marron としましょう これでグラデーションが設定されます 「ファイル」を一旦「保存」して ブラウザで確認しましょう 「ブラウザでプレビュー」です 線形のグラデーションが 上の真っ赤から 下に行くに従って茶色 maroon (マロン)という 名前の通り 茶色のカラーに変わっていきます これに対してブラウザによる バージョンの考慮を加えたいと思います この background に定めた linear-gradient ( ) 関数ですが これに対応していない もっと古いブラウザに対しても 線形のグラデーションを与えようと思うと ベンダープレフィックスが 必要になります 今 Safari で確認していますので Safari のベンダープレフィックスは -webkit- です -webkit- こうすれば古いブラウザでも 対応しそうです そして 最新のブラウザでも ベンダープレフィックスが付いていても 対応することが多いです では 確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」 Safari を見ます グラデーションが解けてしまいました 最新のブラウザですが グラデーションがかからない ベンダープレフィックスを 付けたら駄目なのか? ここは注意が必要な点です この linear-gradient ( ) の関数は 仕様によって いくつか構文が 変わってしまっています 少し前の この -webkit- を 付ける頃の構文は 最初の方向は ~へ ではなく ~から と 開始位置を示す方向だったのです ということで ここは top に 変える必要があります つまり ベンダープレフィックスが 付く場合と 付かない場合で ( ) の中に指定する引数の 意味が違ってしまいます これではどうでしょう? 確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します Safari で見ましょう 今度は ちゃんと グラデーションがかかっています では 更にもう少し 細かく設定を加えていきます ベンダープレフィックス -webkit- で Safari と Chrome は 対応できますけれども もう1つ Mozilla FireFox を 加えておきましょう 「コピー」して 「ペースト」します そして Mozilla FireFox の 場合は -moz- です それから 勿論 最新ブラウザ用に ベンダープレフィックスの無いパターンも 置いた方が良いでしょう これもコピーを持ってきます ベンダープレフィックスは無し そして 最初の引数が ~から ではなく ~へ to bottom と定めます では background-color : red これはどうしましょう? グラデーションが設定されれば background-color は あっても意味がありません けれど もしグラデーションの 設定にも対応していない 更に古いブラウザのことも考えれば これぐらいは 置いておいて良いと思います ここで改めて確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 今 新しいブラウザで見ていますので 最後のベンダープレフィックス無しの 設定が生きているんですが 勿論 先ほどと結果は変わりません あともう2つ手を加えて仕上げます まず border-radius 角丸ですが もう少し 数字を小さくして シャープにしましょう それから アウトラインを加えます border です そして 線の太さ 4px 実線( solid )です そして red にしましょう ということで 角が少しシャープになって 外側にアウトラインが加わります 「保存」を押して 「ブラウザでプレビュー」しましょう 角丸の角が 少しシャープになって 下の方に行くと分かりますが 赤いボーダーが加わりました このレッスンでは 背景色の background に加える linear-gradient ( ) の関数について ご説明しました ベンダープレフィックスが 付く場合と 付かない場合で 引数の仕様が変わっている所に 注意が必要です

CSS3によるタイポグラフィ

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

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

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

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

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