CSS3のグラデーション

グラデーションでページの背景を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
線形グラデーションをページの背景全体に定めてみます。
講師:
05:03

字幕

このレッスンではページ全体に 線形のグラデーションを設定してみます 今ブラウザーで開いているページは 上が明るいグレー そして下が暗いグレーという線形の グラデーションが定められています この設定の仕方についてご説明します Dreamweaverで開いている HTMLドキュメントは body要素には何も入っていません そしてスタイルシートなんですが セレクターにbody となっていて 空っぽになっていますので このbodyの中に設定を加えたいと思います backgroundに線形の グラデーションを設定します そして線形ですので liner ですね gradient そしてカラーは明るいライトグレー そしてディムグレーということで ファイルを保存して確認してみます ブラウザーでプレビュー です 線形のグラデーションが縦に 垂直方向に設定されました もっともこうなると 想像した方は少ないでしょう これは明るいグレーから暗いグレーへという そのグラデーションがいくつもいくつも 繰り返しになっているわけです 本当は上から下に滑らかな 1つのグラデーションにしたかったわけなので その設定を加えてみることにしましょう 今回方法は2つご紹介します まずその1つ目 HTMLのセレクターに対して設定を追加します どうするかと言いますと プロパティは height です そしてこれを100%とします 確認してみましょう  ファイルを保存して ブラウザーでプレビュー です こうやって起動した通り 上が明るいグレー そして一番下で 暗いグレーという設定になりました これが1つ目の方法です もう1つの方法をご紹介します まずHTMLのセレクターの設定は コメントにして外しましょう こうすると繰り返しのグラデーションに なってしまいました ですからその繰り返しを まず止めたいと思います 繰り返しを止めるにはbackground-repeat というプロパティがあります そしてこれをnoRepeat という設定にします これで繰り返しがなくなります 保存して確認しましょう ブラウザーでプレビュー です グラデーションはどこに行ってしまったのか? 上の方にありますね 拡大してみましょうか 拡大 ショートカットを使わせてもらいます command + ということですので どんどん拡大をして これが最大のようですね 何とか見えるでしょうか 明るいグレーから暗いグレーのグラデーション 細いグラデーションが 繰り返しじゃなくなったので上にぽつんと 残っているという事ですね これを全体に広げたいと思います Bodyのセレクターに プロパティの設定をもう1つ加えます やはりbackground絡みなんですけれども background-attachment という プロパティがあります そしてこのプロパティに対して Fixed という値を加えます ではファイルを保存して確認しましょう ブラウザーでプレビュー です これでもやはり上が明るいグレー そして一番下で暗いグレーになるという 思った通りのグラデーションが 線形グラデーションが設定できました このレッスンではページ全体に線形の グラデーションを設定するという方法について ご紹介しました ただbackgroundに liner gradient の関数で カラーを2つ設定しても 繰り返しになってしまいました それを避けるためには 1つの方法はHTMLのセレクターの中で ‟height 100%”とすることです でも場合によってはHTMLのセレクターを 使いたくないという事があるでしょう bodyの中だけで済ませたいという場合には bodyの方に background-repeat で まず noRepeat リピートをなしにする その上でさらに広げるには background-attachment を Fixedにします

CSS3のグラデーション

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

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

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

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

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