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

グラデーションの繰り返し

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形/円形グラデーションを繰り返して表示するには、repeating-~系の値を使います。ここでは、グラデーションの繰り返しの指定方法について紹介します。
講師:
04:32

字幕

線形・円形グラデーションを繰り返して表示するには repeating 系の値を使います。このレッスンではグラデーションの繰り返しの指定方法について紹介します。画面では左側に HTML と CSS の編集画面、右側にその結果を表示するウェブブラウザを開いています。サンプルファイルの中から「 linear.html 」「 radial.html 」を開いています。まず「 linear.html 」から編集していきましょう。ここでは線形グラデーションの繰り返しを指定してみましょう。まず通常通り線形グラデーションを書いてみます。ウェブページ全体の背景に対して線形グラデーションを指定します。body 要素に対して background-image プロパティ、これに対して線形グラデーションを指定します。線形グラデーションはlinear-gradient 関数を使って値は1つ目に線形の角度、2つ目にカラーストップ、色の値と位置ですね。そして3つ目にも同じくカラーストップ色の値と位置を指定します。このとき通常であれば 100% を指定しますがここでは 20% というを指定します。そうすると現在の引数の指定では 180 degreeつまり上から下に向かってグラデーションが設定されていることになります。 0% の部分の色はエメラルドグリーンですのでページ上部がエメラルドグリーン。そして 20% のところで山吹色が設定されていますのでページ全体の長さに対して 20% 程度の場所に対して山吹色が設定されています。この状態ではグラデーションは 0% から 20%の部分に対して適用されており20% から 100% の部分についてはこの 20% で指定した色が単色で表示されています。こんなときにこの 0% から 20% までの線形グラデーションを繰り返すのがrepeating-linear-gradient 関数です。実際に書いてみましょう。この関数名の頭に repeating を追加します。そうすると先ほどは 0% から 20% までしかなかったグラデーションがページの下の方まで何度も繰り返されていることが分かります。このように repeating 系の値を使うことでグラデーションを繰り返すことができます。続いて「 radial.html 」を開きましょう。ウェブブラウザでも「 radial.html 」を開きます。そして同じように今度は円形グラデーションを書いてみます。body 要素に対して background-imageプロパティを使いradial-gradient 。 まずは通常の円形グラデーションを指定します。ここでは正円で 200px の半径を持つエメラルドグリーンで中心を始まり半径の途中で山吹色になるように色と位置を設定します。ここでは 40% の位置で山吹色になるように設定しました。この円形グラデーションに対して繰り返しを指定してみましょう。同じように関数名の頭に repeating と言う文字を入力します。こうすることでグラデーションが中心からページの外側に向かって繰り返すような表現になりました。このレッスンでは線形・円形グラデーションを繰り返して表示するためのrepeating 系の値の使い方について学びました。

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

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

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

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

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

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