WebデザイナーのためのCSS3実践講座

グラデーションの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「linear_gradient()」を使って、グラデーションを作成する方法について、解説致します。
講師:
05:48

字幕

このレッスンでは linear-gradient ― というものを使って グラデーションを 作成する方法について解説していきます まずはダウンロードしてきたこちらの linear-gradient ― というフォルダの中に入っている この index.html ファイルと― こちらの style.css ファイルを エディタで開いてください そして こちらがそれらの ファイルを開いた状態です そして こちらの右側にはこちらの index.html ファイルを― ブラウザで表示させた状態の物となっています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います まずはこちらのブラウザの 方からみていきましょう 上から順番に縦方向のグラデーション そして 横方向 そして 斜め方向 そして 複数色と位置指定のグラデーション この四つのタイプのグラデーションを 表示している状態となっています それに対応するようにこちらの index.html ファイルには― それぞれに div タグが設定してあって それぞれに class style A― styleB styleC そして styleD を設定しています それでは こちらの style.css ファイルの方をエディタで開きます こちらの style.css の方で 先程の class に対して― それぞれグラデーションを 実装するような記述を行っています それでは 順番に styleA の 縦方向のグラデーションからみていきます それがこちらの部分ですね まず こちらの部分にご注目下さい こちらの部分では background の プロパーティーを使っています そして そのプロパーティーに linear-gradient ― と書いていますね そして ( ) (括弧) と書いています そして 括弧の中の一つ目の値には グラデーションの開始色― そして 二つ目はグラデーションの 終了色のカラーコードを記述しています そして 次に こちらを見てみましょう こちらの部分は下の記述に対して ベンダープレフェックスである― -webkit- を付けている状態ですね 後の記述は全く同じです こうする事によってクロムブラウザや サファリブラウザ等でも― グラデーションを表示させることが出来ます このように記述することでこのように 縦方向のグラデーションを― 表現することができます 上が開始色 そして 下が終了色となっていて その間の色を保管するような形でこのように― グラデーションが表現されてきます それでは 次に styleB の横方向 グラデーションを見てみましょう それがこちらの部分ですね こちらの部分も基本的には先程と同じですが こちらの ( ) (括弧) の中の― 一つ目の値に left と書いていますね ここに位置を設定することで グラデーションの開始位置を― 設定する事が出来ます このように left と書くと グラデーションが左から始まって― 右に終わるといった形になります そして 開始色を red 赤ですね そして 終了色を orange ― オレンジ色ですね このように設定しています これがこちらの部分の グラデーションとなります このように左から赤からオレンジに 色がグラデーションしていますね それでは 次に styleC の方を 見てみましょう こちらの部分です こちらの部分では 先程と同じように グラデーションの開始位置を― 指定していますが このように left スペース top と書いています このようにすることで左上を開始位置にして 右下を終了位置にすることができます そして 開始色を green そして 終了色を yellow としています こうすることによってこのように斜めに グラデーションが掛かってくる形になります ちょっと分かり辛いかも 知れませんが これは斜めに― グラデーションが掛かっている 状態となっています それでは 最後に styleD の方を 見てみましょう styleD の方はこちらの 部分になっています ちょっと記述が長くなっているので エディタの方を横に伸ばします 今回はグラデーションに複数色を利用していて そして 各色に対してその色の開始位置を― 指定しています まず グラデーションの開始位置を left としていますね そして 次に red 0% と書いています これは赤色を 0% の位置から 開始しろ という意味になります そして 次に fuchsia 20% と書いていますね この fuchsia は ピンク色のことを指します その fuchsia の開始位置が 20% そして 次に orange 40% そして yellow 100% という形にしています このようにすることで 複数色のグラデーションを作ることが出来て― 且つ それぞれの色の開始位置も 指定する事ができます これを実装したのがこちらの部分となりますね このように linear-gradient を― 利用すると 様々なスタイルの グラデーションを作成することができます 以上でレッスンは終了です 今回は linear-gradient を使って― グラデーションを作成する 方法について解説致しました 以降のレッスンでは background-size ― という CSS プロパーティーを使って 背景画像のサイズを調整する方法について― 解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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