CSS3の基本 - レベルアップCSS

線形グラデーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像の代わりに線形グラデーションを指定するには、値にlinear-gradient()関数を使います。ここでは、線形グラデーションの指定方法について紹介します。
講師:
06:52

字幕

画像の代わりに線形グラデーションを指定する時は値に linear-gradient 関数を使います。このレッスンでは linear-gradient 関数の使い方について紹介します。指定する引数が多いため実際に CSS を書きながらチェックしてみましょう。画面の左側に HTML と CSS の編集画面。右側にはその結果を表示するウェブブラウザを表示しています。ここではウェブページ全体、つまり body 要素に対して背景に線形グラデーションを指定してみましょう。線形グラデーションを指定するときは色ではなく画像として表示します。そのため指定するプロパティとしては背景色ではなく背景画像のプロパティになります。それでは CSS を書いていきましょう。ウェブページ全体ですので body 要素をセレクタにします。そして線形グラデーションは色ではなく画像として扱われますので指定するプロパティも背景色ではなく背景画像を指定します。ここでは background-image プロパティを使います。線形グラデーションを指定するにはlinear-gradient 関数を使います。引数は最低でも3つ必要です。1つ目はグラデーションを指定する角度です。 角度は数値と degree 角度を示すdeg という単位で指定します。2つ目の引数はカラーストップと呼ばれる色の値と位置です。まず色について色は深緑を設定します。そして位置についてはパーセントで指定しますのでここでは 0% で指定します。3つ目の引数も同様に色と位置のカラーストップで指定します。ここでは色は山吹色そして位置については 100% で指定します。これで線形グラデーションの指定がウェブページ全体に対してできました。ウェブブラウザを見るとページの上部は山吹色、一番下はエメラルドグリーンに表示されています。ここで linear-gradient 関数の引数について解説していきます。まず1つ目の角度という引数ですが0 度を指定した場合、下から上方向に向けて線形のグラデーションが描画されます。角度は 0 度から始まり 360 度までの値を指定しますので例えば 90 度を指定すると左から右方向に線形のグラデーションが描画されます。同じように 270 度こちらを指定すると右から左方向にグラデーションが指定されます。このように角度は上を 0 度として時計回りに360 度で指定します。ここでは 0 度に戻しておきましょう。 そして2つ目と3つ目の引数ですが色と位置を指定しました。位置については先ほど指定した角度の始点の色を 0%そして終点、終わりの部分の色を 100%という指定にするのが位置の指定になります。そのためここでは 0% にエメラルドグリーンが指定されていますので始点、始まりの点であるページの下部、一番下はエメラルドグリーンそして 100% であるページの上は山吹色このようなグラデーションの指定になっているということが分かります。なおカラーストップは複数指定することもできます。例えば現在は 0% と 100% ですが真ん中の 50% に別の色を混ぜたい場合はその間に色と位置を指定すると 50% の位置に色が差し込まれます。例えばここでは真ん中の 50% の位置に真っ赤な値を指定してみましょう。50% の位置に赤を入力しました。するとページ下部の始まりの部分はエメラルドグリーンですがちょうど中央あたりが赤になり一番最後のページ上部は山吹色という風になりました。カラーストップはさらにいくつも増やすことができますのでさまざまなグラデーションを表現することができます。一旦真ん中の赤は削除しておきます。そしてさらに角度については degree という単位以外でもキーワードで指定できます。 例えば 0 degree は下から上へという意味でto top というキーワードで置き換えることができます。to top は下から上ということを意味するキーワードですので0 degree と全く同じ指定です。また同じように to left あるいは to rightというような指定も可能です。またキーワードの指定では対角線のグラデーションを付けることもできます。この場合はキーワードの方向について2つの方向を指定します。まず1つ目の方向は垂直方向。ここでは top と入力してみましょう。そして2つ目の方向は水平方向です。ここでは right と入力してみましょう。そうすると右上が終点として扱われますので始点、始まる点は左下になります。この場合はエメラルドグリーンが左下から始まり山吹色が右上で終わるというような斜めの対角線によるグラデーションが作成できます。この to の後の垂直方向と水平方向のキーワードを変更するとさまざまな対角線のグラデーションを付けることができますのでぜひ試してみてください。このレッスンでは画像の代わりに線形グラデーションを指定するlinear-gradient 関数の使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

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

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

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

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