CSS3のグラデーション

グラデーションの作例サイト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3のグラデーションでつくられたデザインの作例サイトをご紹介します。
講師:
06:01

字幕

このレッスンでは CSS3 のグラデーションを使って どのようなデザインに活用できるのか 作例を紹介したサイトを 2つお見せしたいと思います 1つ目は ボタンです グラデーションのボタンがありますが それを様々なカラーで指定できます もう1つ パーツではなく 背景などに使えるパターンです パターンの紹介されたサイトも いろいろとバリエーションがありますので この2つを見てみたいと思います どちらも有名なサイトですので Google で簡単に検索できます 1つ目のボタンは キーワードは「 css 」 グラデーション「 gradient 」です そして「 button 」で出てきますので これを選択します このトップがご紹介したい ボタンのグラデーションのサイトです ボタンがあって ロールオーバーすると 少し色が変わります この色ですけれども 上に色見本が出ています それを選ぶとカラーが変わります 勿論 ロールオーバーした時の カラーも変わります ですから これを参考にして こんなカラーのグラデーションの ボタンを作りたい というものを 試すことができます そして それを実際に 自分のサイトページに使おうと思ったときは この下にコードが 既にもう紹介されています これを全て選んでしまいましょう 全て選択して「コピー」します このコースでは CSS のコーディングに Adobe の Dreamweaver を使います では 新規のファイルを開きましょう 「新規」で「 HTML 」 そして「作成」を押します 先ほどコピーしたコードは 全て置き換えてしまって 大丈夫ですので 全てを選んで 「ペースト」します ちゃんと「 DOGTYPE html 」から スタートしています そして「 /html 」で閉じています これを一旦保存します 「 sample 」としましょう 「保存」を押して ブラウザで確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」 「 Safari 」で見ることにします すると 先ほど選んでおいた ボタンが既に出来ています もう一度 Dreamweaver の html ドキュメントに戻ってみましょう 要素にある内容を 見てみますと a 要素だけですね そして その a 要素の真ん中に PREVIEW BUTTON という 文字が書いてあるだけです この文字が書いてある a 要素 この a 要素に対して CSS のスタイルを設定 具体的には グラデーション ですが それを設定することによって 先ほどの様なボタンが出来ます 次に 背景パターンのサンプルです こちらも Google から 検索しましょう やはり「 css 」がキーワードになって パターンですので「 pattern」 そして「 gallery 」です 「 gallery 」が出てきました 選びます そして このトップの 「 CSS3 Patterns Gallery 」が ご紹介したいサイトです 「 Lea Verou 」という サイトになっています パターンがいろいろ 紹介されています グラデーションではなく パターンだと思うかもしれませんが これは 機能としては グラデーションの機能を使って この様にパターンが作られています この辺りですと グラデーションという感じがあしますね でも こちらはジグザグになっていたり 「+」の文字があったり 様々なパターンがあります そして その中の 例えば これが使いたいと思った時は クリックすると CSS で指定する プロパティの設定が出てきます これもやはり コピーしましょう そして Dreamweaver に帰ります 改めて Dreamweaver で 新規ファイルを作成します 「HTML 」で「作成」です 今回は html のコード 全てではなくて プロパティの部分だけですので このひな形を活かして