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

円形グラデーション

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

ぜひご覧ください。

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

字幕

画像の代わりに円形グラデーションを指定するには値に radial-gradient 関数を使います。このレッスンでは円形グラデーションの指定方法について紹介します。画面の左側には HTML と CSS の編集画面を表示しています。右側にはその結果を表示するためのウェブブラウザを開いています。ここではウェブページの背景に対して円形グラデーションを指定してみましょう。円形グラデーションを色ではなく画像として扱われますのでbackground-color プロパティではなくbackground-image プロパティに指定します。では実際に CSS を書いていきましょう。body 要素に対して背景画像background-image プロパティを使います。そして円形グラデーションを使用するradial-gradient 関数を指定します。1つ目の値は円形グラデーションの形状です。形状はキーワードで指定します。ここでは circle を使いましょう。そしてこの circle の大きさを半角スペースで区切って指定します。ここでは 200px を指定します。これで1つ目の引数はオッケーです。2つ目と3つ目は線形グラデーションなどと同じようにカラーストップという値を指定します。 カラーストップは色と位置で指定します。位置については後ほど詳しく説明しますのでここでは簡単に指定しましょう。まず1つ目の色は 16a085こうすることでエメラルドグリーンを指定します。半角スペースを空けて位置を 0% として指定します。そして最後の引数は同じように色と位置で指定します。ここでは f1c40f という山吹色を指定します。位置については今度は 100% で指定しておきましょう。これで円形グラデーションの指定が完了しました。ウェブブラウザを見るとページの真ん中にグラデーションが表示されていることが分かります。そしてこの円形グラデーションの半径はここで指定した 200px が適用されています。色については中心を1つ目の色エメラルドグリーンですね。そして外側に行くにしたがって2つ目の色山吹色これが適用されています。またグラデーションの位置についてですが 0% というのが円の中心を示しています。100% というのは円の半径の一番外側、外側の部分の色を指定しています。またこの色と位置のセット、カラーストップは複数設定することができます。現在は2つだけですが間に例えば真っ赤な色を指定するということもできます。 ここでは 50% を指定すると円の中心は変わらずエメラルドグリーン、そして一番外側は山吹色ですがその中央にあたるあたり50% の位置にあたるところには真っ赤な色が設定されました。このようにカラーストップは位置を調整することでいくつも値をつなげていくことができます。ここでは山吹色とエメラルドグリーンのみにしておきましょう。また円形グラデーションの位置は中央からずらすことも可能です。位置を指定したい場合は半径の後に半角スペースを空けて@ というキーワードを打ちさらに半角スペースを空けます。そしてボックスの一番左上の場所を起点としてパーセント値またはピクセルで位置を指定します。ここでは左上を起点として水平方向に 10%そして垂直方向に 40%この値をそれぞれ指定しました。そうするとページの左上を起点として水平方向に 10%垂直方向に 40% の位置に円の中心が移動しました。円の形状は circle 正円以外に ellipse楕円を指定することもできます。ここではすでに書いたこの宣言をコピーしてもう1つ宣言を作りましょう。コピーしてペーストします。そして1行目は一旦コメントアウトしておきましょう。 そして円の形状を circle ではなくellipse に変更してみます。楕円を指定する場合は水平方向と垂直方向の半径を指定する必要があります。1つ目が水平方向の半径の値ですので半角スペースを空けて垂直方向の半径も指定します。ここでは 50px としました。そうするとウェブブラウザを見ると横方向に 200px の半径、縦方向に 50px の半径の横につぶれた楕円が描画されました。このように ellipse を使うと正円ではなく自由な形状の楕円を描画することができます。またさらに circle ellipse を問わず半径を指定するサイズの部分ではキーワードを使うこともできます。こちらのリストをご覧ください。円形のサイズ(半径)を指定するキーワードではこのような書式でキーワードを指定することができます。キーワードの種類は全部で4種類です。1つ目は「 closest-side 」中心点に最も近い辺までの長さを半径として指定します。次に「 farthest-side 」です。これは中心点から最も遠い辺までの長さを半径として指定します。3つ目は「 closest-corner 」です。中心点に最も近い角までの長さを指定します。 そして最後は「 farthest-corner 」です。中心点から最も遠い角までの長さを指定します。このようにキーワードを使って円形グラデーションの半径を指定することもできます。このレッスンでは画像の代わりに円形グラデーションを指定するradial-gradient 関数の使い方について学びました。

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

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

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

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

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

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