CSS3のグラデーション

線形グラデーションを水平に定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションの関数linear-gradient()に引数を加えて水平方向に定めることができます。
講師:
02:52

字幕

このレッスンでは 線形のグラデーションを 水平に定めてみたいと思います 今Dreamweaverで開いている HTMLドキュメントは body要素にdiv要素が入っていて idがboxです それに対して幅500 高さ500 pixelの 四角い領域が設定してあり background (背景)に 線形グラデーションを設定してあります そして色は 白から黒です この場合 デフォルトの方向になりますので グラデーションは 上から下にかかります 確認してみましょう 「ファイル」で 「ブラウザーでプレビュー」です 上が白 そして下が黒になります ではDreamweaverに戻ります ではこの線形グラデーションの方向を 左から右に設定してみたいと思います その場合にはこのlinear-gradient関数で whiteの前に方向を決めます 左から右 "to right"と そしてカンマ区切りです 保存します そしてブラウザーでプレビューしてみましょう 左が白 右が黒になりました ではもうちょっと変えてみましょう 今度は右の反対ですね "to left"にしてみます 保存して ブラウザーでプレビューしましょう 方向が逆になり 右から左のグラデーションになりました ということは 縦のグラデーションについても 上から下のデフォルトではなくて 下から上もできそうですね できます やってみましょう おそらく感のいい方は お分かりだと思いますが 下から上ですから "to top"ですね こうすれば 縦方向なのですが デフォルトとは逆向きになります ファイルを保存して ブラウザーでプレビューです 下が白 上が黒になりました 設定は水平方向のleftに戻しておきましょう leftとして保存しておきます このレッスンでは線形のグラデーション linear-gradientの関数に グラデーションの方向を 水平に変えるという方法について ご説明しました 第1引数に toの後にleft, right といったキーワードを設定すると その方向にグラデーションが 水平に変わりました

CSS3のグラデーション

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

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

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

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

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