CSS3のグラデーション

線形グラデーションカラーの位置を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションに与えるカラーには、位置を定めることができます。
講師:
04:55

字幕

このレッスンでは 線形グラデーションのカラーの 位置の決め方についてご説明します グラデーションは特に指定しなければ カラーが丁度 均等になるように 設定されます けれども 今 画面で ご覧いただいているのは 黄色のカラーが結構 左寄りです そして 緑が丁度真ん中になっています この様にデフォルトの位置を変えて カラーの位置を決めることができます では Dreamweaver で html ドキュメントを開いて この設定をしてみましょう Dreamweaver で開いている この html ドキュメントでは 既に

要素 id="box" に対して 幅と高さが 500 ピクセルずつに設定してあって 背景 background に lenear-gradient で グラデーションが指定してあります カラーは白から黒になっています デフォルトのままですので 方向は上から下になります 一応 確認しましょう 「ファイル」メニューで 「ブラウザでプレビュー」します グラデーションは 500 ピクセル四方の領域の中で 白から黒となっています では このカラーを変更して 更にカラーを足しましょう white から black だったカラーを もう少しカラフルに red そして yellow 更に blue にしましょう これで一旦 確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です 位置指定を特にしていませんので 一番上が赤 真ん中が黄色 一番下が青と 均等に配置されています この黄色の位置を変更しましょう 位置の指定の仕方は 全体の中のパーセンテージで定められます 例えば この yellow 右の4分の3くらいの位置 くらいというか 正確に4分の3にしましょう 75% の位置です その場合には1スペースを入れて 75% とします これで確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 真ん中は 50% として 黄色の位置が 75% 4分の3の領域で グラデーションが設定されました 別の設定の仕方もあります 試してみましょう 単位に % ではなく ピクセルを使うこともできます % をピクセル( px )とします 75% ではなくて 75px です 全体が 500 px 四方ですから かなり端の方になります 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 75 ピクセルということで 随分上の方に黄色が来ました 更に カラーを加えて 位置を設定したいと思います イエローとブルーの間に グリーンを加えたいと思います green と入れて 特に位置指定はせずに確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です そうすると 黄色がずいぶん上の方にありますが この黄色からスタートして ブルーになる丁度真ん中に グリーンが入っています ですから 黄色 グリーン ブルーが 丁度均等になっています このグリーンの位置を 変えてみたいと思います グリーンは 500 ピクセル四方の 矩形の中の 丁度 真ん中に来るようにしたいと思います この場合には % が扱いやすいです ですから 50% となります それから 方向も変えましょう 方向も勿論 変えられます red の前に― 左から右としたいので to right です to right と書いて , (カンマ)です 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します グラデーションの方向が変わりました 左から右へ そして 黄色の位置は 75 ピクセル そして グリーンは全体の 丁度 真ん中に来ています このレッスンでは カラーストップと言われる 指定したカラーの位置を変える 方法について説明しました 方法としては まず パーセンテージを使う方法があります カラーストップの後に 1スぺース入れて 50% にしてあります もう1つはピクセルで 指定することもできます カラーストップの後に 1スペースを入れて 75px です これらを混ぜることもできます ピクセルとパーセンテージを 混ぜても結構です

CSS3のグラデーション

CSS3のグラデーション機能はW3Cで勧告候補となり、最新のブラウザであれば使えるようになりました。このコースでは線形や放射状のグラデーションの構文や使い方を詳しく解説します。グラデーションを使ったパターンやテクスチャの作例を一歩一歩段階的に作り進めながら、必要に応じて文法的な説明も加え、細かな設定やオプションまで広くカバーしています。

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

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

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

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